if(!customElements.get("custom-select")){class CustomSelect extends HTMLElement{constructor(){super(),this.selectEl=this.querySelector("select"),this.createCustomSelect(),this.dropdown=this.querySelector(".js-dropdown"),this.btnToggleDropdown=this.querySelector(".js-btn-dropdown"),this.listOptions=this.querySelector(".js-list-options"),this.isExpanded=!1,this.setBtnWidth(),window.addEventListener("DOMContentLoaded",()=>{this.setBtnWidth()}),window.addEventListener("shopify:section:load",()=>{clearTimeout(this.loadTimeout),this.loadTimeout=setTimeout(()=>{this.setBtnWidth()},300)}),window.addEventListener("resize",()=>{window.innerWidth<mobileMediumWidth||+this.btnToggleDropdown.style.width.replace("px","")===this.dropdown.clientWidth||(this.btnToggleDropdown.style.width=`${this.dropdown.clientWidth}px`)}),this.btnToggleDropdown.addEventListener("click",e=>{if(e.preventDefault(),this.classList.contains("is-expanded")){this.hideDropdown();return}this.showDropdown()}),this.btnToggleDropdown.addEventListener("keydown",e=>{if(e.key.includes("Arrow")){e.preventDefault();const isArrowRight=e.key.includes("Right"),isHorizontalArrow=e.key.includes("Left")||isArrowRight;if(this.isExpanded&&isHorizontalArrow)return;const isNextKey=isArrowRight||e.key.includes("Down"),btnOptionSelected=this.listOptions.querySelector(".js-btn-option.is-selected"),selectedOptionParent=btnOptionSelected.parentElement;let prevNextBtnOption=isNextKey?selectedOptionParent.nextElementSibling?.firstElementChild:selectedOptionParent.previousElementSibling?.firstElementChild;prevNextBtnOption||(prevNextBtnOption=isNextKey?this.listOptions.firstElementChild.firstElementChild:this.listOptions.lastElementChild.firstElementChild),this.changeSelectedOption(btnOptionSelected,prevNextBtnOption);return}if(!this.isExpanded)return;const isEscape=e.key==="Escape",isTab=e.key==="Tab";!isEscape&&!isTab||(e.preventDefault(),this.hideDropdown())}),this.listOptions.addEventListener("click",e=>{if(!e.target.classList.contains("js-btn-option"))return;e.preventDefault();const btnOption=e.target,isSelected=btnOption.classList.contains("is-selected");this.hideDropdown(),!isSelected&&this.changeSelectedOption(void 0,btnOption)}),document.addEventListener("click",e=>{!this.isExpanded||e.target.closest("custom-select")===this||this.hideDropdown()})}setBtnWidth(){this.btnToggleDropdown.style.width=`${this.dropdown.clientWidth}px`}createCustomSelect(){const options=this.querySelectorAll("option"),selectedOption=this.selectEl.querySelector('option[selected="selected"]');let optionsMarkup="";options.forEach(option=>{const optionMarkup=`
          <li class="custom-select__item">
            <button
              type="button"
              class="custom-select__option button-reset js-btn-option ${option.selected?"is-selected":""}"
              data-value="${option.value}"
              tabindex="-1"
              aria-selected="${option.selected}"
            >${option.textContent}</button>
          </li><!-- /.custom-select__item -->
        `;optionsMarkup+=optionMarkup});const markup=`
        <div class="custom-select__wrapper">
          <button
            type="button"
            class="custom-select__btn button-reset focus-inset js-btn-dropdown"
            aria-controls="${this.dataset.dropdownId}"
            aria-expanded="false"
          >${selectedOption.textContent}</button>

          <div class="custom-select__dropdown js-dropdown" id="${this.dataset.dropdownId}">
            <ul class="custom-select__items list-unstyled js-list-options">
              ${optionsMarkup}
            </ul><!-- /.list-unstyled -->
          </div><!-- /.custom-select__dropdown -->
        </div><!-- /.custom-select__wrapper -->
      `;this.insertAdjacentHTML("afterbegin",markup),this.dataset.value=selectedOption.value}changeSelectedOption(selectedOption=this.listOptions.querySelector(".js-btn-option.is-selected"),newSelectedOption){this.btnToggleDropdown.textContent=newSelectedOption.textContent,this.dataset.value=newSelectedOption.dataset.value,newSelectedOption.classList.add("is-selected"),newSelectedOption.setAttribute("aria-selected",!0),selectedOption.classList.remove("is-selected"),selectedOption.setAttribute("aria-selected",!1);const nativeSelectedOption=this.selectEl.querySelector('option[selected="selected"]'),newNativeSelectedOption=this.selectEl.querySelector(`option[value="${this.dataset.value}"]`);nativeSelectedOption.removeAttribute("selected"),newNativeSelectedOption.setAttribute("selected","selected");const inputEvent=new Event("input",{bubbles:!0});this.selectEl.dispatchEvent(inputEvent)}showDropdown(){this.isExpanded=!0,this.classList.add("is-expanded"),this.btnToggleDropdown.setAttribute("aria-expanded",!0)}hideDropdown(){this.isExpanded=!1,this.classList.remove("is-expanded"),this.btnToggleDropdown.setAttribute("aria-expanded",!1)}}customElements.define("custom-select",CustomSelect)}
//# sourceMappingURL=/cdn/shop/t/12/assets/custom-select.js.map?v=135299812221890948511682758930
