{"version":3,"file":"autosuggestSearch.c528ed781acb55335956.js","mappings":"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","sources":["webpack://jcb.com/./src/app/components/shared/base-listbox-option.vue","webpack://jcb.com/./src/app/components/shared/base-listbox.vue","webpack://jcb.com/./src/app/views/autosuggest-search/autosuggest-search.vue","webpack://jcb.com/./src/app/services/api-client.js","webpack://jcb.com/./src/app/services/autosuggest-search.js","webpack://jcb.com/./src/app/views/autosuggest-search/autosuggest-search.js","webpack://jcb.com/./src/app/components/shared/base-listbox-option.vue?3ad1","webpack://jcb.com/./src/app/components/shared/base-listbox.vue?4b3a","webpack://jcb.com/./src/app/views/autosuggest-search/autosuggest-search.vue?7fde"],"sourcesContent":["<script setup>\r\nimport { computed } from 'vue';\r\n\r\nconst emit = defineEmits(['click']);\r\n\r\nconst props = defineProps({\r\n  currentIndex: {\r\n    required: true,\r\n    type: Number,\r\n  },\r\n  index: {\r\n    required: true,\r\n    type: Number,\r\n  },\r\n  setSize: {\r\n    required: true,\r\n    type: Number,\r\n  },\r\n  startingIndex: {\r\n    default: 0,\r\n    required: false,\r\n    type: Number,\r\n  },\r\n  classPrefix: {\r\n    type: String,\r\n    required: false,\r\n  },\r\n});\r\n\r\nconst selected = computed(() => props.currentIndex === props.startingIndex + props.index);\r\nconst posInSet = computed(() => props.startingIndex + props.index + 1);\r\nconst id = computed(() => `option__${props.index}`);\r\n\r\nfunction clickHandler() {\r\n  emit('click');\r\n}\r\n</script>\r\n\r\n<template>\r\n  <li\r\n    @click=\"clickHandler\"\r\n    :aria-posinset=\"posInSet\"\r\n    :aria-selected=\"selected\"\r\n    :aria-setsize=\"props.setSize\"\r\n    :id=\"id\"\r\n    class=\"c-base-listbox__option\"\r\n    :class=\"`${classPrefix}option`\"\r\n    role=\"option\"\r\n  >\r\n    <slot />\r\n  </li>\r\n</template>\r\n","<script setup>\r\nimport { ref } from 'vue';\r\n\r\nconst props = defineProps({\r\n  id: {\r\n    required: true,\r\n    type: String,\r\n  },\r\n  classPrefix: {\r\n    type: String,\r\n    required: false,\r\n  },\r\n});\r\n\r\nconst listboxRef = ref(null);\r\n\r\ndefineExpose({ listboxRef });\r\n</script>\r\n\r\n<template>\r\n  <ul\r\n    :id=\"props.id\"\r\n    class=\"c-base-listbox\"\r\n    :class=\"`${classPrefix}listbox`\"\r\n    role=\"listbox\"\r\n    ref=\"listboxRef\"\r\n  >\r\n    <slot />\r\n  </ul>\r\n</template>\r\n\r\n","<script setup>\r\nimport { computed, inject, ref, onBeforeMount, nextTick } from 'vue';\r\nimport { debounce } from 'lodash';\r\nimport BaseListbox from '@/app/components/shared/base-listbox.vue';\r\nimport BaseListboxOption from '@/app/components/shared/base-listbox-option.vue';\r\nimport services from '../../services/autosuggest-search.js';\r\n\r\nconst config = inject('config');\r\nconst gaPush = inject('gaPush');\r\n\r\nconst props = defineProps({\r\n  isHeaderSearch: {\r\n    type: Boolean,\r\n    required: true,\r\n  },\r\n  langCode: {\r\n    type: String,\r\n    required: true,\r\n  },\r\n  id: {\r\n    type: String,\r\n    required: true,\r\n  },\r\n});\r\n\r\nconst searchTerm = ref('');\r\nconst searchPredictions = ref([]);\r\nconst requestController = ref(null);\r\nconst firstSearchBtnClick = ref(false);\r\nconst listboxRef = ref(null);\r\n\r\nconst listboxId = ref('search-suggestions');\r\nconst currentSelectionIndex = ref(-1);\r\nconst setSize = computed(() => searchPredictions.value.length);\r\nconst isSearchTermMinimum3Chars = computed(() => searchTerm.value.length >= 3);\r\nconst gaPrefix = computed(() => (props.isHeaderSearch ? 'header' : 'component'));\r\nconst showRequiredMessage = computed(() => firstSearchBtnClick.value && !searchTerm.value.length);\r\n\r\nconst keyupHandler = debounce((event) => {\r\n  isSearchTermMinimum3Chars.value ? fetchSuggestions(event) : (searchPredictions.value = []);\r\n}, 200);\r\n\r\nfunction fetchSuggestions(event) {\r\n  if (event.keyCode !== 38 && event.keyCode !== 40 && event.keyCode !== 13) {\r\n    if (searchTerm.value) {\r\n      useRequestController();\r\n      return services\r\n        .searchPredictions(searchTerm.value, props.langCode)\r\n        .then((response) => {\r\n          currentSelectionIndex.value = -1;\r\n          requestController.value = null;\r\n          if (response.data.searchPredictions?.length) {\r\n            searchPredictions.value = response.data.searchPredictions;\r\n            nextTick(() => {\r\n              listboxRef.value.listboxRef.scrollTop = 0;\r\n            });\r\n          } else {\r\n            searchPredictions.value = [];\r\n          }\r\n        })\r\n        .catch((error) => {\r\n          console.log(error);\r\n        });\r\n    } else {\r\n      searchPredictions.value = [];\r\n    }\r\n  }\r\n}\r\n\r\nfunction useRequestController() {\r\n  if (requestController.value) {\r\n    requestController.value.abort();\r\n  }\r\n  requestController.value = new AbortController();\r\n}\r\n\r\nfunction setSelection(selection) {\r\n  searchTerm.value = selection;\r\n  searchPredictions.value = [];\r\n  currentSelectionIndex.value = -1;\r\n\r\n  gaPush({\r\n    event: 'search_predictive_search_select',\r\n    search_predictive_search_term: searchTerm.value,\r\n  });\r\n}\r\n\r\nfunction enterHandler(event) {\r\n  if (currentSelectionIndex.value > -1) {\r\n    event.preventDefault();\r\n    setSelection(searchPredictions.value[currentSelectionIndex.value]);\r\n  }\r\n}\r\n\r\nfunction decrementSelectionIndex() {\r\n  if (!setSize.value) return;\r\n  if (currentSelectionIndex.value > 0) {\r\n    currentSelectionIndex.value--;\r\n  } else {\r\n    currentSelectionIndex.value = setSize.value - 1;\r\n  }\r\n  optionInViewCheck();\r\n}\r\n\r\nfunction incrementSelectionIndex() {\r\n  if (!setSize.value) return;\r\n  if (currentSelectionIndex.value < setSize.value - 1) {\r\n    currentSelectionIndex.value++;\r\n  } else {\r\n    currentSelectionIndex.value = 0;\r\n  }\r\n  optionInViewCheck();\r\n}\r\n\r\nfunction optionInViewCheck() {\r\n  const listbox = listboxRef.value.listboxRef;\r\n  const selectedOption = listbox.children[currentSelectionIndex.value];\r\n\r\n  const selectedOptionRect = selectedOption.getBoundingClientRect();\r\n  const listboxRect = listbox.getBoundingClientRect();\r\n\r\n  const isTopVisible = selectedOptionRect.top >= listboxRect.top;\r\n  const isBottomVisible = selectedOptionRect.bottom <= listboxRect.bottom;\r\n\r\n  if (!isBottomVisible) {\r\n    listbox.scrollTop = selectedOption.offsetTop - listboxRect.height + selectedOptionRect.height;\r\n  } else if (!isTopVisible) {\r\n    listbox.scrollTop = selectedOption.offsetTop;\r\n  }\r\n}\r\n\r\nconst vClickOutside = {\r\n  mounted: function (el, binding) {\r\n    el.clickOutsideEvent = function (event) {\r\n      if (!(el == event.target || el.contains(event.target))) {\r\n        binding.value(event, el);\r\n      }\r\n    };\r\n    document.addEventListener('click', el.clickOutsideEvent);\r\n  },\r\n  unmounted: function (el) {\r\n    document.removeEventListener('click', el.clickOutsideEvent);\r\n  },\r\n};\r\n\r\nfunction onClickOutside() {\r\n  searchPredictions.value = [];\r\n}\r\n\r\nfunction handleFormSubmit(e) {\r\n  firstSearchBtnClick.value = true;\r\n\r\n  !searchTerm.value.length\r\n    ? e.preventDefault()\r\n    : gaPush({\r\n        event: 'search_search_click',\r\n        search_search_term: searchTerm.value,\r\n        element_location: gaPrefix.value,\r\n      });\r\n}\r\n\r\nonBeforeMount(() => {\r\n  const url = new URL(window.location.href);\r\n  const searchParam = url.searchParams.get('search');\r\n  searchParam && !props.isHeaderSearch && (searchTerm.value = searchParam);\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"c-search__wrapper\"\r\n    :class=\"{\r\n      'c-search__wrapper--component': !props.isHeaderSearch,\r\n      'c-search__wrapper--header': props.isHeaderSearch,\r\n    }\"\r\n  >\r\n    <form\r\n      class=\"c-search\"\r\n      @submit=\"handleFormSubmit\"\r\n      :action=\"`/${props.langCode}/search-results#articlesResults`\"\r\n      role=\"search\"\r\n    >\r\n      <div class=\"c-search__contain\">\r\n        <label class=\"c-search__label\" :for=\"props.id\">{{ config.autosuggestSearchTitle }}</label>\r\n        <div class=\"c-search__contain-input-wrapper\" v-click-outside=\"onClickOutside\">\r\n          <input\r\n            class=\"c-search__contain-input\"\r\n            :id=\"id\"\r\n            type=\"text\"\r\n            autocomplete=\"off\"\r\n            name=\"search\"\r\n            v-model=\"searchTerm\"\r\n            :aria-owns=\"listboxId\"\r\n            :aria-describedby=\"`${props.id}-error`\"\r\n            @keydown.enter=\"enterHandler\"\r\n            @keyup=\"keyupHandler\"\r\n            @keydown.down.prevent=\"incrementSelectionIndex\"\r\n            @keydown.up.prevent=\"decrementSelectionIndex\"\r\n            :placeholder=\"config.autosuggestSearchPlaceholder\"\r\n          />\r\n          <BaseListbox\r\n            v-if=\"setSize\"\r\n            classPrefix=\"c-search__\"\r\n            :id=\"listboxId\"\r\n            @focusout=\"onClickOutside\"\r\n            ref=\"listboxRef\"\r\n          >\r\n            <BaseListboxOption\r\n              v-for=\"(option, optionIndex) in searchPredictions\"\r\n              @click=\"setSelection(option)\"\r\n              classPrefix=\"c-search__\"\r\n              :key=\"optionIndex\"\r\n              :index=\"optionIndex\"\r\n              :currentIndex=\"currentSelectionIndex\"\r\n              :setSize=\"setSize\"\r\n            >\r\n              {{ option }}\r\n            </BaseListboxOption>\r\n          </BaseListbox>\r\n        </div>\r\n        <span :id=\"`${props.id}-error`\" class=\"c-search__contain-input-error\" aria-live=\"assertive\">\r\n          <span v-if=\"showRequiredMessage\">{{ config.autosuggestSearchRequiredMessage }}</span>\r\n        </span>\r\n        <button class=\"c-search__contain-cta\" type=\"submit\">\r\n          {{ config.autosuggestSearchButtonText }}\r\n        </button>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</template>\r\n","// api-clients.js\r\nimport axios from 'axios';\r\n// import * as store from '../stores/index';\r\n\r\nconst apiClient = axios.create({\r\n  baseURL: '/api',\r\n  withCredentials: false,\r\n  headers: {\r\n    Accept: 'application/json',\r\n    'Cache-Control': 'no-cache',\r\n    'Content-Type': 'application/json',\r\n  },\r\n});\r\n\r\n// apiClient.interceptors.request.use(\r\n//   (config) => {\r\n//     store.default.dispatch('loader/setLoadingAction', true);\r\n//     return config;\r\n//   },\r\n//   (error) => {\r\n//     store.default.dispatch('loader/setLoadingAction', false);\r\n//     return Promise.reject(error);\r\n//   },\r\n// );\r\n\r\n// apiClient.interceptors.response.use(\r\n//   (response) => {\r\n//     store.default.dispatch('loader/setLoadingAction', false);\r\n//     return response;\r\n//   },\r\n//   (error) => {\r\n//     store.default.dispatch('loader/setLoadingAction', false);\r\n//     return Promise.reject(error);\r\n//   },\r\n// );\r\n\r\nexport default apiClient;\r\n","import apiClient from './api-client';\r\n\r\nexport default {\r\n  searchPredictions(searchTerm, langCode) {\r\n    return apiClient.get(`/search/${langCode}/autosuggest?searchTerm=${searchTerm}`);\r\n  },\r\n};\r\n","import { createApp } from 'vue';\r\nimport { createPinia } from 'pinia';\r\nimport autosuggestSearchApp from '@/app/views/autosuggest-search/autosuggest-search.vue';\r\nimport { pushToDataLayer } from '@/js/analytics/analytics.methods';\r\n\r\nexport default class autosuggestSearch {\r\n  constructor(el) {\r\n    this.el = el;\r\n    this.isHeaderSearch = el.dataset.headerSearch;\r\n    this.componentId = el.id;\r\n    this.langCode = document.documentElement.lang;\r\n    this.init();\r\n  }\r\n  init() {\r\n    const app = createApp(autosuggestSearchApp, {\r\n      isHeaderSearch: this.isHeaderSearch === 'true',\r\n      langCode: this.langCode,\r\n      id: this.componentId,\r\n    });\r\n    const pinia = createPinia();\r\n\r\n    app.provide('config', JCB);\r\n    app.provide('gaPush', pushToDataLayer);\r\n    app.use(pinia);\r\n    app.mount(this.el);\r\n  }\r\n}\r\n","import script from \"./base-listbox-option.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./base-listbox-option.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import script from \"./base-listbox.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./base-listbox.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import script from \"./autosuggest-search.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./autosuggest-search.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__"],"names":["selected","computed","props","currentIndex","startingIndex","index","posInSet","id","clickHandler","emit","listboxRef","ref","expose","config","inject","gaPush","searchTerm","searchPredictions","requestController","firstSearchBtnClick","listboxId","currentSelectionIndex","setSize","value","length","isSearchTermMinimum3Chars","gaPrefix","isHeaderSearch","showRequiredMessage","keyupHandler","debounce","event","keyCode","abort","AbortController","useRequestController","services","langCode","then","response","data","nextTick","scrollTop","error","console","log","fetchSuggestions","setSelection","selection","search_predictive_search_term","enterHandler","preventDefault","decrementSelectionIndex","optionInViewCheck","incrementSelectionIndex","listbox","selectedOption","children","selectedOptionRect","getBoundingClientRect","listboxRect","isTopVisible","top","bottom","offsetTop","height","vClickOutside","mounted","el","binding","clickOutsideEvent","target","contains","document","addEventListener","unmounted","removeEventListener","onClickOutside","handleFormSubmit","e","search_search_term","element_location","onBeforeMount","searchParam","URL","window","location","href","searchParams","get","axios","create","baseURL","withCredentials","headers","Accept","apiClient","autosuggestSearch","this","dataset","headerSearch","componentId","documentElement","lang","init","app","createApp","autosuggestSearchApp","pinia","createPinia","provide","JCB","pushToDataLayer","use","mount"],"sourceRoot":""}