@amwaljs/checkout-button 0.3.0 → 0.3.2

package/dist/esm/ion-popover.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, d as createEvent, i as printIonWarning, h, H as Host, g as getElement } from './index-xxOnfNPU.js';
-import { B as BACKDROP, h as prepareOverlay, s as setOverlayId, j as present, f as focusFirstDescendant, k as dismiss, l as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-CWok3_we.js';
-import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-29_VtSmv.js';
-import { g as getElementRoot, r as raf, b as addEventListener, h as hasLazyBuild } from './helpers-BuFc0hrS.js';
-import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { g as getIonMode, a as isPlatform } from './ionic-global-BbOE2Sur.js';
-import { g as getClassMap } from './theme-DiVJyqlX.js';
-import { d as deepReady, w as waitForMount } from './index-DoRYA1qF.js';
-import { c as createAnimation } from './animation-Cdsew5KM.js';
-import './index-ZjP4CjeZ.js';
-import './hardware-back-button-DRef5MPc.js';
-import './gesture-controller-BTEOs1at.js';
+import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-de1aa369.js';
+import { b as raf, g as getElementRoot, a as addEventListener, e as hasLazyBuild } from './helpers-f0dcbd72.js';
+import { c as createLockController } from './lock-controller-632e3c10.js';
+import { p as printIonWarning } from './index-d9b41a43.js';
+import { B as BACKDROP, p as prepareOverlay, s as setOverlayId, b as present, l as focusFirstDescendant, d as dismiss, e as eventMethod } from './overlays-642a91df.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-0b7766cb.js';
+import { g as getClassMap } from './theme-35c700b7.js';
+import { d as deepReady, w as waitForMount } from './index-0b560278.js';
+import { c as createAnimation } from './animation-a6d5c3b1.js';
+import './index-fb97e55c.js';
+import './hardware-back-button-f93acff0.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -978,486 +978,349 @@ const mdLeaveAnimation = (baseEl) => {
         .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:flex;position:fixed;align-items: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:flex;position:absolute;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);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:flex;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;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{transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports (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);backdrop-filter:saturate(180%) blur(20px)}}`;
+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:flex;position:fixed;align-items: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:flex;position:absolute;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);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:flex;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, #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;transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}@supports (inset-inline-start: 0){.popover-arrow::after{inset-inline-start:3px}}@supports not (inset-inline-start: 0){.popover-arrow::after{left:3px}:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}[dir=rtl] .popover-arrow::after{left:unset;right:unset;right:3px}@supports selector(:dir(rtl)){.popover-arrow::after:dir(rtl){left:unset;right:unset;right:3px}}}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports (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);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:flex;position:fixed;align-items: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:flex;position:absolute;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);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:flex;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;transform-origin:left top}:host-context([dir=rtl]) .popover-content{transform-origin:right top}[dir=rtl] .popover-content{transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){transform-origin:right top}}.popover-viewport{transition-delay:100ms}.popover-wrapper{opacity:0}`;
+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:flex;position:fixed;align-items: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:flex;position:absolute;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);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:flex;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;transform-origin:left top}:host-context([dir=rtl]) .popover-content{transform-origin:right top}[dir=rtl] .popover-content{transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){transform-origin:right top}}.popover-viewport{transition-delay:100ms}.popover-wrapper{opacity:0}";
 
 const Popover = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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();
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.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(`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);
+    };
+    this.presented = false;
+    this.hasController = false;
+    this.delegate = undefined;
+    this.overlayIndex = undefined;
+    this.enterAnimation = undefined;
+    this.leaveAnimation = undefined;
+    this.component = undefined;
+    this.componentProps = undefined;
+    this.keyboardClose = true;
+    this.cssClass = undefined;
+    this.backdropDismiss = true;
+    this.event = undefined;
+    this.showBackdrop = true;
+    this.translucent = false;
+    this.animated = true;
+    this.htmlAttributes = undefined;
+    this.triggerAction = 'click';
+    this.trigger = undefined;
+    this.size = 'auto';
+    this.dismissOnSelect = false;
+    this.reference = 'trigger';
+    this.side = 'bottom';
+    this.alignment = undefined;
+    this.arrow = true;
+    this.isOpen = false;
+    this.keyboardEvents = false;
+    this.keepContentsMounted = false;
+  }
+  onTriggerChange() {
+    this.configureTriggerInteraction();
+  }
+  onIsOpenChange(newValue, oldValue) {
+    if (newValue === true && oldValue === false) {
+      this.present();
     }
-    disconnectedCallback() {
-        const { destroyTriggerInteraction } = this;
-        if (destroyTriggerInteraction) {
-            destroyTriggerInteraction();
-        }
-        if (this.headerResizeObserver) {
-            this.headerResizeObserver.disconnect();
-            this.headerResizeObserver = undefined;
-        }
+    else if (newValue === false && oldValue === true) {
+      this.dismiss();
     }
-    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';
-        }
+  }
+  connectedCallback() {
+    const { configureTriggerInteraction, el } = this;
+    prepareOverlay(el);
+    configureTriggerInteraction();
+  }
+  disconnectedCallback() {
+    const { destroyTriggerInteraction } = this;
+    if (destroyTriggerInteraction) {
+      destroyTriggerInteraction();
     }
-    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();
+  }
+  componentWillLoad() {
+    const { el } = this;
+    const popoverId = 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;
     /**
-     * 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
+     * If popover was rendered with isOpen="true"
+     * then we should open popover immediately.
      */
-    async presentFromTrigger(event, focusDescendant = false) {
-        this.focusDescendantOnPresent = focusDescendant;
-        await this.present(event);
-        this.focusDescendantOnPresent = false;
+    if (isOpen === true) {
+      raf(() => this.present());
     }
-    /**
-     * 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 };
+    if (parentPopover) {
+      addEventListener(parentPopover, 'ionPopoverWillDismiss', () => {
+        this.dismiss(undefined, undefined, false);
+      });
     }
     /**
-     * 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.
+     * 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.
      */
-    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();
+    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,
+      };
     }
     /**
-     * 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.
+     * 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.
      */
-    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);
+    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.
+   */
+  async present(event) {
+    const unlock = await this.lockController.lock();
+    if (this.presented) {
+      unlock();
+      return;
     }
+    const { el } = this;
+    const { inline, delegate } = this.getDelegate(true);
     /**
-     * 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`.
+     * 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.
      */
-    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;
+    this.ionMount.emit();
+    this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+    if (!this.keyboardEvents) {
+      this.configureKeyboardInteraction();
     }
+    this.configureDismissInteraction();
     /**
-     * @internal
+     * 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.
      */
-    async getParentPopover() {
-        return this.parentPopover;
+    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.
+       */
     }
-    /**
-     * Returns a promise that resolves when the popover did dismiss.
-     */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionPopoverDidDismiss');
+    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,
+    });
     /**
-     * Returns a promise that resolves when the popover will dismiss.
+     * 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.
      */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionPopoverWillDismiss');
