@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-popover.js

@@ -1,602 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}";
-
-const PdsPopover$1 = /*@__PURE__*/ proxyCustomElement(class PdsPopover extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsPopoverOpen = createEvent(this, "pdsPopoverOpen", 7);
-        this.pdsPopoverClose = createEvent(this, "pdsPopoverClose", 7);
-        /**
-         * Determines when the popover is active
-         * @defaultValue false
-         */
-        this.active = false;
-        /**
-         * Tracks if the component is still mounted to prevent memory leaks
-         */
-        this.isComponentMounted = true;
-        /**
-         * Reference to the trigger element
-         */
-        this.triggerEl = null;
-        /**
-         * Portal element rendered in document.body
-         */
-        this.portalEl = null;
-        /**
-         * Guard to prevent repositioning loops
-         */
-        this.isRepositioning = false;
-        /**
-         * Debounce timers for performance optimization
-         */
-        this.scrollDebounceTimer = null;
-        this.resizeDebounceTimer = null;
-        /**
-         * Track moved nodes and their placeholders for restoration
-         */
-        this.movedNodes = [];
-        /**
-         * Timestamp when popover was opened (for preventing immediate close)
-         */
-        this.openTimestamp = 0;
-        /**
-         * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
-         * @defaultValue "show"
-         */
-        this.popoverTargetAction = 'show';
-        /**
-         * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
-         * Manual popovers require the consumer to handle the visibility of the popover.
-         */
-        this.popoverType = 'auto';
-        /**
-         * Sets the maximum width of the popover content
-         * @defaultValue 352
-         */
-        this.maxWidth = 352;
-        /**
-         * Determines the preferred position of the popover
-         * @defaultValue "right"
-         */
-        this.placement = 'right';
-        /**
-         * Handles changes to the trigger slot
-         */
-        this.handleTriggerSlotChange = (event) => {
-            const slot = event.target;
-            const assignedElements = slot.assignedElements();
-            // Clean up previous trigger's event listener if it exists
-            if (this.triggerEl != null) {
-                this.triggerEl.removeEventListener('click', this.handleTriggerClick);
-            }
-            if (assignedElements.length > 0) {
-                // Use the first assigned element as the trigger
-                this.triggerEl = assignedElements[0];
-                // Set ARIA attributes to establish relationship between trigger and popover
-                // This mirrors the native Popover API's accessibility behavior
-                if (this.portalEl) {
-                    this.triggerEl.setAttribute('aria-expanded', String(this.active));
-                    this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
-                }
-                // Attach click listener to handle popover visibility
-                this.triggerEl.addEventListener('click', this.handleTriggerClick);
-            }
-            else {
-                this.triggerEl = null;
-            }
-        };
-        /**
-         * Handles changes to the default slot (popover content)
-         * When the popover is active, re-sync content with portal to handle dynamic updates
-         */
-        this.handleContentSlotChange = () => {
-            if (!this.active)
-                return;
-            this.updatePortalContent();
-        };
-        /**
-         * Handles clicks on the trigger element
-         */
-        this.handleTriggerClick = (event) => {
-            // Only prevent default if the trigger is not an anchor with href
-            // This allows link navigation while still controlling popover visibility
-            const composedPath = event.composedPath();
-            const anchorWithHref = composedPath.find((el) => el instanceof HTMLAnchorElement && el.href);
-            if (!anchorWithHref) {
-                event.preventDefault();
-            }
-            // Execute the appropriate action based on popoverTargetAction prop
-            switch (this.popoverTargetAction) {
-                case 'show':
-                    this.show();
-                    break;
-                case 'hide':
-                    this.hide();
-                    break;
-                case 'toggle':
-                default:
-                    this.toggle();
-                    break;
-            }
-        };
-    }
-    componentDidLoad() {
-        var _a;
-        // Bind event handlers for cleanup
-        this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
-        this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
-        this.boundScrollHandler = this.handleScroll.bind(this);
-        this.boundResizeHandler = this.handleResize.bind(this);
-        // Create portal element
-        this.createPortal();
-        // Initialize trigger element by calling slot change handler
-        // This is a fallback for environments where slot change might not fire reliably
-        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
-        if (triggerSlot && this.triggerEl == null) {
-            const CustomEvent = (typeof window !== 'undefined' ? window.Event : global.Event);
-            const slotChangeEvent = new CustomEvent('slotchange');
-            Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });
-            this.handleTriggerSlotChange(slotChangeEvent);
-        }
-    }
-    disconnectedCallback() {
-        this.isComponentMounted = false;
-        // Clean up trigger click event listener
-        if (this.triggerEl != null) {
-            this.triggerEl.removeEventListener('click', this.handleTriggerClick);
-        }
-        // Clean up all event listeners
-        this.removeLightDismissListeners();
-        this.removeScrollAndResizeListeners();
-        // Clear any pending debounce timers
-        this.clearDebounceTimers();
-        // Remove portal from DOM
-        this.removePortal();
-    }
-    /**
-     * Clears any pending debounce timers
-     */
-    clearDebounceTimers() {
-        if (this.scrollDebounceTimer !== null) {
-            clearTimeout(this.scrollDebounceTimer);
-            this.scrollDebounceTimer = null;
-        }
-        if (this.resizeDebounceTimer !== null) {
-            clearTimeout(this.resizeDebounceTimer);
-            this.resizeDebounceTimer = null;
-        }
-    }
-    createPortal() {
-        if (this.portalEl !== null)
-            return;
-        this.portalEl = document.createElement('div');
-        this.portalEl.className = 'pds-popover';
-        // Apply all styles inline since portal is outside shadow DOM
-        this.portalEl.style.position = 'fixed';
-        this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
-        this.portalEl.style.maxWidth = `${this.maxWidth}px`;
-        this.portalEl.style.display = 'none';
-        this.portalEl.style.opacity = '0';
-        this.portalEl.style.visibility = 'hidden';
-        this.portalEl.style.backgroundColor = 'var(--pine-color-background-container)';
-        this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
-        this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
-        this.portalEl.style.margin = 'var(--pine-dimension-none)';
-        this.portalEl.style.padding = 'var(--pine-dimension-md)';
-        // Generate unique ID
-        if (!this.componentId) {
-            const suffix = PdsPopover.instanceCounter++;
-            this.portalEl.id = `pds-popover-portal-${suffix}`;
-        }
-        else {
-            this.portalEl.id = `${this.componentId}-portal`;
-        }
-        // Add accessibility attributes for screen readers
-        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
-        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
-        // Append to body
-        document.body.appendChild(this.portalEl);
-        // Add global focus styles to match Pine design system
-        // This is done after appending to ensure it's part of the document and can access CSS variables
-        this.addPortalFocusStyles();
-    }
-    /**
-     * Adds Pine design system focus styles and dark mode border to the portal element
-     * Uses CSS variables from Pine's design tokens
-     */
-    addPortalFocusStyles() {
-        if (!this.portalEl)
-            return;
-        const portalId = this.portalEl.id;
-        // Check if style element already exists
-        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
-        if (existingStyle)
-            return;
-        // Create style element with Pine's focus ring styles and dark mode border
-        const styleEl = document.createElement('style');
-        styleEl.setAttribute('data-pds-popover-focus', portalId);
-        styleEl.textContent = `
-      #${portalId}:focus {
-        outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
-        outline-offset: var(--pine-border-width, 1px);
-      }
-      #${portalId}:focus:not(:focus-visible) {
-        outline: none;
-      }
-      [data-theme="dark"] #${portalId} {
-        border: var(--pine-border);
-      }
-    `;
-        document.head.appendChild(styleEl);
-    }
-    /**
-     * Moves slot content into portal (preserves event handlers and component instances)
-     */
-    updatePortalContent() {
-        var _a;
-        if (!this.portalEl)
-            return;
-        const contentSlotWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-popover__content-slot-wrapper');
-        const defaultSlot = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('slot');
-        if (defaultSlot) {
-            const assignedNodes = defaultSlot.assignedNodes();
-            // Move each node into portal and track with placeholder for restoration
-            assignedNodes.forEach(node => {
-                var _a;
-                // Skip if node is already in the portal or already tracked
-                const isAlreadyInPortal = node.parentNode === this.portalEl;
-                const isAlreadyTracked = this.movedNodes.some(moved => moved.node === node);
-                if (isAlreadyInPortal || isAlreadyTracked) {
-                    return;
-                }
-                // Create a placeholder comment to mark original position
-                const placeholder = document.createComment('pds-popover-placeholder');
-                // Insert placeholder before moving the node
-                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(placeholder, node);
-                // Move the actual node to portal (preserves all handlers and state)
-                this.portalEl.appendChild(node);
-                // Track for restoration
-                this.movedNodes.push({ node, placeholder });
-            });
-        }
-    }
-    /**
-     * Restores moved nodes back to their original positions
-     */
-    restorePortalContent() {
-        // Restore each moved node to its original position
-        this.movedNodes.forEach(({ node, placeholder }) => {
-            if (placeholder.parentNode) {
-                placeholder.parentNode.insertBefore(node, placeholder);
-                placeholder.parentNode.removeChild(placeholder);
-            }
-        });
-        // Clear tracking array
-        this.movedNodes = [];
-    }
-    removePortal() {
-        if (this.portalEl) {
-            // Remove the portal element from DOM
-            if (this.portalEl.parentNode) {
-                this.portalEl.parentNode.removeChild(this.portalEl);
-            }
-            // Remove the associated focus style element
-            const portalId = this.portalEl.id;
-            const styleEl = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
-            if (styleEl && styleEl.parentNode) {
-                styleEl.parentNode.removeChild(styleEl);
-            }
-        }
-        this.portalEl = null;
-    }
-    /**
-     * Opens the popover programmatically
-     */
-    async show() {
-        if (this.active || !this.portalEl)
-            return;
-        this.active = true;
-        // Record open timestamp to prevent immediate close from opening click
-        this.openTimestamp = Date.now();
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'true');
-        }
-        // Update portal content with latest slot content
-        this.updatePortalContent();
-        // Show portal
-        this.portalEl.style.display = 'block';
-        this.portalEl.style.opacity = '1';
-        this.portalEl.style.visibility = 'visible';
-        // Position the popover
-        requestAnimationFrame(() => {
-            if (!this.isComponentMounted)
-                return;
-            this.handlePopoverPositioning();
-        });
-        // Add scroll and resize listeners for repositioning (always)
-        this.addScrollAndResizeListeners();
-        // Add document listeners for light dismiss and escape key (auto type only)
-        if (this.popoverType === 'auto') {
-            this.addLightDismissListeners();
-        }
-        // Emit open event
-        this.pdsPopoverOpen.emit({
-            componentId: this.componentId,
-            popoverType: this.popoverType,
-        });
-    }
-    /**
-     * Closes the popover programmatically
-     */
-    async hide() {
-        if (!this.active || !this.portalEl)
-            return;
-        this.active = false;
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'false');
-        }
-        // Restore content back to original slot positions
-        this.restorePortalContent();
-        // Hide portal
-        this.portalEl.style.display = 'none';
-        this.portalEl.style.opacity = '0';
-        this.portalEl.style.visibility = 'hidden';
-        // Return focus to trigger for keyboard accessibility
-        // This mirrors native Popover API behavior on close
-        this.returnFocusToTrigger();
-        // Remove all listeners
-        this.removeLightDismissListeners();
-        this.removeScrollAndResizeListeners();
-        // Clear any pending timers
-        this.clearDebounceTimers();
-        // Emit close event
-        this.pdsPopoverClose.emit({
-            componentId: this.componentId,
-            popoverType: this.popoverType,
-        });
-    }
-    /**
-     * Toggles the popover open/closed state programmatically
-     */
-    async toggle() {
-        if (this.active) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    }
-    /**
-     * Adds light dismiss listeners (click outside and escape key)
-     */
-    addLightDismissListeners() {
-        // Add listeners immediately - handleClickOutside will check timestamp
-        document.addEventListener('click', this.boundClickOutsideHandler, true);
-        document.addEventListener('keydown', this.boundEscapeKeyHandler);
-    }
-    /**
-     * Removes light dismiss listeners
-     */
-    removeLightDismissListeners() {
-        document.removeEventListener('click', this.boundClickOutsideHandler, true);
-        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
-    }
-    /**
-     * Adds scroll and resize listeners for repositioning
-     */
-    addScrollAndResizeListeners() {
-        window.addEventListener('scroll', this.boundScrollHandler, true);
-        window.addEventListener('resize', this.boundResizeHandler);
-    }
-    /**
-     * Removes scroll and resize listeners
-     */
-    removeScrollAndResizeListeners() {
-        window.removeEventListener('scroll', this.boundScrollHandler, true);
-        window.removeEventListener('resize', this.boundResizeHandler);
-    }
-    /**
-     * Handles clicks outside the popover for light dismiss (auto type only)
-     */
-    handleClickOutside(event) {
-        var _a, _b;
-        // Ignore events that occurred at or before the popover opened
-        // This prevents the opening click from immediately closing the popover
-        // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
-        // by calculating: currentEpochTime - (currentPerfTime - eventPerfTime)
-        const eventTime = event.timeStamp
-            ? Date.now() - (performance.now() - event.timeStamp)
-            : Date.now();
-        if (eventTime <= this.openTimestamp) {
-            return;
-        }
-        const target = event.target;
-        // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.contains(target);
-        const clickedInsideTrigger = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.contains(target);
-        if (!clickedInsidePopover && !clickedInsideTrigger) {
-            this.hide();
-        }
-    }
-    /**
-     * Returns focus to the trigger element with visible focus indicator
-     * This ensures focus rings/outlines are shown as they would be with keyboard navigation
-     */
-    returnFocusToTrigger() {
-        if (!this.triggerEl)
-            return;
-        // Focus immediately while still in keyboard event context
-        // This ensures the browser treats it as keyboard-initiated and shows focus ring
-        this.triggerEl.focus({ preventScroll: true });
-    }
-    /**
-     * Handles escape key press to close the popover
-     * Mirrors native Popover API: Escape closes and returns focus to trigger
-     */
-    handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            // Prevent default Escape behavior and stop propagation
-            // This mirrors native Popover API which handles Escape exclusively
-            event.preventDefault();
-            event.stopPropagation();
-            // Close popover and return focus to trigger
-            this.hide();
-        }
-    }
-    /**
-     * Handles scroll events to reposition the popover (debounced for performance)
-     */
-    handleScroll() {
-        if (!this.active)
-            return;
-        if (this.scrollDebounceTimer !== null) {
-            clearTimeout(this.scrollDebounceTimer);
-        }
-        this.scrollDebounceTimer = setTimeout(() => {
-            this.handlePopoverPositioning();
-            this.scrollDebounceTimer = null;
-        }, 10); // 10ms debounce for smooth repositioning
-    }
-    /**
-     * Handles resize events to reposition the popover (debounced for performance)
-     */
-    handleResize() {
-        if (!this.active)
-            return;
-        if (this.resizeDebounceTimer !== null) {
-            clearTimeout(this.resizeDebounceTimer);
-        }
-        this.resizeDebounceTimer = setTimeout(() => {
-            this.handlePopoverPositioning();
-            this.resizeDebounceTimer = null;
-        }, 100); // 100ms debounce for resize
-    }
-    /**
-     * Positions the popover relative to its trigger element
-     */
-    handlePopoverPositioning() {
-        // Prevent repositioning loops
-        if (this.isRepositioning) {
-            return;
-        }
-        this.isRepositioning = true;
-        if (this.triggerEl == null || this.portalEl == null) {
-            this.isRepositioning = false;
-            return;
-        }
-        const triggerRect = this.triggerEl.getBoundingClientRect();
-        const popoverRect = this.portalEl.getBoundingClientRect();
-        // Safety check: ensure trigger has valid dimensions (is rendered and visible)
-        if (triggerRect.width === 0 || triggerRect.height === 0) {
-            this.isRepositioning = false;
-            return;
-        }
-        let top = 0;
-        let left = 0;
-        const offset = 8;
-        switch (this.placement) {
-            case 'top':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-start':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.left;
-                break;
-            case 'top-end':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.right - popoverRect.width;
-                break;
-            case 'right':
-                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
-                left = triggerRect.right + offset;
-                break;
-            case 'right-start':
-                top = triggerRect.top;
-                left = triggerRect.right + offset;
-                break;
-            case 'right-end':
-                top = triggerRect.bottom - popoverRect.height;
-                left = triggerRect.right + offset;
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-start':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.left;
-                break;
-            case 'bottom-end':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-            case 'left-start':
-                top = triggerRect.top;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-            case 'left-end':
-                top = triggerRect.bottom - popoverRect.height;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-        }
-        this.portalEl.style.top = `${top}px`;
-        this.portalEl.style.left = `${left}px`;
-        // Reset the repositioning guard after a short delay
-        setTimeout(() => {
-            this.isRepositioning = false;
-        }, 16); // ~1 frame at 60fps
-    }
-    render() {
-        return (h(Host, { key: '835196832cb0dcec61f0bc6e5f4df08038335d5a', id: this.componentId }, h("span", { key: 'e4aadaa17ce565e00f5e038a92aae8957b22be64', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '97fe58bed551bed9f3159faa430ef54fd09d2412', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8d1330a58ff77182100fb40afa78ee89ccd3146f', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '5d1136682ba7bff4a4c904fb8310443e9feb9e5b', onSlotchange: this.handleContentSlotChange }))));
-    }
-    get el() { return this; }
-    static get style() { return pdsPopoverCss; }
-}, [257, "pds-popover", {
-        "popoverTargetAction": [1, "popover-target-action"],
-        "popoverType": [1, "popover-type"],
-        "componentId": [1, "component-id"],
-        "maxWidth": [2, "max-width"],
-        "placement": [513],
-        "active": [32],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }]);
-/**
- * Instance counter for unique IDs
- */
-PdsPopover$1.instanceCounter = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsPopover$1);
-            }
-            break;
-    } });
-}
-
-const PdsPopover = PdsPopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsPopover, defineCustomElement };
-//# sourceMappingURL=pds-popover.js.map
-
-//# sourceMappingURL=pds-popover.js.map
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as o,transformTag as h}from"@stencil/core/internal/client";const n=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsPopoverOpen=i(this,"pdsPopoverOpen",7),this.pdsPopoverClose=i(this,"pdsPopoverClose",7),this.active=!1,this.isComponentMounted=!0,this.triggerEl=null,this.portalEl=null,this.isRepositioning=!1,this.scrollDebounceTimer=null,this.resizeDebounceTimer=null,this.movedNodes=[],this.openTimestamp=0,this.popoverTargetAction="show",this.popoverType="auto",this.maxWidth=352,this.placement="right",this.handleTriggerSlotChange=t=>{const s=t.target.assignedElements();null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),s.length>0?(this.triggerEl=s[0],this.portalEl&&(this.triggerEl.setAttribute("aria-expanded",this.active+""),this.triggerEl.setAttribute("aria-controls",this.portalEl.id)),this.triggerEl.addEventListener("click",this.handleTriggerClick)):this.triggerEl=null},this.handleContentSlotChange=()=>{this.active&&this.updatePortalContent()},this.handleTriggerClick=t=>{switch(t.composedPath().find((t=>t instanceof HTMLAnchorElement&&t.href))||t.preventDefault(),this.popoverTargetAction){case"show":this.show();break;case"hide":this.hide();break;default:this.toggle()}}}componentDidLoad(){var t;this.boundClickOutsideHandler=this.handleClickOutside.bind(this),this.boundEscapeKeyHandler=this.handleEscapeKey.bind(this),this.boundScrollHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.handleResize.bind(this),this.createPortal();const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="trigger"]');if(s&&null==this.triggerEl){const t=new("undefined"!=typeof window?window.Event:global.Event)("slotchange");Object.defineProperty(t,"target",{value:s,enumerable:!0}),this.handleTriggerSlotChange(t)}}disconnectedCallback(){this.isComponentMounted=!1,null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),this.clearDebounceTimers(),this.removePortal()}clearDebounceTimers(){null!==this.scrollDebounceTimer&&(clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=null),null!==this.resizeDebounceTimer&&(clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=null)}createPortal(){if(null===this.portalEl){if(this.portalEl=document.createElement("div"),this.portalEl.className="pds-popover",this.portalEl.style.position="fixed",this.portalEl.style.zIndex="var(--pine-z-index-raised)",this.portalEl.style.maxWidth=this.maxWidth+"px",this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",this.portalEl.style.backgroundColor="var(--pine-color-background-overlay)",this.portalEl.style.borderRadius="var(--pine-dimension-125)",this.portalEl.style.boxShadow="var(--pine-box-shadow-200)",this.portalEl.style.margin="var(--pine-dimension-none)",this.portalEl.style.padding="var(--pine-dimension-md)",this.componentId)this.portalEl.id=this.componentId+"-portal";else{const s=t.instanceCounter++;this.portalEl.id="pds-popover-portal-"+s}this.portalEl.setAttribute("aria-modal","false"),document.body.appendChild(this.portalEl),this.addPortalFocusStyles()}}addPortalFocusStyles(){if(!this.portalEl)return;const t=this.portalEl.id;if(document.querySelector(`style[data-pds-popover-focus="${t}"]`))return;const s=document.createElement("style");s.setAttribute("data-pds-popover-focus",t),s.textContent=`\n      #${t}:focus {\n        outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;\n        outline-offset: var(--pine-border-width, 1px);\n      }\n      #${t}:focus:not(:focus-visible) {\n        outline: none;\n      }\n      [data-theme="dark"] #${t} {\n        border: var(--pine-border);\n      }\n    `,document.head.appendChild(s)}updatePortalContent(){var t;if(!this.portalEl)return;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector(".pds-popover__content-slot-wrapper"),i=null==s?void 0:s.querySelector("slot");i&&i.assignedNodes().forEach((t=>{var s;const i=t.parentNode===this.portalEl,e=this.movedNodes.some((s=>s.node===t));if(i||e)return;const o=document.createComment("pds-popover-placeholder");null===(s=t.parentNode)||void 0===s||s.insertBefore(o,t),this.portalEl.appendChild(t),this.movedNodes.push({node:t,placeholder:o})}))}restorePortalContent(){this.movedNodes.forEach((({node:t,placeholder:s})=>{s.parentNode&&(s.parentNode.insertBefore(t,s),s.parentNode.removeChild(s))})),this.movedNodes=[]}removePortal(){if(this.portalEl){this.portalEl.parentNode&&this.portalEl.parentNode.removeChild(this.portalEl);const t=document.querySelector(`style[data-pds-popover-focus="${this.portalEl.id}"]`);t&&t.parentNode&&t.parentNode.removeChild(t)}this.portalEl=null}async show(){!this.active&&this.portalEl&&(this.active=!0,this.openTimestamp=Date.now(),this.triggerEl&&this.triggerEl.setAttribute("aria-expanded","true"),this.updatePortalContent(),this.portalEl.style.display="block",this.portalEl.style.opacity="1",this.portalEl.style.visibility="visible",requestAnimationFrame((()=>{this.isComponentMounted&&this.handlePopoverPositioning()})),this.addScrollAndResizeListeners(),"auto"===this.popoverType&&this.addLightDismissListeners(),this.pdsPopoverOpen.emit({componentId:this.componentId,popoverType:this.popoverType}))}async hide(){this.active&&this.portalEl&&(this.active=!1,this.triggerEl&&this.triggerEl.setAttribute("aria-expanded","false"),this.restorePortalContent(),this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",this.returnFocusToTrigger(),this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),this.clearDebounceTimers(),this.pdsPopoverClose.emit({componentId:this.componentId,popoverType:this.popoverType}))}async toggle(){this.active?this.hide():this.show()}addLightDismissListeners(){document.addEventListener("click",this.boundClickOutsideHandler,!0),document.addEventListener("keydown",this.boundEscapeKeyHandler)}removeLightDismissListeners(){document.removeEventListener("click",this.boundClickOutsideHandler,!0),document.removeEventListener("keydown",this.boundEscapeKeyHandler)}addScrollAndResizeListeners(){window.addEventListener("scroll",this.boundScrollHandler,!0),window.addEventListener("resize",this.boundResizeHandler)}removeScrollAndResizeListeners(){window.removeEventListener("scroll",this.boundScrollHandler,!0),window.removeEventListener("resize",this.boundResizeHandler)}handleClickOutside(t){var s,i;if((t.timeStamp?Date.now()-(performance.now()-t.timeStamp):Date.now())<=this.openTimestamp)return;const e=t.target,o=null===(s=this.portalEl)||void 0===s?void 0:s.contains(e),h=null===(i=this.triggerEl)||void 0===i?void 0:i.contains(e);o||h||this.hide()}returnFocusToTrigger(){this.triggerEl&&this.triggerEl.focus({preventScroll:!0})}handleEscapeKey(t){"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.hide())}handleScroll(){this.active&&(null!==this.scrollDebounceTimer&&clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.scrollDebounceTimer=null}),10))}handleResize(){this.active&&(null!==this.resizeDebounceTimer&&clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.resizeDebounceTimer=null}),100))}handlePopoverPositioning(){if(this.isRepositioning)return;if(this.isRepositioning=!0,null==this.triggerEl||null==this.portalEl)return void(this.isRepositioning=!1);const t=this.triggerEl.getBoundingClientRect(),s=this.portalEl.getBoundingClientRect();if(0===t.width||0===t.height)return void(this.isRepositioning=!1);let i=0,e=0;switch(this.placement){case"top":i=t.top-s.height-8,e=t.left+(t.width-s.width)/2;break;case"top-start":i=t.top-s.height-8,e=t.left;break;case"top-end":i=t.top-s.height-8,e=t.right-s.width;break;case"right":i=t.top+(t.height-s.height)/2,e=t.right+8;break;case"right-start":i=t.top,e=t.right+8;break;case"right-end":i=t.bottom-s.height,e=t.right+8;break;case"bottom":i=t.bottom+8,e=t.left+(t.width-s.width)/2;break;case"bottom-start":i=t.bottom+8,e=t.left;break;case"bottom-end":i=t.bottom+8,e=t.right-s.width;break;case"left":i=t.top+(t.height-s.height)/2,e=t.left-s.width-8;break;case"left-start":i=t.top,e=t.left-s.width-8;break;case"left-end":i=t.bottom-s.height,e=t.left-s.width-8}this.portalEl.style.top=i+"px",this.portalEl.style.left=e+"px",setTimeout((()=>{this.isRepositioning=!1}),16)}render(){return e(o,{key:"2e19ac35068ac25b013bd146da0b3b343eb89d75",id:this.componentId},e("span",{key:"e982ade010dc6539593759704e5afae29ce5eba8",class:"pds-popover__trigger-wrapper"},e("slot",{key:"f1e1ef5e3b0b52a96cb566175ea420e1d1545ccc",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),e("div",{key:"caa5762029db6430f174c8936611fe332889620d",class:"pds-popover__content-slot-wrapper"},e("slot",{key:"cdad839643d1a5a2024cd55cdd33750f8665a366",onSlotchange:this.handleContentSlotChange})))}get el(){return this}static get style(){return":host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}"}},[257,"pds-popover",{popoverTargetAction:[1,"popover-target-action"],popoverType:[1,"popover-type"],componentId:[1,"component-id"],maxWidth:[2,"max-width"],placement:[513],active:[32],show:[64],hide:[64],toggle:[64]}]);n.instanceCounter=0;const r=n,a=function(){"undefined"!=typeof customElements&&["pds-popover"].forEach((t=>{"pds-popover"===t&&(customElements.get(h(t))||customElements.define(h(t),n))}))};export{r as PdsPopover,a as defineCustomElement}