1import{Component}from"@theme/component";import{debounce,requestIdleCallback}from"@theme/utilities";export class AnchoredPopoverComponent extends Component{requiredRefs=["popover","trigger"];interaction_delay=200;#popoverTrigger=null;#onTriggerEnter=()=>{const{trigger,popover}=this.refs;trigger.dataset.hoverActive="true",popover.matches(":popover-open")||(this.#popoverTrigger=setTimeout(()=>{trigger.matches("[data-hover-active]")&&popover.showPopover()},this.interaction_delay))};#onTriggerLeave=()=>{const{trigger,popover}=this.refs;delete trigger.dataset.hoverActive,this.#popoverTrigger&&clearTimeout(this.#popoverTrigger),popover.matches(":popover-open")&&(this.#popoverTrigger=setTimeout(()=>{popover.hidePopover()},this.interaction_delay))};#onPopoverEnter=()=>{this.#popoverTrigger&&clearTimeout(this.#popoverTrigger)};#onPopoverLeave=()=>{const{popover}=this.refs;this.#popoverTrigger=setTimeout(()=>{popover.hidePopover()},this.interaction_delay)};#updatePosition=async()=>{const{popover,trigger}=this.refs;if(!popover||!trigger)return;const triggerPositions=trigger.getBoundingClientRect(),verticalPositions=(this.#getVerticalPositionAnchor()??trigger).getBoundingClientRect();popover.style.setProperty("--anchor-top",`${verticalPositions.top}`),popover.style.setProperty("--anchor-right",`${window.innerWidth-triggerPositions.right}`),popover.style.setProperty("--anchor-bottom",`${window.innerHeight-verticalPositions.bottom}`),popover.style.setProperty("--anchor-left",`${triggerPositions.left}`),popover.style.setProperty("--anchor-height",`${verticalPositions.height}`),popover.style.setProperty("--anchor-width",`${triggerPositions.width}`)};#getVerticalPositionAnchor(){const internalAnchor=this.refs.verticalPositionAnchor;if(internalAnchor instanceof HTMLElement)return internalAnchor;const anchorName=this.dataset.verticalPositionAnchor?.trim();if(!anchorName)return null;const selector=`[data-anchor-name="${CSS.escape(anchorName)}"]`,scopedAnchor=this.#queryVerticalPositionAnchor(selector);if(this.#isUsableExternalVerticalPositionAnchor(scopedAnchor))return scopedAnchor;const root=this.getRootNode(),anchor=root instanceof Document||root instanceof ShadowRoot?root.querySelector(selector):null;return this.#isUsableExternalVerticalPositionAnchor(anchor)?anchor:null}#queryVerticalPositionAnchor(selector){const scope=this.closest("[data-anchor-scope], tr, li, section, article, form");if(!(scope instanceof HTMLElement))return null;const anchor=scope.querySelector(selector);return anchor instanceof HTMLElement?anchor:null}#isUsableExternalVerticalPositionAnchor(anchor){if(!(anchor instanceof HTMLElement))return!1;const rect=anchor.getBoundingClientRect();return rect.width>0&&rect.height>0}#resizeListener=debounce(()=>{const popover=this.refs.popover;popover&&popover.matches(":popover-open")&&popover.hidePopover()},100);openDialog(dialogId,event){event.preventDefault();const{popover,trigger}=this.refs,triggerAriaControls=trigger.getAttribute("aria-controls");this.#popoverTrigger!==null&&(clearTimeout(this.#popoverTrigger),this.#popoverTrigger=null),delete trigger.dataset.hoverActive,popover.matches(":popover-open")&&popover.hidePopover();const dialog=document.getElementById(dialogId);typeof dialog?.showDialog=="function"&&(dialog.addEventListener("dialog:close",()=>{(trigger.isConnected?trigger:getTriggerByAriaControls(triggerAriaControls))?.focus()},{once:!0}),dialog.showDialog())}connectedCallback(){super.connectedCallback();const{popover,trigger}=this.refs;this.dataset.closeOnResize&&popover.addEventListener("beforetoggle",event=>{window[event.newState==="open"?"addEventListener":"removeEventListener"]("resize",this.#resizeListener)}),this.dataset.hoverTriggered&&(trigger.addEventListener("pointerenter",this.#onTriggerEnter),trigger.addEventListener("pointerleave",this.#onTriggerLeave),popover.addEventListener("pointerenter",this.#onPopoverEnter),popover.addEventListener("pointerleave",this.#onPopoverLeave)),CSS.supports("position-anchor: --trigger")||(popover.addEventListener("beforetoggle",()=>{this.#updatePosition()}),requestIdleCallback(()=>{this.#updatePosition()}))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.#resizeListener)}}customElements.get("anchored-popover-component")||customElements.define("anchored-popover-component",AnchoredPopoverComponent);
1function getTriggerByAriaControls(ariaControls){if(!ariaControls)return null;const trigger=document.querySelector(`[aria-controls="${CSS.escape(ariaControls)}"]`);return trigger instanceof HTMLElement&&trigger.isConnected?trigger:null} 2//# sourceMappingURL=/cdn/shop/t/2041/assets/anchored-popover.js.map?v=143987075196095667371788183472
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.