{"version":3,"file":"CarDetailKeyStats-ee86554d.js","sources":["../../src/assets/img/configuration-icon.svg","../../src/assets/img/fuel-icon.svg","../../src/assets/img/emissions-rating-icon.svg","../../src/assets/img/cost-to-run-icon.svg","../../src/assets/img/car-price-icon.svg","../../src/components/car-detail/CarDetailKeyStats.vue"],"sourcesContent":["export default \"__VITE_ASSET__9b28950a__\"","export default \"__VITE_ASSET__234fd7cd__\"","export default \"__VITE_ASSET__ac36aea4__\"","export default \"__VITE_ASSET__f7ed9900__\"","export default \"__VITE_ASSET__d3151fa1__\"","<template>\r\n  <div :class=\"`car-detail-key-stats ${statsType}`\">\r\n    <div v-if=\"statsType === 'expert-reviews'\" class=\"car-detail-key-stats__box white-card relative\">\r\n      <h4 class=\"car-detail-key-stats__title\"><img :src=\"CarPriceIcon\" alt=\"An icon of a dollar sign with an arrow around it.\" width=\"20\" /> Price</h4>\r\n      <p class=\"car-detail-key-stats__content pb-1\">{{ formattedCarPrice }} Indicative average used car price</p>\r\n      <ExplanationModal\r\n        class=\"absolute top-2 right-2\"\r\n        button-text=\"\"\r\n        with-icon\r\n        :title=\"marketValueModalContent.title.value\"\r\n        :description=\"marketValueModalContent.description.value\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"car-detail-key-stats__box white-card\">\r\n      <h4 class=\"car-detail-key-stats__title\"><img :src=\"ConfigIcon\" alt=\"An icon of a cog with a checkmark.\" width=\"20\" /> Configuration</h4>\r\n      <p class=\"car-detail-key-stats__content\" v-text=\"bodyDoorsSeats\" />\r\n    </div>\r\n\r\n    <div class=\"car-detail-key-stats__box white-card\">\r\n      <h4 class=\"car-detail-key-stats__title\"><img :src=\"FuelIcon\" alt=\"An icon of a fuel bowser.\" width=\"20\" /> Fuel</h4>\r\n      <p class=\"car-detail-key-stats__content\" v-text=\"fuelTypeAndRange\" />\r\n    </div>\r\n\r\n    <div v-if=\"statsType === 'car-details'\" class=\"car-detail-key-stats__box white-card d-flex flex-col space-between\">\r\n      <div>\r\n        <h4 class=\"car-detail-key-stats__title\"><img :src=\"EmissionsIcon\" alt=\"An icon of two leaves.\" width=\"20\" /> Emissions rating</h4>\r\n        <p class=\"car-detail-key-stats__content\" v-text=\"emissionsRating\" />\r\n      </div>\r\n      <ExplanationModal\r\n        :with-icon=\"true\"\r\n        button-text=\"Explanation\"\r\n        :title=\"emissionsModalContent.title.value\"\r\n        :description=\"emissionsModalContent.description.value\"\r\n      />\r\n    </div>\r\n\r\n    <div v-if=\"statsType === 'expert-reviews'\" class=\"car-detail-key-stats__box white-card d-flex flex-col space-between\">\r\n      <div>\r\n        <h4 class=\"car-detail-key-stats__title mb-1\">\r\n          <img :src=\"SafetyShieldIcon\" width=\"20\" alt=\"An icon of a shield with a star inside.\" />ANCAP Safety rating\r\n        </h4>\r\n        <AncapTestScore :date-tested=\"carData.ANCAP_Date_tested\" :ancap-score=\"carData.ANCAP_Overall_score\" class=\"compact\" />\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"statsType === 'car-details'\" class=\"car-detail-key-stats__box white-card d-flex flex-col space-between\">\r\n      <div>\r\n        <h4 class=\"car-detail-key-stats__title\">\r\n          <img :src=\"CostToRunIcon\" alt=\"An icon of a dollar sign with an arrow around it.\" width=\"20\" /> Cost to fuel / recharge\r\n        </h4>\r\n        <p class=\"car-detail-key-stats__content\">\r\n          <span v-text=\"costToRunText\" />\r\n        </p>\r\n      </div>\r\n      <ExplanationModal\r\n        :with-icon=\"true\"\r\n        button-text=\"Explanation\"\r\n        :title=\"costToRunModalContent.title.value\"\r\n        :description=\"costToRunModalContent.description.value\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport ConfigIcon from '@/assets/img/configuration-icon.svg';\r\nimport FuelIcon from '@/assets/img/fuel-icon.svg';\r\nimport EmissionsIcon from '@/assets/img/emissions-rating-icon.svg';\r\nimport CostToRunIcon from '@/assets/img/cost-to-run-icon.svg';\r\nimport CarPriceIcon from '@/assets/img/car-price-icon.svg';\r\nimport SafetyShieldIcon from '@/assets/img/safety-shield-icon.svg';\r\nimport ExplanationModal from '../modals/ExplanationModal.vue';\r\nimport { useCarData } from '../../composables/useCarData';\r\nimport useRunningCosts from '../../composables/useRunningCosts';\r\nimport AncapTestScore from '../car-stats/AncapTestScore.vue';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\n\r\nconst props = defineProps({\r\n  carData: {\r\n    type: Object,\r\n    required: true,\r\n  },\r\n  statsType: {\r\n    type: String,\r\n    default: 'car-details',\r\n  },\r\n  apiStatus: {\r\n    type: String,\r\n    default: 'LOADING',\r\n  },\r\n});\r\n\r\nconst contentStore = useContentStore();\r\ncontentStore.fetchModalDatasources();\r\nconst emissionsModalContent = contentStore.modalDatasources?.modalContentItems?.emissionsInformation;\r\nconst costToRunModalContent = contentStore.modalDatasources?.modalContentItems?.fuelCostsExplanation;\r\nconst marketValueModalContent = contentStore.modalDatasources?.modalContentItems?.marketValueCalculation;\r\n\r\nconst { bodyDoorsSeats, fuelTypeAndRange, emissionsRating, formattedCarPrice } = useCarData(props.carData);\r\nconst { costToRunText } = useRunningCosts(props.carData, {});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-detail-key-stats {\r\n  background: #fff;\r\n  border-radius: 0.25rem;\r\n  border: 1px solid $racq-pale-blue-border;\r\n  margin: 0;\r\n\r\n  display: grid;\r\n  grid-template-rows: 1fr 1fr;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 0;\r\n\r\n  &.grid-row {\r\n    grid-template-columns: 1fr;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      grid-template-rows: 1fr;\r\n      grid-template-columns: 1fr 1fr 1fr 1fr;\r\n    }\r\n\r\n    .car-detail-key-stats {\r\n      border: 1px solid $racq-pale-blue-border;\r\n      border-radius: 0.25rem;\r\n    }\r\n\r\n    .car-detail-key-stats__box {\r\n      height: 5.875rem;\r\n      border: none;\r\n\r\n      &:nth-of-type(1),\r\n      &:nth-of-type(2),\r\n      &:nth-of-type(3) {\r\n        border-bottom: 1px solid $racq-pale-blue-border;\r\n\r\n        @media screen and (min-width: #{$breakpoint-lg}) {\r\n          border-right: 1px solid $racq-pale-blue-border;\r\n          border-bottom: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &__box {\r\n    flex-grow: 1;\r\n    height: 8.5rem;\r\n    box-sizing: border-box;\r\n    border-radius: 0;\r\n    border: none;\r\n\r\n    &:nth-of-type(1),\r\n    &:nth-of-type(2) {\r\n      border-bottom: 1px solid $racq-pale-blue-border;\r\n    }\r\n\r\n    &:nth-of-type(1) {\r\n      border-right: 1px solid $racq-pale-blue-border;\r\n      border-top-left-radius: 0.25rem;\r\n    }\r\n\r\n    &:nth-of-type(2) {\r\n      border-top-right-radius: 0.25rem;\r\n    }\r\n\r\n    &:nth-of-type(3) {\r\n      border-right: 1px solid $racq-pale-blue-border;\r\n      border-bottom-left-radius: 0.25rem;\r\n    }\r\n\r\n    &:nth-of-type(4) {\r\n      border-bottom-right-radius: 0.25rem;\r\n    }\r\n  }\r\n\r\n  &__title {\r\n    margin: 0 0 0.5rem;\r\n    font-size: 1rem;\r\n    color: $racq-dark-blue;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    line-height: 1;\r\n\r\n    &.mb-1 {\r\n      margin-bottom: 0.25rem;\r\n    }\r\n  }\r\n\r\n  &__content {\r\n    margin: 0;\r\n    line-height: 1.25;\r\n  }\r\n}\r\n</style>\r\n"],"names":["ConfigIcon","FuelIcon","EmissionsIcon","CostToRunIcon","CarPriceIcon","contentStore","useContentStore","emissionsModalContent","_b","_a","costToRunModalContent","_d","_c","marketValueModalContent","_f","_e","bodyDoorsSeats","fuelTypeAndRange","emissionsRating","formattedCarPrice","useCarData","props","costToRunText","useRunningCosts"],"mappings":"ulBAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,kCAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,yBAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,qCAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,gCAAA,YAAA,GAAA,EAAA,KCAAC,EAAA,GAAA,IAAA,IAAA,8BAAA,YAAA,GAAA,EAAA,ukCC6FTC,EAAeC,IACrBD,EAAa,sBAAsB,EAC7B,MAAAE,GAAwBC,GAAAC,EAAAJ,EAAa,mBAAb,YAAAI,EAA+B,oBAA/B,YAAAD,EAAkD,qBAC1EE,GAAwBC,GAAAC,EAAAP,EAAa,mBAAb,YAAAO,EAA+B,oBAA/B,YAAAD,EAAkD,qBAC1EE,GAA0BC,GAAAC,EAAAV,EAAa,mBAAb,YAAAU,EAA+B,oBAA/B,YAAAD,EAAkD,uBAE5E,CAAE,eAAAE,EAAgB,iBAAAC,EAAkB,gBAAAC,EAAiB,kBAAAC,GAAsBC,EAAWC,EAAM,OAAO,EACnG,CAAE,cAAAC,CAAc,EAAIC,EAAgBF,EAAM,QAAS,CAAA,CAAE"}