class PredictiveSearch extends HTMLElement{constructor(){super(),this.cachedResults={},this.input=this.querySelector('#search_mini_form input[name="q"]'),this.predictiveSearchResults=this.querySelector("[data-predictive-search]"),this.isOpen=!1,this.displayMode="grid",this.querySearchWrap=".quick-search-wrap",this.dataMode="data-mode",this.modeActiveClass="active",this.jsToggleModeSelector=".js-toggle-mode",this.mobileButtonSelector=".page-header .showsearch",this.blockSearchSelector=".page-header .block-search",this.buttonClearInput=document.querySelector(".js-clear-input"),this.fsAutocompleteIsLoadedClass="fs-autocomplete-loaded",this.fsAutocompleteIsLoaded=!1,window.FastAutocomplete?(this.fsAutocompleteIsLoaded=!0,document.body.classList.add(this.fsAutocompleteIsLoadedClass)):window.addEventListener("fast-autocomplete-ready",function(){this.fsAutocompleteIsLoaded=!0,document.body.classList.add(this.fsAutocompleteIsLoadedClass)}.bind(this)),this.setupEventListeners()}setupEventListeners(){this.querySelector("#search_mini_form").addEventListener("submit",this.onFormSubmit.bind(this)),this.input.addEventListener("input",debounce(e=>{this.onChange(e)},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));var t,s=this,i=document.querySelector(this.mobileButtonSelector);i&&(t=document.querySelector(s.blockSearchSelector),i.addEventListener("click",function(e){e.preventDefault(),this.classList.toggle(s.modeActiveClass),t.classList.toggle(s.modeActiveClass)}),document.addEventListener("closeMobileInputEvent",e=>{i.classList.remove(s.modeActiveClass),t.classList.remove(s.modeActiveClass)}),document.body.addEventListener("click",function(e){e=e.target;e.classList.contains("showsearch")||e.closest(".showsearch")||e.classList.contains("block-search")||e.closest(".block-search")||(i.classList.remove(s.modeActiveClass),t.classList.remove(s.modeActiveClass))}),this.buttonClearInput.addEventListener("click",function(e){e.preventDefault(),s.input.value="",s.input.dispatchEvent(new Event("input"))}))}getQuery(){return this.input.value.trim()}onChange(){var e=this.getQuery();this.buttonClearInput&&(e.length?this.buttonClearInput.classList.add("active"):this.buttonClearInput.classList.remove("active")),this.fsAutocompleteIsLoaded||(e.length?this.getSearchResults(e):this.close(!0))}onFormSubmit(e){this.getQuery().length&&!this.querySelector('[aria-selected="true"] a')||e.preventDefault()}onFocus(){var e=this.getQuery();e.length&&!this.fsAutocompleteIsLoaded&&("true"===this.getAttribute("results")?this.open():this.getSearchResults(e))}onFocusOut(){this.fsAutocompleteIsLoaded||setTimeout(()=>{this.contains(document.activeElement)||this.close()})}onKeyup(e){if(!this.fsAutocompleteIsLoaded)switch(this.getQuery().length||this.close(!0),e.preventDefault(),e.code){case"ArrowUp":this.switchOption("up");break;case"ArrowDown":this.switchOption("down");break;case"Enter":this.selectOption()}}onKeydown(e){"ArrowUp"!==e.code&&"ArrowDown"!==e.code||e.preventDefault()}switchOption(t){if(this.getAttribute("open")){var t="up"===t,s=this.querySelector('[aria-selected="true"]'),i=this.querySelectorAll("li");let e=this.querySelector("li");t&&!s||(this.statusElement.textContent="",!t&&s?e=s.nextElementSibling||i[0]:t&&(e=s.previousElementSibling||i[i.length-1]),e!==s&&(e.setAttribute("aria-selected",!0),s&&s.setAttribute("aria-selected",!1),this.setLiveRegionText(e.textContent),this.input.setAttribute("aria-activedescendant",e.id)))}}selectOption(){var e=this.querySelector('[aria-selected="true"] a, [aria-selected="true"] button');e&&e.click()}getSearchResults(e){let t=e.replace(" ","-").toLowerCase();this.setLiveRegionLoadingState(),this.cachedResults[t]?this.renderSearchResults(this.cachedResults[t]):fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(e)}&${encodeURIComponent("resources[type]")}=product&${encodeURIComponent("resources[limit]")}=10&section_id=predictive-search`).then(e=>{if(e.ok)return e.text();throw e=new Error(e.status),this.close(),e}).then(e=>{e=(new DOMParser).parseFromString(e,"text/html").querySelector("#shopify-section-predictive-search").innerHTML;this.cachedResults[t]=e,this.renderSearchResults(e)}).catch(e=>{throw this.close(),e})}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(e){this.statusElement.setAttribute("aria-hidden","false"),this.statusElement.textContent=e,setTimeout(()=>{this.statusElement.setAttribute("aria-hidden","true")},1e3)}renderSearchResults(e){var t=this;this.predictiveSearchResults.innerHTML=e,this.setAttribute("results",!0),this.setLiveRegionResults();if(this.classList.contains("minisearch")){var s=this.querySelectorAll(t.jsToggleModeSelector);if(s){this.removeAllActiveMode();for(var i=0;i<s.length;i++){var o=s[i].getAttribute(t.dataMode);o===t.displayMode&&(s[i].classList.add(t.modeActiveClass),t.displayMode=o),s[i].addEventListener("click",function(e){e.preventDefault();e=this.getAttribute(t.dataMode);t.removeAllActiveMode(),this.classList.add(t.modeActiveClass),t.displayMode=e,t.querySelector(t.querySearchWrap).setAttribute(t.dataMode,e)})}}}this.open()}removeAllActiveMode(){var t=this,e=this.querySelectorAll(this.jsToggleModeSelector);[].forEach.call(e,function(e){e.classList.remove(t.modeActiveClass)})}setLiveRegionResults(){this.removeAttribute("loading");var e=this.querySelector("[data-predictive-search-live-region-count-value]");e&&this.setLiveRegionText(e.textContent)}getResultsMaxHeight(){return this.resultsMaxHeight=window.innerHeight-document.getElementById("shopify-section-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}close(e=!1){e&&(this.input.value="",this.removeAttribute("results"));e=this.querySelector('[aria-selected="true"]');e&&e.setAttribute("aria-selected",!1),this.input.setAttribute("aria-activedescendant",""),this.removeAttribute("open"),this.input.setAttribute("aria-expanded",!1),this.resultsMaxHeight=!1,this.predictiveSearchResults.removeAttribute("style"),this.isOpen=!1}}customElements.define("predictive-search",PredictiveSearch);