@siemens/ix 5.0.0 → 5.1.0

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

@@ -0,0 +1,940 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { arrow, autoUpdate, computePosition, flip, hide, offset, shift, } from "@floating-ui/dom";
+import { h, Host, Mixin, } from "@stencil/core";
+import { addDisposableEventListenerAsArray, } from "../utils/disposable-event-listener";
+import { findElement } from "../utils/find-element";
+import { addFocusTrap, focusFirstFocusTrapElement, getFocusTrapFocusables, } from "../utils/focus/focus-trap";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+import { removeVisibleFocus } from "../utils/internal/mixins/setup.mixin";
+import { makeRef } from "../utils/make-ref";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { popoverController, } from "./popover-controller";
+const SPIKE_OFFSET = -6;
+const POPOVER_OFFSET = 12;
+const HOVER_HIDE_DELAY_MS = 150;
+const numberToPixel = (value) => value == null ? '' : `${value}px`;
+/**
+ * Floating panel anchored to a trigger element.
+ *
+ * @slot - Child sections in order: `ix-popover-header`, `ix-popover-image`, `ix-popover-content`, and `ix-popover-footer`.
+ *
+ * @since 5.1.0
+ */
+export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin, ComponentIdMixin) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    /**
+     * Element that toggles the popover.
+     * String values are resolved as the trigger element `id`, not as CSS selectors.
+     * Also accepts a DOM element reference.
+     *
+     * @since 5.1.0
+     */
+    trigger;
+    /**
+     * Show/hide state
+     *
+     * @since 5.1.0
+     */
+    show = false;
+    /**
+     * Preferred placement relative to trigger
+     *
+     * @since 5.1.0
+     */
+    placement = 'bottom';
+    /**
+     * Show the spike pointing at the trigger
+     *
+     * @since 5.1.0
+     */
+    hasSpike = false;
+    /**
+     * Interaction that opens the popover
+     *
+     * @since 5.1.0
+     */
+    triggerMode = 'click';
+    /**
+     * Dismiss when clicking outside the popover and trigger
+     *
+     * @since 5.1.0
+     */
+    closeOnClickOutside = false;
+    /**
+     * Fires before visibility changes. Cancel to prevent.
+     *
+     * @since 5.1.0
+     */
+    showChange;
+    /**
+     * Fires after visibility has changed
+     *
+     * @since 5.1.0
+     */
+    showChanged;
+    dialogRef = makeRef();
+    triggerElement;
+    disposeAutoUpdate;
+    disposeTriggerListener;
+    disposeDialogListener;
+    focusTrap;
+    hideTimeout;
+    assignedNestedPopoverIds = [];
+    hasFocusableContent = false;
+    suppressShowWatch = false;
+    isOpeningPopover = false;
+    closeFocus = 'restore-trigger';
+    hasDisconnected = false;
+    triggerRegistryId = 0;
+    /**
+     * Hover mode: skip `present()` on the trigger `focus` handler while
+     * `schedulePostCloseFocus()` refocuses the trigger (e.g. after Escape).
+     */
+    suppressFocusPresent = false;
+    get spikeElement() {
+        return this.hostElement.shadowRoot.querySelector('.spike');
+    }
+    getFocusTrapOptions() {
+        return {
+            trapFocusInShadowDom: 'both',
+            listenOnDocument: true,
+            shouldDeferTabTrap: (trapHost) => !popoverController.isTopmostPresentedHost(trapHost),
+        };
+    }
+    /** Top-layer dialog id; kept separate from host `id` when the host has a custom id. */
+    get popoverPanelId() {
+        return `ix-component-ix-popover-${this.$internal_id}`;
+    }
+    getId() {
+        return this.getHostElementId();
+    }
+    getNestedPopoverIds() {
+        return this.assignedNestedPopoverIds;
+    }
+    cacheNestedPopoverId(event) {
+        const { detail } = event;
+        if (detail !== this.getId() &&
+            !this.assignedNestedPopoverIds.includes(detail)) {
+            this.assignedNestedPopoverIds.push(detail);
+            popoverController.syncNestedPopoverIds(this);
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
+    }
+    isPresent() {
+        return this.show;
+    }
+    willPresent() {
+        const event = this.showChange.emit(true);
+        return !event.defaultPrevented;
+    }
+    willDismiss() {
+        const event = this.showChange.emit(false);
+        return !event.defaultPrevented;
+    }
+    present() {
+        return this.openPopover();
+    }
+    dismiss(closeFocus = 'restore-trigger') {
+        this.closeFocus = closeFocus;
+        void this.closePopover();
+    }
+    /**
+     * Open the popover programmatically
+     *
+     * @since 5.1.0
+     */
+    async showPopover() {
+        await popoverController.presentAndWait(this);
+    }
+    /**
+     * Close the popover programmatically
+     *
+     * @since 5.1.0
+     */
+    async hidePopover() {
+        popoverController.dismiss(this);
+    }
+    onTriggerChange(newTrigger, oldTrigger) {
+        if (newTrigger !== oldTrigger) {
+            void this.registerTriggerListener();
+        }
+    }
+    onTriggerModeChange() {
+        this.registerTriggerListener();
+    }
+    onShowChange(newValue) {
+        if (this.suppressShowWatch) {
+            return;
+        }
+        if (newValue) {
+            void this.openPopover({ fromShowWatch: true });
+        }
+        else {
+            void this.closePopover({ fromShowWatch: true });
+        }
+    }
+    connectedCallback() {
+        if (this.hasDisconnected) {
+            popoverController.connected(this);
+            void this.initializePopover();
+        }
+    }
+    componentDidLoad() {
+        popoverController.connected(this);
+        void this.initializePopover();
+    }
+    async initializePopover() {
+        await this.registerTriggerListener();
+        if (this.show) {
+            await this.openPopover({ fromShowWatch: true });
+        }
+    }
+    componentDidRender() {
+        if (this.trigger && !this.triggerElement) {
+            void this.registerTriggerListener();
+        }
+    }
+    disconnectedCallback() {
+        this.hasDisconnected = true;
+        this.clearHideTimeout();
+        this.disposeAutoUpdate?.();
+        this.disposeTriggerListener?.();
+        this.disposeDialogListener?.();
+        this.focusTrap?.destroy();
+        popoverController.disconnected(this);
+        this.clearTriggerAria();
+    }
+    async openPopover(options) {
+        if (this.isOpeningPopover) {
+            return;
+        }
+        if (!options?.fromShowWatch && this.show) {
+            return;
+        }
+        this.isOpeningPopover = true;
+        try {
+            const dialog = await this.dialogRef.waitForCurrent();
+            if (!dialog || !this.hostElement.isConnected) {
+                return;
+            }
+            this.suppressShowWatch = true;
+            this.show = true;
+            this.suppressShowWatch = false;
+            dialog.showPopover();
+            this.registerHoverDialogListener(dialog);
+            this.detectFocusableContent();
+            if (!this.triggerElement && this.trigger) {
+                await this.registerTriggerListener();
+            }
+            if (this.triggerElement) {
+                await this.applyPopoverPosition(this.triggerElement, dialog);
+                this.updateTriggerAria(true);
+            }
+            if (this.hasFocusableContent) {
+                const trap = await addFocusTrap(this.hostElement, this.getFocusTrapOptions());
+                if (!this.hostElement.isConnected || !this.show) {
+                    trap.destroy();
+                }
+                else {
+                    this.focusTrap = trap;
+                    if (this.triggerMode !== 'hover') {
+                        this.focusFirstElement();
+                    }
+                }
+            }
+            requestAnimationFrameNoNgZone(() => {
+                this.showChanged.emit(true);
+            });
+        }
+        finally {
+            this.isOpeningPopover = false;
+        }
+    }
+    async closePopover(options) {
+        if (!options?.fromShowWatch && !this.show) {
+            return;
+        }
+        const dialog = await this.dialogRef.waitForCurrent();
+        if (!dialog || !this.hostElement.isConnected) {
+            return;
+        }
+        this.disposeAutoUpdate?.();
+        this.disposeAutoUpdate = undefined;
+        this.disposeDialogListener?.();
+        this.disposeDialogListener = undefined;
+        this.focusTrap?.destroy();
+        this.focusTrap = undefined;
+        this.applyCloseFocus();
+        dialog.hidePopover();
+        if (this.closeFocus === 'release') {
+            this.blurTriggerElement();
+        }
+        this.schedulePostCloseFocus();
+        this.suppressShowWatch = true;
+        this.show = false;
+        this.suppressShowWatch = false;
+        this.closeFocus = 'restore-trigger';
+        this.updateTriggerAria(false);
+        requestAnimationFrameNoNgZone(() => {
+            this.showChanged.emit(false);
+        });
+    }
+    detectFocusableContent() {
+        this.hasFocusableContent =
+            getFocusTrapFocusables(this.hostElement, this.getFocusTrapOptions())
+                .length > 0;
+    }
+    focusFirstElement() {
+        const focusTrapOptions = this.getFocusTrapOptions();
+        requestAnimationFrameNoNgZone(() => {
+            focusFirstFocusTrapElement(this.hostElement, focusTrapOptions);
+        });
+    }
+    applyCloseFocus() {
+        if (!this.hasFocusableContent || !this.triggerElement) {
+            return;
+        }
+        if (this.triggerMode === 'hover' && this.closeFocus === 'release') {
+            this.releasePopoverFocus();
+            return;
+        }
+        removeVisibleFocus();
+    }
+    /**
+     * Run after `hidePopover()` so browser popover focus restoration can be
+     * corrected (pointer dismiss) or overridden (keyboard dismiss).
+     */
+    schedulePostCloseFocus() {
+        if (!this.hasFocusableContent || !this.triggerElement) {
+            return;
+        }
+        if (this.triggerMode === 'hover' && this.closeFocus === 'release') {
+            return;
+        }
+        const restoreTriggerFocus = this.closeFocus === 'restore-trigger';
+        requestAnimationFrameNoNgZone(() => {
+            if (restoreTriggerFocus) {
+                if (this.triggerMode === 'hover') {
+                    this.suppressFocusPresent = true;
+                }
+                this.triggerElement?.focus();
+                requestAnimationFrameNoNgZone(() => {
+                    this.suppressFocusPresent = false;
+                });
+                return;
+            }
+            this.releasePopoverFocus();
+            requestAnimationFrameNoNgZone(() => {
+                this.blurTriggerElement();
+            });
+        });
+    }
+    /** Pointer-driven dismiss: avoid a focus ring on the trigger. */
+    releasePopoverFocus() {
+        const active = document.activeElement;
+        if (active instanceof HTMLElement && this.containsPopoverTarget(active)) {
+            active.blur();
+        }
+        this.blurTriggerElement();
+    }
+    blurTriggerElement() {
+        if (!this.triggerElement) {
+            return;
+        }
+        const innerButton = this.triggerElement.shadowRoot?.querySelector('button, a[role="button"]');
+        innerButton?.blur();
+        if (this.triggerElement !== innerButton) {
+            this.triggerElement.blur();
+        }
+    }
+    async registerTriggerListener() {
+        this.disposeTriggerListener?.();
+        this.clearTriggerAria();
+        if (!this.trigger) {
+            return;
+        }
+        const registryId = ++this.triggerRegistryId;
+        const currentTrigger = this.trigger;
+        const currentTriggerMode = this.triggerMode;
+        try {
+            const el = (await findElement(currentTrigger, this.hostElement));
+            if (registryId !== this.triggerRegistryId ||
+                this.trigger !== currentTrigger ||
+                this.triggerMode !== currentTriggerMode ||
+                !this.hostElement.isConnected) {
+                return;
+            }
+            this.triggerElement = el;
+            el.dataset.ixPopoverTrigger = '';
+            this.updateTriggerAria(this.show);
+            this.discoverNestedPopover();
+            if (this.triggerMode === 'click') {
+                this.disposeTriggerListener = addDisposableEventListenerAsArray([
+                    {
+                        element: el,
+                        eventType: 'click',
+                        callback: () => this.togglePopover(),
+                    },
+                    {
+                        element: el,
+                        eventType: 'keydown',
+                        callback: (event) => {
+                            const key = event.key;
+                            if (key === 'Enter' || key === ' ') {
+                                event.preventDefault();
+                                this.togglePopover();
+                            }
+                        },
+                    },
+                ]);
+            }
+            else {
+                this.disposeTriggerListener = addDisposableEventListenerAsArray([
+                    {
+                        element: el,
+                        eventType: 'mouseenter',
+                        callback: () => {
+                            this.clearHideTimeout();
+                            if (!this.show) {
+                                popoverController.present(this);
+                            }
+                        },
+                    },
+                    {
+                        element: el,
+                        eventType: 'mouseleave',
+                        callback: (event) => this.scheduleHideFromTrigger(event),
+                    },
+                    {
+                        element: el,
+                        eventType: 'focus',
+                        callback: () => {
+                            this.clearHideTimeout();
+                            if (!this.show) {
+                                if (this.suppressFocusPresent) {
+                                    return;
+                                }
+                                popoverController.present(this);
+                            }
+                        },
+                    },
+                    {
+                        element: el,
+                        eventType: 'focusout',
+                        callback: (event) => this.scheduleHideFromTrigger(event),
+                    },
+                ]);
+            }
+        }
+        catch {
+            // Trigger element not found yet
+        }
+    }
+    discoverNestedPopover() {
+        this.triggerElement?.dispatchEvent(new CustomEvent('ix-assign-sub-popover', {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: this.getId(),
+        }));
+    }
+    togglePopover() {
+        if (this.show) {
+            popoverController.dismiss(this);
+        }
+        else {
+            popoverController.present(this);
+        }
+    }
+    containsPopoverTarget(target) {
+        if (!(target instanceof Node)) {
+            return false;
+        }
+        if (target === this.hostElement) {
+            return true;
+        }
+        if (this.hostElement.contains(target)) {
+            return true;
+        }
+        const shadowRoot = this.hostElement.shadowRoot;
+        if (shadowRoot?.contains(target)) {
+            return true;
+        }
+        return false;
+    }
+    scheduleHideFromTrigger(event) {
+        const related = event.relatedTarget;
+        if (this.containsPopoverTarget(related)) {
+            return;
+        }
+        if (event.type === 'focusout') {
+            // showPopover() can move focus into the top-layer dialog without relatedTarget.
+            requestAnimationFrameNoNgZone(() => {
+                if (this.containsPopoverTarget(document.activeElement)) {
+                    return;
+                }
+                this.scheduleHide();
+            });
+            return;
+        }
+        this.scheduleHide();
+    }
+    scheduleHide() {
+        this.clearHideTimeout();
+        this.hideTimeout = setTimeout(() => {
+            if (this.show) {
+                popoverController.dismiss(this, 'release');
+            }
+        }, HOVER_HIDE_DELAY_MS);
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout !== undefined) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
+    }
+    getTriggerAriaTarget() {
+        const el = this.triggerElement;
+        if (!el) {
+            return undefined;
+        }
+        if (el.tagName === 'IX-BUTTON' || el.tagName === 'IX-ICON-BUTTON') {
+            const inner = el.shadowRoot?.querySelector('button, a[role="button"]');
+            if (inner) {
+                return inner;
+            }
+        }
+        return el;
+    }
+    clearTriggerAriaAttributes(element) {
+        element.removeAttribute('aria-expanded');
+        element.removeAttribute('aria-controls');
+        element.removeAttribute('aria-haspopup');
+    }
+    updateTriggerAria(expanded) {
+        const triggerElement = this.triggerElement;
+        const target = this.getTriggerAriaTarget();
+        if (!triggerElement || !target) {
+            return;
+        }
+        target.setAttribute('aria-haspopup', 'dialog');
+        target.setAttribute('aria-expanded', String(expanded));
+        target.setAttribute('aria-controls', this.popoverPanelId);
+        if (target !== triggerElement) {
+            this.clearTriggerAriaAttributes(triggerElement);
+        }
+    }
+    clearTriggerAria() {
+        if (!this.triggerElement) {
+            return;
+        }
+        this.clearTriggerAriaAttributes(this.triggerElement);
+        const inner = this.triggerElement.shadowRoot?.querySelector('button, a[role="button"]');
+        if (inner) {
+            this.clearTriggerAriaAttributes(inner);
+        }
+        delete this.triggerElement.dataset.ixPopoverTrigger;
+        this.triggerElement = undefined;
+    }
+    computeSpikePosition({ placement, middlewareData, }) {
+        if (!middlewareData.arrow) {
+            return undefined;
+        }
+        const { x, y } = middlewareData.arrow;
+        const resetPosition = {
+            top: 'unset',
+            right: 'unset',
+            bottom: 'unset',
+            left: 'unset',
+        };
+        if (placement.startsWith('top')) {
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                bottom: numberToPixel(SPIKE_OFFSET),
+            };
+        }
+        if (placement.startsWith('right')) {
+            return {
+                ...resetPosition,
+                left: numberToPixel(SPIKE_OFFSET),
+                top: numberToPixel(y),
+            };
+        }
+        if (placement.startsWith('bottom')) {
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                top: numberToPixel(SPIKE_OFFSET),
+            };
+        }
+        if (placement.startsWith('left')) {
+            return {
+                ...resetPosition,
+                right: numberToPixel(SPIKE_OFFSET),
+                top: numberToPixel(y),
+            };
+        }
+    }
+    async computePopoverPosition(target, dialog) {
+        const middleware = [
+            offset(POPOVER_OFFSET),
+            flip({ fallbackStrategy: 'initialPlacement' }),
+            shift({ padding: 10 }),
+        ];
+        if (this.hasSpike && this.spikeElement) {
+            middleware.push(arrow({ element: this.spikeElement }));
+        }
+        middleware.push(hide());
+        return computePosition(target, dialog, {
+            strategy: 'fixed',
+            placement: this.placement,
+            middleware,
+        });
+    }
+    async applyPopoverPosition(target, dialog) {
+        this.disposeAutoUpdate?.();
+        const updatePosition = async () => {
+            if (!this.show) {
+                return;
+            }
+            const result = await this.computePopoverPosition(target, dialog);
+            if (!this.show) {
+                return;
+            }
+            const isHidden = result.middlewareData.hide?.referenceHidden;
+            if (isHidden) {
+                popoverController.dismiss(this, 'release');
+                return result;
+            }
+            if (this.hasSpike && result.middlewareData.arrow) {
+                const spikePos = this.computeSpikePosition(result);
+                if (spikePos && this.spikeElement) {
+                    Object.assign(this.spikeElement.style, spikePos);
+                }
+            }
+            Object.assign(dialog.style, {
+                left: numberToPixel(result.x),
+                top: numberToPixel(result.y),
+            });
+            return result;
+        };
+        await updatePosition();
+        if (!this.show || !this.hostElement.isConnected) {
+            return;
+        }
+        this.disposeAutoUpdate = autoUpdate(target, dialog, updatePosition, {
+            ancestorResize: true,
+            ancestorScroll: true,
+            elementResize: true,
+        });
+    }
+    registerHoverDialogListener(dialog) {
+        this.disposeDialogListener?.();
+        if (this.triggerMode !== 'hover') {
+            return;
+        }
+        this.disposeDialogListener = addDisposableEventListenerAsArray([
+            {
+                element: dialog,
+                eventType: 'click',
+                callback: (event) => {
+                    // Align with ix-tooltip: keep clicks inside the panel from reaching window
+                    // listeners (top-layer dialog may omit IX-POPOVER from composedPath).
+                    event.stopPropagation();
+                },
+            },
+        ]);
+    }
+    onDialogMouseEnter() {
+        if (this.triggerMode === 'hover') {
+            this.clearHideTimeout();
+        }
+    }
+    onDialogMouseLeave() {
+        if (this.triggerMode === 'hover') {
+            this.scheduleHide();
+        }
+    }
+    render() {
+        return (h(Host, { key: '5056bfaf705bbc83271b31181ba1d3187dd62d60', class: { visible: this.show }, "data-ix-popover": this.popoverPanelId }, h("dialog", { key: '464d57af0ebb424975704e63c0eef5373be6c502', ref: this.dialogRef, id: this.popoverPanelId, class: "dialog", popover: "manual", inert: !this.show, ...this.inheritAriaAttributes, role: this.inheritAriaAttributes['role'] ?? 'dialog', onMouseEnter: () => this.onDialogMouseEnter(), onMouseLeave: () => this.onDialogMouseLeave() }, h("div", { key: '414e84e36191a3e43e7ef68006e06f87a7a2fd06', class: "popover-container" }, h("div", { key: 'dd676856983f4dfbaf7e052e81d61bfab6d042dd', class: "popover-body" }, h("slot", { key: 'dcbfceaf19576233123bbf411e5a9e84c464c079' })), this.hasSpike ? h("div", { class: "spike" }) : null))));
+    }
+    static get is() { return "ix-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementReference",
+                    "resolved": "HTMLElement | Promise<HTMLElement> | string | undefined",
+                    "references": {
+                        "ElementReference": {
+                            "location": "import",
+                            "path": "../utils/element-reference",
+                            "id": "src/components/utils/element-reference.ts::ElementReference",
+                            "referenceLocation": "ElementReference"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Element that toggles the popover.\nString values are resolved as the trigger element `id`, not as CSS selectors.\nAlso accepts a DOM element reference."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger"
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Show/hide state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Preferred placement relative to trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "hasSpike": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Show the spike pointing at the trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-spike",
+                "defaultValue": "false"
+            },
+            "triggerMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Interaction that opens the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-mode",
+                "defaultValue": "'click'"
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Dismiss when clicking outside the popover and trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-click-outside",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "showChange",
+                "name": "showChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Fires before visibility changes. Cancel to prevent."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "showChanged",
+                "name": "showChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Fires after visibility has changed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showPopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the popover programmatically",
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }]
+                }
+            },
+            "hidePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the popover programmatically",
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "trigger",
+                "methodName": "onTriggerChange"
+            }, {
+                "propName": "triggerMode",
+                "methodName": "onTriggerModeChange"
+            }, {
+                "propName": "show",
+                "methodName": "onShowChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ix-assign-sub-popover",
+                "method": "cacheNestedPopoverId",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}