https://dutchshopper.com/cdn/shop/t/30/assets/predictive-search.js?v=4524914117864370371758274356

1class SearchFeature{constructor(host){this.host=host}init(){}destroy(){}}class PlaceholderManager extends SearchFeature{constructor(host){super(host),this.placeHolderTexts=window.searchBar.dynamicPrompts.filter(item=>item!==""),this.placeHolderIndex=0,this.placeHolderTextLetterIndex=0,this.searchBar=host.querySelector("#Search-In-Modal")||host.querySelector("#Search-In-Modal-Mobile")}init(){this.searchBar.setAttribute("placeholder",window.searchBar.staticPrompt),this.placeHolderTexts.length>1?this.typeWriterEffect(this.placeHolderTexts[0]):this.placeHolderTexts.length===1&&this.searchBar.setAttribute("placeholder",window.searchBar.staticPrompt+this.placeHolderTexts[0])}typeWriterEffect(string){if(this.placeHolderTextLetterIndex<string.length){const newAttribute=this.searchBar.getAttribute("placeholder")+string.charAt(this.placeHolderTextLetterIndex);this.searchBar.setAttribute("placeholder",newAttribute),this.placeHolderTextLetterIndex++,setTimeout(()=>this.typeWriterEffect(string),75)}else setTimeout(()=>this.typeDeleterEffect(string),1e3)}typeDeleterEffect(string){if(this.searchBar.getAttribute("placeholder")!==window.searchBar.staticPrompt){const newAttribute=this.searchBar.getAttribute("placeholder").slice(0,-1);this.searchBar.setAttribute("placeholder",newAttribute),setTimeout(()=>this.typeDeleterEffect(string),50)}else this.placeHolderIndex=(this.placeHolderIndex+1)%this.placeHolderTexts.length,this.placeHolderTextLetterIndex=0,this.typeWriterEffect(this.placeHolderTexts[this.placeHolderIndex])}}class ProductTypeFilter extends SearchFeature{constructor(host){super(host),this.productTypeSelector=host.querySelector(".js-product-type"),this.input=host.querySelector('input[type="search"]'),this.boundFilterChange=this.handleFilterChange.bind(this)}init(){this.productTypeSelector&&this.productTypeSelector.addEventListener("change",this.boundFilterChange)}destroy(){this.productTypeSelector&&this.productTypeSelector.removeEventListener("change",this.boundFilterChange)}handleFilterChange(){this.applyFilter(),this.input.value.trim()&&(this.host.dataset?.disabled||this.host.features.search.onChange())}getFilter(){return this.productTypeSelector?.value.replace(" ","+")||""}applyFilter(){const cloneNode=this.input.cloneNode(!0);cloneNode.setAttribute("type","hidden"),cloneNode.value="";const productTypeFilter=this.getFilter();productTypeFilter!==""&&(cloneNode.value+="product_type:"+productTypeFilter,this.input.value!==""&&(cloneNode.value+=" AND ")),cloneNode.value+=this.input.value,this.input.removeAttribute("name"),this.input.insertAdjacentElement("afterend",cloneNode)}}class KeyboardManager extends SearchFeature{constructor(host){super(host),this.input=host.querySelector('input[type="search"]'),this.boundShortcutHandler=this.handleShortcut.bind(this)}init(){document.addEventListener("keydown",this.boundShortcutHandler)}destroy(){document.removeEventListener("keydown",this.boundShortcutHandler)}handleShortcut(event){const key=navigator.platform.toUpperCase().indexOf("MAC")>=0?"Meta":"Control";(event.key==="/"||event.key==="k"&&(event.metaKey||event.ctrlKey))&&(event.preventDefault(),this.input.focus())}}class PredictiveSearchCore extends SearchFeature{constructor(host){super(host),this.cachedResults={},this.input=host.querySelector('input[type="search"]'),this.predictiveSearchResults=host.querySelector(".js-search-output-wrapper"),this.outputWrapper=host.querySelector(".js-search-output-wrapper"),this.statusElement=host.querySelector(".predictive-search-status"),this.isOpen=!1,this.noResults=!1,this.show_collections=host.dataset.collections==="true",this.boundHandlers={onChange:debounce(this.onChange.bind(this),300),onFocus:this.onFocus.bind(this),onFocusOut:this.onFocusOut.bind(this),onKeyup:this.onKeyup.bind(this),onKeydown:this.onKeydown.bind(this)}}init(){this.host.dataset?.disabled||(this.setupEventListeners(),this.saveSuggestions())}destroy(){this.removeEventListeners()}setupEventListeners(){this.input.addEventListener("input",this.boundHandlers.onChange),this.input.addEventListener("focus",this.boundHandlers.onFocus),this.host.addEventListener("focusout",this.boundHandlers.onFocusOut),this.host.addEventListener("keyup",this.boundHandlers.onKeyup),this.host.addEventListener("keydown",this.boundHandlers.onKeydown)}removeEventListeners(){this.input.removeEventListener("input",this.boundHandlers.onChange),this.input.removeEventListener("focus",this.boundHandlers.onFocus),this.host.removeEventListener("focusout",this.boundHandlers.onFocusOut),this.host.removeEventListener("keyup",this.boundHandlers.onKeyup),this.host.removeEventListener("keydown",this.boundHandlers.onKeydown)}saveSuggestions(){this.suggestions=this.outputWrapper.innerHTML}getQuery(){return this.input.value.trim()}onChange(){const searchTerm=this.getQuery();if(this.host.querySelector(".js-error-message").style.display="",!searchTerm.length){this.showSuggestions();return}this.getSearchResults(searchTerm)}onFocus(){const searchTerm=this.getQuery();if(!searchTerm.length){this.showSuggestions();return}this.host.getAttribute("results")==="true"?this.open():this.getSearchResults(searchTerm)}onFocusOut(e){e.target.getAttribute("aria-label")==="minus"||e.target.getAttribute("aria-label")==="delete"||setTimeout(()=>{this.host.contains(document.activeElement)||this.close()})}onKeyup(event){switch(event.preventDefault(),event.code){case"Escape":this.close();break;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()}showSuggestions(){this.host.dataset?.disabled||(this.outputWrapper.innerHTML=this.suggestions,this.host.setAttribute("open",!0),this.input.setAttribute("aria-expanded",!0))}switchOption(direction){if(!this.host.getAttribute("open"))return;const moveUp=direction==="up",selectedElement=this.host.querySelector('[aria-selected="true"]'),allVisibleElements=Array.from(this.host.querySelectorAll("li, button.predictive-search__item")).filter(element=>element.offsetParent!==null);let activeElementIndex=0;if(moveUp&&!selectedElement)return;let selectedElementIndex=allVisibleElements.findIndex(element=>element===selectedElement);if(this.statusElement&&(this.statusElement.textContent=""),!moveUp&&selectedElement?activeElementIndex=selectedElementIndex===allVisibleElements.length-1?0:selectedElementIndex+1:moveUp&&(activeElementIndex=selectedElementIndex===0?allVisibleElements.length-1:selectedElementIndex-1),activeElementIndex===selectedElementIndex)return;const activeElement=allVisibleElements[activeElementIndex];activeElement.setAttribute("aria-selected",!0),selectedElement&&selectedElement.setAttribute("aria-selected",!1),this.input.setAttribute("aria-activedescendant",activeElement.id)}selectOption(){const selectedProduct=this.host.querySelector('[aria-selected="true"] a, [aria-selected="true"] button');selectedProduct&&selectedProduct.click()}async getSearchResults(searchTerm){let queryKey=searchTerm.replace(" ","+").toLowerCase();const productTypeFilter=this.host.features.productTypeFilter?.getFilter()||"";if(productTypeFilter!==""&&(queryKey=`product_type:${productTypeFilter} AND ${queryKey}`),this.setLiveRegionLoadingState(),this.cachedResults[queryKey]){this.noResults=!1,this.renderSearchResults(this.cachedResults[queryKey]);return}try{const response=await fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(queryKey)}&${encodeURIComponent("resources[type]")}=product${this.show_collections?",collection":""}&section_id=api--search--predictive`);if(!response.ok)throw new Error(response.status);const text=await response.text(),resultsMarkup=new DOMParser().parseFromString(text,"text/html").querySelector("#shopify-section-api--search--predictive"),noResultsItem=resultsMarkup.querySelector("#no-results"),noResultsText=this.host.querySelector(".js-error-message");this.noResults=!1,noResultsItem?(this.noResults=!0,noResultsText.innerHTML=noResultsItem.innerHTML):(this.cachedResults[queryKey]=resultsMarkup.innerHTML,noResultsText.innerHTML=""),this.renderSearchResults(resultsMarkup.innerHTML)}catch(error){throw this.close(),error}}setLiveRegionLoadingState(){this.statusElement=this.statusElement||this.host.querySelector(".predictive-search-status"),this.loadingText=this.loadingText||this.host.getAttribute("data-loading-text"),this.setLiveRegionText(this.loadingText),this.host.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.noResults?(this.host.querySelector(".js-error-message").style.display="block",this.outputWrapper.innerHTML=""):(this.host.querySelector(".js-error-message").style.display="",this.outputWrapper.innerHTML=resultsMarkup,this.host.setAttribute("results",!0),this.setLiveRegionResults(),this.open())}setLiveRegionResults(){this.host.removeAttribute("loading"),this.setLiveRegionText(this.host.querySelector("[data-predictive-search-live-region-count-value]").textContent)}open(){this.host.setAttribute("open",!0),this.input.setAttribute("aria-expanded",!0),this.isOpen=!0}close(clearSearchTerm=!1){clearSearchTerm&&(this.input.value="",this.host.removeAttribute("results"),this.predictiveSearchResults.innerHTML="");const selected=this.host.querySelector('[aria-selected="true"]');selected&&selected.setAttribute("aria-selected",!1),this.input.setAttribute("aria-activedescendant",""),this.host.removeAttribute("open"),this.input.setAttribute("aria-expanded",!1),this.isOpen=!1}}class PredictiveSearch extends HTMLElement{constructor(){super(),this.features={placeholders:new PlaceholderManager(this),productTypeFilter:new ProductTypeFilter(this),

1keyboard:new KeyboardManager(this),search:new PredictiveSearchCore(this)}}connectedCallback(){this.features.placeholders.init(),this.features.keyboard.init(),this.features.productTypeFilter.init(),this.dataset?.disabled||this.features.search.init(),this.querySelector('form[role="search"]').addEventListener("submit",this.handleFormSubmit.bind(this))}disconnectedCallback(){Object.values(this.features).forEach(feature=>feature.destroy?.())}handleFormSubmit(event){if(this.dataset?.disabled){event.preventDefault(),this.removeAttribute("data-disabled"),setTimeout(()=>{this.closest("form").submit()},1e3);return}this.features.productTypeFilter.applyFilter(),(!this.features.search.getQuery().length||this.querySelector('[aria-selected="true"] a'))&&event.preventDefault()}}customElements.define("predictive-search",PredictiveSearch);
2//# sourceMappingURL=/cdn/shop/t/30/assets/predictive-search.js.map?v=4524914117864370371758274356