@ionic/core 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb

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

@@ -3,55 +3,24 @@
  */
 'use strict';
 
-var index = require('./index-CAThePqm.js');
-var helpers = require('./helpers-DURh1XdY.js');
-var index$1 = require('./index-BnhnwL1o.js');
-var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-dMut1Czp.js');
+var index = require('./index-Ct7gcRif.js');
+var helpers = require('./helpers-Cv23MFHM.js');
+var index$1 = require('./index-Dqpns5vP.js');
+var theme = require('./theme-CeDs6Hcv.js');
+var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
 
 const Route = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionRouteDataChanged = index.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);
     }
@@ -93,37 +62,6 @@ const RouteRedirect = class {
         index.registerInstance(this, hostRef);
         this.ionRouteRedirectChanged = index.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();
     }
@@ -183,6 +121,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;
@@ -328,6 +267,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) {
@@ -382,7 +322,7 @@ const findFragmentTarget = async (fragment, shouldContinue) => {
             try {
                 candidates = [...document.querySelectorAll(`#${escaped}, a[name="${escaped}"]`)];
             }
-            catch {
+            catch (_a) {
                 candidates = [...document.querySelectorAll(`#${escaped}`)];
             }
         }
@@ -419,7 +359,7 @@ const scrollToFragment = async (fragment, shouldContinue = () => true) => {
     try {
         decoded = decodeURIComponent(fragment);
     }
-    catch {
+    catch (_a) {
         decoded = fragment;
     }
     const target = await findFragmentTarget(decoded, shouldContinue);
@@ -453,30 +393,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;
@@ -485,7 +411,7 @@ const searchNavNode = (root) => {
         return root;
     }
     const outlet = root.querySelector(OUTLET_SELECTOR);
-    return outlet ?? undefined;
+    return outlet !== null && outlet !== void 0 ? outlet : undefined;
 };
 
 /**
@@ -621,7 +547,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.
@@ -641,11 +567,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;
 };
@@ -699,7 +628,6 @@ const computePriority = (chain) => {
     return score;
 };
 class RouterSegments {
-    segments;
     constructor(segments) {
         this.segments = segments.slice();
     }
@@ -751,7 +679,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 {
@@ -802,42 +730,32 @@ const Router = class {
         index.registerInstance(this, hostRef);
         this.ionRouteWillChange = index.createEvent(this, "ionRouteWillChange", 7);
         this.ionRouteDidChange = index.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 index.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());
@@ -907,8 +825,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;
@@ -979,10 +898,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;
@@ -1056,12 +976,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;
     }
@@ -1127,6 +1049,7 @@ const Router = class {
             to,
         };
     }
+    get el() { return index.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}`;
@@ -1134,42 +1057,15 @@ const routerLinkCss = () => `:host{--background:transparent;--color:var(--ion-co
 const RouterLink = class {
     constructor(hostRef) {
         index.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) => {
+            theme.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) => {
-        theme.openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-    };
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const attrs = {
@@ -1177,10 +1073,10 @@ const RouterLink = class {
             rel: this.rel,
             target: this.target,
         };
-        return (index.h(index.Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, index.h("a", { key: '85796b7b48581fe9830ba1102dad7d1069de4e17', ...attrs }, index.h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
+            }) }, index.h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), index.h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
     }
 };
 RouterLink.style = routerLinkCss();