{"version":3,"file":"CarComparisonTile-843b3435.js","sources":["../../src/components/car-comparison/CarComparisonTile.vue"],"sourcesContent":["<template>\r\n  <div class=\"car-comparison-tile\" :class=\"{ 'car-comparison-tile--active': !!car }\">\r\n    <div v-if=\"vehicleId && apiStatus === 'LOADING'\" class=\"d-flex items-center justify-center h-full\">\r\n      <p class=\"car-comparison-tile__empty-text\">{{ comparisonFooter.carLoadingText }}</p>\r\n    </div>\r\n\r\n    <div v-if=\"vehicleId && apiStatus === 'ERROR'\" class=\"d-flex items-center justify-center h-full\">\r\n      <p class=\"car-comparison-tile__empty-text\">SOMETHING HAS GONE WRONG! CHECK THE CONSOLE.</p>\r\n    </div>\r\n\r\n    <div v-if=\"car && apiStatus === 'IDLE'\" class=\"d-flex gap-4 relative\">\r\n      <img\r\n        :src=\"car.Hero_image_URL ? car.Hero_image_URL : NoResultsIcon\"\r\n        class=\"car-comparison-tile__hero-img\"\r\n        @click=\"() => gotoCarDetail(vehicleId, `${car.Year_low}-${car.Year_high}`, car.Make, car.Model)\"\r\n        :alt=\"makeAndModelText || 'No car image available'\"\r\n      />\r\n\r\n      <div class=\"car-comparison-tile__car-content\">\r\n        <span class=\"car-comparison-tile__year\" v-text=\"comparisonStore.getCarYearRange(vehicleId)\" />\r\n        <h5 class=\"car-comparison-tile__make\" :title=\"makeAndModelText + ' ' + car.Version\" v-text=\"makeAndModelText\" />\r\n        <small class=\"car-comparison-tile__desc\" v-text=\"car.Version\" />\r\n      </div>\r\n\r\n      <RemoveCarButton :index=\"index\" :show-footer=\"true\" />\r\n    </div>\r\n\r\n    <!-- No car exists -->\r\n    <div v-if=\"!vehicleId\" class=\"d-flex items-center justify-center h-full\">\r\n      <p class=\"car-comparison-tile__empty-text\" v-text=\"comparisonFooter.carTilePlaceholderText\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, onMounted } from 'vue';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\nimport { ApiStatusTypes } from '../../foundation/types/apiStatusTypes';\r\nimport { storeToRefs } from 'pinia';\r\nimport RemoveCarButton from '../buttons/RemoveCarButton.vue';\r\nimport { useUrlNavigator } from '../../composables/useUrlNavigator';\r\nimport { useRouter } from 'vue-router';\r\nimport NoResultsIcon from '@/assets/img/no-results-icon.svg';\r\n\r\nconst props = defineProps({\r\n  vehicleId: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  index: {\r\n    type: Number,\r\n    required: true,\r\n  },\r\n});\r\n\r\nconst router = useRouter();\r\nconst apiStatus = ref<ApiStatusTypes>('IDLE');\r\n// Fetch car data as soon as user adds a vehicle to the comparison collection\r\nconst comparisonStore = useCarComparisonStore();\r\n\r\nconst contentStore = useContentStore();\r\nconst { comparisonFooter } = storeToRefs(contentStore);\r\nconst { gotoCarDetail } = useUrlNavigator(router);\r\n\r\n// Computed\r\nconst makeAndModelText = computed(() => {\r\n  if (!car.value) return '';\r\n  const { Make, Model } = car.value;\r\n  return Make + ' ' + Model;\r\n});\r\n\r\nconst car = computed(() => comparisonStore.carsToCompare[props.index]);\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-comparison-tile {\r\n  border: 2px dashed $racq-pale-blue-border;\r\n  border-radius: 4px;\r\n  height: 110px;\r\n  max-width: 100%;\r\n  box-sizing: border-box;\r\n\r\n  @media screen and (min-width: #{$breakpoint-md}) {\r\n    min-width: 358px;\r\n  }\r\n\r\n  &--active {\r\n    background: $racq-car-advisory-pale-blue;\r\n    border: $racq-border-style;\r\n  }\r\n\r\n  &__car-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    margin: 0;\r\n    justify-content: center;\r\n    gap: 0.25rem;\r\n    max-width: 200px;\r\n  }\r\n\r\n  &__year {\r\n    color: $racq-navy;\r\n    font-weight: 500;\r\n    font-family: $firasans-semibold-font;\r\n    font-size: 12px;\r\n    line-height: 0.875rem;\r\n  }\r\n\r\n  &__desc,\r\n  &__make {\r\n    margin: 0;\r\n    line-height: 1.125rem;\r\n    font-family: $firasans-regular-font;\r\n    max-width: 10rem;\r\n    @include text-ellipsis(2);\r\n\r\n    &:not(.car-comparison-tile__desc) {\r\n      font-size: 1rem;\r\n      font-family: $firasans-medium-font;\r\n      font-weight: normal;\r\n    }\r\n  }\r\n\r\n  &__make {\r\n    font-size: 0.875rem;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: break-spaces;\r\n    -webkit-line-clamp: 1;\r\n    display: -webkit-box;\r\n    -webkit-box-orient: vertical;\r\n  }\r\n\r\n  &__hero-img {\r\n    width: 11rem;\r\n    height: 6.75rem;\r\n    object-fit: cover;\r\n    border-top-left-radius: 4px;\r\n    border-bottom-left-radius: 4px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  &__empty-text {\r\n    color: $racq-light-grey;\r\n    text-align: center;\r\n    font: normal normal normal 18px/22px $firasans-regular-font;\r\n    margin: 0;\r\n  }\r\n\r\n  &__remove-car-btn {\r\n    background: $racq-true-white;\r\n    border: none;\r\n    border-radius: 50%;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    position: absolute;\r\n    top: 4px;\r\n    right: 4px;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    &:hover {\r\n      background: darken($racq-true-white, 5%);\r\n      border: 1px solid $racq-light-grey;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["useRouter","apiStatus","ref","comparisonStore","useCarComparisonStore","contentStore","useContentStore","comparisonFooter","storeToRefs","gotoCarDetail","useUrlNavigator","makeAndModelText","computed","car","Make","Model","props"],"mappings":"onCAwDeA,EAAU,EACnB,MAAAC,EAAYC,EAAoB,MAAM,EAEtCC,EAAkBC,IAElBC,EAAeC,IACf,CAAE,iBAAAC,CAAA,EAAqBC,EAAYH,CAAY,EAC/C,CAAE,cAAAI,CAAA,EAAkBC,EAAsB,EAG1CC,EAAmBC,EAAS,IAAM,CACtC,GAAI,CAACC,EAAI,MAAc,MAAA,GACvB,KAAM,CAAE,KAAAC,EAAM,MAAAC,GAAUF,EAAI,MAC5B,OAAOC,EAAO,IAAMC,CAAA,CACrB,EAEKF,EAAMD,EAAS,IAAMT,EAAgB,cAAca,EAAM,MAAM"}