@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

package/dist/esm/ion-route_4.entry.js

@@ -1,55 +1,25 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, j as printIonError, g as getElement, f as printIonWarning, h, d as Host } from './index-ChhhtsGZ.js';
-import { c as componentOnReady, r as raf, p as debounce } from './helpers-DexiPLIC.js';
-import { a as findClosestIonContent, i as isIonContent, g as getScrollElement } from './index-_Za5VB9w.js';
-import { o as openURL, c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { r as registerInstance, c as createEvent, j as printIonError, f as printIonWarning, g as getElement, h, d as Host } from './index-tcQvqkiX.js';
+import { c as componentOnReady, r as raf, p as debounce } from './helpers-DkCLSLI9.js';
+import { a as findClosestIonContent, i as isIonContent, g as getScrollElement } from './index-B_8X7INq.js';
+import { o as openURL, c as createColorClasses } from './theme-DiVJyqlX.js';
+import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import './dir-o8OKV5aD.js';
 
 const Route = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionRouteDataChanged = createEvent(this, "ionRouteDataChanged", 7);
+        /**
+         * Relative path that needs to match in order for this route to apply.
+         *
+         * Accepts paths similar to expressjs so that you can define parameters
+         * in the url /foo/:bar where bar would be available in incoming props.
+         */
+        this.url = '';
     }
-    /**
-     * Relative path that needs to match in order for this route to apply.
-     *
-     * Accepts paths similar to expressjs so that you can define parameters
-     * in the url /foo/:bar where bar would be available in incoming props.
-     */
-    url = '';
-    /**
-     * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)
-     * when the route matches.
-     *
-     * The value of this property is not always the tagname of the component to load,
-     * in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
-     */
-    component;
-    /**
-     * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed
-     * to the defined component when rendered.
-     */
-    componentProps;
-    /**
-     * A navigation hook that is fired when the route tries to leave.
-     * Returning `true` allows the navigation to proceed, while returning
-     * `false` causes it to be cancelled. Returning a `NavigationHookOptions`
-     * object causes the router to redirect to the path specified.
-     */
-    beforeLeave;
-    /**
-     * A navigation hook that is fired when the route tries to enter.
-     * Returning `true` allows the navigation to proceed, while returning
-     * `false` causes it to be cancelled. Returning a `NavigationHookOptions`
-     * object causes the router to redirect to the path specified.
-     */
-    beforeEnter;
-    /**
-     * Used internally by `ion-router` to know when this route did change.
-     */
-    ionRouteDataChanged;
     onUpdate(newValue) {
         this.ionRouteDataChanged.emit(newValue);
     }
@@ -91,37 +61,6 @@ const RouteRedirect = class {
         registerInstance(this, hostRef);
         this.ionRouteRedirectChanged = createEvent(this, "ionRouteRedirectChanged", 7);
     }
-    /**
-     * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.
-     * It needs to be an exact match of the navigated URL in order to apply.
-     *
-     * The path specified in this value is always an absolute path, even if the initial `/` slash
-     * is not specified.
-     *
-     */
-    from;
-    /**
-     * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.
-     * When the defined `ion-route-redirect` rule matches, the router will redirect to the path
-     * specified in this property.
-     *
-     * The value of this property is always an absolute path inside the scope of routes defined in
-     * `ion-router` it can't be used with another router or to perform a redirection to a different domain.
-     *
-     * Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's
-     * a redirect inside the context of ion-router.
-     *
-     * When this property is not specified or his value is `undefined` the whole redirect route is noop,
-     * even if the "from" value matches.
-     */
-    to;
-    /**
-     * Internal event that fires when any value of this rule is added/removed from the DOM,
-     * or any of his public properties changes.
-     *
-     * `ion-router` captures this event in order to update his internal registry of router rules.
-     */
-    ionRouteRedirectChanged;
     propDidChange() {
         this.ionRouteRedirectChanged.emit();
     }
