@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/cjs/ion-nav_2.cjs.entry.js

@@ -3,23 +3,28 @@
  */
 'use strict';
 
-var index = require('./index-C1knGA9x.js');
+var index = require('./index-uvry__L4.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var helpers = require('./helpers-Fh1iXsX9.js');
-var index$1 = require('./index-D94mERjz.js');
-var ionicGlobal = require('./ionic-global-DvEcO0tQ.js');
-var frameworkDelegate = require('./framework-delegate-CJT_QJQI.js');
-require('./focus-visible-BIj-I3-C.js');
+var helpers = require('./helpers-CaLhEmTE.js');
+var index$1 = require('./index-Ck9advCT.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var frameworkDelegate = require('./framework-delegate-NTLQ5YzV.js');
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
 const VIEW_STATE_DESTROYED = 3;
 // TODO(FW-2832): types
 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;
@@ -46,15 +51,6 @@ class ViewController {
         this.state = VIEW_STATE_DESTROYED;
     }
 }
-const matches = (view, id, params) => {
-    if (!view) {
-        return false;
-    }
-    if (view.component !== id) {
-        return false;
-    }
-    return helpers.shallowEqualStringMap(view.params, params);
-};
 const convertToView = (page, params) => {
     if (!page) {
         return null;
@@ -78,7 +74,7 @@ const convertToViews = (pages) => {
         .filter((v) => v !== null);
 };
 
-const navCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
+const navCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
 
 const Nav = class {
     constructor(hostRef) {
@@ -86,23 +82,44 @@ const Nav = class {
         this.ionNavWillLoad = index.createEvent(this, "ionNavWillLoad", 7);
         this.ionNavWillChange = index.createEvent(this, "ionNavWillChange", 3);
         this.ionNavDidChange = index.createEvent(this, "ionNavDidChange", 3);
-        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;
     }
+    transInstr = [];
+    sbAni;
+    gestureOrAnimationInProgress = false;
+    isTransitioning = false;
+    destroyed = false;
+    views = [];
+    gesture;
+    didLoad = false;
+    get el() { return index.getElement(this); }
+    /** @internal */
+    delegate;
+    /**
+     * If the nav component should allow for swipe-to-go-back.
+     */
+    swipeGesture;
     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() {
         if (this.root === undefined) {
             return;
@@ -114,14 +131,22 @@ const Nav = class {
              */
             return;
         }
-        if (!this.useRouter) {
-            if (this.root !== undefined) {
-                this.setRoot(this.root, this.rootParams);
-            }
-        }
+        this.setRoot(this.root, this.rootParams);
     }
+    /**
+     * 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 = ionicGlobal.getIonMode(this);
             this.swipeGesture = index.config.getBoolean('swipeBackEnabled', mode === 'ios');
@@ -132,7 +157,7 @@ const Nav = class {
         // We want to set this flag before any watch callbacks are manually called
         this.didLoad = true;
         this.rootChanged();
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-DqQx5QCp.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-DzQKEl5g.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
         this.swipeGestureChanged();
     }
     connectedCallback() {
@@ -273,7 +298,7 @@ const Nav = class {
      * @param done The transition complete function.
      */
     setPages(views, opts, done) {
-        opts !== null && opts !== void 0 ? opts : (opts = {});
+        opts ??= {};
         // if animation wasn't set to true then default it to NOT animate
         if (opts.animated !== true) {
             opts.animated = false;
@@ -286,78 +311,6 @@ const Nav = class {
             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.
      */
@@ -414,8 +367,7 @@ const Nav = class {
      * @returns Whether the transition succeeds.
      */
     async queueTrns(ti, done) {
-        var _a, _b;
-        if (this.isTransitioning && ((_a = ti.opts) === null || _a === void 0 ? void 0 : _a.skipIfBusy)) {
+        if (this.isTransitioning && ti.opts?.skipIfBusy) {
             return false;
         }
         const promise = new Promise((resolve, reject) => {
@@ -423,27 +375,8 @@ const Nav = class {
             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) {
+        if (ti.insertViews?.length === 0) {
             ti.insertViews = undefined;
         }
         // Enqueue transition instruction
@@ -462,13 +395,6 @@ const Nav = class {
             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) {
@@ -533,7 +459,7 @@ const Nav = class {
                  * unless otherwise specified by the developer.
                  */
                 if (isBackDirection) {
-                    ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView === null || enteringView === void 0 ? void 0 : enteringView.animationBuilder);
+                    ti.opts.animationBuilder = ti.opts.animationBuilder || enteringView?.animationBuilder;
                 }
                 leavingView.animationBuilder = ti.opts.animationBuilder;
             }
@@ -561,11 +487,9 @@ const Nav = class {
         this.nextTrns();
     }
     prepareTI(ti) {
-        var _a, _b;
-        var _c;
         const viewsLength = this.views.length;
-        (_a = ti.opts) !== null && _a !== void 0 ? _a : (ti.opts = {});
-        (_b = (_c = ti.opts).delegate) !== null && _b !== void 0 ? _b : (_c.delegate = this.delegate);
+        ti.opts ??= {};
+        ti.opts.delegate ??= this.delegate;
         if (ti.removeView !== undefined) {
             helpers.assert(ti.removeStart !== undefined, 'removeView needs removeStart');
             helpers.assert(ti.removeCount !== undefined, 'removeView needs removeCount');
@@ -650,7 +574,6 @@ const Nav = class {
      * @param ti The instructions.
      */
     postViewInit(enteringView, leavingView, ti) {
-        var _a, _b, _c;
         helpers.assert(leavingView || enteringView, 'Both leavingView and enteringView are null');
         helpers.assert(ti.resolve, 'resolve must be valid');
         helpers.assert(ti.reject, 'reject must be valid');
@@ -671,9 +594,9 @@ const Nav = class {
                 }
             }
             // default the direction to "back"
-            (_a = opts.direction) !== null && _a !== void 0 ? _a : (opts.direction = 'back');
+            opts.direction ??= 'back';
         }
-        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);
+        const finalNumViews = this.views.length + (insertViews?.length ?? 0) - (removeCount ?? 0);
         helpers.assert(finalNumViews >= 0, 'final balance can not be negative');
         if (finalNumViews === 0) {
             index.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);
@@ -690,7 +613,7 @@ const Nav = class {
             }
             if (ti.enteringRequiresTransition) {
                 // default to forward if not already set
-                (_c = opts.direction) !== null && _c !== void 0 ? _c : (opts.direction = 'forward');
+                opts.direction ??= 'forward';
             }
         }
         // if the views to be removed are in the beginning or middle
@@ -741,14 +664,20 @@ const Nav = class {
                 }
             }
             : undefined;
-        const theme = ionicGlobal.getIonTheme(this);
-        const mode = ionicGlobal.getIonMode(this, theme);
+        const mode = ionicGlobal.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 && index.config.getBoolean('animated', true), enteringEl,
-            leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || index.config.get('navAnimation') });
+        const animationOpts = {
+            mode,
+            showGoBack: this.canGoBackSync(enteringView),
+            baseEl: this.el,
+            progressCallback,
+            animated: this.animated && index.config.getBoolean('animated', true),
+            enteringEl,
+            leavingEl,
+            ...opts,
+            animationBuilder: opts.animationBuilder || this.animation || index.config.get('navAnimation'),
+        };
         const { hasCompleted } = await index$1.transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
     }
@@ -900,9 +829,8 @@ const Nav = class {
         }
     }
     render() {
-        return index.h("slot", { key: '3dfe9c2a5f3ea75cb6d82b76b240733105cddfad' });
+        return index.h("slot", { key: '1886154d3c2fa8511af4d641d269aaa4c0f45c05' });
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "swipeGesture": [{
                 "swipeGestureChanged": 0
@@ -937,18 +865,30 @@ const navLink = (el, routerDirection, component, componentProps, routerAnimation
 const NavLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * 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);
-        };
     }
+    get el() { return index.getElement(this); }
+    /**
+     * 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);
+    };
     render() {
-        return index.h(index.Host, { key: '476bfb5bb6fba4f422ec40315fc3ef466d01f757', onClick: this.onClick });
+        return index.h(index.Host, { key: '4bcaa74015462824b3f19253b04a77ce83389ca0', onClick: this.onClick });
     }
-    get el() { return index.getElement(this); }
 };
 
 exports.ion_nav = Nav;

package/dist/cjs/ion-picker-column-option.cjs.entry.js

@@ -3,47 +3,49 @@
  */
 'use strict';
 
-var index = require('./index-C1knGA9x.js');
-var helpers = require('./helpers-Fh1iXsX9.js');
-var theme = require('./theme-IlOsGAz7.js');
-var ionicGlobal = require('./ionic-global-DvEcO0tQ.js');
-require('./focus-visible-BIj-I3-C.js');
-
-const ionicPickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-base)}`;
+var index = require('./index-uvry__L4.js');
+var helpers = require('./helpers-CaLhEmTE.js');
+var theme = require('./theme-Bw0rpaNN.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
 
 const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
 
-const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-base)}`;
+const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-primary, #0054e9)}:host(.ion-color.option-active),:host(.ion-color[part~=active]){color:var(--ion-color-base)}`;
 
 const PickerColumnOption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * We keep track of the parent picker column
-         * so we can update the value of it when
-         * clicking an enable option.
-         */
-        this.pickerColumn = null;
-        /**
-         * The aria-label of the option.
-         *
-         * If the value changes, then it will trigger a
-         * re-render of the picker since it's a @State variable.
-         * Otherwise, the `aria-label` attribute cannot be updated
-         * after the component is loaded.
-         */
-        this.ariaLabel = null;
-        /**
-         * If `true`, the user cannot interact with the picker column option.
-         */
-        this.disabled = false;
-        /**
-         * 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).
-         */
-        this.color = 'primary';
     }
+    /**
+     * We keep track of the parent picker column
+     * so we can update the value of it when
+     * clicking an enable option.
+     */
+    pickerColumn = null;
+    get el() { return index.getElement(this); }
+    /**
+     * The aria-label of the option.
+     *
+     * If the value changes, then it will trigger a
+     * re-render of the picker since it's a @State variable.
+     * Otherwise, the `aria-label` attribute cannot be updated
+     * after the component is loaded.
+     */
+    ariaLabel = null;
+    /**
+     * If `true`, the user cannot interact with the picker column option.
+     */
+    disabled = false;
+    /**
+     * The text value of the option.
+     */
+    value;
+    /**
+     * 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 aria-label of the option has changed after the
      * first render and needs to be updated within the component.
@@ -101,13 +103,12 @@ const PickerColumnOption = class {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'fe9553e3157d35f5c28a3f2457715bd598ec1e00', class: theme.createColorClasses(color, {
-                [theme$1]: true,
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: '81f1938e0114392a6e035442b8bc9fcdf73fda84', class: theme.createColorClasses(color, {
+                [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, index.h("div", { key: '9bc334f020012537144972b5a8a1aed7c35ccec5', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'bd076e43c98ad920486230684c7f63e7e0b187f8' }))));
+            }) }, index.h("div", { key: 'b0bb84fd39ea38ea3037ad43c6be8e8dfca2e7d1', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'e0305b721618aef05823032ccd58214b0f184ca9' }))));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "aria-label": [{
                 "onAriaLabelChange": 0
@@ -115,7 +116,6 @@ const PickerColumnOption = class {
     }; }
 };
 PickerColumnOption.style = {
-    ionic: ionicPickerColumnOptionMdCss(),
     ios: pickerColumnOptionIosCss(),
     md: pickerColumnOptionMdCss()
 };