/*! Copyright (c) Safe As Milk. All rights reserved. */import{debounce}from"utils";class PredictiveSearch extends HTMLElement{#boundOnChange;#boundOnFocus;#boundOnFocusOut;#boundOnKeyUp;#boundOnResultsClick;#boundSetDrawerContentMaxHeight;constructor(){super(),this.type=this.getAttribute("type"),this.isDropdown=this.hasAttribute("dropdown"),this.#boundOnChange=debounce(this.#onChange.bind(this),250),this.#boundOnKeyUp=this.#onKeyup.bind(this),this.#boundOnFocus=this.#onFocus.bind(this),this.#boundOnFocusOut=this.#onFocusOut.bind(this),this.#boundOnResultsClick=this.#onResultsClick.bind(this),this.#boundSetDrawerContentMaxHeight=debounce(this.#setDrawerContentMaxHeight.bind(this),50)}connectedCallback(){this.#addSpinner(),this.input=this.querySelector('input[type="search"]'),this.results=this.querySelector("predictive-search-results"),this.additionalContent=this.parentElement.querySelector(".js-search-content"),this.searchTerm="",this.abortController=null,this.#updateLoading(),this.input.addEventListener("input",this.#boundOnChange),this.addEventListener("keyup",this.#boundOnKeyUp),this.addEventListener("keydown",PredictiveSearch.#onKeydown),this.isDropdown&&(this.input.addEventListener("focus",this.#boundOnFocus),this.addEventListener("focusout",this.#boundOnFocusOut)),this.results.addEventListener("click",this.#boundOnResultsClick),this.type==="sidebar"&&window.visualViewport.addEventListener("resize",this.#boundSetDrawerContentMaxHeight)}disconnectedCallback(){this.input.removeEventListener("input",this.#boundOnChange),this.removeEventListener("keyup",this.#boundOnKeyUp),this.removeEventListener("keydown",PredictiveSearch.#onKeydown),this.isDropdown&&(this.input.removeEventListener("focus",this.#boundOnFocus),this.removeEventListener("focusout",this.#boundOnFocusOut)),this.results.removeEventListener("click",this.#boundOnResultsClick),this.type==="sidebar"&&window.visualViewport.removeEventListener("resize",this.#boundSetDrawerContentMaxHeight)}getQuery(){return this.input.value.trim()}#onKeyup(event){switch(this.getQuery().length||this.close(!0),event.preventDefault(),event.code){case"ArrowUp":this.switchOption("up");break;case"ArrowDown":this.switchOption("down");break;case"Enter":this.selectOption();break;default:break}}static#onKeydown(event){(event.code==="ArrowUp"||event.code==="ArrowDown")&&event.preventDefault()}#onChange(){this.abortController&&this.abortController.abort();const searchTerm=this.getQuery();if(this.searchTerm=searchTerm,!searchTerm.length){this.close(),this.#updateLoading();return}this.getSearchResults(searchTerm)}#onFocus(){const currentSearchTerm=this.getQuery();currentSearchTerm.length&&(this.searchTerm!==currentSearchTerm?this.#onChange():this.getAttribute("results")==="true"?this.open():this.getSearchResults(this.searchTerm))}#onFocusOut(){this.abortController&&this.abortController.abort(),this.#updateLoading(),setTimeout(()=>{this.contains(document.activeElement)||this.close()})}#onResultsClick(e){const link=e.target.closest("a");if(!link)return;const searchUrl=this.getAttribute("search-url"),[linkPath]=link.getAttribute("href").split("?");if(searchUrl&&searchUrl===linkPath)return;const searchForm=link.closest("search-form");searchForm&&searchForm.addFormStateToRecentSearches()}getSearchResults(searchTerm){const searchUrl=this.getAttribute("search-url")||"/search";this.abortController=new AbortController,this.#updateLoading(!0),fetch(`${searchUrl}/suggest?q=${searchTerm}&section_id=predictive-search`,{signal:this.abortController.signal}).then(response=>{if(!response.ok){const error=new Error(response.status);throw this.close(),error}return response.text()}).then(text=>{const resultsMarkup=new DOMParser().parseFromString(text.replaceAll('id="predictive-search',`id="${this.type}-predictive-search`).replaceAll('aria-labelledby="predictive-search',`aria-labelledby="${this.type}-predictive-search`),"text/html").querySelector("#shopify-section-predictive-search").innerHTML;this.results.innerHTML=resultsMarkup,this.isDropdown&&this.results.querySelector(".predictive-search__empty-heading")&&this.results.querySelector(".predictive-search__empty-heading").remove(),this.open(),this.#updateLoading(),this.input.setAttribute("aria-activedescendant","")}).catch(error=>{if(!(error.name&&error.name==="AbortError"))throw this.#updateLoading(),this.close(),error}).finally(()=>{this.abortController=null})}open(){this.setAttribute("open",!0),this.input.setAttribute("aria-expanded","true"),this.spinner.setAttribute("hidden","true"),this.results.removeAttribute("hidden"),this.additionalContent&&this.additionalContent.setAttribute("hidden",!0)}close(){this.removeAttribute("open"),this.input.setAttribute("aria-expanded","false"),this.spinner.setAttribute("hidden","true"),this.results.setAttribute("hidden","true"),this.additionalContent&&this.additionalContent.removeAttribute("hidden")}switchOption(direction){if(!this.getAttribute("open"))return;const moveUp=direction==="up",selectedElement=this.querySelector('[aria-selected="true"]'),allVisibleElements=Array.from(this.querySelectorAll("predictive-search-results li, button.predictive-search__btn"));let activeElementIndex=0;if(moveUp&&!selectedElement)return;let selectedElementIndex=-1,i=0;for(;selectedElementIndex===-1&&i<=allVisibleElements.length;)allVisibleElements[i]===selectedElement&&(selectedElementIndex=i),i+=1;if(!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);const resultsContainer=this.querySelector(".predictive-search__panels");resultsContainer.offsetHeight<resultsContainer.scrollHeight&&!activeElement.classList.contains("predictive-search__btn")&&(activeElement.getBoundingClientRect().top<resultsContainer.getBoundingClientRect().top&&resultsContainer.scrollTo({top:activeElement.offsetTop,behavior:"instant"}),activeElement.getBoundingClientRect().bottom>resultsContainer.getBoundingClientRect().bottom-72&&resultsContainer.scrollTo({top:activeElement.offsetTop-(resultsContainer.offsetHeight-activeElement.offsetHeight-72),behavior:"instant"}))}selectOption(){const selectedOption=this.querySelector('[aria-selected="true"] a, button[aria-selected="true"]');selectedOption&&selectedOption.click()}#addSpinner(){const spinner=document.createElement("div");spinner.classList.add("search-form__loader"),spinner.setAttribute("hidden",!0),spinner.innerHTML=`
      <div class="theme-spinner theme-spinner--small">
        <div class="theme-spinner__border"></div>
        <div class="theme-spinner__border"></div>
        <div class="theme-spinner__border"></div>
        <div class="theme-spinner__border"></div>
      </div>
    `,this.spinner=spinner,this.querySelector(".search__form-input-wrapper").append(spinner)}#updateLoading(isLoading=!1){isLoading?(this.classList.add("is-loading"),this.spinner&&this.spinner.removeAttribute("hidden")):(this.classList.remove("is-loading"),this.spinner&&this.spinner.setAttribute("hidden",!0))}#setDrawerContentMaxHeight(){const searchDraw=this;if(searchDraw&&searchDraw.closest(".modal__content")){const sidebarSearchForm=searchDraw.querySelector(".search__form-input-wrapper");window.visualViewport.height<window.innerHeight?searchDraw.style.setProperty("--max-content-height",`${window.visualViewport.height-(sidebarSearchForm?sidebarSearchForm.offsetHeight:0)}px`):searchDraw.style.removeProperty("--max-content-height")}}}customElements.define("predictive-search",PredictiveSearch);
//# sourceMappingURL=/cdn/shop/t/100/assets/predictive-search.js.map?v=101842495416764002911751575324