@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/collection/components/pds-popover/pds-popover.js

@@ -0,0 +1,802 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot trigger - The trigger element for the popover
+ * @slot (default) - The content to display inside the popover
+ */
+export class PdsPopover {
+    constructor() {
+        /**
+         * 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-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)';
+        // 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: 'f488756aeac4d7d1223b5ccda953aa6ea54788c0', id: this.componentId }, h("span", { key: '9ac844192c4389c1e9dc8548bda70b45c14b9aed', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5263c5e659fc51f912bdbf92c119dc2bb1f57d4f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '717d438131ff0bff69f11513c538bf3de5c2d1a4', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '060d737af3edd0d7baf5d556867122ca217d13a2', onSlotchange: this.handleContentSlotChange }))));
+    }
+    static get is() { return "pds-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "popoverTargetAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'show' | 'toggle' | 'hide'",
+                    "resolved": "\"hide\" | \"show\" | \"toggle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"show\""
+                        }],
+                    "text": "Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-target-action",
+                "defaultValue": "'show'"
+            },
+            "popoverType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'manual'",
+                    "resolved": "\"auto\" | \"manual\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\nManual popovers require the consumer to handle the visibility of the popover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-type",
+                "defaultValue": "'auto'"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "352"
+                        }],
+                    "text": "Sets the maximum width of the popover content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "352"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlacementType",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"right\""
+                        }],
+                    "text": "Determines the preferred position of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'right'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsPopoverOpen",
+                "name": "pdsPopoverOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover is opened"
+                },
+                "complexType": {
+                    "original": "PdsPopoverEventDetail",
+                    "resolved": "PdsPopoverEventDetail",
+                    "references": {
+                        "PdsPopoverEventDetail": {
+                            "location": "import",
+                            "path": "./popover-interface",
+                            "id": "src/components/pds-popover/popover-interface.ts::PdsPopoverEventDetail",
+                            "referenceLocation": "PdsPopoverEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsPopoverClose",
+                "name": "pdsPopoverClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover is closed"
+                },
+                "complexType": {
+                    "original": "PdsPopoverEventDetail",
+                    "resolved": "PdsPopoverEventDetail",
+                    "references": {
+                        "PdsPopoverEventDetail": {
+                            "location": "import",
+                            "path": "./popover-interface",
+                            "id": "src/components/pds-popover/popover-interface.ts::PdsPopoverEventDetail",
+                            "referenceLocation": "PdsPopoverEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the popover programmatically",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the popover programmatically",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the popover open/closed state programmatically",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+/**
+ * Instance counter for unique IDs
+ */
+PdsPopover.instanceCounter = 0;