+    if (this.focusDescendantOnPresent) {
+      focusFirstDescendant(this.el, this.el);
+    }
+    unlock();
+  }
+  /**
+   * Dismiss the popover overlay after it has been presented.
+   *
+   * @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`.
+   *
+   * 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.
+   */
+  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);
     }
-    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' })))));
+    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);
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "trigger": [{
-                "onTriggerChange": 0
-            }],
-        "triggerAction": [{
-                "onTriggerChange": 0
-            }],
-        "isOpen": [{
-                "onIsOpenChange": 0
-            }]
-    }; }
+    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 } = this;
+    const desktop = isPlatform('desktop');
+    const enableArrow = arrow && !parentPopover;
+    return (h(Host, Object.assign({ key: 'f3b86c7bc6ef6b1b27a6ac78e7ddd98e46223bd4', "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, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'f7fbd914100838ed7d419eedd19e6b1efa691127', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'a651cb4daa6556e761c2e2b672306ad25e4c9429', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '7c5c7d8d6f9530535124e3fc75a38055f68b7589', class: "popover-arrow", part: "arrow" }), h("div", { key: '9f92fff4f36941e8f7de9774aef7d7508ca5cfe5', class: "popover-content", part: "content" }, h("slot", { key: '26c4e3df40a4832caff996ead3321c656eb5704f' })))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "trigger": ["onTriggerChange"],
+    "triggerAction": ["onTriggerChange"],
+    "isOpen": ["onIsOpenChange"]
+  }; }
 };
 const LIFECYCLE_MAP = {
-    ionPopoverDidPresent: 'ionViewDidEnter',
-    ionPopoverWillPresent: 'ionViewWillEnter',
-    ionPopoverWillDismiss: 'ionViewWillLeave',
-    ionPopoverDidDismiss: 'ionViewDidLeave',
+  ionPopoverDidPresent: 'ionViewDidEnter',
+  ionPopoverWillPresent: 'ionViewWillEnter',
+  ionPopoverWillDismiss: 'ionViewWillLeave',
+  ionPopoverDidDismiss: 'ionViewDidLeave',
 };
 Popover.style = {
-    ios: popoverIosCss(),
-    md: popoverMdCss()
+  ios: popoverIosCss,
+  md: popoverMdCss
 };
 
 export { Popover as ion_popover };