{"version":3,"file":"PageLayout-ae0f7af7.js","sources":["../../src/layouts/PageLayout.vue"],"sourcesContent":["<template>\r\n  <div :class=\"{ 'car-comparison-cart--active': showCarComparisonFooter, container: tabletUp }\">\r\n    <NavigationHeader />\r\n\r\n    <slot name=\"page-hero\"></slot>\r\n\r\n    <div class=\"page-layout\">\r\n      <slot name=\"page-title\" v-if=\"moduleTitle\">\r\n        <div>\r\n          <h1 class=\"module-title\" v-text=\"moduleTitle\" />\r\n          <h2 v-if=\"moduleSubtitle\" class=\"module-subtitle\" v-text=\"moduleSubtitle\" />\r\n        </div>\r\n        <ShareCopy />\r\n      </slot>\r\n\r\n      <!-- Default page content slot -->\r\n      <slot />\r\n    </div>\r\n  </div>\r\n\r\n  <div v-if=\"withSearchModal\">\r\n    <MakeModelModal v-if=\"showMakeModelModal\" :modal-to-display-on-load=\"modalToDisplayOnLoad\" @close-modal=\"modalStore.closeShowMakeModelModal\" />\r\n  </div>\r\n\r\n  <div v-if=\"withComparisonCart\">\r\n    <CarComparisonFooter v-model=\"showCarComparisonFooter\" v-if=\"showCarComparisonFooter\" />\r\n  </div>\r\n\r\n  <div v-if=\"withMobileInfoOverlay\">\r\n    <CarComparisonMobileOverlay v-model=\"showCarComparisonMobileInfoOverlay\" />\r\n  </div>\r\n\r\n  <!-- WIP: This is just a demo of a slide out modal with vue-final-modal\r\n         I wil revisit this in a later tech debt cleanup sprint. -->\r\n  <!-- <button @click=\"() => open()\">Open Slide Out Modal</button> -->\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useModalStore } from '../foundation/stores/modalStore';\r\nimport { useCarComparisonStore } from '../foundation/stores/carComparisonStore';\r\nimport { storeToRefs } from 'pinia';\r\nimport { useContentStore } from '../foundation/stores/contentStore';\r\n\r\nimport NavigationHeader from '../components/search/NavigationHeader.vue';\r\nimport ShareCopy from '../components/share/ShareCopy.vue';\r\nimport MakeModelModal from '../components/modals/MakeModelModal.vue';\r\nimport CarComparisonFooter from '../components/car-comparison/CarComparisonFooter.vue';\r\nimport CarComparisonMobileOverlay from '../components/car-comparison/CarComparisonMobileOverlay.vue';\r\nimport { useBreakpoints } from '@vueuse/core';\r\nimport { APP_BREAKPOINTS } from '../foundation/appConstants';\r\nimport { onMounted } from 'vue';\r\n\r\nconst props = defineProps({\r\n  moduleTitle: {\r\n    type: String,\r\n    required: false,\r\n    default: '',\r\n  },\r\n  moduleSubtitle: {\r\n    type: String,\r\n    required: false,\r\n    default: '',\r\n  },\r\n  withComparisonCart: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  withSearchModal: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  withMobileInfoOverlay: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n});\r\n\r\nconst modalStore = useModalStore();\r\nconst { showMakeModelModal, modalToDisplayOnLoad } = storeToRefs(modalStore);\r\nconst breakpoints = useBreakpoints(APP_BREAKPOINTS);\r\nconst comparisonStore = useCarComparisonStore();\r\nconst { showCarComparisonFooter, showCarComparisonMobileInfoOverlay } = storeToRefs(comparisonStore);\r\n\r\nconst contentStore = useContentStore();\r\ncontentStore.fetchFuelPrices();\r\ncontentStore.fetchModalDatasources();\r\n\r\nconst tabletUp = breakpoints.greaterOrEqual('lg'); // only larger than sm\r\n\r\nonMounted(() => {\r\n  // Add scrollspy attributes to the following SXA components\r\n  const sxaComponents = ['advice', 'insurance-and-roadside'];\r\n  sxaComponents.forEach((id) => addToElement(id, '.snippet', 'data-scrollspy-id'));\r\n});\r\n\r\n/**\r\n * Helper function to add specific attributes to components\r\n * that live outside the Vue application.\r\n */\r\nfunction addToElement(id: string, targetEl: string, attr: string) {\r\n  const components = Array.from(document.querySelectorAll(targetEl));\r\n  const matchingEl = components.find((el) => el.id.toLowerCase() === id.toLowerCase());\r\n\r\n  matchingEl?.setAttribute(attr, id);\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.car-comparison-cart--active {\r\n  padding-bottom: 12rem;\r\n  //\r\n}\r\n\r\n.module-title {\r\n  padding-top: 1.5rem;\r\n  margin-bottom: 0;\r\n  font-weight: bold;\r\n  font-size: 2rem;\r\n  line-height: 2.625rem;\r\n\r\n  @media screen and (min-width: #{$breakpoint-md}) {\r\n    padding-top: 2rem;\r\n  }\r\n\r\n  @media screen and (min-width: #{$breakpoint-xl}) {\r\n    margin-bottom: 1rem;\r\n    font-size: 2.625rem;\r\n    line-height: 3rem;\r\n  }\r\n}\r\n\r\n.module-subtitle {\r\n  margin-top: -1rem;\r\n  margin-bottom: 0;\r\n  font-size: 1rem;\r\n  font-weight: 400;\r\n}\r\n</style>\r\n"],"names":["modalStore","useModalStore","showMakeModelModal","modalToDisplayOnLoad","storeToRefs","breakpoints","useBreakpoints","APP_BREAKPOINTS","comparisonStore","useCarComparisonStore","showCarComparisonFooter","showCarComparisonMobileInfoOverlay","contentStore","useContentStore","tabletUp","onMounted","id","addToElement","targetEl","attr","matchingEl","el"],"mappings":"szCA6EA,MAAMA,EAAaC,IACb,CAAE,mBAAAC,EAAoB,qBAAAC,CAAqB,EAAIC,EAAYJ,CAAU,EACrEK,EAAcC,EAAeC,CAAe,EAC5CC,EAAkBC,IAClB,CAAE,wBAAAC,EAAyB,mCAAAC,CAAmC,EAAIP,EAAYI,CAAe,EAE7FI,EAAeC,IACrBD,EAAa,gBAAgB,EAC7BA,EAAa,sBAAsB,EAE7B,MAAAE,EAAWT,EAAY,eAAe,IAAI,EAEhDU,EAAU,IAAM,CAEQ,CAAC,SAAU,wBAAwB,EAC3C,QAASC,GAAOC,EAAaD,EAAI,WAAY,mBAAmB,CAAC,CAAA,CAChF,EAMQ,SAAAC,EAAaD,EAAYE,EAAkBC,EAAc,CAE1D,MAAAC,EADa,MAAM,KAAK,SAAS,iBAAiBF,CAAQ,CAAC,EACnC,KAAMG,GAAOA,EAAG,GAAG,YAAY,IAAML,EAAG,YAAa,CAAA,EAEvEI,GAAA,MAAAA,EAAA,aAAaD,EAAMH,EACjC"}