{"version":3,"file":"CarComparisonMobileOverlay-dc1e70f2.js","sources":["../../src/components/car-comparison/CarComparisonMobileOverlay.vue"],"sourcesContent":["<template>\r\n  <VueFinalModal\r\n    modal-id=\"car-comparison-mobile-overlay\"\r\n    content-class=\"car-comparison-mobile-overlay\"\r\n    :lock-scroll=\"false\"\r\n    :hide-overlay=\"false\"\r\n    swipe-to-close=\"none\"\r\n    :click-to-close=\"true\"\r\n    background=\"non-interactive\"\r\n    content-transition=\"vfm-fade\"\r\n    overlay-transition=\"vfm-fade\"\r\n    @update:model-value=\"(val: boolean) => hideOverlay()\"\r\n  >\r\n    <div class=\"car-comparison-mobile-overlay__container\" @click=\"hideOverlay\">\r\n      <h3 class=\"car-comparison-mobile-overlay__text\">Swipe left to view more cars</h3>\r\n      <button class=\"car-comparison-mobile-overlay__button\">Ok</button>\r\n    </div>\r\n  </VueFinalModal>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VueFinalModal } from 'vue-final-modal';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { storeToRefs } from 'pinia';\r\n\r\nconst comparisonStore = useCarComparisonStore();\r\nconst { userHasAcceptedMobileInfoOverlay } = storeToRefs(comparisonStore);\r\n\r\nconst emit = defineEmits<{\r\n  (e: 'update:modelValue', modelValue: boolean): void;\r\n}>();\r\n\r\nfunction hideOverlay() {\r\n  emit('update:modelValue', false);\r\n  userHasAcceptedMobileInfoOverlay.value = true;\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-comparison-mobile-overlay {\r\n  &__container {\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    align-items: end;\r\n    height: 100vh;\r\n    padding-right: 1.5rem;\r\n  }\r\n\r\n  &__text {\r\n    direction: rtl;\r\n    max-width: 10rem;\r\n  }\r\n\r\n  &__text,\r\n  &__button {\r\n    color: #fff;\r\n    font-family: 'Segoe-ui', $arial-regular-font;\r\n    font-weight: 100;\r\n    font-size: 1.25rem;\r\n    line-height: 1.75rem;\r\n  }\r\n\r\n  &__button {\r\n    background: transparent;\r\n    border: 1px solid #fff;\r\n    padding: 0.5rem 2.25rem;\r\n    border-radius: 0.25rem;\r\n  }\r\n}\r\n</style>\r\n"],"names":["comparisonStore","useCarComparisonStore","userHasAcceptedMobileInfoOverlay","storeToRefs","hideOverlay","emit"],"mappings":"gkBAyBA,MAAMA,EAAkBC,IAClB,CAAE,iCAAAC,CAAA,EAAqCC,EAAYH,CAAe,EAMxE,SAASI,GAAc,CACrBC,EAAK,oBAAqB,EAAK,EAC/BH,EAAiC,MAAQ,EAC3C"}