{"version":3,"file":"CarComparisonFooter-ac092c44.js","sources":["../../src/components/car-comparison/CarComparisonFooter.vue"],"sourcesContent":["<template>\r\n  <VueFinalModal\r\n    modal-id=\"car-comparison-footer\"\r\n    content-class=\"car-comparison-footer\"\r\n    :lock-scroll=\"!largerThanMd && showCarsOnMobile\"\r\n    :hide-overlay=\"true\"\r\n    swipe-to-close=\"none\"\r\n    :click-to-close=\"false\"\r\n    background=\"interactive\"\r\n    content-transition=\"vfm-slide-down\"\r\n    overlay-transition=\"vfm-fade\"\r\n    @update:model-value=\"(val) => emit('update:modelValue', val)\"\r\n  >\r\n    <CarComparisonFooterTopBand v-model:showCarsOnMobile=\"showCarsOnMobile\" />\r\n\r\n    <div class=\"container\">\r\n      <div class=\"car-comparison-footer__content\">\r\n        <div class=\"car-comparison-footer__car-tiles\" v-show=\"showCarsOnMobile\">\r\n          <template v-if=\"!tabletViewport\">\r\n            <CarComparisonTile v-for=\"(num, index) in MAX_LIMIT\" :key=\"num\" :index=\"index\" :vehicle-id=\"comparisonStore.selectedVehicleIds[index]\" />\r\n          </template>\r\n\r\n          <Carousel v-else :items-to-show=\"itemsToShow\" :wrap-around=\"true\">\r\n            <Slide v-for=\"(num, index) in Array(MAX_LIMIT).fill('')\" :key=\"num\">\r\n              <div class=\"carousel__item\">\r\n                <CarComparisonTile :index=\"index\" :vehicle-id=\"comparisonStore.selectedVehicleIds[index]\" />\r\n              </div>\r\n            </Slide>\r\n\r\n            <template #addons>\r\n              <Pagination />\r\n            </template>\r\n          </Carousel>\r\n        </div>\r\n\r\n        <div class=\"car-comparison-footer__comparison-info\">\r\n          <h4 class=\"car-comparison-footer__comparison-text\" v-text=\"comparisonText\" />\r\n\r\n          <a :href=\"comparisonPageUrl\" class=\"btn btn-primary compare-cars-btn\" v-text=\"comparisonFooter.viewComparisonButtonText\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </VueFinalModal>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref, watch } from 'vue';\r\nimport { storeToRefs } from 'pinia';\r\nimport { VueFinalModal } from 'vue-final-modal';\r\nimport CarComparisonTile from './CarComparisonTile.vue';\r\nimport CarComparisonFooterTopBand from './CarComparisonFooterTopBand.vue';\r\nimport { Carousel, Pagination, Slide } from 'vue3-carousel';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\nimport { useBreakpoints } from '@vueuse/core';\r\nimport { useRouter } from 'vue-router';\r\nimport { useWindowSize } from '@vueuse/core';\r\n\r\nimport { APP_BREAKPOINTS } from '../../foundation/appConstants';\r\nimport { useUrlNavigator } from '../../composables/useUrlNavigator';\r\n\r\nconst emit = defineEmits<{\r\n  (e: 'update:modelValue', modelValue: boolean): void;\r\n}>();\r\n\r\n// Constants\r\nconst MAX_LIMIT = 3;\r\nconst itemsToShow = ref(2);\r\nconst showCarsOnMobile = ref(false);\r\n\r\n// Composables\r\nconst { width } = useWindowSize();\r\nconst router = useRouter();\r\nconst breakpoints = useBreakpoints(APP_BREAKPOINTS);\r\nconst contentStore = useContentStore();\r\n\r\n// Pinia Store\r\nconst comparisonStore = useCarComparisonStore();\r\n\r\n// Retrieve data from Sitecore and populate content store (unless already populated)\r\ncontentStore.fetchComparisonFooter();\r\nconst { comparisonFooter } = storeToRefs(contentStore);\r\nconst { getComparisonPageUrl } = useUrlNavigator(router);\r\n\r\n// Vue 3 refs and reactives\r\nconst tabletViewport = breakpoints.between('md', 'xxl');\r\nconst largerThanMd = breakpoints.greaterOrEqual('md'); // only larger than sm\r\n\r\n// Computed\r\nconst comparisonPageUrl = computed(() => {\r\n  return getComparisonPageUrl(comparisonStore.selectedVehicleIds);\r\n});\r\n\r\nconst comparisonText = computed(() => {\r\n  return `${contentStore.comparisonFooter.comparisonTextPrefix} ${comparisonStore.vehicleIdsInCart.length}/${MAX_LIMIT} ${contentStore.comparisonFooter.comparisonTextSuffix}`;\r\n});\r\n\r\n// Watchers\r\nwatch(\r\n  largerThanMd,\r\n  () => {\r\n    if (largerThanMd.value) {\r\n      showCarsOnMobile.value = true;\r\n    } else {\r\n      showCarsOnMobile.value = false;\r\n    }\r\n  },\r\n  { immediate: true }\r\n);\r\n\r\nwatch(\r\n  width,\r\n  (val) => {\r\n    const carouselItemsWidth = 600;\r\n    return (itemsToShow.value = val / carouselItemsWidth);\r\n  },\r\n  { immediate: true }\r\n);\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n/* Note: These styles are not scoped as they are used on the vue-final-modal component */\r\n.car-comparison-footer {\r\n  position: absolute;\r\n  bottom: 0;\r\n  width: 100vw;\r\n  background: #fff;\r\n}\r\n\r\n// ------ carousel ------ //\r\n\r\n.carousel {\r\n  width: 100%;\r\n}\r\n\r\n.carousel__item {\r\n  min-height: auto;\r\n  width: 100%;\r\n  background-color: transparent;\r\n  color: inherit;\r\n  font-size: inherit;\r\n  border-radius: 0;\r\n  display: inherit;\r\n  justify-content: center;\r\n  align-items: center;\r\n  text-align: left;\r\n}\r\n\r\n.carousel__slide {\r\n  padding: 0;\r\n}\r\n\r\n.carousel__pagination-item {\r\n  .carousel__pagination-button {\r\n    border: 1px solid $racq-light-grey;\r\n    background: #fff;\r\n    width: 1rem;\r\n    height: 1rem;\r\n    border-radius: 50%;\r\n    margin: 0 0.25rem;\r\n    transition: 0.3s ease;\r\n    outline: none;\r\n\r\n    &--active {\r\n      background: $racq-light-grey;\r\n      width: 2rem;\r\n      border-radius: 1.25rem;\r\n    }\r\n\r\n    &::after {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .carousel__pagination-item .carousel__pagination-button--active {\r\n    &::after {\r\n      background: transparent;\r\n    }\r\n  }\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-comparison-footer {\r\n  &__comparison-text {\r\n    margin: 0;\r\n    color: $racq-navy;\r\n    font-size: 1rem;\r\n    font-weight: bold;\r\n    font-family: $firasans-regular-font;\r\n  }\r\n\r\n  &__comparison-info {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    max-width: 100%;\r\n    padding: 0 0.5rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-md}) {\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      min-width: 180px;\r\n      padding: 0;\r\n    }\r\n  }\r\n\r\n  &__content {\r\n    padding: 1rem 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-md}) {\r\n      flex-direction: row;\r\n      justify-content: space-between;\r\n      padding: 1rem 0.5rem;\r\n      gap: 2rem;\r\n    }\r\n\r\n    @media screen and (min-width: #{$breakpoint-xl}) {\r\n      padding: 1rem 0;\r\n    }\r\n  }\r\n\r\n  &__car-tiles {\r\n    overflow-y: hidden;\r\n    padding: 0 0.5rem;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n\r\n    @media screen and (min-width: #{$breakpoint-md}) {\r\n      overflow-x: auto;\r\n      padding: 0 1rem;\r\n      flex-direction: row;\r\n    }\r\n\r\n    @media screen and (min-width: #{$breakpoint-xl}) {\r\n      width: 100%;\r\n      padding: 0;\r\n    }\r\n  }\r\n\r\n  .compare-cars-btn {\r\n    text-decoration: none;\r\n    font-size: 1rem;\r\n    max-width: 100%;\r\n    padding: 1rem;\r\n    height: auto;\r\n    line-height: 1.25;\r\n\r\n    @media screen and (min-width: #{$breakpoint-md}) {\r\n      min-width: 10.5rem;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["itemsToShow","ref","showCarsOnMobile","width","useWindowSize","useRouter","breakpoints","useBreakpoints","APP_BREAKPOINTS","contentStore","useContentStore","comparisonStore","useCarComparisonStore","comparisonFooter","storeToRefs","getComparisonPageUrl","useUrlNavigator","tabletViewport","largerThanMd","comparisonPageUrl","computed","comparisonText","watch","val"],"mappings":"s8BAmEM,MAAAA,EAAcC,EAAI,CAAC,EACnBC,EAAmBD,EAAI,EAAK,EAG5B,CAAE,MAAAE,GAAUC,IACHC,EAAU,EACnB,MAAAC,EAAcC,EAAeC,CAAe,EAC5CC,EAAeC,IAGfC,EAAkBC,IAGxBH,EAAa,sBAAsB,EACnC,KAAM,CAAE,iBAAAI,CAAA,EAAqBC,EAAYL,CAAY,EAC/C,CAAE,qBAAAM,CAAA,EAAyBC,EAAsB,EAGjDC,EAAiBX,EAAY,QAAQ,KAAM,KAAK,EAChDY,EAAeZ,EAAY,eAAe,IAAI,EAG9Ca,EAAoBC,EAAS,IAC1BL,EAAqBJ,EAAgB,kBAAkB,CAC/D,EAEKU,EAAiBD,EAAS,IACvB,GAAGX,EAAa,iBAAiB,wBAAwBE,EAAgB,iBAAiB,UAAU,KAAaF,EAAa,iBAAiB,sBACvJ,EAGD,OAAAa,EACEJ,EACA,IAAM,CACAA,EAAa,MACfhB,EAAiB,MAAQ,GAEzBA,EAAiB,MAAQ,EAE7B,EACA,CAAE,UAAW,EAAK,CAAA,EAGpBoB,EACEnB,EACCoB,GAESvB,EAAY,MAAQuB,EAAM,IAEpC,CAAE,UAAW,EAAK,CAAA"}