@ionic/core 7.5.7 → 7.5.8-nightly.20231130

package/components/ion-router.js

@@ -10,27 +10,27 @@ const ROUTER_INTENT_BACK = 'back';
 
 /** Join the non empty segments with "/". */
 const generatePath = (segments) => {
-  const path = segments.filter((s) => s.length > 0).join('/');
-  return '/' + path;
+    const path = segments.filter((s) => s.length > 0).join('/');
+    return '/' + path;
 };
 const generateUrl = (segments, useHash, queryString) => {
-  let url = generatePath(segments);
-  if (useHash) {
-    url = '#' + url;
-  }
-  if (queryString !== undefined) {
-    url += '?' + queryString;
-  }
-  return url;
+    let url = generatePath(segments);
+    if (useHash) {
+        url = '#' + url;
+    }
+    if (queryString !== undefined) {
+        url += '?' + queryString;
+    }
+    return url;
 };
 const writeSegments = (history, root, useHash, segments, direction, state, queryString) => {
-  const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString);
-  if (direction === ROUTER_INTENT_FORWARD) {
-    history.pushState(state, '', url);
-  }
-  else {
-    history.replaceState(state, '', url);
-  }
+    const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString);
+    if (direction === ROUTER_INTENT_FORWARD) {
+        history.pushState(state, '', url);
+    }
+    else {
+        history.replaceState(state, '', url);
+    }
 };
 /**
  * Transforms a chain to a list of segments.
@@ -40,23 +40,23 @@ const writeSegments = (history, root, useHash, segments, direction, state, query
  * - null is returned when a value is missing for any parameter segment.
  */
 const chainToSegments = (chain) => {
-  const segments = [];
-  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;
-        }
-        segments.push(param);
-      }
-      else if (segment !== '') {
-        segments.push(segment);
-      }
-    }
-  }
-  return segments;
+    const segments = [];
+    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;
+                }
+                segments.push(param);
+            }
+            else if (segment !== '') {
+                segments.push(segment);
+            }
+        }
+    }
+    return segments;
 };
 /**
  * Removes the prefix segments from the path segments.
@@ -66,27 +66,27 @@ const chainToSegments = (chain) => {
  * - the path segments after the prefix otherwise.
  */
 const removePrefix = (prefix, segments) => {
-  if (prefix.length > segments.length) {
-    return null;
-  }
-  if (prefix.length <= 1 && prefix[0] === '') {
-    return segments;
-  }
-  for (let i = 0; i < prefix.length; i++) {
-    if (prefix[i] !== segments[i]) {
-      return null;
-    }
-  }
-  if (segments.length === prefix.length) {
-    return [''];
-  }
-  return segments.slice(prefix.length);
+    if (prefix.length > segments.length) {
+        return null;
+    }
+    if (prefix.length <= 1 && prefix[0] === '') {
+        return segments;
+    }
+    for (let i = 0; i < prefix.length; i++) {
+        if (prefix[i] !== segments[i]) {
+            return null;
+        }
+    }
+    if (segments.length === prefix.length) {
+        return [''];
+    }
+    return segments.slice(prefix.length);
 };
 const readSegments = (loc, root, useHash) => {
-  const prefix = parsePath(root).segments;
-  const pathname = useHash ? loc.hash.slice(1) : loc.pathname;
-  const segments = parsePath(pathname).segments;
-  return removePrefix(prefix, segments);
+    const prefix = parsePath(root).segments;
+    const pathname = useHash ? loc.hash.slice(1) : loc.pathname;
+    const segments = parsePath(pathname).segments;
+    return removePrefix(prefix, segments);
 };
 /**
  * Parses the path to:
@@ -94,43 +94,43 @@ const readSegments = (loc, root, useHash) => {
  * - queryString (undefined when no query string).
  */
 const parsePath = (path) => {
-  let segments = [''];
-  let queryString;
-  if (path != null) {
-    const qsStart = path.indexOf('?');
-    if (qsStart > -1) {
-      queryString = path.substring(qsStart + 1);
-      path = path.substring(0, qsStart);
-    }
-    segments = path
-      .split('/')
-      .map((s) => s.trim())
-      .filter((s) => s.length > 0);
-    if (segments.length === 0) {
-      segments = [''];
-    }
-  }
-  return { segments, queryString };
+    let segments = [''];
+    let queryString;
+    if (path != null) {
+        const qsStart = path.indexOf('?');
+        if (qsStart > -1) {
+            queryString = path.substring(qsStart + 1);
+            path = path.substring(0, qsStart);
+        }
+        segments = path
+            .split('/')
+            .map((s) => s.trim())
+            .filter((s) => s.length > 0);
+        if (segments.length === 0) {
+            segments = [''];
+        }
+    }
+    return { segments, queryString };
 };
 
 const printRoutes = (routes) => {
-  console.group(`[ion-core] ROUTES[${routes.length}]`);
-  for (const chain of routes) {
-    const segments = [];
-    chain.forEach((r) => segments.push(...r.segments));
-    const ids = chain.map((r) => r.id);
-    console.debug(`%c ${generatePath(segments)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
-  }
-  console.groupEnd();
+    console.group(`[ion-core] ROUTES[${routes.length}]`);
+    for (const chain of routes) {
+        const segments = [];
+        chain.forEach((r) => segments.push(...r.segments));
+        const ids = chain.map((r) => r.id);
+        console.debug(`%c ${generatePath(segments)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
+    }
+    console.groupEnd();
 };
 const printRedirects = (redirects) => {
-  console.group(`[ion-core] REDIRECTS[${redirects.length}]`);
-  for (const redirect of redirects) {
-    if (redirect.to) {
-      console.debug('FROM: ', `$c ${generatePath(redirect.from)}`, 'font-weight: bold', ' TO: ', `$c ${generatePath(redirect.to.segments)}`, 'font-weight: bold');
+    console.group(`[ion-core] REDIRECTS[${redirects.length}]`);
+    for (const redirect of redirects) {
+        if (redirect.to) {
+            console.debug('FROM: ', `$c ${generatePath(redirect.from)}`, 'font-weight: bold', ' TO: ', `$c ${generatePath(redirect.to.segments)}`, 'font-weight: bold');
+        }
     }
-  }
-  console.groupEnd();
+    console.groupEnd();
 };
 
 /**
@@ -142,35 +142,35 @@ const printRedirects = (redirects) => {
  * setRouteId will create or select the view in the outlet.
  */
 const writeNavState = async (root, chain, direction, index, changed = false, animation) => {
-  try {
-    // find next navigation outlet in the DOM
-    const outlet = searchNavNode(root);
-    // make sure we can continue interacting the DOM, otherwise abort
-    if (index >= chain.length || !outlet) {
-      return changed;
-    }
-    await new Promise((resolve) => componentOnReady(outlet, resolve));
-    const route = chain[index];
-    const result = await outlet.setRouteId(route.id, route.params, direction, animation);
-    // if the outlet changed the page, reset navigation to neutral (no direction)
-    // this means nested outlets will not animate
-    if (result.changed) {
-      direction = ROUTER_INTENT_NONE;
-      changed = true;
-    }
-    // recursively set nested outlets
-    changed = await writeNavState(result.element, chain, direction, index + 1, changed, animation);
-    // once all nested outlets are visible let's make the parent visible too,
-    // using markVisible prevents flickering
-    if (result.markVisible) {
-      await result.markVisible();
-    }
-    return changed;
-  }
-  catch (e) {
-    console.error(e);
-    return false;
-  }
+    try {
+        // find next navigation outlet in the DOM
+        const outlet = searchNavNode(root);
+        // make sure we can continue interacting the DOM, otherwise abort
+        if (index >= chain.length || !outlet) {
+            return changed;
+        }
+        await new Promise((resolve) => componentOnReady(outlet, resolve));
+        const route = chain[index];
+        const result = await outlet.setRouteId(route.id, route.params, direction, animation);
+        // if the outlet changed the page, reset navigation to neutral (no direction)
+        // this means nested outlets will not animate
+        if (result.changed) {
+            direction = ROUTER_INTENT_NONE;
+            changed = true;
+        }
+        // recursively set nested outlets
+        changed = await writeNavState(result.element, chain, direction, index + 1, changed, animation);
+        // once all nested outlets are visible let's make the parent visible too,
+        // using markVisible prevents flickering
+        if (result.markVisible) {
+            await result.markVisible();
+        }
+        return changed;
+    }
+    catch (e) {
+        console.error(e);
+        return false;
+    }
 };
 /**
  * Recursively walks the outlet in the DOM.
@@ -178,42 +178,42 @@ const writeNavState = async (root, chain, direction, index, changed = false, ani
  * The function returns a list of RouteID corresponding to each of the outlet and the last outlet without a RouteID.
  */
 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) {
-      node = id.element;
-      id.element = undefined;
-      ids.push(id);
-    }
-    else {
-      break;
+    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) {
+            node = id.element;
+            id.element = undefined;
+            ids.push(id);
+        }
+        else {
+            break;
+        }
     }
-  }
-  return { ids, outlet };
+    return { ids, outlet };
 };
 const waitUntilNavNode = () => {
-  if (searchNavNode(document.body)) {
-    return Promise.resolve();
-  }
-  return new Promise((resolve) => {
-    window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
-  });
+    if (searchNavNode(document.body)) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        window.addEventListener('ionNavWillLoad', () => resolve(), { 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 searchNavNode = (root) => {
-  if (!root) {
-    return undefined;
-  }
-  if (root.matches(OUTLET_SELECTOR)) {
-    return root;
-  }
-  const outlet = root.querySelector(OUTLET_SELECTOR);
-  return outlet !== null && outlet !== void 0 ? outlet : undefined;
+    if (!root) {
+        return undefined;
+    }
+    if (root.matches(OUTLET_SELECTOR)) {
+        return root;
+    }
+    const outlet = root.querySelector(OUTLET_SELECTOR);
+    return outlet !== null && outlet !== void 0 ? outlet : undefined;
 };
 
 /**
@@ -224,75 +224,75 @@ const searchNavNode = (root) => {
  * The path ['some', 'path', 'to', 'page'] matches both ['some', 'path', 'to', 'page'] and ['some', 'path', '*'].
  */
 const matchesRedirect = (segments, redirect) => {
-  const { from, to } = redirect;
-  if (to === undefined) {
-    return false;
-  }
-  if (from.length > segments.length) {
-    return false;
-  }
-  for (let i = 0; i < from.length; i++) {
-    const expected = from[i];
-    if (expected === '*') {
-      return true;
-    }
-    if (expected !== segments[i]) {
-      return false;
-    }
-  }
-  return from.length === segments.length;
+    const { from, to } = redirect;
+    if (to === undefined) {
+        return false;
+    }
+    if (from.length > segments.length) {
+        return false;
+    }
+    for (let i = 0; i < from.length; i++) {
+        const expected = from[i];
+        if (expected === '*') {
+            return true;
+        }
+        if (expected !== segments[i]) {
+            return false;
+        }
+    }
+    return from.length === segments.length;
 };
 /** Returns the first redirect matching the path segments or undefined when no match found. */
 const findRouteRedirect = (segments, redirects) => {
-  return redirects.find((redirect) => matchesRedirect(segments, redirect));
+    return redirects.find((redirect) => matchesRedirect(segments, redirect));
 };
 const matchesIDs = (ids, chain) => {
-  const len = Math.min(ids.length, chain.length);
-  let score = 0;
-  for (let i = 0; i < len; i++) {
-    const routeId = ids[i];
-    const routeChain = chain[i];
-    // Skip results where the route id does not match the chain at the same index
-    if (routeId.id.toLowerCase() !== routeChain.id) {
-      break;
-    }
-    if (routeId.params) {
-      const routeIdParams = Object.keys(routeId.params);
-      // Only compare routes with the chain that have the same number of parameters.
-      if (routeIdParams.length === routeChain.segments.length) {
-        // Maps the route's params into a path based on the path variable names,
-        // to compare against the route chain format.
-        //
-        // Before:
-        // ```ts
-        // {
-        //  params: {
-        //    s1: 'a',
-        //    s2: 'b'
-        //  }
-        // }
-        // ```
-        //
-        // After:
-        // ```ts
-        // [':s1',':s2']
-        // ```
-        //
-        const pathWithParams = routeIdParams.map((key) => `:${key}`);
-        for (let j = 0; j < pathWithParams.length; j++) {
-          // Skip results where the path variable is not a match
-          if (pathWithParams[j].toLowerCase() !== routeChain.segments[j]) {
+    const len = Math.min(ids.length, chain.length);
+    let score = 0;
+    for (let i = 0; i < len; i++) {
+        const routeId = ids[i];
+        const routeChain = chain[i];
+        // Skip results where the route id does not match the chain at the same index
+        if (routeId.id.toLowerCase() !== routeChain.id) {
             break;
-          }
-          // Weight path matches for the same index higher.
-          score++;
         }
-      }
+        if (routeId.params) {
+            const routeIdParams = Object.keys(routeId.params);
+            // Only compare routes with the chain that have the same number of parameters.
+            if (routeIdParams.length === routeChain.segments.length) {
+                // Maps the route's params into a path based on the path variable names,
+                // to compare against the route chain format.
+                //
+                // Before:
+                // ```ts
+                // {
+                //  params: {
+                //    s1: 'a',
+                //    s2: 'b'
+                //  }
+                // }
+                // ```
+                //
+                // After:
+                // ```ts
+                // [':s1',':s2']
+                // ```
+                //
+                const pathWithParams = routeIdParams.map((key) => `:${key}`);
+                for (let j = 0; j < pathWithParams.length; j++) {
+                    // Skip results where the path variable is not a match
+                    if (pathWithParams[j].toLowerCase() !== routeChain.segments[j]) {
+                        break;
+                    }
+                    // Weight path matches for the same index higher.
+                    score++;
+                }
+            }
+        }
+        // Weight id matches
+        score++;
     }
-    // Weight id matches
-    score++;
-  }
-  return score;
+    return score;
 };
 /**
  * Matches the segments against the chain.
@@ -302,54 +302,54 @@ const matchesIDs = (ids, chain) => {
  * - a chain with the params properties updated with the parameter segments on match.
  */
 const matchesSegments = (segments, chain) => {
-  const inputSegments = new RouterSegments(segments);
-  let matchesDefault = false;
-  let allparams;
-  for (let i = 0; i < chain.length; i++) {
-    const chainSegments = chain[i].segments;
-    if (chainSegments[0] === '') {
-      matchesDefault = true;
-    }
-    else {
-      for (const segment of chainSegments) {
-        const data = inputSegments.next();
-        // data param
-        if (segment[0] === ':') {
-          if (data === '') {
-            return null;
-          }
-          allparams = allparams || [];
-          const params = allparams[i] || (allparams[i] = {});
-          params[segment.slice(1)] = data;
+    const inputSegments = new RouterSegments(segments);
+    let matchesDefault = false;
+    let allparams;
+    for (let i = 0; i < chain.length; i++) {
+        const chainSegments = chain[i].segments;
+        if (chainSegments[0] === '') {
+            matchesDefault = true;
         }
-        else if (data !== segment) {
-          return null;
+        else {
+            for (const segment of chainSegments) {
+                const data = inputSegments.next();
+                // data param
+                if (segment[0] === ':') {
+                    if (data === '') {
+                        return null;
+                    }
+                    allparams = allparams || [];
+                    const params = allparams[i] || (allparams[i] = {});
+                    params[segment.slice(1)] = data;
+                }
+                else if (data !== segment) {
+                    return null;
+                }
+            }
+            matchesDefault = false;
         }
-      }
-      matchesDefault = false;
     }
-  }
-  const matches = matchesDefault ? matchesDefault === (inputSegments.next() === '') : true;
-  if (!matches) {
-    return null;
-  }
-  if (allparams) {
-    return chain.map((route, i) => ({
-      id: route.id,
-      segments: route.segments,
-      params: mergeParams(route.params, allparams[i]),
-      beforeEnter: route.beforeEnter,
-      beforeLeave: route.beforeLeave,
-    }));
-  }
-  return chain;
+    const matches = matchesDefault ? matchesDefault === (inputSegments.next() === '') : true;
+    if (!matches) {
+        return null;
+    }
+    if (allparams) {
+        return chain.map((route, i) => ({
+            id: route.id,
+            segments: route.segments,
+            params: mergeParams(route.params, allparams[i]),
+            beforeEnter: route.beforeEnter,
+            beforeLeave: route.beforeLeave,
+        }));
+    }
+    return chain;
 };
 /**
  * Merges the route parameter objects.
  * Returns undefined when both parameters are undefined.
  */
 const mergeParams = (a, b) => {
-  return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
+    return a || b ? Object.assign(Object.assign({}, a), b) : undefined;
 };
 /**
  * Finds the best match for the ids in the chains.
@@ -359,26 +359,26 @@ const mergeParams = (a, b) => {
  * That is they contain both the componentProps of the <ion-route> and the parameter segment.
  */
 const findChainForIDs = (ids, chains) => {
-  let match = null;
-  let maxMatches = 0;
-  for (const chain of chains) {
-    const score = matchesIDs(ids, chain);
-    if (score > maxMatches) {
-      match = chain;
-      maxMatches = score;
-    }
-  }
-  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 null;
+    let match = null;
+    let maxMatches = 0;
+    for (const chain of chains) {
+        const score = matchesIDs(ids, chain);
+        if (score > maxMatches) {
+            match = chain;
+            maxMatches = score;
+        }
+    }
+    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 null;
 };
 /**
  * Finds the best match for the segments in the chains.
@@ -388,19 +388,19 @@ const findChainForIDs = (ids, chains) => {
  * That is they contain both the componentProps of the <ion-route> and the parameter segments.
  */
 const findChainForSegments = (segments, chains) => {
-  let match = null;
-  let bestScore = 0;
-  for (const chain of chains) {
-    const matchedChain = matchesSegments(segments, chain);
-    if (matchedChain !== null) {
-      const score = computePriority(matchedChain);
-      if (score > bestScore) {
-        bestScore = score;
-        match = matchedChain;
-      }
-    }
-  }
-  return match;
+    let match = null;
+    let bestScore = 0;
+    for (const chain of chains) {
+        const matchedChain = matchesSegments(segments, chain);
+        if (matchedChain !== null) {
+            const score = computePriority(matchedChain);
+            if (score > bestScore) {
+                bestScore = score;
+                match = matchedChain;
+            }
+        }
+    }
+    return match;
 };
 /**
  * Computes the priority of a chain.
@@ -414,41 +414,41 @@ const findChainForSegments = (segments, chains) => {
  * The second one will be given a higher priority because "page" is a fixed segment (vs ":where", a parameter segment).
  */
 const computePriority = (chain) => {
-  let score = 1;
-  let level = 1;
-  for (const route of chain) {
-    for (const segment of route.segments) {
-      if (segment[0] === ':') {
-        score += Math.pow(1, level);
-      }
-      else if (segment !== '') {
-        score += Math.pow(2, level);
-      }
-      level++;
-    }
-  }
-  return score;
+    let score = 1;
+    let level = 1;
+    for (const route of chain) {
+        for (const segment of route.segments) {
+            if (segment[0] === ':') {
+                score += Math.pow(1, level);
+            }
+            else if (segment !== '') {
+                score += Math.pow(2, level);
+            }
+            level++;
+        }
+    }
+    return score;
 };
 class RouterSegments {
-  constructor(segments) {
-    this.segments = segments.slice();
-  }
-  next() {
-    if (this.segments.length > 0) {
-      return this.segments.shift();
-    }
-    return '';
-  }
+    constructor(segments) {
+        this.segments = segments.slice();
+    }
+    next() {
+        if (this.segments.length > 0) {
+            return this.segments.shift();
+        }
+        return '';
+    }
 }
 
 const readProp = (el, prop) => {
-  if (prop in el) {
-    return el[prop];
-  }
-  if (el.hasAttribute(prop)) {
-    return el.getAttribute(prop);
-  }
-  return null;
+    if (prop in el) {
+        return el[prop];
+    }
+    if (el.hasAttribute(prop)) {
+        return el.getAttribute(prop);
+    }
+    return null;
 };
 /**
  * Extracts the redirects (that is <ion-route-redirect> elements inside the root).
@@ -456,15 +456,15 @@ const readProp = (el, prop) => {
  * The redirects are returned as a list of RouteRedirect.
  */
 const readRedirects = (root) => {
-  return Array.from(root.children)
-    .filter((el) => el.tagName === 'ION-ROUTE-REDIRECT')
-    .map((el) => {
-    const to = readProp(el, 'to');
-    return {
-      from: parsePath(readProp(el, 'from')).segments,
-      to: to == null ? undefined : parsePath(to),
-    };
-  });
+    return Array.from(root.children)
+        .filter((el) => el.tagName === 'ION-ROUTE-REDIRECT')
+        .map((el) => {
+        const to = readProp(el, 'to');
+        return {
+            from: parsePath(readProp(el, 'from')).segments,
+            to: to == null ? undefined : parsePath(to),
+        };
+    });
 };
 /**
  * Extracts all the routes (that is <ion-route> elements inside the root).
@@ -472,7 +472,7 @@ const readRedirects = (root) => {
  * The routes are returned as a list of chains - the flattened tree.
  */
 const readRoutes = (root) => {
-  return flattenRouterTree(readRouteNodes(root));
+    return flattenRouterTree(readRouteNodes(root));
 };
 /**
  * Reads the route nodes as a tree modeled after the DOM tree of <ion-route> elements.
@@ -480,19 +480,19 @@ const readRoutes = (root) => {
  * Note: routes without a component are ignored together with their children.
  */
 const readRouteNodes = (node) => {
-  return Array.from(node.children)
-    .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
-    .map((el) => {
-    const component = readProp(el, 'component');
-    return {
-      segments: parsePath(readProp(el, 'url')).segments,
-      id: component.toLowerCase(),
-      params: el.componentProps,
-      beforeLeave: el.beforeLeave,
-      beforeEnter: el.beforeEnter,
-      children: readRouteNodes(el),
-    };
-  });
+    return Array.from(node.children)
+        .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
+        .map((el) => {
+        const component = readProp(el, 'component');
+        return {
+            segments: parsePath(readProp(el, 'url')).segments,
+            id: component.toLowerCase(),
+            params: el.componentProps,
+            beforeLeave: el.beforeLeave,
+            beforeEnter: el.beforeEnter,
+            children: readRouteNodes(el),
+        };
+    });
 };
 /**
  * Flattens a RouterTree in a list of chains.
@@ -500,320 +500,320 @@ const readRouteNodes = (node) => {
  * Each chain represents a path from the root node to a terminal node.
  */
 const flattenRouterTree = (nodes) => {
-  const chains = [];
-  for (const node of nodes) {
-    flattenNode([], chains, node);
-  }
-  return chains;
+    const chains = [];
+    for (const node of nodes) {
+        flattenNode([], chains, node);
+    }
+    return chains;
 };
 /** Flattens a route node recursively and push each branch to the chains list. */
 const flattenNode = (chain, chains, node) => {
-  chain = [
-    ...chain,
-    {
-      id: node.id,
-      segments: node.segments,
-      params: node.params,
-      beforeLeave: node.beforeLeave,
-      beforeEnter: node.beforeEnter,
-    },
-  ];
-  if (node.children.length === 0) {
-    chains.push(chain);
-    return;
-  }
-  for (const child of node.children) {
-    flattenNode(chain, chains, child);
-  }
+    chain = [
+        ...chain,
+        {
+            id: node.id,
+            segments: node.segments,
+            params: node.params,
+            beforeLeave: node.beforeLeave,
+            beforeEnter: node.beforeEnter,
+        },
+    ];
+    if (node.children.length === 0) {
+        chains.push(chain);
+        return;
+    }
+    for (const child of node.children) {
+        flattenNode(chain, chains, child);
+    }
 };
 
 const Router = /*@__PURE__*/ proxyCustomElement(class Router extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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.root = '/';
-    this.useHash = true;
-  }
-  async componentWillLoad() {
-    await waitUntilNavNode();
-    const canProceed = await this.runGuards(this.getSegments());
-    if (canProceed !== true) {
-      if (typeof canProceed === 'object') {
-        const { redirect } = canProceed;
-        const path = parsePath(redirect);
-        this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString);
-        await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        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.root = '/';
+        this.useHash = true;
+    }
+    async componentWillLoad() {
+        await waitUntilNavNode();
+        const canProceed = await this.runGuards(this.getSegments());
+        if (canProceed !== true) {
+            if (typeof canProceed === 'object') {
+                const { redirect } = canProceed;
+                const path = parsePath(redirect);
+                this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString);
+                await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+            }
+        }
+        else {
+            await this.onRoutesChanged();
+        }
     }
-    else {
-      await this.onRoutesChanged();
-    }
-  }
-  componentDidLoad() {
-    window.addEventListener('ionRouteRedirectChanged', debounce(this.onRedirectChanged.bind(this), 10));
-    window.addEventListener('ionRouteDataChanged', debounce(this.onRoutesChanged.bind(this), 100));
-  }
-  async onPopState() {
-    const direction = this.historyDirection();
-    let segments = this.getSegments();
-    const canProceed = await this.runGuards(segments);
-    if (canProceed !== true) {
-      if (typeof canProceed === 'object') {
-        segments = parsePath(canProceed.redirect).segments;
-      }
-      else {
-        return false;
-      }
-    }
-    return this.writeNavStateRoot(segments, direction);
-  }
-  onBackButton(ev) {
-    ev.detail.register(0, (processNextHandler) => {
-      this.back();
-      processNextHandler();
-    });
-  }
-  /** @internal */
-  async canTransition() {
-    const canProceed = await this.runGuards();
-    if (canProceed !== true) {
-      if (typeof canProceed === 'object') {
-        return canProceed.redirect;
-      }
-      else {
-        return false;
-      }
-    }
-    return true;
-  }
-  /**
-   * Navigate to the specified path.
-   *
-   * @param path The path to navigate to.
-   * @param direction The direction of the animation. Defaults to `"forward"`.
-   */
-  async push(path, direction = 'forward', animation) {
-    var _a;
-    if (path.startsWith('.')) {
-      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;
-    }
-    let parsedPath = parsePath(path);
-    const canProceed = await this.runGuards(parsedPath.segments);
-    if (canProceed !== true) {
-      if (typeof canProceed === 'object') {
-        parsedPath = parsePath(canProceed.redirect);
-      }
-      else {
-        return false;
-      }
-    }
-    this.setSegments(parsedPath.segments, direction, parsedPath.queryString);
-    return this.writeNavStateRoot(parsedPath.segments, direction, animation);
-  }
-  /** Go back to previous page in the window.history. */
-  back() {
-    window.history.back();
-    return Promise.resolve(this.waitPromise);
-  }
-  /** @internal */
-  async printDebug() {
-    printRoutes(readRoutes(this.el));
-    printRedirects(readRedirects(this.el));
-  }
-  /** @internal */
-  async navChanged(direction) {
-    if (this.busy) {
-      console.warn('[ion-router] router is busy, navChanged was cancelled');
-      return false;
-    }
-    const { ids, outlet } = await readNavState(window.document.body);
-    const routes = readRoutes(this.el);
-    const chain = findChainForIDs(ids, routes);
-    if (!chain) {
-      console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
-      return false;
-    }
-    const segments = chainToSegments(chain);
-    if (!segments) {
-      console.warn('[ion-router] router could not match path because some required param is missing');
-      return false;
-    }
-    this.setSegments(segments, direction);
-    await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, segments, null, ids.length);
-    return true;
-  }
-  /** This handler gets called when a `ion-route-redirect` component is added to the DOM or if the from or to property of such node changes. */
-  onRedirectChanged() {
-    const segments = this.getSegments();
-    if (segments && findRouteRedirect(segments, readRedirects(this.el))) {
-      this.writeNavStateRoot(segments, ROUTER_INTENT_NONE);
-    }
-  }
-  /** This handler gets called when a `ion-route` component is added to the DOM or if the from or to property of such node changes. */
-  onRoutesChanged() {
-    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);
-    }
-    const state = win.history.state;
-    const lastState = this.lastState;
-    this.lastState = state;
-    if (state > lastState || (state >= lastState && lastState > 0)) {
-      return ROUTER_INTENT_FORWARD;
-    }
-    if (state < lastState) {
-      return ROUTER_INTENT_BACK;
-    }
-    return ROUTER_INTENT_NONE;
-  }
-  async writeNavStateRoot(segments, direction, animation) {
-    if (!segments) {
-      console.error('[ion-router] URL is not part of the routing set');
-      return false;
-    }
-    // lookup redirect rule
-    const redirects = readRedirects(this.el);
-    const redirect = findRouteRedirect(segments, redirects);
-    let redirectFrom = null;
-    if (redirect) {
-      const { segments: toSegments, queryString } = redirect.to;
-      this.setSegments(toSegments, direction, queryString);
-      redirectFrom = redirect.from;
-      segments = toSegments;
-    }
-    // lookup route chain
-    const routes = readRoutes(this.el);
-    const chain = findChainForSegments(segments, routes);
-    if (!chain) {
-      console.error('[ion-router] the path does not match any route');
-      return false;
-    }
-    // write DOM give
-    return this.safeWriteNavState(document.body, chain, direction, segments, redirectFrom, 0, animation);
-  }
-  async safeWriteNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
-    const unlock = await this.lock();
-    let changed = false;
-    try {
-      changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
+    componentDidLoad() {
+        window.addEventListener('ionRouteRedirectChanged', debounce(this.onRedirectChanged.bind(this), 10));
+        window.addEventListener('ionRouteDataChanged', debounce(this.onRoutesChanged.bind(this), 100));
+    }
+    async onPopState() {
+        const direction = this.historyDirection();
+        let segments = this.getSegments();
+        const canProceed = await this.runGuards(segments);
+        if (canProceed !== true) {
+            if (typeof canProceed === 'object') {
+                segments = parsePath(canProceed.redirect).segments;
+            }
+            else {
+                return false;
+            }
+        }
+        return this.writeNavStateRoot(segments, direction);
+    }
+    onBackButton(ev) {
+        ev.detail.register(0, (processNextHandler) => {
+            this.back();
+            processNextHandler();
+        });
+    }
+    /** @internal */
+    async canTransition() {
+        const canProceed = await this.runGuards();
+        if (canProceed !== true) {
+            if (typeof canProceed === 'object') {
+                return canProceed.redirect;
+            }
+            else {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Navigate to the specified path.
+     *
+     * @param path The path to navigate to.
+     * @param direction The direction of the animation. Defaults to `"forward"`.
+     */
+    async push(path, direction = 'forward', animation) {
+        var _a;
+        if (path.startsWith('.')) {
+            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;
+        }
+        let parsedPath = parsePath(path);
+        const canProceed = await this.runGuards(parsedPath.segments);
+        if (canProceed !== true) {
+            if (typeof canProceed === 'object') {
+                parsedPath = parsePath(canProceed.redirect);
+            }
+            else {
+                return false;
+            }
+        }
+        this.setSegments(parsedPath.segments, direction, parsedPath.queryString);
+        return this.writeNavStateRoot(parsedPath.segments, direction, animation);
+    }
+    /** Go back to previous page in the window.history. */
+    back() {
+        window.history.back();
+        return Promise.resolve(this.waitPromise);
+    }
+    /** @internal */
+    async printDebug() {
+        printRoutes(readRoutes(this.el));
+        printRedirects(readRedirects(this.el));
+    }
+    /** @internal */
+    async navChanged(direction) {
+        if (this.busy) {
+            console.warn('[ion-router] router is busy, navChanged was cancelled');
+            return false;
+        }
+        const { ids, outlet } = await readNavState(window.document.body);
+        const routes = readRoutes(this.el);
+        const chain = findChainForIDs(ids, routes);
+        if (!chain) {
+            console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
+            return false;
+        }
+        const segments = chainToSegments(chain);
+        if (!segments) {
+            console.warn('[ion-router] router could not match path because some required param is missing');
+            return false;
+        }
+        this.setSegments(segments, direction);
+        await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, segments, null, ids.length);
+        return true;
+    }
+    /** This handler gets called when a `ion-route-redirect` component is added to the DOM or if the from or to property of such node changes. */
+    onRedirectChanged() {
+        const segments = this.getSegments();
+        if (segments && findRouteRedirect(segments, readRedirects(this.el))) {
+            this.writeNavStateRoot(segments, ROUTER_INTENT_NONE);
+        }
     }
-    catch (e) {
-      console.error(e);
-    }
-    unlock();
-    return changed;
-  }
-  async lock() {
-    const p = this.waitPromise;
-    let resolve;
-    this.waitPromise = new Promise((r) => (resolve = r));
-    if (p !== undefined) {
-      await p;
-    }
-    return resolve;
-  }
-  /**
-   * Executes the beforeLeave hook of the source route and the beforeEnter hook of the target route if they exist.
-   *
-   * When the beforeLeave hook does not return true (to allow navigating) then that value is returned early and the beforeEnter is executed.
-   * Otherwise the beforeEnterHook hook of the target route is executed.
-   */
-  async runGuards(to = this.getSegments(), from) {
-    if (from === undefined) {
-      from = parsePath(this.previousPath).segments;
-    }
-    if (!to || !from) {
-      return true;
-    }
-    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;
-  }
-  async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
-    if (this.busy) {
-      console.warn('[ion-router] router is busy, transition was cancelled');
-      return false;
-    }
-    this.busy = true;
-    // generate route event and emit will change
-    const routeEvent = this.routeChangeEvent(segments, redirectFrom);
-    if (routeEvent) {
-      this.ionRouteWillChange.emit(routeEvent);
-    }
-    const changed = await writeNavState(node, chain, direction, index, false, animation);
-    this.busy = false;
-    // emit did change
-    if (routeEvent) {
-      this.ionRouteDidChange.emit(routeEvent);
-    }
-    return changed;
-  }
-  setSegments(segments, direction, queryString) {
-    this.state++;
-    writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString);
-  }
-  getSegments() {
-    return readSegments(window.location, this.root, this.useHash);
-  }
-  routeChangeEvent(toSegments, redirectFromSegments) {
-    const from = this.previousPath;
-    const to = generatePath(toSegments);
-    this.previousPath = to;
-    if (to === from) {
-      return null;
-    }
-    const redirectedFrom = redirectFromSegments ? generatePath(redirectFromSegments) : null;
-    return {
-      from,
-      redirectedFrom,
-      to,
-    };
-  }
-  get el() { return this; }
+    /** This handler gets called when a `ion-route` component is added to the DOM or if the from or to property of such node changes. */
+    onRoutesChanged() {
+        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);
+        }
+        const state = win.history.state;
+        const lastState = this.lastState;
+        this.lastState = state;
+        if (state > lastState || (state >= lastState && lastState > 0)) {
+            return ROUTER_INTENT_FORWARD;
+        }
+        if (state < lastState) {
+            return ROUTER_INTENT_BACK;
+        }
+        return ROUTER_INTENT_NONE;
+    }
+    async writeNavStateRoot(segments, direction, animation) {
+        if (!segments) {
+            console.error('[ion-router] URL is not part of the routing set');
+            return false;
+        }
+        // lookup redirect rule
+        const redirects = readRedirects(this.el);
+        const redirect = findRouteRedirect(segments, redirects);
+        let redirectFrom = null;
+        if (redirect) {
+            const { segments: toSegments, queryString } = redirect.to;
+            this.setSegments(toSegments, direction, queryString);
+            redirectFrom = redirect.from;
+            segments = toSegments;
+        }
+        // lookup route chain
+        const routes = readRoutes(this.el);
+        const chain = findChainForSegments(segments, routes);
+        if (!chain) {
+            console.error('[ion-router] the path does not match any route');
+            return false;
+        }
+        // write DOM give
+        return this.safeWriteNavState(document.body, chain, direction, segments, redirectFrom, 0, animation);
+    }
+    async safeWriteNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
+        const unlock = await this.lock();
+        let changed = false;
+        try {
+            changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        unlock();
+        return changed;
+    }
+    async lock() {
+        const p = this.waitPromise;
+        let resolve;
+        this.waitPromise = new Promise((r) => (resolve = r));
+        if (p !== undefined) {
+            await p;
+        }
+        return resolve;
+    }
+    /**
+     * Executes the beforeLeave hook of the source route and the beforeEnter hook of the target route if they exist.
+     *
+     * When the beforeLeave hook does not return true (to allow navigating) then that value is returned early and the beforeEnter is executed.
+     * Otherwise the beforeEnterHook hook of the target route is executed.
+     */
+    async runGuards(to = this.getSegments(), from) {
+        if (from === undefined) {
+            from = parsePath(this.previousPath).segments;
+        }
+        if (!to || !from) {
+            return true;
+        }
+        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;
+    }
+    async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
+        if (this.busy) {
+            console.warn('[ion-router] router is busy, transition was cancelled');
+            return false;
+        }
+        this.busy = true;
+        // generate route event and emit will change
+        const routeEvent = this.routeChangeEvent(segments, redirectFrom);
+        if (routeEvent) {
+            this.ionRouteWillChange.emit(routeEvent);
+        }
+        const changed = await writeNavState(node, chain, direction, index, false, animation);
+        this.busy = false;
+        // emit did change
+        if (routeEvent) {
+            this.ionRouteDidChange.emit(routeEvent);
+        }
+        return changed;
+    }
+    setSegments(segments, direction, queryString) {
+        this.state++;
+        writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString);
+    }
+    getSegments() {
+        return readSegments(window.location, this.root, this.useHash);
+    }
+    routeChangeEvent(toSegments, redirectFromSegments) {
+        const from = this.previousPath;
+        const to = generatePath(toSegments);
+        this.previousPath = to;
+        if (to === from) {
+            return null;
+        }
+        const redirectedFrom = redirectFromSegments ? generatePath(redirectFromSegments) : null;
+        return {
+            from,
+            redirectedFrom,
+            to,
+        };
+    }
+    get el() { return this; }
 }, [0, "ion-router", {
-    "root": [1],
-    "useHash": [4, "use-hash"],
-    "canTransition": [64],
-    "push": [64],
-    "back": [64],
-    "printDebug": [64],
-    "navChanged": [64]
-  }, [[8, "popstate", "onPopState"], [4, "ionBackButton", "onBackButton"]]]);
+        "root": [1],
+        "useHash": [4, "use-hash"],
+        "canTransition": [64],
+        "push": [64],
+        "back": [64],
+        "printDebug": [64],
+        "navChanged": [64]
+    }, [[8, "popstate", "onPopState"], [4, "ionBackButton", "onBackButton"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ion-router"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ion-router":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Router);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-router"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-router":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Router);
+            }
+            break;
+    } });
 }
 
 const IonRouter = Router;