@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -1,54 +1,40 @@
 /*!
  * (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";
 import { lifecycle, setPageHidden, transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } 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";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class Nav {
-    transInstr = [];
-    sbAni;
-    gestureOrAnimationInProgress = false;
-    isTransitioning = false;
-    destroyed = false;
-    views = [];
-    gesture;
-    didLoad = false;
-    el;
-    /** @internal */
-    delegate;
-    /**
-     * If the nav component should allow for swipe-to-go-back.
-     */
-    swipeGesture;
+    constructor() {
+        this.transInstr = [];
+        this.gestureOrAnimationInProgress = false;
+        this.useRouter = false;
+        this.isTransitioning = false;
+        this.destroyed = false;
+        this.views = [];
+        this.didLoad = false;
+        /**
+         * If `true`, the nav should animate the transition of components.
+         */
+        this.animated = true;
+    }
     swipeGestureChanged() {
         if (this.gesture) {
             this.gesture.enable(this.swipeGesture === true);
         }
     }
-    /**
-     * If `true`, the nav should animate the transition of components.
-     */
-    animated = true;
-    /**
-     * By default `ion-nav` animates transition between pages based in the mode (ios or material design).
-     * However, this property allows to create custom transition using `AnimationBuilder` functions.
-     */
-    animation;
-    /**
-     * Any parameters for the root component
-     */
-    rootParams;
-    /**
-     * Root NavComponent to load
-     */
-    root;
     rootChanged() {
+        const isDev = Build.isDev;
         if (this.root === undefined) {
             return;
         }
@@ -59,22 +45,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);
+        }
     }
-    /**
-     * Event fired when Nav will load a component
-     * @internal
-     */
-    ionNavWillLoad;
-    /**
-     * Event fired when the nav will change components
-     */
-    ionNavWillChange;
-    /**
-     * Event fired when the nav has changed components
-     */
-    ionNavDidChange;
     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');
