{"version":3,"file":"ExpertReviewScore-6925f8b1.js","sources":["../../src/assets/img/racq-smile.svg","../../src/components/expert-reviews/ExpertReviewScore.vue"],"sourcesContent":["export default \"__VITE_ASSET__4dfabaf3__\"","<template>\r\n  <article :class=\"['review-card', reviewItemStyles]\">\r\n    <div :class=\"['review-card__score', { 'review-card__score--large': largeHeading }]\">\r\n      <span class=\"review-card__score__numerator\" v-text=\"expertReviewData.Score\" /> <span class=\"review-card__score__denominator\">/ 10</span>\r\n    </div>\r\n    <div class=\"review-card__content\">\r\n      <component :is=\"largeHeading ? 'h2' : 'p'\" :class=\"largeHeading ? 'no-margin large-heading' : 'text-bold mb-1 mt-0'\">\r\n        Car review <img :src=\"RACQSmileIcon\" alt=\"An icon of the RACQ logo ribbon.\" class=\"ribbon-icon\" />\r\n      </component>\r\n\r\n      <p class=\"review-categories\">Average rating across {{ reviewCategoriesLength }} assessment categories</p>\r\n      <ExplanationModal\r\n        :with-icon=\"true\"\r\n        button-text=\"Explanation\"\r\n        :title=\"expertReviewModalContent.title.value\"\r\n        :description=\"expertReviewModalContent.description.value\"\r\n      />\r\n    </div>\r\n  </article>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport ExplanationModal from '../modals/ExplanationModal.vue';\r\nimport RACQSmileIcon from '../../assets/img/racq-smile.svg';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\n\r\nconst props = defineProps({\r\n  expertReviewData: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  apiStatus: {\r\n    type: String,\r\n    default: 'LOADING',\r\n  },\r\n  largeHeading: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n});\r\n\r\nconst reviewCategoriesLength = computed(() => Object.keys(props.expertReviewData.CategoryScore ?? {}).length || 0);\r\nconst reviewItemStyles = computed(() => [\r\n  {\r\n    'skeleton-box': props.apiStatus === 'LOADING',\r\n    'white-card': props.apiStatus !== 'LOADING',\r\n    'large-height': props.largeHeading,\r\n  },\r\n]);\r\n\r\nconst contentStore = useContentStore();\r\ncontentStore.fetchModalDatasources();\r\nconst expertReviewModalContent = contentStore.modalDatasources?.modalContentItems?.expertReview;\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.review-card {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  height: 100%;\r\n\r\n  .ribbon-icon {\r\n    vertical-align: bottom;\r\n    padding-left: 0.5rem;\r\n  }\r\n\r\n  &.large-height {\r\n    padding-top: 1rem;\r\n    padding-bottom: 1rem;\r\n  }\r\n\r\n  .large-heading {\r\n    line-height: 1;\r\n    font-size: 1.5rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      font-size: 2rem;\r\n    }\r\n\r\n    .ribbon-icon {\r\n      vertical-align: baseline;\r\n    }\r\n  }\r\n\r\n  .review-categories {\r\n    margin: 0;\r\n    padding-bottom: 0.5rem;\r\n    padding-top: 0.25rem;\r\n    line-height: 1.25;\r\n  }\r\n\r\n  &__score {\r\n    border-radius: 50%;\r\n    background: $racq-pale-blue;\r\n    border: 1px solid $racq-pale-blue-border;\r\n    min-width: 4.375rem;\r\n    min-height: 4.375rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: $racq-navy;\r\n\r\n    &__numerator {\r\n      font-size: 1.75rem;\r\n      font-family: $firasans-semibold-font;\r\n      letter-spacing: -1px;\r\n    }\r\n\r\n    &--large {\r\n      min-width: 5.25rem;\r\n      min-height: 5.25rem;\r\n\r\n      .review-card__score__numerator {\r\n        font-size: 2rem;\r\n      }\r\n    }\r\n\r\n    &__denominator {\r\n      font-size: 0.875rem;\r\n      letter-spacing: -2px;\r\n      position: relative;\r\n      bottom: 0.25rem;\r\n      padding: 0.25rem;\r\n    }\r\n  }\r\n}\r\n\r\n.loading {\r\n  * {\r\n    opacity: 0;\r\n  }\r\n}\r\n</style>\r\n"],"names":["RACQSmileIcon","reviewCategoriesLength","computed","props","reviewItemStyles","contentStore","useContentStore","expertReviewModalContent","_b","_a"],"mappings":"gaAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,0BAAA,YAAA,GAAA,EAAA,mZC0CTC,EAAyBC,EAAS,IAAM,OAAO,KAAKC,EAAM,iBAAiB,eAAiB,CAAE,CAAA,EAAE,QAAU,CAAC,EAC3GC,EAAmBF,EAAS,IAAM,CACtC,CACE,eAAgBC,EAAM,YAAc,UACpC,aAAcA,EAAM,YAAc,UAClC,eAAgBA,EAAM,YACxB,CAAA,CACD,EAEKE,EAAeC,IACrBD,EAAa,sBAAsB,EAC7B,MAAAE,GAA2BC,GAAAC,EAAAJ,EAAa,mBAAb,YAAAI,EAA+B,oBAA/B,YAAAD,EAAkD"}