{"version":3,"file":"SearchFilterBar-8f29de9d.js","sources":["../../src/components/search/SearchFilterBar.vue"],"sourcesContent":["<template>\r\n  <div :class=\"['search-filter-bar', stickyClass]\">\r\n    <hr class=\"mb-4 hr\" />\r\n\r\n    <div id=\"search-filter-bar-wrapper\" :class=\"['d-flex space-between items-center', { container: stickyClass }]\">\r\n      <div class=\"d-flex gap-4\">\r\n        <button @click=\"() => toggleMakeModelModal('', AnalyticsEventNames.RefineCarSearch)\" class=\"filter-bar-btn bg-grey refine-search\">\r\n          <img class=\"refine-search__icon\" alt=\"An icon of a filter control.\" /> &nbsp; Refine search\r\n        </button>\r\n\r\n        <button v-if=\"isMobile\" @click=\"() => modalStore.toggleMakeModelModal('sort-modal')\" class=\"filter-bar-btn bg-grey sort-search pl-4\">\r\n          <img class=\"sort-search__icon\" alt=\"An icon of an up and down arrow.\" /> &nbsp; Sort\r\n        </button>\r\n\r\n        <button\r\n          v-for=\"filter in searchFilters\"\r\n          :key=\"filter.name\"\r\n          v-text=\"filter.name\"\r\n          @click=\"filter.onClick\"\r\n          :class=\"['filter-bar-btn', { selected: valueExistsInState(filter.stateKey) }]\"\r\n        />\r\n      </div>\r\n\r\n      <button v-if=\"!isMobile\" @click=\"() => modalStore.toggleMakeModelModal('sort-modal')\" class=\"filter-bar-btn bg-grey sort-search pl-4\">\r\n        <img class=\"sort-search__icon\" alt=\"An icon of an up and down arrow.\" /> &nbsp; Sort\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"search-filter-bar-top\" ref=\"searchFilterTop\"></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { useModalStore } from '../../foundation/stores/modalStore';\r\nimport { useCarSelectStore } from '../../foundation/stores/carSelectStore';\r\nimport { useMonitorElementVisibility } from '../../composables/useMonitorElementVisibility';\r\nimport { useAnalytics } from '../../composables/useAnalytics';\r\nimport { AnalyticsEventNames, AnalyticsEvents } from '../../foundation/enums/AnalyticsEvents';\r\nimport { useBreakpoints } from '@vueuse/core';\r\nimport { APP_BREAKPOINTS } from '../../foundation/appConstants';\r\n\r\nconst analytics = useAnalytics();\r\nconst modalStore = useModalStore();\r\nconst carSelectStore = useCarSelectStore();\r\nconst { valueExistsInState } = carSelectStore;\r\nconst searchFilterTop = ref(null);\r\nconst { stickyClass } = useMonitorElementVisibility(searchFilterTop, { defaultVisibility: true });\r\nconst breakpoints = useBreakpoints(APP_BREAKPOINTS);\r\nconst isMobile = breakpoints.smallerOrEqual('sm'); // only larger than sm\r\n\r\nfunction pushToAnalytics(eventName: AnalyticsEventNames) {\r\n  try {\r\n    analytics.push(AnalyticsEvents.NavigationClickToModal, {\r\n      eventInfo: {\r\n        navigation: {\r\n          name: eventName,\r\n          type: 'refine car search',\r\n        },\r\n      },\r\n    });\r\n  } catch (error) {\r\n    console.warn('fail to push data to analytics', error);\r\n  }\r\n}\r\n\r\nfunction toggleMakeModelModal(modelType: string, eventName: AnalyticsEventNames) {\r\n  pushToAnalytics(eventName);\r\n  modalStore.toggleMakeModelModal(modelType);\r\n}\r\n\r\nconst searchFilters = ref([\r\n  {\r\n    name: 'Price',\r\n    stateKey: 'selectedPrice',\r\n    onClick: () => toggleMakeModelModal('price-modal', AnalyticsEventNames.Price),\r\n  },\r\n  {\r\n    name: 'Make',\r\n    stateKey: 'selectedMakes',\r\n    onClick: () => toggleMakeModelModal('make-modal', AnalyticsEventNames.Make),\r\n  },\r\n  {\r\n    name: 'Year',\r\n    stateKey: 'selectedYear',\r\n    onClick: () => toggleMakeModelModal('year-modal', AnalyticsEventNames.Year),\r\n  },\r\n  {\r\n    name: 'Body type',\r\n    stateKey: 'selectedBodyTypes',\r\n    onClick: () => toggleMakeModelModal('body-type-modal', AnalyticsEventNames.BodyType),\r\n  },\r\n  {\r\n    name: 'Fuel type',\r\n    stateKey: 'selectedFuelTypes',\r\n    onClick: () => toggleMakeModelModal('fuel-type-modal', AnalyticsEventNames.FuelType),\r\n  },\r\n]);\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\nhr {\r\n  border: 1px solid lighten($racq-pale-blue-border, 5%);\r\n\r\n  &.sticky {\r\n    border: $racq-true-white;\r\n  }\r\n}\r\n\r\n.search-filter-bar {\r\n  position: sticky;\r\n  top: -2px;\r\n  z-index: 1;\r\n  background: $racq-true-white;\r\n  padding-bottom: 2rem;\r\n\r\n  &.sticky {\r\n    width: calc(100vw);\r\n    margin-left: calc(-50vw + 50%);\r\n    filter: drop-shadow(0px 0px 3px $racq-black-border);\r\n    border-radius: 0 0 4px 4px;\r\n    padding-bottom: 1rem;\r\n\r\n    & #search-filter-bar-wrapper {\r\n      @media screen and (max-width: $breakpoint-md) {\r\n        padding-left: 0.5rem;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.filter-bar-btn {\r\n  border: $racq-border-style;\r\n  background: $racq-true-white;\r\n  padding: 1rem;\r\n  border-radius: 1.25rem;\r\n  max-height: 2.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  white-space: nowrap;\r\n  outline-offset: 2px;\r\n  font-size: 1rem;\r\n  color: $racq-dark-grey;\r\n\r\n  &.bg-grey {\r\n    border-color: transparent;\r\n    background: $racq-pale-blue;\r\n\r\n    &:focus {\r\n      outline: 2px dashed $racq-navy;\r\n    }\r\n  }\r\n\r\n  &.refine-search {\r\n    width: 154px;\r\n\r\n    img {\r\n      content: url('@/assets/img/filter-icon.svg');\r\n    }\r\n\r\n    &:active {\r\n      img {\r\n        content: url('@/assets/img/filter-icon-white.svg');\r\n      }\r\n    }\r\n  }\r\n\r\n  &.sort-search {\r\n    img {\r\n      content: url('@/assets/img/sort-icon.svg');\r\n    }\r\n\r\n    &:active {\r\n      img {\r\n        content: url('@/assets/img/sort-icon-white.svg');\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    background: $racq-blue;\r\n    border: none;\r\n    outline: 2px dashed $racq-navy;\r\n    color: $racq-true-white;\r\n  }\r\n\r\n  &:focus {\r\n    border: 1px solid $racq-blue;\r\n    outline: 2px dashed $racq-navy;\r\n  }\r\n\r\n  &:hover {\r\n    border: 1px solid $racq-blue;\r\n    color: $racq-dark-grey;\r\n    &:active {\r\n      color: $racq-true-white;\r\n    }\r\n  }\r\n}\r\n\r\n#search-filter-bar-wrapper {\r\n  &::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  @media screen and (max-width: $breakpoint-md) {\r\n    overflow-x: scroll;\r\n  }\r\n}\r\n</style>\r\n"],"names":["analytics","useAnalytics","modalStore","useModalStore","carSelectStore","useCarSelectStore","valueExistsInState","searchFilterTop","ref","stickyClass","useMonitorElementVisibility","isMobile","useBreakpoints","APP_BREAKPOINTS","pushToAnalytics","eventName","AnalyticsEvents","error","toggleMakeModelModal","modelType","searchFilters","AnalyticsEventNames"],"mappings":"43BAyCA,MAAMA,EAAYC,IACZC,EAAaC,IACbC,EAAiBC,IACjB,CAAE,mBAAAC,CAAuB,EAAAF,EACzBG,EAAkBC,EAAI,IAAI,EAC1B,CAAE,YAAAC,GAAgBC,EAA4BH,EAAiB,CAAE,kBAAmB,GAAM,EAE1FI,EADcC,EAAeC,CAAe,EACrB,eAAe,IAAI,EAEhD,SAASC,EAAgBC,EAAgC,CACnD,GAAA,CACQf,EAAA,KAAKgB,EAAgB,uBAAwB,CACrD,UAAW,CACT,WAAY,CACV,KAAMD,EACN,KAAM,mBACR,CACF,CAAA,CACD,QACME,GACC,QAAA,KAAK,iCAAkCA,CAAK,CACtD,CACF,CAES,SAAAC,EAAqBC,EAAmBJ,EAAgC,CAC/ED,EAAgBC,CAAS,EACzBb,EAAW,qBAAqBiB,CAAS,CAC3C,CAEA,MAAMC,EAAgBZ,EAAI,CACxB,CACE,KAAM,QACN,SAAU,gBACV,QAAS,IAAMU,EAAqB,cAAeG,EAAoB,KAAK,CAC9E,EACA,CACE,KAAM,OACN,SAAU,gBACV,QAAS,IAAMH,EAAqB,aAAcG,EAAoB,IAAI,CAC5E,EACA,CACE,KAAM,OACN,SAAU,eACV,QAAS,IAAMH,EAAqB,aAAcG,EAAoB,IAAI,CAC5E,EACA,CACE,KAAM,YACN,SAAU,oBACV,QAAS,IAAMH,EAAqB,kBAAmBG,EAAoB,QAAQ,CACrF,EACA,CACE,KAAM,YACN,SAAU,oBACV,QAAS,IAAMH,EAAqB,kBAAmBG,EAAoB,QAAQ,CACrF,CAAA,CACD"}