@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/popover.js

@@ -1,1505 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
-import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
-import { g as getElementRoot, r as raf, a as addEventListener, k as hasLazyBuild } from './helpers.js';
-import { c as createLockController } from './lock-controller.js';
-import { p as printIonWarning } from './index4.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global.js';
-import { g as getClassMap } from './theme.js';
-import { e as deepReady, w as waitForMount } from './index2.js';
-import { c as createAnimation } from './animation.js';
-import { d as defineCustomElement$1 } from './backdrop.js';
-
-/**
- * Returns the dimensions of the popover
- * arrow on `ios` mode. If arrow is disabled
- * returns (0, 0).
- */
-const getArrowDimensions = (arrowEl) => {
-    if (!arrowEl) {
-        return { arrowWidth: 0, arrowHeight: 0 };
-    }
-    const { width, height } = arrowEl.getBoundingClientRect();
-    return { arrowWidth: width, arrowHeight: height };
-};
-/**
- * Returns the recommended dimensions of the popover
- * that takes into account whether or not the width
- * should match the trigger width.
- */
-const getPopoverDimensions = (size, contentEl, triggerEl) => {
-    const contentDimentions = contentEl.getBoundingClientRect();
-    const contentHeight = contentDimentions.height;
-    let contentWidth = contentDimentions.width;
-    if (size === 'cover' && triggerEl) {
-        const triggerDimensions = triggerEl.getBoundingClientRect();
-        contentWidth = triggerDimensions.width;
-    }
-    return {
-        contentWidth,
-        contentHeight,
-    };
-};
-const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
-    let dismissCallbacks = [];
-    const root = getElementRoot(parentPopoverEl);
-    const parentContentEl = root.querySelector('.popover-content');
-    switch (triggerAction) {
-        case 'hover':
-            dismissCallbacks = [
-                {
-                    /**
-                     * Do not use mouseover here
-                     * as this will causes the event to
-                     * be dispatched on each underlying
-                     * element rather than on the popover
-                     * content as a whole.
-                     */
-                    eventName: 'mouseenter',
-                    callback: (ev) => {
-                        /**
-                         * Do not dismiss the popover is we
-                         * are hovering over its trigger.
-                         * This would be easier if we used mouseover
-                         * but this would cause the event to be dispatched
-                         * more often than we would like, potentially
-                         * causing performance issues.
-                         */
-                        const element = document.elementFromPoint(ev.clientX, ev.clientY);
-                        if (element === triggerEl) {
-                            return;
-                        }
-                        popoverEl.dismiss(undefined, undefined, false);
-                    },
-                },
-            ];
-            break;
-        case 'context-menu':
-        case 'click':
-        default:
-            dismissCallbacks = [
-                {
-                    eventName: 'click',
-                    callback: (ev) => {
-                        /**
-                         * Do not dismiss the popover is we
-                         * are hovering over its trigger.
-                         */
-                        const target = ev.target;
-                        const closestTrigger = target.closest('[data-ion-popover-trigger]');
-                        if (closestTrigger === triggerEl) {
-                            /**
-                             * stopPropagation here so if the
-                             * popover has dismissOnSelect="true"
-                             * the popover does not dismiss since
-                             * we just clicked a trigger element.
-                             */
-                            ev.stopPropagation();
-                            return;
-                        }
-                        popoverEl.dismiss(undefined, undefined, false);
-                    },
-                },
-            ];
-            break;
-    }
-    dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.addEventListener(eventName, callback));
-    return () => {
-        dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.removeEventListener(eventName, callback));
-    };
-};
-/**
- * Configures the triggerEl to respond
- * to user interaction based upon the triggerAction
- * prop that devs have defined.
- */
-const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
-    let triggerCallbacks = [];
-    /**
-     * Based upon the kind of trigger interaction
-     * the user wants, we setup the correct event
-     * listeners.
-     */
-    switch (triggerAction) {
-        case 'hover':
-            let hoverTimeout;
-            triggerCallbacks = [
-                {
-                    eventName: 'mouseenter',
-                    callback: async (ev) => {
-                        ev.stopPropagation();
-                        if (hoverTimeout) {
-                            clearTimeout(hoverTimeout);
-                        }
-                        /**
-                         * Hovering over a trigger should not
-                         * immediately open the next popover.
-                         */
-                        hoverTimeout = setTimeout(() => {
-                            raf(() => {
-                                popoverEl.presentFromTrigger(ev);
-                                hoverTimeout = undefined;
-                            });
-                        }, 100);
-                    },
-                },
-                {
-                    eventName: 'mouseleave',
-                    callback: (ev) => {
-                        if (hoverTimeout) {
-                            clearTimeout(hoverTimeout);
-                        }
-                        /**
-                         * If mouse is over another popover
-                         * that is not this popover then we should
-                         * close this popover.
-                         */
-                        const target = ev.relatedTarget;
-                        if (!target) {
-                            return;
-                        }
-                        if (target.closest('ion-popover') !== popoverEl) {
-                            popoverEl.dismiss(undefined, undefined, false);
-                        }
-                    },
-                },
-                {
-                    /**
-                     * stopPropagation here prevents the popover
-                     * from dismissing when dismiss-on-select="true".
-                     */
-                    eventName: 'click',
-                    callback: (ev) => ev.stopPropagation(),
-                },
-                {
-                    eventName: 'ionPopoverActivateTrigger',
-                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
-                },
-            ];
-            break;
-        case 'context-menu':
-            triggerCallbacks = [
-                {
-                    eventName: 'contextmenu',
-                    callback: (ev) => {
-                        /**
-                         * Prevents the platform context
-                         * menu from appearing.
-                         */
-                        ev.preventDefault();
-                        popoverEl.presentFromTrigger(ev);
-                    },
-                },
-                {
-                    eventName: 'click',
-                    callback: (ev) => ev.stopPropagation(),
-                },
-                {
-                    eventName: 'ionPopoverActivateTrigger',
-                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
-                },
-            ];
-            break;
-        case 'click':
-        default:
-            triggerCallbacks = [
-                {
-                    /**
-                     * Do not do a stopPropagation() here
-                     * because if you had two click triggers
-                     * then clicking the first trigger and then
-                     * clicking the second trigger would not cause
-                     * the first popover to dismiss.
-                     */
-                    eventName: 'click',
-                    callback: (ev) => popoverEl.presentFromTrigger(ev),
-                },
-                {
-                    eventName: 'ionPopoverActivateTrigger',
-                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
-                },
-            ];
-            break;
-    }
-    triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.addEventListener(eventName, callback));
-    triggerEl.setAttribute('data-ion-popover-trigger', 'true');
-    return () => {
-        triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.removeEventListener(eventName, callback));
-        triggerEl.removeAttribute('data-ion-popover-trigger');
-    };
-};
-/**
- * Returns the index of an ion-item in an array of ion-items.
- */
-const getIndexOfItem = (items, item) => {
-    if (!item || item.tagName !== 'ION-ITEM') {
-        return -1;
-    }
-    return items.findIndex((el) => el === item);
-};
-/**
- * Given an array of elements and a currently focused ion-item
- * returns the next ion-item relative to the focused one or
- * undefined.
- */
-const getNextItem = (items, currentItem) => {
-    const currentItemIndex = getIndexOfItem(items, currentItem);
-    return items[currentItemIndex + 1];
-};
-/**
- * Given an array of elements and a currently focused ion-item
- * returns the previous ion-item relative to the focused one or
- * undefined.
- */
-const getPrevItem = (items, currentItem) => {
-    const currentItemIndex = getIndexOfItem(items, currentItem);
-    return items[currentItemIndex - 1];
-};
-/** Focus the internal button of the ion-item */
-const focusItem = (item) => {
-    const root = getElementRoot(item);
-    const button = root.querySelector('button');
-    if (button) {
-        raf(() => button.focus());
-    }
-};
-/**
- * Returns `true` if `el` has been designated
- * as a trigger element for an ion-popover.
- */
-const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
-const configureKeyboardInteraction = (popoverEl) => {
-    const callback = async (ev) => {
-        var _a;
-        const activeElement = document.activeElement;
-        let items = [];
-        const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
-        /**
-         * Only handle custom keyboard interactions for the host popover element
-         * and children ion-item elements.
-         */
-        if (targetTagName !== 'ION-POPOVER' && targetTagName !== 'ION-ITEM') {
-            return;
-        }
-        /**
-         * Complex selectors with :not() are :not supported
-         * in older versions of Chromium so we need to do a
-         * try/catch here so errors are not thrown.
-         */
-        try {
-            /**
-             * Select all ion-items that are not children of child popovers.
-             * i.e. only select ion-item elements that are part of this popover
-             */
-            items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
-            /* eslint-disable-next-line */
-        }
-        catch (_b) { }
-        switch (ev.key) {
-            /**
-             * If we are in a child popover
-             * then pressing the left arrow key
-             * should close this popover and move
-             * focus to the popover that presented
-             * this one.
-             */
-            case 'ArrowLeft':
-                const parentPopover = await popoverEl.getParentPopover();
-                if (parentPopover) {
-                    popoverEl.dismiss(undefined, undefined, false);
-                }
-                break;
-            /**
-             * ArrowDown should move focus to the next focusable ion-item.
-             */
-            case 'ArrowDown':
-                // Disable movement/scroll with keyboard
-                ev.preventDefault();
-                const nextItem = getNextItem(items, activeElement);
-                if (nextItem !== undefined) {
-                    focusItem(nextItem);
-                }
-                break;
-            /**
-             * ArrowUp should move focus to the previous focusable ion-item.
-             */
-            case 'ArrowUp':
-                // Disable movement/scroll with keyboard
-                ev.preventDefault();
-                const prevItem = getPrevItem(items, activeElement);
-                if (prevItem !== undefined) {
-                    focusItem(prevItem);
-                }
-                break;
-            /**
-             * Home should move focus to the first focusable ion-item.
-             */
-            case 'Home':
-                ev.preventDefault();
-                const firstItem = items[0];
-                if (firstItem !== undefined) {
-                    focusItem(firstItem);
-                }
-                break;
-            /**
-             * End should move focus to the last focusable ion-item.
-             */
-            case 'End':
-                ev.preventDefault();
-                const lastItem = items[items.length - 1];
-                if (lastItem !== undefined) {
-                    focusItem(lastItem);
-                }
-                break;
-            /**
-             * ArrowRight, Spacebar, or Enter should activate
-             * the currently focused trigger item to open a
-             * popover if the element is a trigger item.
-             */
-            case 'ArrowRight':
-            case ' ':
-            case 'Enter':
-                if (activeElement && isTriggerElement(activeElement)) {
-                    const rightEvent = new CustomEvent('ionPopoverActivateTrigger');
-                    activeElement.dispatchEvent(rightEvent);
-                }
-                break;
-        }
-    };
-    popoverEl.addEventListener('keydown', callback);
-    return () => popoverEl.removeEventListener('keydown', callback);
-};
-/**
- * Positions a popover by taking into account
- * the reference point, preferred side, alignment
- * and viewport dimensions.
- */
-const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
-    var _a;
-    let referenceCoordinates = {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-    };
-    /**
-     * Calculate position relative to the
-     * x-y coordinates in the event that
-     * was passed in
-     */
-    switch (reference) {
-        case 'event':
-            if (!event) {
-                return defaultPosition;
-            }
-            const mouseEv = event;
-            referenceCoordinates = {
-                top: mouseEv.clientY,
-                left: mouseEv.clientX,
-                width: 1,
-                height: 1,
-            };
-            break;
-        /**
-         * Calculate position relative to the bounding
-         * box on either the trigger element
-         * specified via the `trigger` prop or
-         * the target specified on the event
-         * that was passed in.
-         */
-        case 'trigger':
-        default:
-            const customEv = event;
-            /**
-             * ionShadowTarget is used when we need to align the
-             * popover with an element inside of the shadow root
-             * of an Ionic component. Ex: Presenting a popover
-             * by clicking on the collapsed indicator inside
-             * of `ion-breadcrumb` and centering it relative
-             * to the indicator rather than `ion-breadcrumb`
-             * as a whole.
-             */
-            const actualTriggerEl = (triggerEl ||
-                ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) ||
-                (customEv === null || customEv === void 0 ? void 0 : customEv.target));
-            if (!actualTriggerEl) {
-                return defaultPosition;
-            }
-            const triggerBoundingBox = actualTriggerEl.getBoundingClientRect();
-            referenceCoordinates = {
-                top: triggerBoundingBox.top,
-                left: triggerBoundingBox.left,
-                width: triggerBoundingBox.width,
-                height: triggerBoundingBox.height,
-            };
-            break;
-    }
-    /**
-     * Get top/left offset that would allow
-     * popover to be positioned on the
-     * preferred side of the reference.
-     */
-    const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL);
-    /**
-     * Get the top/left adjustments that
-     * would allow the popover content
-     * to have the correct alignment.
-     */
-    const alignedCoordinates = calculatePopoverAlign(align, side, referenceCoordinates, contentWidth, contentHeight);
-    const top = coordinates.top + alignedCoordinates.top;
-    const left = coordinates.left + alignedCoordinates.left;
-    const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
-    const { originX, originY } = calculatePopoverOrigin(side, align, isRTL);
-    return { top, left, referenceCoordinates, arrowTop, arrowLeft, originX, originY };
-};
-/**
- * Determines the transform-origin
- * of the popover animation so that it
- * is in line with what the side and alignment
- * prop values are. Currently only used
- * with the MD animation.
- */
-const calculatePopoverOrigin = (side, align, isRTL) => {
-    switch (side) {
-        case 'top':
-            return { originX: getOriginXAlignment(align), originY: 'bottom' };
-        case 'bottom':
-            return { originX: getOriginXAlignment(align), originY: 'top' };
-        case 'left':
-            return { originX: 'right', originY: getOriginYAlignment(align) };
-        case 'right':
-            return { originX: 'left', originY: getOriginYAlignment(align) };
-        case 'start':
-            return { originX: isRTL ? 'left' : 'right', originY: getOriginYAlignment(align) };
-        case 'end':
-            return { originX: isRTL ? 'right' : 'left', originY: getOriginYAlignment(align) };
-    }
-};
-const getOriginXAlignment = (align) => {
-    switch (align) {
-        case 'start':
-            return 'left';
-        case 'center':
-            return 'center';
-        case 'end':
-            return 'right';
-    }
-};
-const getOriginYAlignment = (align) => {
-    switch (align) {
-        case 'start':
-            return 'top';
-        case 'center':
-            return 'center';
-        case 'end':
-            return 'bottom';
-    }
-};
-/**
- * Calculates where the arrow positioning
- * should be relative to the popover content.
- */
-const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL) => {
-    /**
-     * Note: When side is left, right, start, or end, the arrow is
-     * been rotated using a `transform`, so to move the arrow up or down
-     * by its dimension, you need to use `arrowWidth`.
-     */
-    const leftPosition = {
-        arrowTop: top + contentHeight / 2 - arrowWidth / 2,
-        arrowLeft: left + contentWidth - arrowWidth / 2,
-    };
-    /**
-     * Move the arrow to the left by arrowWidth and then
-     * again by half of its width because we have rotated
-     * the arrow using a transform.
-     */
-    const rightPosition = { arrowTop: top + contentHeight / 2 - arrowWidth / 2, arrowLeft: left - arrowWidth * 1.5 };
-    switch (side) {
-        case 'top':
-            return { arrowTop: top + contentHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-        case 'bottom':
-            return { arrowTop: top - arrowHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-        case 'left':
-            return leftPosition;
-        case 'right':
-            return rightPosition;
-        case 'start':
-            return isRTL ? rightPosition : leftPosition;
-        case 'end':
-            return isRTL ? leftPosition : rightPosition;
-        default:
-            return { arrowTop: 0, arrowLeft: 0 };
-    }
-};
-/**
- * Calculates the required top/left
- * values needed to position the popover
- * content on the side specified in the
- * `side` prop.
- */
-const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL) => {
-    const sideLeft = {
-        top: triggerBoundingBox.top,
-        left: triggerBoundingBox.left - contentWidth - arrowWidth,
-    };
-    const sideRight = {
-        top: triggerBoundingBox.top,
-        left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth,
-    };
-    switch (side) {
-        case 'top':
-            return {
-                top: triggerBoundingBox.top - contentHeight - arrowHeight,
-                left: triggerBoundingBox.left,
-            };
-        case 'right':
-            return sideRight;
-        case 'bottom':
-            return {
-                top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
-                left: triggerBoundingBox.left,
-            };
-        case 'left':
-            return sideLeft;
-        case 'start':
-            return isRTL ? sideRight : sideLeft;
-        case 'end':
-            return isRTL ? sideLeft : sideRight;
-    }
-};
-/**
- * Calculates the required top/left
- * offset values needed to provide the
- * correct alignment regardless while taking
- * into account the side the popover is on.
- */
-const calculatePopoverAlign = (align, side, triggerBoundingBox, contentWidth, contentHeight) => {
-    switch (align) {
-        case 'center':
-            return calculatePopoverCenterAlign(side, triggerBoundingBox, contentWidth, contentHeight);
-        case 'end':
-            return calculatePopoverEndAlign(side, triggerBoundingBox, contentWidth, contentHeight);
-        case 'start':
-        default:
-            return { top: 0, left: 0 };
-    }
-};
-/**
- * Calculate the end alignment for
- * the popover. If side is on the x-axis
- * then the align values refer to the top
- * and bottom margins of the content.
- * If side is on the y-axis then the
- * align values refer to the left and right
- * margins of the content.
- */
-const calculatePopoverEndAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
-    switch (side) {
-        case 'start':
-        case 'end':
-        case 'left':
-        case 'right':
-            return {
-                top: -(contentHeight - triggerBoundingBox.height),
-                left: 0,
-            };
-        case 'top':
-        case 'bottom':
-        default:
-            return {
-                top: 0,
-                left: -(contentWidth - triggerBoundingBox.width),
-            };
-    }
-};
-/**
- * Calculate the center alignment for
- * the popover. If side is on the x-axis
- * then the align values refer to the top
- * and bottom margins of the content.
- * If side is on the y-axis then the
- * align values refer to the left and right
- * margins of the content.
- */
-const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
-    switch (side) {
-        case 'start':
-        case 'end':
-        case 'left':
-        case 'right':
-            return {
-                top: -(contentHeight / 2 - triggerBoundingBox.height / 2),
-                left: 0,
-            };
-        case 'top':
-        case 'bottom':
-        default:
-            return {
-                top: 0,
-                left: -(contentWidth / 2 - triggerBoundingBox.width / 2),
-            };
-    }
-};
-/**
- * Adjusts popover positioning coordinates
- * such that popover does not appear offscreen
- * or overlapping safe area bounds.
- */
-const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
-    let arrowTop = coordArrowTop;
-    const arrowLeft = coordArrowLeft;
-    let left = coordLeft;
-    let top = coordTop;
-    let bottom;
-    let originX = contentOriginX;
-    let originY = contentOriginY;
-    let checkSafeAreaLeft = false;
-    let checkSafeAreaRight = false;
-    const triggerTop = triggerCoordinates
-        ? triggerCoordinates.top + triggerCoordinates.height
-        : bodyHeight / 2 - contentHeight / 2;
-    const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
-    let addPopoverBottomClass = false;
-    /**
-     * Adjust popover so it does not
-     * go off the left of the screen.
-     */
-    if (left < bodyPadding + safeAreaMargin) {
-        left = bodyPadding;
-        checkSafeAreaLeft = true;
-        originX = 'left';
-        /**
-         * Adjust popover so it does not
-         * go off the right of the screen.
-         */
-    }
-    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
-        checkSafeAreaRight = true;
-        left = bodyWidth - contentWidth - bodyPadding;
-        originX = 'right';
-    }
-    /**
-     * Adjust popover so it does not
-     * go off the top of the screen.
-     * If popover is on the left or the right of
-     * the trigger, then we should not adjust top
-     * margins.
-     */
-    if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
-        if (triggerTop - contentHeight > 0) {
-            /**
-             * While we strive to align the popover with the trigger
-             * on smaller screens this is not always possible. As a result,
-             * we adjust the popover up so that it does not hang
-             * off the bottom of the screen. However, we do not want to move
-             * the popover up so much that it goes off the top of the screen.
-             *
-             * We chose 12 here so that the popover position looks a bit nicer as
-             * it is not right up against the edge of the screen.
-             */
-            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
-            arrowTop = top + contentHeight;
-            originY = 'bottom';
-            addPopoverBottomClass = true;
-            /**
-             * If not enough room for popover to appear
-             * above trigger, then cut it off.
-             */
-        }
-        else {
-            bottom = bodyPadding;
-        }
-    }
-    return {
-        top,
-        left,
-        bottom,
-        originX,
-        originY,
-        checkSafeAreaLeft,
-        checkSafeAreaRight,
-        arrowTop,
-        arrowLeft,
-        addPopoverBottomClass,
-    };
-};
-const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
-    /**
-     * If no event provided and
-     * we do not have a trigger,
-     * then this popover was likely
-     * presented via the popoverController
-     * or users called `present` manually.
-     * In this case, the arrow should not be
-     * shown as we do not have a reference.
-     */
-    if (!ev && !trigger) {
-        return false;
-    }
-    /**
-     * If popover is on the left or the right
-     * of a trigger, but we needed to adjust the
-     * popover due to screen bounds, then we should
-     * hide the arrow as it will never be pointing
-     * at the trigger.
-     */
-    if (side !== 'top' && side !== 'bottom' && didAdjustBounds) {
-        return false;
-    }
-    return true;
-};
-
-const POPOVER_IOS_BODY_PADDING = 5;
-/**
- * iOS Popover Enter Animation
- */
-// TODO(FW-2832): types
-const iosEnterAnimation = (baseEl, opts) => {
-    var _a;
-    const { event: ev, size, trigger, reference, side, align } = opts;
-    const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
-    const bodyWidth = doc.defaultView.innerWidth;
-    const bodyHeight = doc.defaultView.innerHeight;
-    const root = getElementRoot(baseEl);
-    const contentEl = root.querySelector('.popover-content');
-    const arrowEl = root.querySelector('.popover-arrow');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
-    const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
-    const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
-    const defaultPosition = {
-        top: bodyHeight / 2 - contentHeight / 2,
-        left: bodyWidth / 2 - contentWidth / 2,
-        originX: isRTL ? 'right' : 'left',
-        originY: 'top',
-    };
-    const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
-    const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-    const margin = size === 'cover' ? 0 : 25;
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const contentAnimation = createAnimation();
-    backdropAnimation
-        .addElement(root.querySelector('ion-backdrop'))
-        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-        .beforeStyles({
-        'pointer-events': 'none',
-    })
-        .afterClearStyles(['pointer-events']);
-    // In Chromium, if the wrapper animates, the backdrop filter doesn't work.
-    // The Chromium team stated that this behavior is expected and not a bug. The element animating opacity creates a backdrop root for the backdrop-filter.
-    // To get around this, instead of animating the wrapper, animate both the arrow and content.
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1148826
-    contentAnimation
-        .addElement(root.querySelector('.popover-arrow'))
-        .addElement(root.querySelector('.popover-content'))
-        .fromTo('opacity', 0.01, 1);
-    // TODO(FW-4376) Ensure that arrow also blurs when translucent
-    return baseAnimation
-        .easing('ease')
-        .duration(100)
-        .beforeAddWrite(() => {
-        if (size === 'cover') {
-            baseEl.style.setProperty('--width', `${contentWidth}px`);
-        }
-        if (addPopoverBottomClass) {
-            baseEl.classList.add('popover-bottom');
-        }
-        if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
-        }
-        const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
-        const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
-        let leftValue = `${left}px`;
-        if (checkSafeAreaLeft) {
-            leftValue = `${left}px${safeAreaLeft}`;
-        }
-        if (checkSafeAreaRight) {
-            leftValue = `${left}px${safeAreaRight}`;
-        }
-        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
-        contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
-        contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
-        if (arrowEl !== null) {
-            const didAdjustBounds = results.top !== top || results.left !== left;
-            const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
-            if (showArrow) {
-                arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
-                arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
-            }
-            else {
-                arrowEl.style.setProperty('display', 'none');
-            }
-        }
-    })
-        .addAnimation([backdropAnimation, contentAnimation]);
-};
-
-/**
- * iOS Popover Leave Animation
- */
-const iosLeaveAnimation = (baseEl) => {
-    const root = getElementRoot(baseEl);
-    const contentEl = root.querySelector('.popover-content');
-    const arrowEl = root.querySelector('.popover-arrow');
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const contentAnimation = createAnimation();
-    backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
-    contentAnimation
-        .addElement(root.querySelector('.popover-arrow'))
-        .addElement(root.querySelector('.popover-content'))
-        .fromTo('opacity', 0.99, 0);
-    return baseAnimation
-        .easing('ease')
-        .afterAddWrite(() => {
-        baseEl.style.removeProperty('--width');
-        baseEl.classList.remove('popover-bottom');
-        contentEl.style.removeProperty('top');
-        contentEl.style.removeProperty('left');
-        contentEl.style.removeProperty('bottom');
-        contentEl.style.removeProperty('transform-origin');
-        if (arrowEl) {
-            arrowEl.style.removeProperty('top');
-            arrowEl.style.removeProperty('left');
-            arrowEl.style.removeProperty('display');
-        }
-    })
-        .duration(300)
-        .addAnimation([backdropAnimation, contentAnimation]);
-};
-
-const POPOVER_MD_BODY_PADDING = 12;
-/**
- * Md Popover Enter Animation
- */
-// TODO(FW-2832): types
-const mdEnterAnimation = (baseEl, opts) => {
-    var _a;
-    const { event: ev, size, trigger, reference, side, align } = opts;
-    const doc = baseEl.ownerDocument;
-    const isRTL = doc.dir === 'rtl';
-    const bodyWidth = doc.defaultView.innerWidth;
-    const bodyHeight = doc.defaultView.innerHeight;
-    const root = getElementRoot(baseEl);
-    const contentEl = root.querySelector('.popover-content');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
-    const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
-    const defaultPosition = {
-        top: bodyHeight / 2 - contentHeight / 2,
-        left: bodyWidth / 2 - contentWidth / 2,
-        originX: isRTL ? 'right' : 'left',
-        originY: 'top',
-    };
-    const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
-    const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-    const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    const contentAnimation = createAnimation();
-    const viewportAnimation = createAnimation();
-    backdropAnimation
-        .addElement(root.querySelector('ion-backdrop'))
-        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-        .beforeStyles({
-        'pointer-events': 'none',
-    })
-        .afterClearStyles(['pointer-events']);
-    wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).duration(150).fromTo('opacity', 0.01, 1);
-    contentAnimation
-        .addElement(contentEl)
-        .beforeStyles({
-        top: `calc(${top}px + var(--offset-y, 0px))`,
-        left: `calc(${left}px + var(--offset-x, 0px))`,
-        'transform-origin': `${originY} ${originX}`,
-    })
-        .beforeAddWrite(() => {
-        if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
-        }
-    })
-        .fromTo('transform', 'scale(0.8)', 'scale(1)');
-    viewportAnimation.addElement(root.querySelector('.popover-viewport')).fromTo('opacity', 0.01, 1);
-    return baseAnimation
-        .easing('cubic-bezier(0.36,0.66,0.04,1)')
-        .duration(300)
-        .beforeAddWrite(() => {
-        if (size === 'cover') {
-            baseEl.style.setProperty('--width', `${contentWidth}px`);
-        }
-        if (originY === 'bottom') {
-            baseEl.classList.add('popover-bottom');
-        }
-    })
-        .addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
-};
-
-/**
- * Md Popover Leave Animation
- */
-const mdLeaveAnimation = (baseEl) => {
-    const root = getElementRoot(baseEl);
-    const contentEl = root.querySelector('.popover-content');
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
-    wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).fromTo('opacity', 0.99, 0);
-    return baseAnimation
-        .easing('ease')
-        .afterAddWrite(() => {
-        baseEl.style.removeProperty('--width');
-        baseEl.classList.remove('popover-bottom');
-        contentEl.style.removeProperty('top');
-        contentEl.style.removeProperty('left');
-        contentEl.style.removeProperty('bottom');
-        contentEl.style.removeProperty('transform-origin');
-    })
-        .duration(150)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-};
-
-const popoverIosCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden;z-index:11}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}.popover-arrow::after{inset-inline-start:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}";
-
-const popoverMdCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}";
-
-const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.didPresent = createEvent(this, "ionPopoverDidPresent", 7);
-        this.willPresent = createEvent(this, "ionPopoverWillPresent", 7);
-        this.willDismiss = createEvent(this, "ionPopoverWillDismiss", 7);
-        this.didDismiss = createEvent(this, "ionPopoverDidDismiss", 7);
-        this.didPresentShorthand = createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
-        this.ionMount = createEvent(this, "ionMount", 7);
-        this.parentPopover = null;
-        this.coreDelegate = CoreDelegate();
-        this.lockController = createLockController();
-        this.inline = false;
-        this.focusDescendantOnPresent = false;
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * If `true`, the popover will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, a backdrop will be displayed behind the popover.
-         * This property controls whether or not the backdrop
-         * darkens the screen when the popover is presented.
-         * It does not control whether or not the backdrop
-         * is active or present in the DOM.
-         */
-        this.showBackdrop = true;
-        /**
-         * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * If `true`, the popover will animate.
-         */
-        this.animated = true;
-        /**
-         * Describes what kind of interaction with the trigger that
-         * should cause the popover to open. Does not apply when the `trigger`
-         * property is `undefined`.
-         * If `"click"`, the popover will be presented when the trigger is left clicked.
-         * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
-         * If `"context-menu"`, the popover will be presented when the trigger is right
-         * clicked on desktop and long pressed on mobile. This will also prevent your
-         * device's normal context menu from appearing.
-         */
-        this.triggerAction = 'click';
-        /**
-         * Describes how to calculate the popover width.
-         * If `"cover"`, the popover width will match the width of the trigger.
-         * If `"auto"`, the popover width will be set to a static default value.
-         */
-        this.size = 'auto';
-        /**
-         * If `true`, the popover will be automatically
-         * dismissed when the content has been clicked.
-         */
-        this.dismissOnSelect = false;
-        /**
-         * Describes what to position the popover relative to.
-         * If `"trigger"`, the popover will be positioned relative
-         * to the trigger button. If passing in an event, this is
-         * determined via event.target.
-         * If `"event"`, the popover will be positioned relative
-         * to the x/y coordinates of the trigger action. If passing
-         * in an event, this is determined via event.clientX and event.clientY.
-         */
-        this.reference = 'trigger';
-        /**
-         * Describes which side of the `reference` point to position
-         * the popover on. The `"start"` and `"end"` values are RTL-aware,
-         * and the `"left"` and `"right"` values are not.
-         */
-        this.side = 'bottom';
-        /**
-         * If `true`, the popover will display an arrow that points at the
-         * `reference` when running in `ios` mode. Does not apply in `md` mode.
-         */
-        this.arrow = true;
-        /**
-         * If `true`, the popover will open. If `false`, the popover will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the popoverController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the popover dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        /**
-         * @internal
-         *
-         * If `true` the popover will not register its own keyboard event handlers.
-         * This allows the contents of the popover to handle their own keyboard interactions.
-         *
-         * If `false`, the popover will register its own keyboard event handlers for
-         * navigating `ion-list` items within a popover (up/down/home/end/etc.).
-         * This will also cancel browser keyboard event bindings to prevent scroll
-         * behavior in a popover using a list of items.
-         */
-        this.keyboardEvents = false;
-        /**
-         * If `true`, focus will not be allowed to move outside of this overlay.
-         * If `false`, focus will be allowed to move outside of the overlay.
-         *
-         * In most scenarios this property should remain set to `true`. Setting
-         * this property to `false` can cause severe accessibility issues as users
-         * relying on assistive technologies may be able to move focus into
-         * a confusing state. We recommend only setting this to `false` when
-         * absolutely necessary.
-         *
-         * Developers may want to consider disabling focus trapping if this
-         * overlay presents a non-Ionic overlay from a 3rd party library.
-         * Developers would disable focus trapping on the Ionic overlay
-         * when presenting the 3rd party overlay and then re-enable
-         * focus trapping when dismissing the 3rd party overlay and moving
-         * focus back to the Ionic overlay.
-         */
-        this.focusTrap = true;
-        /**
-         * If `true`, the component passed into `ion-popover` will
-         * automatically be mounted when the popover is created. The
-         * component will remain mounted even when the popover is dismissed.
-         * However, the component will be destroyed when the popover is
-         * destroyed. This property is not reactive and should only be
-         * used when initially creating a popover.
-         *
-         * Note: This feature only applies to inline popovers in JavaScript
-         * frameworks such as Angular, React, and Vue.
-         */
-        this.keepContentsMounted = false;
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
-        };
-        this.onLifecycle = (modalEvent) => {
-            const el = this.usersElement;
-            const name = LIFECYCLE_MAP[modalEvent.type];
-            if (el && name) {
-                const event = new CustomEvent(name, {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: modalEvent.detail,
-                });
-                el.dispatchEvent(event);
-            }
-        };
-        this.configureTriggerInteraction = () => {
-            const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
-            if (destroyTriggerInteraction) {
-                destroyTriggerInteraction();
-            }
-            if (trigger === undefined) {
-                return;
-            }
-            const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
-            if (!triggerEl) {
-                printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
-                return;
-            }
-            this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
-        };
-        this.configureKeyboardInteraction = () => {
-            const { destroyKeyboardInteraction, el } = this;
-            if (destroyKeyboardInteraction) {
-                destroyKeyboardInteraction();
-            }
-            this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
-        };
-        this.configureDismissInteraction = () => {
-            const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
-            if (!parentPopover || !triggerEl) {
-                return;
-            }
-            if (destroyDismissInteraction) {
-                destroyDismissInteraction();
-            }
-            this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
-        };
-    }
-    onTriggerChange() {
-        this.configureTriggerInteraction();
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    connectedCallback() {
-        const { configureTriggerInteraction, el } = this;
-        prepareOverlay(el);
-        configureTriggerInteraction();
-    }
-    disconnectedCallback() {
-        const { destroyTriggerInteraction } = this;
-        if (destroyTriggerInteraction) {
-            destroyTriggerInteraction();
-        }
-        if (this.headerResizeObserver) {
-            this.headerResizeObserver.disconnect();
-            this.headerResizeObserver = undefined;
-        }
-    }
-    componentWillLoad() {
-        var _a, _b;
-        const { el } = this;
-        const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
-        this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
-        if (this.alignment === undefined) {
-            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
-        }
-    }
-    componentDidLoad() {
-        const { parentPopover, isOpen } = this;
-        /**
-         * If popover was rendered with isOpen="true"
-         * then we should open popover immediately.
-         */
-        if (isOpen === true) {
-            raf(() => this.present());
-        }
-        if (parentPopover) {
-            addEventListener(parentPopover, 'ionPopoverWillDismiss', () => {
-                this.dismiss(undefined, undefined, false);
-            });
-        }
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.configureTriggerInteraction();
-    }
-    /**
-     * When opening a popover from a trigger, we should not be
-     * modifying the `event` prop from inside the component.
-     * Additionally, when pressing the "Right" arrow key, we need
-     * to shift focus to the first descendant in the newly presented
-     * popover.
-     *
-     * @internal
-     */
-    async presentFromTrigger(event, focusDescendant = false) {
-        this.focusDescendantOnPresent = focusDescendant;
-        await this.present(event);
-        this.focusDescendantOnPresent = false;
-    }
-    /**
-     * Determines whether or not an overlay
-     * is being used inline or via a controller/JS
-     * and returns the correct delegate.
-     * By default, subsequent calls to getDelegate
-     * will use a cached version of the delegate.
-     * This is useful for calling dismiss after
-     * present so that the correct delegate is given.
-     */
-    getDelegate(force = false) {
-        if (this.workingDelegate && !force) {
-            return {
-                delegate: this.workingDelegate,
-                inline: this.inline,
-            };
-        }
-        /**
-         * If using overlay inline
-         * we potentially need to use the coreDelegate
-         * so that this works in vanilla JS apps.
-         * If a developer has presented this component
-         * via a controller, then we can assume
-         * the component is already in the
-         * correct place.
-         */
-        const parentEl = this.el.parentNode;
-        const inline = (this.inline = parentEl !== null && !this.hasController);
-        const delegate = (this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate);
-        return { inline, delegate };
-    }
-    /**
-     * Present the popover overlay after it has been created.
-     * Developers can pass a mouse, touch, or pointer event
-     * to position the popover relative to where that event
-     * was dispatched.
-     *
-     * @param event The event to position the popover relative to.
-     */
-    async present(event) {
-        const unlock = await this.lockController.lock();
-        if (this.presented) {
-            unlock();
-            return;
-        }
-        const { el } = this;
-        const { inline, delegate } = this.getDelegate(true);
-        /**
-         * Emit ionMount so JS Frameworks have an opportunity
-         * to add the child component to the DOM. The child
-         * component will be assigned to this.usersElement below.
-         */
-        this.ionMount.emit();
-        this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
-        this.recalculateContentOnHeaderReady();
-        if (!this.keyboardEvents) {
-            this.configureKeyboardInteraction();
-        }
-        this.configureDismissInteraction();
-        /**
-         * When using the lazy loaded build of Stencil, we need to wait
-         * for every Stencil component instance to be ready before presenting
-         * otherwise there can be a flash of unstyled content. With the
-         * custom elements bundle we need to wait for the JS framework
-         * mount the inner contents of the overlay otherwise WebKit may
-         * get the transition incorrect.
-         */
-        if (hasLazyBuild(el)) {
-            await deepReady(this.usersElement);
-            /**
-             * If keepContentsMounted="true" then the
-             * JS Framework has already mounted the inner
-             * contents so there is no need to wait.
-             * Otherwise, we need to wait for the JS
-             * Framework to mount the inner contents
-             * of this component.
-             */
-        }
-        else if (!this.keepContentsMounted) {
-            await waitForMount();
-        }
-        await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
-            event: event || this.event,
-            size: this.size,
-            trigger: this.triggerEl,
-            reference: this.reference,
-            side: this.side,
-            align: this.alignment,
-        });
-        /**
-         * If popover is nested and was
-         * presented using the "Right" arrow key,
-         * we need to move focus to the first
-         * descendant inside of the popover.
-         */
-        if (this.focusDescendantOnPresent) {
-            focusFirstDescendant(el);
-        }
-        unlock();
-    }
-    /**
-     * Watch the header for height changes and trigger content dimension
-     * recalculation when the header has a height > 0. This sets the offset-top
-     * of the content to the height of the header correctly.
-     */
-    recalculateContentOnHeaderReady() {
-        var _a;
-        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
-        if (!popoverContent) {
-            return;
-        }
-        const contentContainer = this.usersElement || popoverContent;
-        const header = contentContainer.querySelector('ion-header');
-        const contentElements = contentContainer.querySelectorAll('ion-content');
-        if (!header || contentElements.length === 0) {
-            return;
-        }
-        this.headerResizeObserver = new ResizeObserver(async () => {
-            var _a;
-            if (header.offsetHeight > 0) {
-                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-                this.headerResizeObserver = undefined;
-                for (const contentEl of contentElements) {
-                    await contentEl.recalculateDimensions();
-                }
-            }
-        });
-        this.headerResizeObserver.observe(header);
-    }
-    /**
-     * Dismiss the popover overlay after it has been presented.
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
-     * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
-     * a parent popover if this popover is nested. Defaults to `true`.
-     */
-    async dismiss(data, role, dismissParentPopover = true) {
-        const unlock = await this.lockController.lock();
-        const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
-        if (dismissParentPopover && this.parentPopover) {
-            this.parentPopover.dismiss(data, role, dismissParentPopover);
-        }
-        const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-        if (shouldDismiss) {
-            if (destroyKeyboardInteraction) {
-                destroyKeyboardInteraction();
-                this.destroyKeyboardInteraction = undefined;
-            }
-            if (destroyDismissInteraction) {
-                destroyDismissInteraction();
-                this.destroyDismissInteraction = undefined;
-            }
-            /**
-             * If using popover inline
-             * we potentially need to use the coreDelegate
-             * so that this works in vanilla JS apps
-             */
-            const { delegate } = this.getDelegate();
-            await detachComponent(delegate, this.usersElement);
-        }
-        unlock();
-        return shouldDismiss;
-    }
-    /**
-     * @internal
-     */
-    async getParentPopover() {
-        return this.parentPopover;
-    }
-    /**
-     * Returns a promise that resolves when the popover did dismiss.
-     */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionPopoverDidDismiss');
-    }
-    /**
-     * Returns a promise that resolves when the popover will dismiss.
-     */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionPopoverWillDismiss');
-    }
-    render() {
-        const mode = getIonMode(this);
-        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
-        const desktop = isPlatform('desktop');
-        const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
-                zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "trigger": ["onTriggerChange"],
-        "triggerAction": ["onTriggerChange"],
-        "isOpen": ["onIsOpenChange"]
-    }; }
-    static get style() { return {
-        ios: popoverIosCss,
-        md: popoverMdCss
-    }; }
-}, [289, "ion-popover", {
-        "hasController": [4, "has-controller"],
-        "delegate": [16],
-        "overlayIndex": [2, "overlay-index"],
-        "enterAnimation": [16],
-        "leaveAnimation": [16],
-        "component": [1],
-        "componentProps": [16],
-        "keyboardClose": [4, "keyboard-close"],
-        "cssClass": [1, "css-class"],
-        "backdropDismiss": [4, "backdrop-dismiss"],
-        "event": [8],
-        "showBackdrop": [4, "show-backdrop"],
-        "translucent": [4],
-        "animated": [4],
-        "htmlAttributes": [16],
-        "triggerAction": [1, "trigger-action"],
-        "trigger": [1],
-        "size": [1],
-        "dismissOnSelect": [4, "dismiss-on-select"],
-        "reference": [1],
-        "side": [1],
-        "alignment": [1025],
-        "arrow": [4],
-        "isOpen": [4, "is-open"],
-        "keyboardEvents": [4, "keyboard-events"],
-        "focusTrap": [4, "focus-trap"],
-        "keepContentsMounted": [4, "keep-contents-mounted"],
-        "presented": [32],
-        "presentFromTrigger": [64],
-        "present": [64],
-        "dismiss": [64],
-        "getParentPopover": [64],
-        "onDidDismiss": [64],
-        "onWillDismiss": [64]
-    }, undefined, {
-        "trigger": ["onTriggerChange"],
-        "triggerAction": ["onTriggerChange"],
-        "isOpen": ["onIsOpenChange"]
-    }]);
-const LIFECYCLE_MAP = {
-    ionPopoverDidPresent: 'ionViewDidEnter',
-    ionPopoverWillPresent: 'ionViewWillEnter',
-    ionPopoverWillDismiss: 'ionViewWillLeave',
-    ionPopoverDidDismiss: 'ionViewDidLeave',
-};
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ion-popover", "ion-backdrop"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ion-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Popover);
-            }
-            break;
-        case "ion-backdrop":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Popover as P, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as i,transformTag as s}from"@stencil/core/internal/client";import{B as n,j as a,k as p,f as c,n as d,g as l,h,F as v}from"./overlays.js";import{C as f,a as g,d as m}from"./framework-delegate.js";import{g as b,r as u,a as x,k as w}from"./helpers.js";import{c as k}from"./lock-controller.js";import{p as y}from"./index4.js";import{b as P,a as D}from"./ionic-global.js";import{g as T}from"./theme.js";import{e as A,w as I}from"./index2.js";import{c as C}from"./animation.js";import{d as O}from"./backdrop.js";const $=(t,e,o)=>{const r=e.getBoundingClientRect(),i=r.height;let s=r.width;return"cover"===t&&o&&(s=o.getBoundingClientRect().width),{contentWidth:s,contentHeight:i}},W=(t,e)=>e&&"ION-ITEM"===e.tagName?t.findIndex((t=>t===e)):-1,L=t=>{const e=b(t).querySelector("button");e&&u((()=>e.focus()))},N=(t,e,o,r,i,s,n,a,p,c,d)=>{var l;let h={top:0,left:0,width:0,height:0};if("event"===s){if(!d)return p;h={top:d.clientY,left:d.clientX,width:1,height:1}}else{const t=c||(null===(l=null==d?void 0:d.detail)||void 0===l?void 0:l.ionShadowTarget)||(null==d?void 0:d.target);if(!t)return p;const e=t.getBoundingClientRect();h={top:e.top,left:e.left,width:e.width,height:e.height}}const v=Y(n,h,e,o,r,i,t),f=H(a,n,h,e,o),g=v.top+f.top,m=v.left+f.left,{arrowTop:b,arrowLeft:u}=X(n,r,i,g,m,e,o,t),{originX:x,originY:w}=j(n,a,t);return{top:g,left:m,referenceCoordinates:h,arrowTop:b,arrowLeft:u,originX:x,originY:w}},j=(t,e,o)=>{switch(t){case"top":return{originX:E(e),originY:"bottom"};case"bottom":return{originX:E(e),originY:"top"};case"left":return{originX:"right",originY:z(e)};case"right":return{originX:"left",originY:z(e)};case"start":return{originX:o?"left":"right",originY:z(e)};case"end":return{originX:o?"right":"left",originY:z(e)}}},E=t=>{switch(t){case"start":return"left";case"center":return"center";case"end":return"right"}},z=t=>{switch(t){case"start":return"top";case"center":return"center";case"end":return"bottom"}},X=(t,e,o,r,i,s,n,a)=>{const p={arrowTop:r+n/2-e/2,arrowLeft:i+s-e/2},c={arrowTop:r+n/2-e/2,arrowLeft:i-1.5*e};switch(t){case"top":return{arrowTop:r+n,arrowLeft:i+s/2-e/2};case"bottom":return{arrowTop:r-o,arrowLeft:i+s/2-e/2};case"left":return p;case"right":return c;case"start":return a?c:p;case"end":return a?p:c;default:return{arrowTop:0,arrowLeft:0}}},Y=(t,e,o,r,i,s,n)=>{const a={top:e.top,left:e.left-o-i},p={top:e.top,left:e.left+e.width+i};switch(t){case"top":return{top:e.top-r-s,left:e.left};case"right":return p;case"bottom":return{top:e.top+e.height+s,left:e.left};case"left":return a;case"start":return n?p:a;case"end":return n?a:p}},H=(t,e,o,r,i)=>{switch(t){case"center":return R(e,o,r,i);case"end":return M(e,o,r,i);default:return{top:0,left:0}}},M=(t,e,o,r)=>{switch(t){case"start":case"end":case"left":case"right":return{top:-(r-e.height),left:0};default:return{top:0,left:-(o-e.width)}}},R=(t,e,o,r)=>{switch(t){case"start":case"end":case"left":case"right":return{top:-(r/2-e.height/2),left:0};default:return{top:0,left:-(o/2-e.width/2)}}},S=(t,e,o,r,i,s,n,a,p,c,d,l,h=0,v=0,f=0)=>{let g=h;const m=v;let b,u=o,x=e,w=c,k=d,y=!1,P=!1;const D=l?l.top+l.height:s/2-a/2,T=l?l.height:0;let A=!1;return u<r+p?(u=r,y=!0,w="left"):n+r+u+p>i&&(P=!0,u=i-n-r,w="right"),D+T+a>s&&("top"===t||"bottom"===t)&&(D-a>0?(x=Math.max(12,D-a-T-(f-1)),g=x+a,k="bottom",A=!0):b=r),{top:x,left:u,bottom:b,originX:w,originY:k,checkSafeAreaLeft:y,checkSafeAreaRight:P,arrowTop:g,arrowLeft:m,addPopoverBottomClass:A}},B=(t,e)=>{var o;const{event:r,size:i,trigger:s,reference:n,side:a,align:p}=e,c=t.ownerDocument,d="rtl"===c.dir,l=c.defaultView.innerWidth,h=c.defaultView.innerHeight,v=b(t),f=v.querySelector(".popover-content"),g=v.querySelector(".popover-arrow"),m=s||(null===(o=null==r?void 0:r.detail)||void 0===o?void 0:o.ionShadowTarget)||(null==r?void 0:r.target),{contentWidth:u,contentHeight:x}=$(i,f,m),{arrowWidth:w,arrowHeight:k}=(t=>{if(!t)return{arrowWidth:0,arrowHeight:0};const{width:e,height:o}=t.getBoundingClientRect();return{arrowWidth:e,arrowHeight:o}})(g),y=N(d,u,x,w,k,n,a,p,{top:h/2-x/2,left:l/2-u/2,originX:d?"right":"left",originY:"top"},s,r),P="cover"===i?0:5,D="cover"===i?0:25,{originX:T,originY:A,top:I,left:O,bottom:W,checkSafeAreaLeft:L,checkSafeAreaRight:j,arrowTop:E,arrowLeft:z,addPopoverBottomClass:X}=S(a,y.top,y.left,P,l,h,u,x,D,y.originX,y.originY,y.referenceCoordinates,y.arrowTop,y.arrowLeft,k),Y=C(),H=C(),M=C();return H.addElement(v.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),M.addElement(v.querySelector(".popover-arrow")).addElement(v.querySelector(".popover-content")).fromTo("opacity",.01,1),Y.easing("ease").duration(100).beforeAddWrite((()=>{"cover"===i&&t.style.setProperty("--width",`${u}px`),X&&t.classList.add("popover-bottom"),void 0!==W&&f.style.setProperty("bottom",`${W}px`);let e=`${O}px`;if(L&&(e=`${O}px + var(--ion-safe-area-left, 0)`),j&&(e=`${O}px - var(--ion-safe-area-right, 0)`),f.style.setProperty("top",`calc(${I}px + var(--offset-y, 0))`),f.style.setProperty("left",`calc(${e} + var(--offset-x, 0))`),f.style.setProperty("transform-origin",`${A} ${T}`),null!==g){const t=((t,e=!1,o,r)=>!(!o&&!r||"top"!==t&&"bottom"!==t&&e))(a,y.top!==I||y.left!==O,r,s);t?(g.style.setProperty("top",`calc(${E}px + var(--offset-y, 0))`),g.style.setProperty("left",`calc(${z}px + var(--offset-x, 0))`)):g.style.setProperty("display","none")}})).addAnimation([H,M])},V=t=>{const e=b(t),o=e.querySelector(".popover-content"),r=e.querySelector(".popover-arrow"),i=C(),s=C(),n=C();return s.addElement(e.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",0),n.addElement(e.querySelector(".popover-arrow")).addElement(e.querySelector(".popover-content")).fromTo("opacity",.99,0),i.easing("ease").afterAddWrite((()=>{t.style.removeProperty("--width"),t.classList.remove("popover-bottom"),o.style.removeProperty("top"),o.style.removeProperty("left"),o.style.removeProperty("bottom"),o.style.removeProperty("transform-origin"),r&&(r.style.removeProperty("top"),r.style.removeProperty("left"),r.style.removeProperty("display"))})).duration(300).addAnimation([s,n])},F=(t,e)=>{var o;const{event:r,size:i,trigger:s,reference:n,side:a,align:p}=e,c=t.ownerDocument,d="rtl"===c.dir,l=c.defaultView.innerWidth,h=c.defaultView.innerHeight,v=b(t),f=v.querySelector(".popover-content"),g=s||(null===(o=null==r?void 0:r.detail)||void 0===o?void 0:o.ionShadowTarget)||(null==r?void 0:r.target),{contentWidth:m,contentHeight:u}=$(i,f,g),x=N(d,m,u,0,0,n,a,p,{top:h/2-u/2,left:l/2-m/2,originX:d?"right":"left",originY:"top"},s,r),w="cover"===i?0:12,{originX:k,originY:y,top:P,left:D,bottom:T}=S(a,x.top,x.left,w,l,h,m,u,0,x.originX,x.originY,x.referenceCoordinates),A=C(),I=C(),O=C(),W=C(),L=C();return I.addElement(v.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),O.addElement(v.querySelector(".popover-wrapper")).duration(150).fromTo("opacity",.01,1),W.addElement(f).beforeStyles({top:`calc(${P}px + var(--offset-y, 0px))`,left:`calc(${D}px + var(--offset-x, 0px))`,"transform-origin":`${y} ${k}`}).beforeAddWrite((()=>{void 0!==T&&f.style.setProperty("bottom",`${T}px`)})).fromTo("transform","scale(0.8)","scale(1)"),L.addElement(v.querySelector(".popover-viewport")).fromTo("opacity",.01,1),A.easing("cubic-bezier(0.36,0.66,0.04,1)").duration(300).beforeAddWrite((()=>{"cover"===i&&t.style.setProperty("--width",`${m}px`),"bottom"===y&&t.classList.add("popover-bottom")})).addAnimation([I,O,W,L])},K=t=>{const e=b(t),o=e.querySelector(".popover-content"),r=C(),i=C(),s=C();return i.addElement(e.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",0),s.addElement(e.querySelector(".popover-wrapper")).fromTo("opacity",.99,0),r.easing("ease").afterAddWrite((()=>{t.style.removeProperty("--width"),t.classList.remove("popover-bottom"),o.style.removeProperty("top"),o.style.removeProperty("left"),o.style.removeProperty("bottom"),o.style.removeProperty("transform-origin")})).duration(150).addAnimation([i,s])},U=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.didPresent=o(this,"ionPopoverDidPresent",7),this.willPresent=o(this,"ionPopoverWillPresent",7),this.willDismiss=o(this,"ionPopoverWillDismiss",7),this.didDismiss=o(this,"ionPopoverDidDismiss",7),this.didPresentShorthand=o(this,"didPresent",7),this.willPresentShorthand=o(this,"willPresent",7),this.willDismissShorthand=o(this,"willDismiss",7),this.didDismissShorthand=o(this,"didDismiss",7),this.ionMount=o(this,"ionMount",7),this.parentPopover=null,this.coreDelegate=f(),this.lockController=k(),this.inline=!1,this.focusDescendantOnPresent=!1,this.presented=!1,this.hasController=!1,this.keyboardClose=!0,this.backdropDismiss=!0,this.showBackdrop=!0,this.translucent=!1,this.animated=!0,this.triggerAction="click",this.size="auto",this.dismissOnSelect=!1,this.reference="trigger",this.side="bottom",this.arrow=!0,this.isOpen=!1,this.keyboardEvents=!1,this.focusTrap=!0,this.keepContentsMounted=!1,this.onBackdropTap=()=>{this.dismiss(void 0,n)},this.onLifecycle=t=>{const e=this.usersElement,o=q[t.type];if(e&&o){const r=new CustomEvent(o,{bubbles:!1,cancelable:!1,detail:t.detail});e.dispatchEvent(r)}},this.configureTriggerInteraction=()=>{const{trigger:t,triggerAction:e,el:o,destroyTriggerInteraction:r}=this;if(r&&r(),void 0===t)return;const i=this.triggerEl=void 0!==t?document.getElementById(t):null;i?this.destroyTriggerInteraction=((t,e,o)=>{let r=[];switch(e){case"hover":let t;r=[{eventName:"mouseenter",callback:async e=>{e.stopPropagation(),t&&clearTimeout(t),t=setTimeout((()=>{u((()=>{o.presentFromTrigger(e),t=void 0}))}),100)}},{eventName:"mouseleave",callback:e=>{t&&clearTimeout(t);const r=e.relatedTarget;r&&r.closest("ion-popover")!==o&&o.dismiss(void 0,void 0,!1)}},{eventName:"click",callback:t=>t.stopPropagation()},{eventName:"ionPopoverActivateTrigger",callback:t=>o.presentFromTrigger(t,!0)}];break;case"context-menu":r=[{eventName:"contextmenu",callback:t=>{t.preventDefault(),o.presentFromTrigger(t)}},{eventName:"click",callback:t=>t.stopPropagation()},{eventName:"ionPopoverActivateTrigger",callback:t=>o.presentFromTrigger(t,!0)}];break;default:r=[{eventName:"click",callback:t=>o.presentFromTrigger(t)},{eventName:"ionPopoverActivateTrigger",callback:t=>o.presentFromTrigger(t,!0)}]}return r.forEach((({eventName:e,callback:o})=>t.addEventListener(e,o))),t.setAttribute("data-ion-popover-trigger","true"),()=>{r.forEach((({eventName:e,callback:o})=>t.removeEventListener(e,o))),t.removeAttribute("data-ion-popover-trigger")}})(i,e,o):y(`[ion-popover] - A trigger element with the ID "${t}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`,this.el)},this.configureKeyboardInteraction=()=>{const{destroyKeyboardInteraction:t,el:e}=this;t&&t(),this.destroyKeyboardInteraction=(t=>{const e=async e=>{var o;const r=document.activeElement;let i=[];const s=null===(o=e.target)||void 0===o?void 0:o.tagName;if("ION-POPOVER"===s||"ION-ITEM"===s){try{i=Array.from(t.querySelectorAll("ion-item:not(ion-popover ion-popover *):not([disabled])"))}catch(t){}switch(e.key){case"ArrowLeft":await t.getParentPopover()&&t.dismiss(void 0,void 0,!1);break;case"ArrowDown":e.preventDefault();const o=((t,e)=>t[W(t,e)+1])(i,r);void 0!==o&&L(o);break;case"ArrowUp":e.preventDefault();const s=((t,e)=>t[W(t,e)-1])(i,r);void 0!==s&&L(s);break;case"Home":e.preventDefault();const n=i[0];void 0!==n&&L(n);break;case"End":e.preventDefault();const a=i[i.length-1];void 0!==a&&L(a);break;case"ArrowRight":case" ":case"Enter":if(r&&r.hasAttribute("data-ion-popover-trigger")){const t=new CustomEvent("ionPopoverActivateTrigger");r.dispatchEvent(t)}}}};return t.addEventListener("keydown",e),()=>t.removeEventListener("keydown",e)})(e)},this.configureDismissInteraction=()=>{const{destroyDismissInteraction:t,parentPopover:e,triggerAction:o,triggerEl:r,el:i}=this;e&&r&&(t&&t(),this.destroyDismissInteraction=((t,e,o,r)=>{let i=[];const s=b(r).querySelector(".popover-content");return i="hover"===e?[{eventName:"mouseenter",callback:e=>{document.elementFromPoint(e.clientX,e.clientY)!==t&&o.dismiss(void 0,void 0,!1)}}]:[{eventName:"click",callback:e=>{e.target.closest("[data-ion-popover-trigger]")!==t?o.dismiss(void 0,void 0,!1):e.stopPropagation()}}],i.forEach((({eventName:t,callback:e})=>s.addEventListener(t,e))),()=>{i.forEach((({eventName:t,callback:e})=>s.removeEventListener(t,e)))}})(r,o,i,e))}}onTriggerChange(){this.configureTriggerInteraction()}onIsOpenChange(t,e){!0===t&&!1===e?this.present():!1===t&&!0===e&&this.dismiss()}connectedCallback(){const{configureTriggerInteraction:t,el:e}=this;a(e),t()}disconnectedCallback(){const{destroyTriggerInteraction:t}=this;t&&t(),this.headerResizeObserver&&(this.headerResizeObserver.disconnect(),this.headerResizeObserver=void 0)}componentWillLoad(){var t,e;const{el:o}=this,r=null!==(e=null===(t=this.htmlAttributes)||void 0===t?void 0:t.id)&&void 0!==e?e:p(o);this.parentPopover=o.closest(`ion-popover:not(#${r})`),void 0===this.alignment&&(this.alignment="ios"===P(this)?"center":"start")}componentDidLoad(){const{parentPopover:t,isOpen:e}=this;!0===e&&u((()=>this.present())),t&&x(t,"ionPopoverWillDismiss",(()=>{this.dismiss(void 0,void 0,!1)})),this.configureTriggerInteraction()}async presentFromTrigger(t,e=!1){this.focusDescendantOnPresent=e,await this.present(t),this.focusDescendantOnPresent=!1}getDelegate(t=!1){if(this.workingDelegate&&!t)return{delegate:this.workingDelegate,inline:this.inline};const e=this.inline=null!==this.el.parentNode&&!this.hasController;return{inline:e,delegate:this.workingDelegate=e?this.delegate||this.coreDelegate:this.delegate}}async present(t){const e=await this.lockController.lock();if(this.presented)return void e();const{el:o}=this,{inline:r,delegate:i}=this.getDelegate(!0);this.ionMount.emit(),this.usersElement=await g(i,o,this.component,["popover-viewport"],this.componentProps,r),this.recalculateContentOnHeaderReady(),this.keyboardEvents||this.configureKeyboardInteraction(),this.configureDismissInteraction(),w(o)?await A(this.usersElement):this.keepContentsMounted||await I(),await c(this,"popoverEnter",B,F,{event:t||this.event,size:this.size,trigger:this.triggerEl,reference:this.reference,side:this.side,align:this.alignment}),this.focusDescendantOnPresent&&d(o),e()}recalculateContentOnHeaderReady(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector(".popover-content");if(!e)return;const o=this.usersElement||e,r=o.querySelector("ion-header"),i=o.querySelectorAll("ion-content");r&&0!==i.length&&(this.headerResizeObserver=new ResizeObserver((async()=>{var t;if(r.offsetHeight>0){null===(t=this.headerResizeObserver)||void 0===t||t.disconnect(),this.headerResizeObserver=void 0;for(const t of i)await t.recalculateDimensions()}})),this.headerResizeObserver.observe(r))}async dismiss(t,e,o=!0){const r=await this.lockController.lock(),{destroyKeyboardInteraction:i,destroyDismissInteraction:s}=this;o&&this.parentPopover&&this.parentPopover.dismiss(t,e,o);const n=await l(this,t,e,"popoverLeave",V,K,this.event);if(n){i&&(i(),this.destroyKeyboardInteraction=void 0),s&&(s(),this.destroyDismissInteraction=void 0);const{delegate:t}=this.getDelegate();await m(t,this.usersElement)}return r(),n}async getParentPopover(){return this.parentPopover}onDidDismiss(){return h(this.el,"ionPopoverDidDismiss")}onWillDismiss(){return h(this.el,"ionPopoverWillDismiss")}render(){const t=P(this),{onLifecycle:e,parentPopover:o,dismissOnSelect:s,side:n,arrow:a,htmlAttributes:p,focusTrap:c}=this,d=D("desktop"),l=a&&!o;return r(i,Object.assign({key:"42863f748c93f709d433931d969230137b37d42d","aria-modal":"true","no-router":!0,tabindex:"-1"},p,{style:{zIndex:`${2e4+this.overlayIndex}`},class:Object.assign(Object.assign({},T(this.cssClass)),{[t]:!0,"popover-translucent":this.translucent,"overlay-hidden":!0,"popover-desktop":d,[`popover-side-${n}`]:!0,[v]:!1===c,"popover-nested":!!o}),onIonPopoverDidPresent:e,onIonPopoverWillPresent:e,onIonPopoverWillDismiss:e,onIonPopoverDidDismiss:e,onIonBackdropTap:this.onBackdropTap}),!o&&r("ion-backdrop",{key:"22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf",tappable:this.backdropDismiss,visible:this.showBackdrop,part:"backdrop"}),r("div",{key:"b76335c64e992a964ed3fb91d17a992c3474b4cd",class:"popover-wrapper ion-overlay-wrapper",onClick:s?()=>this.dismiss():void 0},l&&r("div",{key:"018c846c32e7ff7fa010528e6b37a17e5f03c84c",class:"popover-arrow",part:"arrow"}),r("div",{key:"350c468c80052da3a07768bceab98fe159c35a43",class:"popover-content",part:"content"},r("slot",{key:"686443c17ac9873d33905c1cdb67e6d6da675282"}))))}get el(){return this}static get watchers(){return{trigger:[{onTriggerChange:0}],triggerAction:[{onTriggerChange:0}],isOpen:[{onIsOpenChange:0}]}}static get style(){return{ios:':host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden;z-index:11}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:"";z-index:10}.popover-arrow::after{inset-inline-start:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}',md:":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}"}}},[289,"ion-popover",{hasController:[4,"has-controller"],delegate:[16],overlayIndex:[2,"overlay-index"],enterAnimation:[16],leaveAnimation:[16],component:[1],componentProps:[16],keyboardClose:[4,"keyboard-close"],cssClass:[1,"css-class"],backdropDismiss:[4,"backdrop-dismiss"],event:[8],showBackdrop:[4,"show-backdrop"],translucent:[4],animated:[4],htmlAttributes:[16],triggerAction:[1,"trigger-action"],trigger:[1],size:[1],dismissOnSelect:[4,"dismiss-on-select"],reference:[1],side:[1],alignment:[1025],arrow:[4],isOpen:[4,"is-open"],keyboardEvents:[4,"keyboard-events"],focusTrap:[4,"focus-trap"],keepContentsMounted:[4,"keep-contents-mounted"],presented:[32],presentFromTrigger:[64],present:[64],dismiss:[64],getParentPopover:[64],onDidDismiss:[64],onWillDismiss:[64]},void 0,{trigger:[{onTriggerChange:0}],triggerAction:[{onTriggerChange:0}],isOpen:[{onIsOpenChange:0}]}]),q={ionPopoverDidPresent:"ionViewDidEnter",ionPopoverWillPresent:"ionViewWillEnter",ionPopoverWillDismiss:"ionViewWillLeave",ionPopoverDidDismiss:"ionViewDidLeave"};function G(){"undefined"!=typeof customElements&&["ion-popover","ion-backdrop"].forEach((t=>{switch(t){case"ion-popover":customElements.get(s(t))||customElements.define(s(t),U);break;case"ion-backdrop":customElements.get(s(t))||O()}}))}export{U as P,G as d}