@ionic/core 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787589191.1e183b55

package/dist/collection/components/alert/alert.js

@@ -8,7 +8,7 @@ import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, restoreRootFocusTrapAccessibility, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
@@ -23,102 +23,62 @@ import { mdLeaveAnimation } from "./animations/md.leave";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Alert {
-    delegateController = createDelegateController(this);
-    lockController = createLockController();
-    triggerController = createTriggerController();
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    activeId;
-    inputType;
-    processedInputs = [];
-    processedButtons = [];
-    wrapperEl;
-    buttonGroupEl;
-    buttonGroupResizeObserver;
-    gesture;
-    isButtonGroupWrapped = false;
-    presented = false;
-    lastFocus;
-    el;
-    /** @internal */
-    overlayIndex;
-    /** @internal */
-    delegate;
-    /** @internal */
-    hasController = false;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    keyboardClose = true;
-    /**
-     * Animation to use when the alert is presented.
-     */
-    enterAnimation;
-    /**
-     * Animation to use when the alert is dismissed.
-     */
-    leaveAnimation;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     */
-    cssClass;
-    /**
-     * The main title in the heading of the alert.
-     */
-    header;
-    /**
-     * The subtitle in the heading of the alert. Displayed under the title.
-     */
-    subHeader;
-    /**
-     * The main message to be displayed in the alert.
-     * `message` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     *
-     * This property accepts custom HTML as a string.
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    message;
-    /**
-     * Array of buttons to be added to the alert.
-     */
-    buttons = [];
-    /**
-     * Array of input to show in the alert.
-     */
-    inputs = [];
-    /**
-     * If `true`, the alert will be dismissed when the backdrop is clicked.
-     */
-    backdropDismiss = true;
-    /**
-     * If `true`, the alert 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).
-     */
-    translucent = false;
-    /**
-     * If `true`, the alert will animate.
-     */
-    animated = true;
-    /**
-     * Additional attributes to pass to the alert.
-     */
-    htmlAttributes;
-    /**
-     * If `true`, the alert will open. If `false`, the alert will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the alertController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the alert dismisses. You will need to do that in your code.
-     */
-    isOpen = false;
+    constructor() {
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.processedInputs = [];
+        this.processedButtons = [];
+        this.isButtonGroupWrapped = false;
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Array of buttons to be added to the alert.
+         */
+        this.buttons = [];
+        /**
+         * Array of input to show in the alert.
+         */
+        this.inputs = [];
+        /**
+         * If `true`, the alert will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, the alert 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 alert will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the alert will open. If `false`, the alert will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the alertController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the alert dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -127,53 +87,12 @@ export class Alert {
             this.dismiss();
         }
     }
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the alert to open when clicked.
-     */
-    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
-    /**
-     * Emitted after the alert has presented.
-     */
-    didPresent;
-    /**
-     * Emitted before the alert has presented.
-     */
-    willPresent;
-    /**
-     * Emitted before the alert has dismissed.
-     */
-    willDismiss;
-    /**
-     * Emitted after the alert has dismissed.
-     */
-    didDismiss;
-    /**
-     * Emitted after the alert has presented.
-     * Shorthand for ionAlertWillDismiss.
-     */
-    didPresentShorthand;
-    /**
-     * Emitted before the alert has presented.
-     * Shorthand for ionAlertWillPresent.
-     */
-    willPresentShorthand;
-    /**
-     * Emitted before the alert has dismissed.
-     * Shorthand for ionAlertWillDismiss.
-     */
-    willDismissShorthand;
-    /**
-     * Emitted after the alert has dismissed.
-     * Shorthand for ionAlertDidDismiss.
-     */
-    didDismissShorthand;
     onKeydown(ev) {
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
@@ -279,10 +198,15 @@ export class Alert {
         this.triggerChanged();
         /**
          * If the alert was previously connected and is being reattached, the
-         * ResizeObserver was disconnected. componentDidLoad only fires once per
-         * instance, so re-establish the observer here on reconnect.
+         * `ResizeObserver` and the button gesture were torn down. `componentDidLoad`
+         * only fires once per instance, so re-establish both here on reconnect.
          */
         this.setupButtonGroupResizeObserver();
+        this.setupButtonActiveGesture();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
         if (!this.htmlAttributes?.id) {
@@ -304,17 +228,20 @@ export class Alert {
         this.buttonGroupResizeObserver?.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
-    componentDidLoad() {
-        /**
-         * Only create gesture if:
-         * 1. A gesture does not already exist
-         * 2. App is running in iOS mode
-         * 3. A wrapper ref exists
-         */
+    /**
+     * Only create gesture if:
+     * 1. A gesture does not already exist
+     * 2. App is running in iOS mode
+     * 3. A wrapper ref exists
+     */
+    setupButtonActiveGesture() {
         if (!this.gesture && getIonMode(this) === 'ios' && this.wrapperEl) {
             this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
             this.gesture.enable(true);
         }
+    }
+    componentDidLoad() {
+        this.setupButtonActiveGesture();
         this.setupButtonGroupResizeObserver();
         /**
          * If alert was rendered with isOpen="true"
@@ -564,16 +491,6 @@ export class Alert {
             }
         })));
     }
-    onBackdropTap = () => {
-        this.dismiss(undefined, BACKDROP);
-    };
-    dispatchCancelHandler = (ev) => {
-        const role = ev.detail.role;
-        if (isCancel(role)) {
-            const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
-            this.callButtonHandler(cancelButton);
-        }
-    };
     setupButtonGroupResizeObserver() {
         /**
          * Re-evaluate vertical layout when the button group resizes so a 2-button
@@ -647,14 +564,14 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '022f3463b8e6c52064b90ec304c524847c3d5ad3', tabindex: "-1", style: {
+        return (h(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'alert-translucent': this.translucent,
-            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'c3cd05738bc2834f54707edeb2fae06ec10d6fd2', tappable: this.backdropDismiss }), h("div", { key: 'b44fadd9ba7ddf073854c5035538d11ae8e66bc2', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fafea048141a6c7957e62aef31faa8041dd610c1', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, h("div", { key: '3ad9d2d4b7cf425eab8293ddc12eff0fe8df1517', class: "alert-head" }, header && (h("h2", { key: '7d9154f5ee595b7e4da6ecf3a20871f104c1256e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '1f891f38004be6964e9406b84dd580145c42516a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '2ab4d344ecb7e384e8f6d3d3e59ee5a1bbcc832c', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '78a4ff09aa3aaafcd0dc2a42d036767d83b3cfa2', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '65c92a956d998ae9016396dd2a29c42ab7376d0e', tappable: this.backdropDismiss }), h("div", { key: 'f2288fa0b7ef9d0bf031c168fe78c48422cf91c8', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'dbb109435c378f77c6b0231e58756f8a0467732d', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, h("div", { key: '075597f94719673cf1f894a8566e1036849afa75', class: "alert-head" }, header && (h("h2", { key: 'f96f4b1db8473c62040beed6e96108c733978d73', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'dbd824ef19a07bddde4eb928f11de7c7cadf98b8', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '4774fa13700dd23aec7930492acae80de3bdf5d1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '5c728b7457e231f64294bbec821bdb547c6437dd', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/app/app.js

@@ -8,9 +8,6 @@ import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class App {
-    focusVisible;
-    loadTimeout;
-    el;
     componentDidLoad() {
         if (Build.isBrowser) {
             this.rIC(async () => {

package/dist/collection/components/back-button/back-button.js

@@ -15,40 +15,25 @@ import { getIonMode } from "../../global/ionic-global";
  * @part text - The back button text.
  */
 export class BackButton {
-    inheritedAttributes = {};
-    el;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * The url to navigate back to by default when there is no history.
-     */
-    defaultHref;
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    disabled = false;
-    /**
-     * The built-in named SVG icon name or the exact `src` of an SVG file
-     * to use for the back button.
-     */
-    icon;
-    /**
-     * The text to display in the back button.
-     */
-    text;
-    /**
-     * The type of the button.
-     */
-    type = 'button';
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page.
-     */
-    routerAnimation;
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        this.onClick = async (ev) => {
+            const nav = this.el.closest('ion-nav');
+            ev.preventDefault();
+            if (nav && (await nav.canGoBack())) {
+                return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
+            }
+            return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
+        };
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         if (this.defaultHref === undefined) {
@@ -83,14 +68,6 @@ export class BackButton {
         }
         return 'bounded';
     }
-    onClick = async (ev) => {
-        const nav = this.el.closest('ion-nav');
-        ev.preventDefault();
-        if (nav && (await nav.canGoBack())) {
-            return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
-        }
-        return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
-    };
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;

package/dist/collection/components/backdrop/backdrop.js

@@ -4,22 +4,20 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
-    /**
-     * If `true`, the backdrop will be visible.
-     */
-    visible = true;
-    /**
-     * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
-     */
-    tappable = true;
-    /**
-     * If `true`, the backdrop will stop propagation on tap.
-     */
-    stopPropagation = true;
-    /**
-     * Emitted when the backdrop is tapped.
-     */
-    ionBackdropTap;
+    constructor() {
+        /**
+         * If `true`, the backdrop will be visible.
+         */
+        this.visible = true;
+        /**
+         * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+         */
+        this.tappable = true;
+        /**
+         * If `true`, the backdrop will stop propagation on tap.
+         */
+        this.stopPropagation = true;
+    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }

package/dist/collection/components/badge/badge.js

@@ -8,12 +8,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Badge {
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '1a2d39c5deec771a2f2196447627b62a7d4c8389', class: createColorClasses(this.color, {

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -14,102 +14,41 @@ import { getIonMode } from "../../global/ionic-global";
  * @part collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed.
  */
 export class Breadcrumb {
-    inheritedAttributes = {};
-    collapsedRef;
-    /** @internal */
-    collapsed = false;
-    /** @internal */
-    last;
-    /** @internal */
-    showCollapsedIndicator;
-    el;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * If `true`, the breadcrumb will take on a different look to show that
-     * it is the currently active breadcrumb. Defaults to `true` for the
-     * last breadcrumb if it is not set on any.
-     */
-    active = false;
-    /**
-     * If `true`, the user cannot interact with the breadcrumb.
-     */
-    disabled = false;
-    /**
-     * This attribute instructs browsers to download a URL instead of navigating to
-     * it, so the user will be prompted to save it as a local file. If the attribute
-     * has a value, it is used as the pre-filled file name in the Save prompt
-     * (the user can still change the file name if they want).
-     */
-    download;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * If true, show a separator between this breadcrumb and the next.
-     * Defaults to `true` for all breadcrumbs except the last.
-     */
-    separator;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    routerDirection = 'forward';
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page using `href`.
-     */
-    routerAnimation;
-    /**
-     * Emitted when the breadcrumb has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the breadcrumb loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the collapsed indicator is clicked on.
-     * `ion-breadcrumbs` will listen for this and emit ionCollapsedClick.
-     * Normally we could just emit this as `ionCollapsedClick`
-     * and let the event bubble to `ion-breadcrumbs`,
-     * but if the event custom event is not set on `ion-breadcrumbs`,
-     * TypeScript will throw an error in user applications.
-     * @internal
-     */
-    collapsedClick;
+    constructor() {
+        this.inheritedAttributes = {};
+        /** @internal */
+        this.collapsed = false;
+        /**
+         * If `true`, the breadcrumb will take on a different look to show that
+         * it is the currently active breadcrumb. Defaults to `true` for the
+         * last breadcrumb if it is not set on any.
+         */
+        this.active = false;
+        /**
+         * If `true`, the user cannot interact with the breadcrumb.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.collapsedIndicatorClick = () => {
+            this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
+        };
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     isClickable() {
         return this.href !== undefined;
     }
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    collapsedIndicatorClick = () => {
-        this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
-    };
     render() {
         const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
         const clickable = this.isClickable();