@@ -181,6 +120,7 @@ const chainToSegments = (chain) => {
     for (const route of chain) {
         for (const segment of route.segments) {
             if (segment[0] === ':') {
+                // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
                 const param = route.params && route.params[segment.slice(1)];
                 if (!param) {
                     return null;
@@ -326,6 +266,7 @@ const readNavState = async (root) => {
     const ids = [];
     let outlet;
     let node = root;
+    // eslint-disable-next-line no-cond-assign
     while ((outlet = searchNavNode(node))) {
         const id = await outlet.getRouteId();
         if (id) {
@@ -380,7 +321,7 @@ const findFragmentTarget = async (fragment, shouldContinue) => {
             try {
                 candidates = [...document.querySelectorAll(`#${escaped}, a[name="${escaped}"]`)];
             }
-            catch {
+            catch (_a) {
                 candidates = [...document.querySelectorAll(`#${escaped}`)];
             }
         }
@@ -417,7 +358,7 @@ const scrollToFragment = async (fragment, shouldContinue = () => true) => {
     try {
         decoded = decodeURIComponent(fragment);
     }
-    catch {
+    catch (_a) {
         decoded = fragment;
     }
     const target = await findFragmentTarget(decoded, shouldContinue);
@@ -451,30 +392,16 @@ const scrollToFragment = async (fragment, shouldContinue = () => true) => {
         return false;
     }
 };
-/** How long the router waits for a navigation outlet before giving up and proceeding. */
-const NAV_NODE_TIMEOUT = 500;
 const waitUntilNavNode = () => {
     if (searchNavNode(document.body)) {
         return Promise.resolve();
     }
     return new Promise((resolve) => {
-        /**
-         * Outlets emit `ionNavWillLoad` as they load, so resolve as soon as one does.
-         * A timeout backstops the case where the page has no outlet at all: without it
-         * the router would wait forever and its `componentWillLoad` would never settle,
-         * which in turn prevents the app from signalling that it has finished loading.
-         */
-        const done = () => {
-            window.removeEventListener('ionNavWillLoad', done);
-            clearTimeout(timeout);
-            resolve();
-        };
-        const timeout = setTimeout(done, NAV_NODE_TIMEOUT);
-        window.addEventListener('ionNavWillLoad', done, { once: true });
+        window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
     });
 };
 /** Selector for all the outlets supported by the router. */
-const OUTLET_SELECTOR = ':not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
+const OUTLET_SELECTOR = ':not([no-router]) ion-nav, :not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
 const searchNavNode = (root) => {
     if (!root) {
         return undefined;
@@ -483,7 +410,7 @@ const searchNavNode = (root) => {
         return root;
     }
     const outlet = root.querySelector(OUTLET_SELECTOR);
-    return outlet ?? undefined;
+    return outlet !== null && outlet !== void 0 ? outlet : undefined;
 };
 
 /**
@@ -619,7 +546,7 @@ const matchesSegments = (segments, chain) => {
  * Returns undefined when both parameters are undefined.
  */
 const mergeParams = (a, b) => {
-    return a || b ? { ...a, ...b } : undefined;
+    return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
 };
 /**
  * Finds the best match for the ids in the chains.
@@ -639,11 +566,14 @@ const findChainForIDs = (ids, chains) => {
         }
     }
     if (match) {
-        return match.map((route, i) => ({
-            id: route.id,
-            segments: route.segments,
-            params: mergeParams(route.params, ids[i]?.params),
-        }));
+        return match.map((route, i) => {
+            var _a;
+            return ({
+                id: route.id,
+                segments: route.segments,
+                params: mergeParams(route.params, (_a = ids[i]) === null || _a === void 0 ? void 0 : _a.params),
+            });
+        });
     }
     return null;
 };
@@ -697,7 +627,6 @@ const computePriority = (chain) => {
     return score;
 };
 class RouterSegments {
-    segments;
     constructor(segments) {
         this.segments = segments.slice();
     }
@@ -749,7 +678,7 @@ const readRoutes = (root) => {
  */
 const readRouteNodes = (node) => {
     return Array.from(node.children)
-        .filter((el) => el.tagName === 'ION-ROUTE' && Boolean(el.component))
+        .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
         .map((el) => {
         const component = readProp(el, 'component');
         return {
@@ -800,42 +729,32 @@ const Router = class {
         registerInstance(this, hostRef);
         this.ionRouteWillChange = createEvent(this, "ionRouteWillChange", 7);
         this.ionRouteDidChange = createEvent(this, "ionRouteDidChange", 7);
+        this.previousPath = null;
+        this.busy = false;
+        this.state = 0;
+        this.lastState = 0;
+        this.fragmentScrollToken = 0;
+        /**
+         * The root path to use when matching URLs. By default, this is set to "/", but you can specify
+         * an alternate prefix for all URL paths.
+         */
+        this.root = '/';
+        /**
+         * The router can work in two "modes":
+         * - With hash: `/index.html#/path/to/page`
+         * - Without hash: `/path/to/page`
+         *
+         * Using one or another might depend in the requirements of your app and/or where it's deployed.
+         *
+         * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
+         * requires additional server-side configuration in order to properly work.
+         *
+         * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
+         *
+         * By default, this property is `true`, change to `false` to allow hash-less URLs.
+         */
+        this.useHash = true;
     }
-    previousPath = null;
-    busy = false;
-    state = 0;
-    lastState = 0;
-    waitPromise;
-    fragmentScrollToken = 0;
-    get el() { return getElement(this); }
-    /**
-     * The root path to use when matching URLs. By default, this is set to "/", but you can specify
-     * an alternate prefix for all URL paths.
-     */
-    root = '/';
-    /**
-     * The router can work in two "modes":
-     * - With hash: `/index.html#/path/to/page`
-     * - Without hash: `/path/to/page`
-     *
-     * Using one or another might depend in the requirements of your app and/or where it's deployed.
-     *
-     * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
-     * requires additional server-side configuration in order to properly work.
-     *
-     * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
-     *
-     * By default, this property is `true`, change to `false` to allow hash-less URLs.
-     */
-    useHash = true;
-    /**
-     * Event emitted when the route is about to change
-     */
-    ionRouteWillChange;
-    /**
-     * Emitted when the route had changed
-     */
-    ionRouteDidChange;
     async componentWillLoad() {
         await waitUntilNavNode();
         const canProceed = await this.runGuards(this.getSegments());
@@ -905,8 +824,9 @@ const Router = class {
      * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
+        var _a;
         if (path.startsWith('.')) {
-            const currentPath = this.previousPath ?? '/';
+            const currentPath = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
             // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
             const url = new URL(path, `https://host/${currentPath}`);
             path = url.pathname + url.search + url.hash;
@@ -977,10 +897,11 @@ const Router = class {
         return this.writeNavStateRoot(this.getSegments(), ROUTER_INTENT_NONE);
     }
     historyDirection() {
+        var _a;
         const win = window;
         if (win.history.state === null) {
             this.state++;
-            win.history.replaceState(this.state, win.document.title, win.document.location?.href);
+            win.history.replaceState(this.state, win.document.title, (_a = win.document.location) === null || _a === void 0 ? void 0 : _a.href);
         }
         const state = win.history.state;
         const lastState = this.lastState;
@@ -1054,12 +975,14 @@ const Router = class {
         }
         const routes = readRoutes(this.el);
         const fromChain = findChainForSegments(from, routes);
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
         const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
         if (canLeave === false || typeof canLeave === 'object') {
             return canLeave;
         }
         const toChain = findChainForSegments(to, routes);
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
         return beforeEnterHook ? beforeEnterHook() : true;
     }
@@ -1125,6 +1048,7 @@ const Router = class {
             to,
         };
     }
+    get el() { return getElement(this); }
 };
 
 const routerLinkCss = () => `:host{--background:transparent;--color:var(--ion-color-primary, #0054e9);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}`;
@@ -1132,42 +1056,15 @@ const routerLinkCss = () => `:host{--background:transparent;--color:var(--ion-co
 const RouterLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        this.onClick = (ev) => {
+            openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+        };
     }
-    /**
-     * 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;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    routerDirection = 'forward';
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page using `href`.
-     */
-    routerAnimation;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    onClick = (ev) => {
-        openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-    };
     render() {
         const mode = getIonMode(this);
         const attrs = {
@@ -1175,10 +1072,10 @@ const RouterLink = class {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '8aaf732d8f5cc4ced351e2b3164605c10bd90cad', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", { key: '8f291ffbbce5b08dd10720d855eb020880bf1be1', ...attrs }, h("slot", { key: '24dc388a49204011e1c1f0a1131c9a1b0a4ae4da' }))));
+            }) }, h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
     }
 };
 RouterLink.style = routerLinkCss();