@ionic/core 8.8.17 → 8.8.18-dev.11786108988.1fd94742

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

@@ -3,24 +3,55 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var index$1 = require('./index-CIrkNXqJ.js');
-var theme = require('./theme-CeDs6Hcv.js');
-var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
+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');
 
 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);
     }
@@ -62,6 +93,37 @@ 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();
     }
@@ -121,7 +183,6 @@ 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;
@@ -267,7 +328,6 @@ 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) {
@@ -322,7 +382,7 @@ const findFragmentTarget = async (fragment, shouldContinue) => {
             try {
                 candidates = [...document.querySelectorAll(`#${escaped}, a[name="${escaped}"]`)];
             }
-            catch (_a) {
+            catch {
                 candidates = [...document.querySelectorAll(`#${escaped}`)];
             }
         }
@@ -359,7 +419,7 @@ const scrollToFragment = async (fragment, shouldContinue = () => true) => {
     try {
         decoded = decodeURIComponent(fragment);
     }
-    catch (_a) {
+    catch {
         decoded = fragment;
     }
     const target = await findFragmentTarget(decoded, shouldContinue);
@@ -393,16 +453,30 @@ 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) => {
-        window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
+        /**
+         * 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 });
     });
 };
 /** Selector for all the outlets supported by the router. */
-const OUTLET_SELECTOR = ':not([no-router]) ion-nav, :not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
+const OUTLET_SELECTOR = ':not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet';
 const searchNavNode = (root) => {
     if (!root) {
         return undefined;
@@ -411,7 +485,7 @@ const searchNavNode = (root) => {
         return root;
     }
     const outlet = root.querySelector(OUTLET_SELECTOR);
-    return outlet !== null && outlet !== void 0 ? outlet : undefined;
+    return outlet ?? undefined;
 };
 
 /**
@@ -547,7 +621,7 @@ const matchesSegments = (segments, chain) => {
  * Returns undefined when both parameters are undefined.
  */
 const mergeParams = (a, b) => {
-    return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
+    return a || b ? { ...a, ...b } : undefined;
 };
 /**
  * Finds the best match for the ids in the chains.
@@ -567,14 +641,11 @@ const findChainForIDs = (ids, chains) => {
         }
     }
     if (match) {
-        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 match.map((route, i) => ({
+            id: route.id,
+            segments: route.segments,
+            params: mergeParams(route.params, ids[i]?.params),
+        }));
     }
     return null;
 };
@@ -628,6 +699,7 @@ const computePriority = (chain) => {
     return score;
 };
 class RouterSegments {
+    segments;
     constructor(segments) {
         this.segments = segments.slice();
     }
@@ -679,7 +751,7 @@ const readRoutes = (root) => {
  */
 const readRouteNodes = (node) => {
     return Array.from(node.children)
-        .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
+        .filter((el) => el.tagName === 'ION-ROUTE' && Boolean(el.component))
         .map((el) => {
         const component = readProp(el, 'component');
         return {
@@ -730,32 +802,42 @@ 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());
@@ -825,9 +907,8 @@ 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 = (_a = this.previousPath) !== null && _a !== void 0 ? _a : '/';
+            const currentPath = this.previousPath ?? '/';
             // 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;
@@ -898,11 +979,10 @@ 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, (_a = win.document.location) === null || _a === void 0 ? void 0 : _a.href);
+            win.history.replaceState(this.state, win.document.title, win.document.location?.href);
         }
         const state = win.history.state;
         const lastState = this.lastState;
@@ -976,14 +1056,12 @@ 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;
     }
@@ -1049,7 +1127,6 @@ 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}`;
@@ -1057,15 +1134,42 @@ 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 = {
@@ -1073,10 +1177,10 @@ const RouterLink = class {
             rel: this.rel,
             target: this.target,
         };
-        return (index.h(index.Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, index.h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), index.h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
+            }) }, index.h("a", { key: '85796b7b48581fe9830ba1102dad7d1069de4e17', ...attrs }, index.h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
     }
 };
 RouterLink.style = routerLinkCss();