{"version":3,"file":"NavigationHeader-b2a14711.js","sources":["../../src/components/search/NavigationHeader.vue"],"sourcesContent":["<template>\r\n  <div class=\"navigation-header full-width-bleed\">\r\n    <div class=\"navigation-header__container container\">\r\n      <div class=\"navigation-header__search-container\" @click=\"searchClicked\">\r\n        <div class=\"navigation-header__search-icon\"></div>\r\n        <div class=\"navigation-header__search-text\">Search</div>\r\n      </div>\r\n\r\n      <div class=\"navigation-header__compare-basket-container\" @click=\"compareBasketClicked\">\r\n        <div class=\"navigation-header__compare-basket-icon\"></div>\r\n        <div class=\"navigation-header__compare-basket-text\">Compare {{ comparisonCount }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\nimport { useModalStore } from '../../foundation/stores/modalStore';\r\nimport { computed } from 'vue';\r\n\r\nconst comparisonStore = useCarComparisonStore();\r\nconst modalStore = useModalStore();\r\n\r\n/**\r\n * Computed properties\r\n */\r\nconst comparisonCount = computed(() => `(${comparisonStore.vehicleIdsInCart.length}/${comparisonStore.maxLimit})`);\r\n\r\n/** Methods */\r\n/**\r\n * Opens the comparison sticky when clicked\r\n */\r\nfunction compareBasketClicked() {\r\n  comparisonStore.showCarComparisonFooter = true;\r\n}\r\n\r\n/**\r\n * Open the main modal when clicked\r\n */\r\nfunction searchClicked() {\r\n  modalStore.toggleMakeModelModal('');\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.navigation-header {\r\n  height: 60px;\r\n  color: $racq-navy;\r\n  font-family: $firasans-regular-font;\r\n  font-size: 1rem;\r\n  background-color: $racq-car-advisory-pale-blue;\r\n\r\n  @media screen and (min-width: #{$breakpoint-md}) {\r\n    height: 80px;\r\n  }\r\n}\r\n\r\n.navigation-header__container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  height: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.navigation-header__search-container,\r\n.navigation-header__compare-basket-container {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n\r\n.navigation-header__search-icon,\r\n.navigation-header__compare-basket-icon {\r\n  content: '';\r\n  background-image: url(@/assets/img/magnifying-glass.svg);\r\n  background-repeat: no-repeat;\r\n  background-size: 100% 100%;\r\n  background-position: center;\r\n  width: 1rem;\r\n  height: auto;\r\n\r\n  &:not(.navigation-header__search-icon) {\r\n    background-image: url(@/assets/img/compare-basket.svg);\r\n  }\r\n}\r\n</style>\r\n"],"names":["comparisonStore","useCarComparisonStore","modalStore","useModalStore","comparisonCount","computed","compareBasketClicked","searchClicked"],"mappings":"yuBAqBA,MAAMA,EAAkBC,IAClBC,EAAaC,IAKbC,EAAkBC,EAAS,IAAM,IAAIL,EAAgB,iBAAiB,UAAUA,EAAgB,WAAW,EAMjH,SAASM,GAAuB,CAC9BN,EAAgB,wBAA0B,EAC5C,CAKA,SAASO,GAAgB,CACvBL,EAAW,qBAAqB,EAAE,CACpC"}