class PredictiveSearch extends HTMLElement{constructor(){super(),this.modal=this.closest(".search-modal"),this.cachedResults={},this.input=this.querySelector('input[type="search"]'),this.predictiveSearchResults=this.querySelector("[data-predictive-search]"),this.allPredictiveSearchInstances=document.querySelectorAll("predictive-search"),this.isOpen=!1,this.searchTerm="",this.setupEventListeners()}setupEventListeners(){this.querySelector("form.search").addEventListener("submit",this.onFormSubmit.bind(this)),this.querySelector('button[type="button"]').addEventListener("click",this.close.bind(this)),this.querySelector('button[type="reset"]').addEventListener("click",this.clear.bind(this)),this.input.addEventListener("input",debounce(event=>{this.onChange(event)},300).bind(this)),this.input.addEventListener("focus",this.onFocus.bind(this)),this.addEventListener("focusout",this.onFocusOut.bind(this)),this.addEventListener("keyup",this.onKeyup.bind(this)),this.addEventListener("keydown",this.onKeydown.bind(this))}getQuery(){return this.input.value.trim()}onChange(){const newSearchTerm=this.getQuery();if((!this.searchTerm||!newSearchTerm.startsWith(this.searchTerm))&&this.querySelector("#predictive-search-results-groups-wrapper")?.remove(),this.updateSearchForTerm(this.searchTerm,newSearchTerm),this.searchTerm=newSearchTerm,!this.searchTerm.length){this.clear(),this.close(!0);return}this.getSearchResults(this.searchTerm)}onFormSubmit(event){(!this.getQuery().length||this.querySelector('[aria-selected="true"] a'))&&event.preventDefault()}onFocus(){document.body.classList.add("predictive-search--focus");const currentSearchTerm=this.getQuery();currentSearchTerm.length&&(this.searchTerm!==currentSearchTerm?this.onChange():this.getAttribute("results")==="true"?this.open():this.getSearchResults(this.searchTerm))}onFocusOut(){setTimeout(()=>{this.contains(document.activeElement)||this.close()})}onKeyup(event){switch(this.getQuery().length||(this.clear(event),this.close(!0)),event.preventDefault(),event.code){case"ArrowUp":this.switchOption("up");break;case"ArrowDown":this.switchOption("down");break;case"Enter":this.selectOption();break}}onKeydown(event){(event.code==="ArrowUp"||event.code==="ArrowDown")&&event.preventDefault()}updateSearchForTerm(previousTerm,newTerm){const searchForTextElement=this.querySelector("[data-predictive-search-search-for-text]"),currentButtonText=searchForTextElement?.innerText;if(currentButtonText){const newButtonText=currentButtonText.replace(previousTerm,newTerm);searchForTextElement.innerText=newButtonText}}switchOption(direction){if(!this.getAttribute("open"))return;const moveUp=direction==="up",selectedElement=this.querySelector('[aria-selected="true"]'),allElements=this.querySelectorAll("li");let activeElement=this.querySelector("li");moveUp&&!selectedElement||(this.statusElement.textContent="",!moveUp&&selectedElement?activeElement=selectedElement.nextElementSibling||allElements[0]:moveUp&&(activeElement=selectedElement.previousElementSibling||allElements[allElements.length-1]),activeElement!==selectedElement&&(activeElement.setAttribute("aria-selected",!0),selectedElement&&selectedElement.setAttribute("aria-selected",!1),this.setLiveRegionText(activeElement.textContent),this.input.setAttribute("aria-activedescendant",activeElement.id)))}selectOption(){const selectedProduct=this.querySelector('[aria-selected="true"] a, [aria-selected="true"] button');selectedProduct&&selectedProduct.click()}getSearchResults(searchTerm){const queryKey=searchTerm.replace(" ","-").toLowerCase(),perPage=this.dataset.perPage||4;if(this.setLiveRegionLoadingState(),this.cachedResults[queryKey]){this.renderSearchResults(this.cachedResults[queryKey]),this.modal&&this.modal.classList.add("searching");return}fetch(`${theme.routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&${encodeURIComponent("resources[limit]")}=${perPage}&${encodeURIComponent("resources[limit_scope]")}=each§ion_id=predictive-search`).then(response=>{if(!response.ok){var error=new Error(response.status);throw this.close(),error}return response.text()}).then(text=>{const resultsMarkup=new DOMParser().parseFromString(text,"text/html").querySelector("#shopify-section-predictive-search").innerHTML;this.allPredictiveSearchInstances.forEach(predictiveSearchInstance=>{predictiveSearchInstance.cachedResults[queryKey]=resultsMarkup}),this.renderSearchResults(resultsMarkup),this.modal&&this.modal.classList.add("searching")}).catch(error=>{if(error?.code!==20)throw this.close(),error})}setLiveRegionLoadingState(){this.statusElement=this.statusElement||this.querySelector(".predictive-search-status"),this.loadingText=this.loadingText||this.getAttribute("data-loading-text"),this.setLiveRegionText(this.loadingText),this.setAttribute("loading",!0)}setLiveRegionText(statusText){this.statusElement.setAttribute("aria-hidden","false"),this.statusElement.textContent=statusText,setTimeout(()=>{this.statusElement.setAttribute("aria-hidden","true")},1e3)}renderSearchResults(resultsMarkup){this.predictiveSearchResults.innerHTML=resultsMarkup,this.setAttribute("results",!0),this.setLiveRegionResults(),this.open()}setLiveRegionResults(){this.removeAttribute("loading"),this.setLiveRegionText(this.querySelector("[data-predictive-search-live-region-count-value]").textContent)}getResultsMaxHeight(){return this.resultsMaxHeight=window.innerHeight-document.querySelector(".header").getBoundingClientRect().bottom,this.resultsMaxHeight}open(){this.predictiveSearchResults.style.maxHeight=this.resultsMaxHeight||`${this.getResultsMaxHeight()}px`,this.setAttribute("open",!0),this.input.setAttribute("aria-expanded",!0),this.isOpen=!0,document.body.classList.add("predictive-search--focus")}close(clearSearchTerm=!1){this.closeResults(clearSearchTerm),this.isOpen=!1}closeResults(clearSearchTerm=!1){clearSearchTerm&&(this.input.value="",this.removeAttribute("results"));const selected=this.querySelector('[aria-selected="true"]');selected&&selected.setAttribute("aria-selected",!1),this.input.setAttribute("aria-activedescendant",""),this.removeAttribute("loading"),this.removeAttribute("open"),this.input.setAttribute("aria-expanded",!1),document.body.classList.remove("predictive-search--focus")}clear(event){event.preventDefault(),this.input.value="",this.removeAttribute("open"),this.removeAttribute("results"),this.input.focus(),this.modal&&this.modal.classList.remove("searching")}}customElements.define("predictive-search",PredictiveSearch); //# sourceMappingURL=/cdn/shop/t/106/assets/predictive-search.js.map?v=166617881691878729471737919237