voyager-ionic-core 8.5.7 → 8.6.1

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

@@ -34,6 +34,128 @@ export class Popover {
         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);
         };
@@ -81,34 +203,6 @@ export class Popover {
             }
             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.focusTrap = true;
-        this.keepContentsMounted = false;
     }
     onTriggerChange() {
         this.configureTriggerInteraction();
@@ -338,9 +432,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'ff24e8d9677711248a36994cce568e74ba151499', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "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: 'aca68b4002a08b0e563a976a867141162c20f8b4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '62d21d1eab5c6d675d49932559ffb161747e5fec', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1b46cc77d5302637fc979353483bb5fd780fd1d3', class: "popover-arrow", part: "arrow" }), h("div", { key: 'a5657bff26e46d1959b71eb0992e7dc8fcae86f1', class: "popover-content", part: "content" }, h("slot", { key: 'e1a98007226a46b51109e7004c4d338ca1bc0f9e' })))));
+            }, 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: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -360,6 +454,7 @@ export class Popover {
         return {
             "hasController": {
                 "type": "boolean",
+                "attribute": "has-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -375,12 +470,14 @@ export class Popover {
                         }],
                     "text": ""
                 },
-                "attribute": "has-controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "delegate": {
                 "type": "unknown",
+                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -401,10 +498,13 @@ export class Popover {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "overlayIndex": {
                 "type": "number",
+                "attribute": "overlay-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -420,11 +520,13 @@ export class Popover {
                         }],
                     "text": ""
                 },
-                "attribute": "overlay-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "enterAnimation": {
                 "type": "unknown",
+                "attribute": "enter-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -442,10 +544,13 @@ export class Popover {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the popover is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
+                "attribute": "leave-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -463,10 +568,13 @@ export class Popover {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the popover is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "component": {
                 "type": "string",
+                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentRef",
@@ -485,11 +593,13 @@ export class Popover {
                     "tags": [],
                     "text": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`."
                 },
-                "attribute": "component",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "componentProps": {
                 "type": "unknown",
+                "attribute": "component-props",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentProps",
@@ -507,10 +617,13 @@ export class Popover {
                 "docs": {
                     "tags": [],
                     "text": "The data to pass to the popover component.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nset the props directly on your component."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "keyboardClose": {
                 "type": "boolean",
+                "attribute": "keyboard-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -523,12 +636,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "attribute": "keyboard-close",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "cssClass": {
                 "type": "string",
+                "attribute": "css-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -544,11 +659,13 @@ export class Popover {
                         }],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "attribute": "css-class",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "backdropDismiss": {
                 "type": "boolean",
+                "attribute": "backdrop-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -561,12 +678,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will be dismissed when the backdrop is clicked."
                 },
-                "attribute": "backdrop-dismiss",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "event": {
                 "type": "any",
+                "attribute": "event",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -579,11 +698,13 @@ export class Popover {
                     "tags": [],
                     "text": "The event to pass to the popover animation."
                 },
-                "attribute": "event",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showBackdrop": {
                 "type": "boolean",
+                "attribute": "show-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -596,12 +717,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM."
                 },
-                "attribute": "show-backdrop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "translucent": {
                 "type": "boolean",
+                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -614,12 +737,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
-                "attribute": "translucent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -632,12 +757,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will animate."
                 },
-                "attribute": "animated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "htmlAttributes": {
                 "type": "unknown",
+                "attribute": "html-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: any }",
@@ -649,10 +776,13 @@ export class Popover {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the popover."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "triggerAction": {
                 "type": "string",
+                "attribute": "trigger-action",
                 "mutable": false,
                 "complexType": {
                     "original": "TriggerAction",
@@ -671,12 +801,14 @@ export class Popover {
                     "tags": [],
                     "text": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing."
                 },
-                "attribute": "trigger-action",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'click'"
             },
             "trigger": {
                 "type": "string",
+                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -689,11 +821,13 @@ export class Popover {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening."
                 },
-                "attribute": "trigger",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "PopoverSize",
@@ -712,12 +846,14 @@ export class Popover {
                     "tags": [],
                     "text": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be set to a static default value."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'auto'"
             },
             "dismissOnSelect": {
                 "type": "boolean",
+                "attribute": "dismiss-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -730,12 +866,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will be automatically\ndismissed when the content has been clicked."
                 },
-                "attribute": "dismiss-on-select",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "reference": {
                 "type": "string",
+                "attribute": "reference",
                 "mutable": false,
                 "complexType": {
                     "original": "PositionReference",
@@ -754,12 +892,14 @@ export class Popover {
                     "tags": [],
                     "text": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY."
                 },
-                "attribute": "reference",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'trigger'"
             },
             "side": {
                 "type": "string",
+                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "PositionSide",
@@ -778,12 +918,14 @@ export class Popover {
                     "tags": [],
                     "text": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not."
                 },
-                "attribute": "side",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": true,
                 "complexType": {
                     "original": "PositionAlign",
@@ -802,11 +944,13 @@ export class Popover {
                     "tags": [],
                     "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode."
                 },
-                "attribute": "alignment",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "arrow": {
                 "type": "boolean",
+                "attribute": "arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -819,12 +963,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
                 },
-                "attribute": "arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "isOpen": {
                 "type": "boolean",
+                "attribute": "is-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -837,12 +983,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code."
                 },
-                "attribute": "is-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "keyboardEvents": {
                 "type": "boolean",
+                "attribute": "keyboard-events",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -858,12 +1006,14 @@ export class Popover {
                         }],
                     "text": ""
                 },
-                "attribute": "keyboard-events",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusTrap": {
                 "type": "boolean",
+                "attribute": "focus-trap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -876,12 +1026,14 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
                 },
-                "attribute": "focus-trap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "keepContentsMounted": {
                 "type": "boolean",
+                "attribute": "keep-contents-mounted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -894,7 +1046,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue."
                 },
-                "attribute": "keep-contents-mounted",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -1105,7 +1258,7 @@ export class Popover {
                     "signature": "(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>",
                     "parameters": [{
                             "name": "event",
-                            "type": "MouseEvent | TouchEvent | PointerEvent | CustomEvent<any> | undefined",
+                            "type": "MouseEvent | PointerEvent | TouchEvent | CustomEvent<any> | undefined",
                             "docs": ""
                         }],
                     "references": {