class FabricModal extends HTMLElement{constructor(){super(),this.initializeElements(),this.addEventListeners()}initializeElements(){this.modal=this.querySelector(".modal"),this.overlay=this.querySelector(".modal-overlay"),this.closers=this.querySelectorAll(".modal-close"),this.fabricSelectors=this.querySelectorAll(".fabric-selector"),this.image=this.querySelector(".fabric-image"),this.description=this.querySelector(".fabric-description"),this.mood=this.querySelector(".fabric-mood"),this.feel=this.querySelector(".fabric-feel"),this.dresses=this.querySelector(".fabric-dresses"),this.swatches=this.querySelector(".fabric-swatches")}addEventListeners(){const trigger=document.getElementById("fabric-modal-trigger");trigger&&trigger.addEventListener("click",this.showModal.bind(this)),this.overlay.addEventListener("click",this.hideModal.bind(this)),this.closers.forEach(closer=>{closer.addEventListener("click",this.hideModal.bind(this))}),this.fabricSelectors.forEach(selector=>{selector.addEventListener("click",e=>{e.preventDefault(),this.selected=String(selector.dataset.fabric.toLowerCase()),this.dataset.selectedFabric=this.selected,this.toggleFabric(e)}),selector.addEventListener("keydown",e=>{(e.key==="Enter"||e.keyCode===13)&&(e.preventDefault(),this.selected=String(selector.dataset.fabric.toLowerCase()),this.dataset.selectedFabric=this.selected,this.toggleFabric(e))})}),this.modal.addEventListener("keydown",e=>{if(!(e.key==="Tab"||e.keyCode===9))return;const focusableElements=this.getFocusableElements(),focusedIndex=focusableElements.indexOf(document.activeElement);e.shiftKey?focusedIndex===0&&(focusableElements[focusableElements.length-1].focus(),e.preventDefault()):focusedIndex===focusableElements.length-1&&(e.preventDefault(),focusableElements[0].focus())})}getFocusableElements(){return[...this.modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')]}showModal(e){this.modal.classList.remove("hidden"),this.overlay.classList.remove("hidden"),e.stopPropagation()}hideModal(e){e.preventDefault(),this.modal.classList.add("hidden"),this.overlay.classList.add("hidden"),e.stopPropagation()}toggleFabric(){this.fabric=this.querySelector(`.fabric-data[data-fabric="${this.selected}"]`),this.fabric&&(this.image.src=this.fabric.dataset.image,this.description.innerText=this.fabric.dataset.description,this.mood.innerText=this.fabric.dataset.mood,this.feel.innerText=this.fabric.dataset.feel,this.dresses.href=this.fabric.dataset.dresses,this.dresses.innerText=this.fabric.dataset.ctaText,this.swatches.href=this.fabric.dataset.swatches,this.swatches.innerText=this.fabric.dataset.ctaSecond,this.fabricSelectors.forEach(selector=>{selector.classList.remove("font-semibold","underline")}),this.highlight=this.querySelector(`.fabric-selector[data-fabric="${this.selected}"]`),this.highlight.classList.add("font-semibold","underline"))}}customElements.define("fabric-modal",FabricModal); //# sourceMappingURL=/cdn/shop/t/2918/assets/product--fabric-101-modal.js.map