@ionic/core 8.8.14-dev.11784216165.1ecbf364 → 8.8.14-dev.11784238294.131cd99d

package/dist/collection/components/modal/modal.js

@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
@@ -77,20 +77,13 @@ export class Modal {
         /**
          * The interaction behavior for the sheet modal when the handle is pressed.
          *
-         * Handle behavior is unavailable when the `handle` property is set to
-         * `false` or when the `breakpoints` property is not set (using a
-         * fullscreen or card modal).
+         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
+         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
          *
-         * Set to `"cycle"` to make the handle focusable and let the sheet modal
-         * cycle between available breakpoints when pressed. This keeps the sheet
-         * operable with assistive technology.
-         *
-         * Set to `"none"` to make the handle purely decorative when pressed and
-         * removed from the tab order.
-         *
-         * Defaults to `"cycle"`.
+         * Handle behavior is unavailable when the `handle` property is set to `false` or
+         * when the `breakpoints` property is not set (using a fullscreen or card modal).
          */
-        this.handleBehavior = 'cycle';
+        this.handleBehavior = 'none';
         /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          */
@@ -282,10 +275,6 @@ export class Modal {
         // Also called in dismiss() — intentional dual cleanup covers both
         // dismiss-then-remove and direct DOM removal without dismiss.
         this.cleanupSafeAreaOverrides();
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     componentWillLoad() {
         var _a;
@@ -1173,20 +1162,26 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '528f9e354f470e22563938e7531e3f23a97e4200', "no-router": true,
+        return (h(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '53983c96bc6b30df89986c8d9c978a8e6f78fe80', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '34288a7343b7c47fed00d3abc73957f45f06d2fd', class: "modal-shadow" }), h("div", Object.assign({ key: 'f9b37f547bd5c61037bbad1a71bfed80ba8c630b',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: 'dccf3c774355429bc0ea7461d9b1ef941ea91902',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+  
+              tabIndex={-1} is required so present() can move focus to this
+              element (which carries the dialog role) instead of the role-less
+              host. role="dialog" alone does not make an element focusable, so
+              without the tabindex focus() would be a no-op and screen readers
+              may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'b8741594108d3ea681ff41ff8f2241a4119578b1', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'ba4ebd6364faba46ac8532d1c83cb655ae873a14', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'bcc7960fae3fed09076c704d08c3afc46caa0738', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '11d5921a8ebbcd0017d4f28a33d68049253f63f0', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1458,13 +1453,13 @@ export class Modal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nHandle behavior is unavailable when the `handle` property is set to\n`false` or when the `breakpoints` property is not set (using a\nfullscreen or card modal).\n\nSet to `\"cycle\"` to make the handle focusable and let the sheet modal\ncycle between available breakpoints when pressed. This keeps the sheet\noperable with assistive technology.\n\nSet to `\"none\"` to make the handle purely decorative when pressed and\nremoved from the tab order.\n\nDefaults to `\"cycle\"`."
+                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "handle-behavior",
-                "defaultValue": "'cycle'"
+                "defaultValue": "'none'"
             },
             "component": {
                 "type": "string",

package/dist/collection/components/modal/modal.md.css

@@ -126,6 +126,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
   background: transparent;

package/dist/collection/components/nav/nav.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { h } from "@stencil/core";
+import { Build, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -9,11 +9,12 @@ import { lifecycle, setPageHidden, transition } from "../../utils/transition/ind
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
-import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews } from "./view-controller";
+import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from "./view-controller";
 export class Nav {
     constructor() {
         this.transInstr = [];
         this.gestureOrAnimationInProgress = false;
+        this.useRouter = false;
         this.isTransitioning = false;
         this.destroyed = false;
         this.views = [];
@@ -29,6 +30,7 @@ export class Nav {
         }
     }
     rootChanged() {
+        const isDev = Build.isDev;
         if (this.root === undefined) {
             return;
         }
@@ -39,9 +41,17 @@ export class Nav {
              */
             return;
         }
-        this.setRoot(this.root, this.rootParams);
+        if (!this.useRouter) {
+            if (this.root !== undefined) {
+                this.setRoot(this.root, this.rootParams);
+            }
+        }
+        else if (isDev) {
+            printIonWarning('[ion-nav] - A root attribute is not supported when using ion-router.', this.el);
+        }
     }
     componentWillLoad() {
+        this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
         if (this.swipeGesture === undefined) {
             const mode = getIonMode(this);
             this.swipeGesture = config.getBoolean('swipeBackEnabled', mode === 'ios');
@@ -206,6 +216,78 @@ export class Nav {
             opts,
         }, done);
     }
+    /**
+     * Called by the router to update the view.
+     *
+     * @param id The component tag.
+     * @param params The component params.
+     * @param direction A direction hint.
+     * @param animation an AnimationBuilder.
+     *
+     * @return the status.
+     * @internal
+     */
+    setRouteId(id, params, direction, animation) {
+        const active = this.getActiveSync();
+        if (matches(active, id, params)) {
+            return Promise.resolve({
+                changed: false,
+                element: active.element,
+            });
+        }
+        let resolve;
+        const promise = new Promise((r) => (resolve = r));
+        let finish;
+        const commonOpts = {
+            updateURL: false,
+            viewIsReady: (enteringEl) => {
+                let mark;
+                const p = new Promise((r) => (mark = r));
+                resolve({
+                    changed: true,
+                    element: enteringEl,
+                    markVisible: async () => {
+                        mark();
+                        await finish;
+                    },
+                });
+                return p;
+            },
+        };
+        if (direction === 'root') {
+            finish = this.setRoot(id, params, commonOpts);
+        }
+        else {
+            // Look for a view matching the target in the view stack.
+            const viewController = this.views.find((v) => matches(v, id, params));
+            if (viewController) {
+                finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
+            }
+            else if (direction === 'forward') {
+                finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
+            }
+            else if (direction === 'back') {
+                finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
+            }
+        }
+        return promise;
+    }
+    /**
+     * Called by <ion-router> to retrieve the current component.
+     *
+     * @internal
+     */
+    async getRouteId() {
+        const active = this.getActiveSync();
+        if (active) {
+            return {
+                id: active.element.tagName,
+                params: active.params,
+                element: active.element,
+            };
+        }
+        return undefined;
+    }
     /**
      * Get the active view.
      */
@@ -271,6 +353,25 @@ export class Nav {
             ti.reject = reject;
         });
         ti.done = done;
+        /**
+         * If using router, check to see if navigation hooks
+         * will allow us to perform this transition. This
+         * is required in order for hooks to work with
+         * the ion-back-button or swipe to go back.
+         */
+        if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const canTransition = await router.canTransition();
+                if (canTransition === false) {
+                    return false;
+                }
+                if (typeof canTransition === 'string') {
+                    router.push(canTransition, ti.opts.direction || 'back');
+                    return false;
+                }
+            }
+        }
         // Normalize empty
         if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             ti.insertViews = undefined;
@@ -291,6 +392,13 @@ export class Nav {
             ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
         }
         ti.resolve(result.hasCompleted);
+        if (ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const direction = result.direction === 'back' ? 'back' : 'forward';
+                router.navChanged(direction);
+            }
+        }
     }
     failed(rejectReason, ti) {
         if (this.destroyed) {
@@ -720,7 +828,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'bb4a201a3a8079548f5474ff42293b28fc7599fb' });
+        return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -1493,6 +1601,113 @@ export class Nav {
                         }]
                 }
             },
+            "setRouteId": {
+                "complexType": {
+                    "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": "The component tag."
+                        }, {
+                            "name": "params",
+                            "type": "ComponentProps | undefined",
+                            "docs": "The component params."
+                        }, {
+                            "name": "direction",
+                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "docs": "A direction hint."
+                        }, {
+                            "name": "animation",
+                            "type": "AnimationBuilder | undefined",
+                            "docs": "an AnimationBuilder."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RouteWrite": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouteWrite",
+                            "referenceLocation": "RouteWrite"
+                        },
+                        "ComponentProps": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::ComponentProps",
+                            "referenceLocation": "ComponentProps"
+                        },
+                        "RouterDirection": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouterDirection",
+                            "referenceLocation": "RouterDirection"
+                        },
+                        "AnimationBuilder": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
+                        },
+                        "NavOptions": {
+                            "location": "import",
+                            "path": "./nav-interface",
+                            "id": "src/components/nav/nav-interface.ts::NavOptions",
+                            "referenceLocation": "NavOptions"
+                        }
+                    },
+                    "return": "Promise<RouteWrite>"
+                },
+                "docs": {
+                    "text": "Called by the router to update the view.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "id The component tag."
+                        }, {
+                            "name": "param",
+                            "text": "params The component params."
+                        }, {
+                            "name": "param",
+                            "text": "direction A direction hint."
+                        }, {
+                            "name": "param",
+                            "text": "animation an AnimationBuilder."
+                        }, {
+                            "name": "return",
+                            "text": "the status."
+                        }, {
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getRouteId": {
+                "complexType": {
+                    "signature": "() => Promise<RouteID | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RouteID": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouteID",
+                            "referenceLocation": "RouteID"
+                        }
+                    },
+                    "return": "Promise<RouteID | undefined>"
+                },
+                "docs": {
+                    "text": "Called by <ion-router> to retrieve the current component.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
             "getActive": {
                 "complexType": {
                     "signature": "() => Promise<ViewController | undefined>",

package/dist/collection/components/picker-legacy/animations/ios.enter.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+/**
+ * iOS Picker Enter Animation
+ */
+export const iosEnterAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};

package/dist/collection/components/picker-legacy/animations/ios.leave.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+/**
+ * iOS Picker Leave Animation
+ */
+export const iosLeaveAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};

package/dist/collection/components/picker-legacy/picker-interface.js

@@ -0,0 +1 @@
+export {};