{"version":3,"file":"CarComparisonHero-c5fac28d.js","sources":["../../src/assets/img/add-to-compare.svg","../../src/components/car-comparison/CarComparisonHero.vue"],"sourcesContent":["export default \"__VITE_ASSET__4098a3d8__\"","<template>\r\n  <section class=\"car-comparison__hero\">\r\n    <div v-if=\"apiStatus === 'LOADING'\" class=\"car-comparison__hero--empty skeleton-box\">\r\n      <p class=\"car-comparison__hero--empty-text\">Loading...</p>\r\n    </div>\r\n\r\n    <div v-if=\"apiStatus === 'IDLE' && objectHasEntries(carData)\" class=\"sm-h-full\">\r\n      <div :class=\"['car-comparison__hero-car', { 'no-results-img': !carData.Hero_image_URL }]\" :data-car=\"carData\">\r\n        <div :class=\"`mobile-color-band car-${index}`\"></div>\r\n        <img\r\n          :src=\"carData.Hero_image_URL ? carData.Hero_image_URL : NoResultsImg\"\r\n          :alt=\"`An image of a ${carData.Make + ' ' + carData.Model}`\"\r\n          class=\"car-comparison__hero-img\"\r\n          @click=\"() => gotoCarDetail(carData.Vehicle_UID, `${carData.Year_low}-${carData.Year_high}`, carData.Make, carData.Model)\"\r\n        />\r\n\r\n        <div class=\"car-comparison__hero-content-wrapper\">\r\n          <RemoveCarButton :index=\"index\" :vehicle-id=\"carData.Vehicle_UID\" />\r\n\r\n          <p class=\"car-comparison__hero-year\" v-text=\"comparisonStore.getCarYearRange(carData?.Vehicle_UID)\" />\r\n          <h3 class=\"car-comparison__hero-title\" v-text=\"carData.Make + ' ' + carData.Model\" />\r\n          <p class=\"car-comparison__hero-subtitle\" v-text=\"carData.Version\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"apiStatus === 'IDLE' && !objectHasEntries(carData)\" class=\"h-full\">\r\n      <div v-if=\"!objectHasEntries(carData)\" class=\"car-comparison__hero-car\">\r\n        <div :class=\"`mobile-color-band car-${index}`\" />\r\n        <div class=\"car-comparison__hero car-comparison__hero--empty\">\r\n          <p class=\"car-comparison__hero--empty-text\">Add a car to compare</p>\r\n\r\n          <a :href=\"homepageUrl\" class=\"btn btn-secondary car-comparison__hero--empty-btn\">\r\n            <img :src=\"AddToCompareIcon\" alt=\"An icon of a plus sign with a circle around it.\" />\r\n            Add a car\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useRouter } from 'vue-router';\r\nimport AddToCompareIcon from '../../assets/img/add-to-compare.svg';\r\nimport { ApiStatusTypes } from '../../foundation/types/apiStatusTypes';\r\nimport { useUrlNavigator } from '../../composables/useUrlNavigator';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport RemoveCarButton from '../buttons/RemoveCarButton.vue';\r\nimport NoResultsImg from '@/assets/img/no-results-large-icon.svg';\r\nimport { useUrlBuilder } from '../../composables/useUrlBuilder';\r\nimport { objectHasEntries } from '../../foundation/helpers';\r\n\r\nconst props = defineProps<{\r\n  carData: any;\r\n  apiStatus: ApiStatusTypes;\r\n  index: number;\r\n}>();\r\n\r\nconst router = useRouter();\r\nconst comparisonStore = useCarComparisonStore();\r\nconst urlBuilder = useUrlBuilder();\r\n\r\nconst { gotoCarDetail } = useUrlNavigator(router);\r\nconst homepageUrl = urlBuilder.getHomePageUrl({ searchModalOpen: true });\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n%comparison-title-sm {\r\n  margin: 0;\r\n  font-size: 1rem;\r\n  line-height: 1.75rem;\r\n  font-weight: bold;\r\n}\r\n\r\n.sticky .car-comparison__hero {\r\n  width: 100%;\r\n  background: $racq-pale-blue;\r\n  height: 6.875rem;\r\n  margin-bottom: 0.1rem;\r\n\r\n  &-img {\r\n    display: none;\r\n  }\r\n\r\n  @media screen and (min-width: #{$breakpoint-xl}) {\r\n    background: #fff;\r\n\r\n    &-img {\r\n      display: block;\r\n      width: 10rem;\r\n      min-height: 100%;\r\n      border-radius: 0.25rem;\r\n      border-top-right-radius: 0;\r\n      border-bottom-right-radius: 0;\r\n    }\r\n  }\r\n\r\n  &-car {\r\n    display: flex;\r\n    height: 100%;\r\n  }\r\n\r\n  &-title {\r\n    @extend %comparison-title-sm;\r\n    line-height: 1.75;\r\n  }\r\n\r\n  &-subtitle {\r\n    font-size: 0.875rem;\r\n  }\r\n\r\n  &--empty {\r\n    background: $racq-pale-blue;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      min-height: auto;\r\n    }\r\n\r\n    &-text {\r\n      display: none;\r\n    }\r\n  }\r\n} // end sticky car comparison styles\r\n\r\n.car-comparison__hero {\r\n  position: relative;\r\n  border-radius: 0.25rem;\r\n  background: #fff 0% 0% no-repeat padding-box;\r\n  border: $racq-border-style;\r\n  width: 100%;\r\n  min-width: 12rem;\r\n  max-width: 28rem;\r\n  cursor: pointer;\r\n  text-align: left;\r\n\r\n  &-car {\r\n    display: flex;\r\n    height: 100%;\r\n\r\n    &.no-results-img {\r\n      .car-comparison__hero-img {\r\n        object-fit: cover;\r\n      }\r\n    }\r\n\r\n    @media screen and (min-width: #{$breakpoint-sm}) {\r\n      display: block;\r\n      min-height: 6.625rem;\r\n    }\r\n  }\r\n\r\n  &-content-wrapper {\r\n    padding: 0.5rem 0.5rem 0.75rem;\r\n    width: 100%;\r\n\r\n    @media screen and (min-width: #{$breakpoint-md}) {\r\n      padding: 0.75rem 1rem 1rem;\r\n    }\r\n  }\r\n\r\n  &-img {\r\n    border-top-left-radius: 0.25rem;\r\n    border-bottom-left-radius: 0.25rem;\r\n    height: 100%;\r\n    width: 8rem;\r\n    object-fit: contain;\r\n\r\n    @media screen and (min-width: #{$breakpoint-sm}) {\r\n      width: 100%;\r\n    }\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      min-height: 15.625rem;\r\n    }\r\n  }\r\n\r\n  &-year {\r\n    color: $racq-navy;\r\n    font-size: 0.75rem;\r\n    margin: 0;\r\n    font-weight: bold;\r\n    line-height: 1.125rem;\r\n    text-transform: uppercase;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      font-size: 1rem;\r\n    }\r\n  }\r\n\r\n  &-title {\r\n    @extend %comparison-title-sm;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      font-size: 1.5rem;\r\n      line-height: 2.75rem;\r\n      font-weight: inherit;\r\n    }\r\n  }\r\n\r\n  &-subtitle {\r\n    color: $racq-dark-grey;\r\n    font-size: 0.875rem;\r\n    line-height: 1rem;\r\n    margin: 0;\r\n    width: 80%;\r\n    @include text-ellipsis(2);\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      font-size: 1rem;\r\n      line-height: 1.2rem;\r\n    }\r\n  }\r\n\r\n  &--empty {\r\n    background: $racq-pale-blue;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    height: 100%;\r\n    box-sizing: border-box;\r\n    min-height: 6.25rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-lg}) {\r\n      min-height: 23rem;\r\n    }\r\n\r\n    &-text {\r\n      display: none;\r\n      color: $racq-cool-grey;\r\n      font-size: 1rem;\r\n\r\n      @media screen and (min-width: #{$breakpoint-md}) {\r\n        font-size: 1.15rem;\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    &-btn {\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      gap: 0.5rem;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-direction: row;\r\n      font-size: 1rem;\r\n      width: 8.25rem;\r\n      height: 2.5rem;\r\n      text-decoration: none;\r\n\r\n      @media screen and (min-width: #{$breakpoint-sm}) {\r\n        width: 75%;\r\n        height: auto;\r\n      }\r\n\r\n      @media screen and (min-width: #{$breakpoint-lg}) {\r\n        width: 50%;\r\n        font-size: 1rem;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["AddToCompareIcon","useRouter","comparisonStore","useCarComparisonStore","urlBuilder","useUrlBuilder","gotoCarDetail","useUrlNavigator","homepageUrl"],"mappings":"4bAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,8BAAA,YAAA,GAAA,EAAA,+rBC2DAC,EAAU,EACzB,MAAMC,EAAkBC,IAClBC,EAAaC,IAEb,CAAE,cAAAC,CAAA,EAAkBC,EAAsB,EAC1CC,EAAcJ,EAAW,eAAe,CAAE,gBAAiB,GAAM"}