@@ -226,7 +207,7 @@ export class Nav {
      * @param done The transition complete function.
      */
     setPages(views, opts, done) {
-        opts ??= {};
+        opts !== null && opts !== void 0 ? opts : (opts = {});
         // if animation wasn't set to true then default it to NOT animate
         if (opts.animated !== true) {
             opts.animated = false;
@@ -239,6 +220,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.
      */
@@ -295,7 +348,8 @@ export class Nav {
      * @returns Whether the transition succeeds.
      */
     async queueTrns(ti, done) {
-        if (this.isTransitioning && ti.opts?.skipIfBusy) {
+        var _a, _b;
+        if (this.isTransitioning && ((_a = ti.opts) === null || _a === void 0 ? void 0 : _a.skipIfBusy)) {
             return false;
         }
         const promise = new Promise((resolve, reject) => {
@@ -303,8 +357,27 @@ 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 (ti.insertViews?.length === 0) {
+        if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             ti.insertViews = undefined;
         }
         // Enqueue transition instruction
@@ -323,6 +396,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) {
@@ -387,7 +467,7 @@ export class Nav {
                  * unless otherwise specified by the developer.
                  */
                 if (isBackDirection) {
-                    ti.opts.animationBuilder = ti.opts.animationBuilder || enteringView?.animationBuilder;
+                    ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView === null || enteringView === void 0 ? void 0 : enteringView.animationBuilder);
                 }
                 leavingView.animationBuilder = ti.opts.animationBuilder;
             }
@@ -415,9 +495,11 @@ export class Nav {
         this.nextTrns();
     }
     prepareTI(ti) {
+        var _a, _b;
+        var _c;
         const viewsLength = this.views.length;
-        ti.opts ??= {};
-        ti.opts.delegate ??= this.delegate;
+        (_a = ti.opts) !== null && _a !== void 0 ? _a : (ti.opts = {});
+        (_b = (_c = ti.opts).delegate) !== null && _b !== void 0 ? _b : (_c.delegate = this.delegate);
         if (ti.removeView !== undefined) {
             assert(ti.removeStart !== undefined, 'removeView needs removeStart');
             assert(ti.removeCount !== undefined, 'removeView needs removeCount');
@@ -502,6 +584,7 @@ export class Nav {
      * @param ti The instructions.
      */
     postViewInit(enteringView, leavingView, ti) {
+        var _a, _b, _c;
         assert(leavingView || enteringView, 'Both leavingView and enteringView are null');
         assert(ti.resolve, 'resolve must be valid');
         assert(ti.reject, 'reject must be valid');
@@ -522,9 +605,9 @@ export class Nav {
                 }
             }
             // default the direction to "back"
-            opts.direction ??= 'back';
+            (_a = opts.direction) !== null && _a !== void 0 ? _a : (opts.direction = 'back');
         }
-        const finalNumViews = this.views.length + (insertViews?.length ?? 0) - (removeCount ?? 0);
+        const finalNumViews = this.views.length + ((_b = insertViews === null || insertViews === void 0 ? void 0 : insertViews.length) !== null && _b !== void 0 ? _b : 0) - (removeCount !== null && removeCount !== void 0 ? removeCount : 0);
         assert(finalNumViews >= 0, 'final balance can not be negative');
         if (finalNumViews === 0) {
             printIonWarning(`[ion-nav] - You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
@@ -541,7 +624,7 @@ export class Nav {
             }
             if (ti.enteringRequiresTransition) {
                 // default to forward if not already set
-                opts.direction ??= 'forward';
+                (_c = opts.direction) !== null && _c !== void 0 ? _c : (opts.direction = 'forward');
             }
         }
         // if the views to be removed are in the beginning or middle
@@ -592,20 +675,14 @@ export class Nav {
                 }
             }
             : undefined;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this, theme);
         const enteringEl = enteringView.element;
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
-        const animationOpts = {
-            mode,
-            showGoBack: this.canGoBackSync(enteringView),
-            baseEl: this.el,
-            progressCallback,
-            animated: this.animated && config.getBoolean('animated', true),
-            enteringEl,
-            leavingEl,
-            ...opts,
-            animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation'),
-        };
+        const animationOpts = Object.assign(Object.assign({ mode,
+            theme, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+            leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });
         const { hasCompleted } = await transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
     }
@@ -757,7 +834,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '1886154d3c2fa8511af4d641d269aaa4c0f45c05' });
+        return h("slot", { key: '2542f3c31517c7238d1c286435c6e6738fafb145' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -858,7 +935,7 @@ export class Nav {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
+                    "text": "By default `ion-nav` animates transition between pages based on the mode (\"ios\" or \"md\").\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
                 },
                 "getter": false,
                 "setter": false
@@ -1530,6 +1607,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/nav/view-controller.js

@@ -8,16 +8,10 @@ export const VIEW_STATE_ATTACHED = 2;
 export const VIEW_STATE_DESTROYED = 3;
 // TODO(FW-2832): types
 export class ViewController {
-    component;
-    params;
-    state = VIEW_STATE_NEW;
-    nav;
-    element;
-    delegate;
-    animationBuilder;
     constructor(component, params) {
         this.component = component;
         this.params = params;
+        this.state = VIEW_STATE_NEW;
     }
     async init(container) {
         this.state = VIEW_STATE_ATTACHED;

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

@@ -3,29 +3,22 @@
  */
 import { Host, h } from "@stencil/core";
 import { navLink } from "./nav-link-utils";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class NavLink {
-    el;
-    /**
-     * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
-     */
-    component;
-    /**
-     * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
-     */
-    componentProps;
-    /**
-     * The transition direction when navigating to another page.
-     */
-    routerDirection = 'forward';
-    /**
-     * The transition animation when navigating to another page.
-     */
-    routerAnimation;
-    onClick = () => {
-        return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
-    };
+    constructor() {
+        /**
+         * The transition direction when navigating to another page.
+         */
+        this.routerDirection = 'forward';
+        this.onClick = () => {
+            return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
+        };
+    }
     render() {
-        return h(Host, { key: '4bcaa74015462824b3f19253b04a77ce83389ca0', onClick: this.onClick });
+        return h(Host, { key: '892d940265e46ab358af2693c4d63234fe301a85', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/note/note.js

@@ -3,35 +3,32 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Note {
-    /**
-     * 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: 'ffe9b4de8bbd89b1ef427f6cd5dbcd354d715e6b', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: '42fa3ca3f98208ea2a5057da25b7f9d371c5ba1f' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3f882cc4cac96016c332fd42b7a42ee2065284ce', class: createColorClasses(this.color, {
+                [theme]: true,
+            }) }, h("slot", { key: 'f90b98dcd17b4f3c4e7b85ad4fe01e5478bdc952' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["note.ios.scss"],
-            "md": ["note.md.scss"]
+            "md": ["note.md.scss"],
+            "ionic": ["note.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["note.ios.css"],
-            "md": ["note.md.css"]
+            "md": ["note.md.css"],
+            "ionic": ["note.md.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/picker/picker.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -168,8 +180,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  left: 0;
   right: 0;
+  left: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -189,18 +201,18 @@
 :host input {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
-  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
+  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }