@ionic/core 8.8.16-dev.11784914346.10d0804c → 8.8.16-dev.11785274070.1b3387c9

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

@@ -1,24 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, h } from "@stencil/core";
+import { 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, getIonTheme } from "../../global/ionic-global";
+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, 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.
- */
+import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews } from "./view-controller";
 export class Nav {
     constructor() {
         this.transInstr = [];
         this.gestureOrAnimationInProgress = false;
-        this.useRouter = false;
         this.isTransitioning = false;
         this.destroyed = false;
         this.views = [];
@@ -34,7 +29,6 @@ export class Nav {
         }
     }
     rootChanged() {
-        const isDev = Build.isDev;
         if (this.root === undefined) {
             return;
         }
@@ -45,17 +39,9 @@ export class Nav {
              */
             return;
         }
-        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);
-        }
+        this.setRoot(this.root, this.rootParams);
     }
     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');
@@ -220,78 +206,6 @@ 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.
      */
@@ -357,25 +271,6 @@ 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;
@@ -396,13 +291,6 @@ 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) {
@@ -675,13 +563,11 @@ export class Nav {
                 }
             }
             : undefined;
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
+        const mode = getIonMode(this);
         const enteringEl = enteringView.element;
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
-        const animationOpts = Object.assign(Object.assign({ mode,
-            theme, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
+        const animationOpts = Object.assign(Object.assign({ 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 { hasCompleted } = await transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
@@ -834,7 +720,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '3dfe9c2a5f3ea75cb6d82b76b240733105cddfad' });
+        return h("slot", { key: 'bb4a201a3a8079548f5474ff42293b28fc7599fb' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -935,7 +821,7 @@ export class Nav {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "getter": false,
                 "setter": false
@@ -1607,113 +1493,6 @@ 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-link/nav-link.js

@@ -3,10 +3,6 @@
  */
 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 {
     constructor() {
         /**
@@ -18,7 +14,7 @@ export class NavLink {
         };
     }
     render() {
-        return h(Host, { key: '476bfb5bb6fba4f422ec40315fc3ef466d01f757', onClick: this.onClick });
+        return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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,32 +3,29 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Note {
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '376ae1c66c19d1bdd74a2371c0639ed9e49648b5', class: createColorClasses(this.color, {
-                [theme]: true,
-            }) }, h("slot", { key: 'f8168cd88bb21c5e5a2b03c29539729fb38a19fd' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'b86a6acc9274df6528d224d4c11ab826a0f84dbc', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: '5de76567ed7713827cd277a42db102faf34190c8' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["note.ios.scss"],
-            "md": ["note.md.scss"],
-            "ionic": ["note.md.scss"]
+            "md": ["note.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["note.ios.css"],
-            "md": ["note.md.css"],
-            "ionic": ["note.md.css"]
+            "md": ["note.md.css"]
         };
     }
     static get properties() {

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -180,8 +168,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  right: 0;
   left: 0;
+  right: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -201,18 +189,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;
 }

package/dist/collection/components/picker/picker.js

@@ -4,8 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { getElementRoot } from "../../utils/helpers";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Picker {
     constructor() {
@@ -452,7 +451,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '0e3b8112fd28191ff6af8313fee72919d9b23ee7', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '92e86aab71f000c35fcf5f4082116285f2e43016', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -467,22 +466,20 @@ export class Picker {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '5fad8573cd44bee093f26cd4d7cabad836789e79', class: "picker-before" }), h("div", { key: 'fd26db9e86a3cafe125283eeff0da8be7ea2928e', class: "picker-after" }), h("div", { key: '8174b0f258f3ce00707132c674ff53d3b9fc2aee', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'a118b0ec709164758ae95fcb9e110befb574138f' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker.ios.scss"],
-            "md": ["picker.md.scss"],
-            "ionic": ["picker.md.scss"]
+            "md": ["picker.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["picker.ios.css"],
-            "md": ["picker.md.css"],
-            "ionic": ["picker.md.css"]
+            "md": ["picker.md.css"]
         };
     }
     static get events() {

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -180,8 +168,8 @@
 
 :host .picker-highlight {
   border-radius: var(--highlight-border-radius, 8px);
-  right: 0;
   left: 0;
+  right: 0;
   top: 50%;
   bottom: 0;
   -webkit-margin-start: auto;
@@ -201,18 +189,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;
 }

package/dist/collection/components/picker-column/picker-column.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -75,8 +69,8 @@
  * events. This allows screen readers to navigate the column.
  */
 .assistive-focusable {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -173,8 +167,7 @@
   scroll-snap-align: none;
 }
 
-::slotted([slot=prefix]),
-::slotted([slot=suffix]) {
+::slotted([slot=prefix]), ::slotted([slot=suffix]) {
   max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -230,6 +223,9 @@
 @media (any-hover: hover) {
   :host(:focus) .picker-opts {
     outline: none;
+    background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  }
+  :host(.ion-color:focus) .picker-opts {
     background: rgba(var(--ion-color-base-rgb), 0.2);
   }
 }