if(!customElements.get("hotspots-image")){class HotspotsImage extends HTMLElement{constructor(){super(),this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){window.removeEventListener("on:debounced-resize",this.resizeHandler)}handleClick(evt){if(!evt.target.matches(".hotspot__btn"))return;const hotspot=evt.target.parentNode;hotspot===this.activeHotspot?this.closeActiveHotspot(evt):(this.activeHotspot&&this.closeActiveHotspot(evt),this.activateHotspot(hotspot))}handleClickOutside(evt){evt.target.matches(".hotspot__btn")||evt.target.matches(".hotspot__card")||this.activeHotspot&&this.closeActiveHotspot(evt)}handleKeyup(evt){evt.key==="Escape"&&this.activeHotspot&&this.closeActiveHotspot(evt)}handleTransitionEnd(evt){this.activeHotspot||evt.propertyName!=="opacity"||(this.classList.add("overflow-hidden"),this.activeCard.style=null,this.activeCard=null,this.removeEventListener("transitionend",this.transitionHandler))}activateHotspot(hotspot){this.activeCard=hotspot.querySelector(".hotspot__card"),this.checkCardPosition(),this.classList.remove("overflow-hidden"),this.setHotspotActiveState(hotspot,!0),trapFocus(hotspot),this.clickOutsideHandler=this.clickOutsideHandler||this.handleClickOutside.bind(this),this.keyUpHandler=this.handleKeyup||this.handleKeyup.bind(this),this.resizeHandler=this.resizeHandler||this.closeActiveHotspot.bind(this),document.addEventListener("click",this.clickOutsideHandler),document.addEventListener("keyup",this.keyUpHandler),window.addEventListener("on:debounced-resize",this.resizeHandler)}closeActiveHotspot(evt){evt.type!=="on:debounced-resize"&&(this.transitionHandler=this.transitionHandler||this.handleTransitionEnd.bind(this),this.addEventListener("transitionend",this.transitionHandler)),this.activeHotspot&&(this.setHotspotActiveState(this.activeHotspot,!1),removeTrapFocus(),evt.type==="on:debounced-resize"&&(this.classList.add("overflow-hidden"),this.activeCard.style=null,this.activeCard=null)),document.removeEventListener("click",this.clickOutsideHandler),document.removeEventListener("keyup",this.keyUpHandler)}checkCardPosition(){const cardRect=this.activeCard.getBoundingClientRect(),imageRect=this.getBoundingClientRect();cardRect.bottom>document.documentElement.clientHeight&&(this.activeCard.style.top="auto",this.activeCard.style.bottom="calc(100% + 12px)"),theme.mediaMatches.md&&cardRect.right>window.innerWidth-20?this.activeCard.style.left=`calc(50% - ${cardRect.right-window.innerWidth+45}px)`:theme.mediaMatches.md&&cardRect.left<20?this.activeCard.style.left=`calc(50% - ${cardRect.left-35}px)`:!theme.mediaMatches.md&&cardRect.right>imageRect.right?this.activeCard.style.left=`calc(50% - ${cardRect.right-imageRect.width+35}px)`:!theme.mediaMatches.md&&cardRect.left<imageRect.left&&(this.activeCard.style.left=`calc(50% - ${cardRect.left-35}px)`)}setHotspotActiveState(hotspot,active){hotspot.classList.toggle("is-active",active),hotspot.querySelector(".hotspot__btn").setAttribute("aria-expanded",active),hotspot.querySelector(".hotspot__card").setAttribute("aria-hidden",!active),this.activeHotspot=active?hotspot:null}}customElements.define("hotspots-image",HotspotsImage)}
//# sourceMappingURL=/cdn/shop/t/20/assets/hotspots-image.js.map?v=26831080853938289531723850759