@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786730389.1a1927bf

package/dist/collection/components/refresher-content/refresher-content.js

@@ -1,25 +1,56 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftFill from "@phosphor-icons/core/assets/fill/caret-left-fill.svg";
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class RefresherContent {
-    constructor() {
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    }
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    el;
+    /**
+     * A static icon or a spinner to display when you begin to pull down.
+     * A spinner name can be provided to gradually show tick marks
+     * when pulling down on iOS devices.
+     */
+    pullingIcon;
+    /**
+     * The text you want to display when you begin to pull down.
+     * `pullingText` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     *
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    pullingText;
+    /**
+     * An animated SVG spinner that shows when refreshing begins
+     */
+    refreshingSpinner;
+    /**
+     * The text you want to display when performing a refresh.
+     * `refreshingText` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     *
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    refreshingText;
     componentWillLoad() {
-        const theme = getIonTheme(this);
         if (this.pullingIcon === undefined) {
             /**
              * The native iOS refresher uses a spinner instead of
@@ -27,11 +58,13 @@ export class RefresherContent {
              * the native iOS refresher.
              */
             const hasRubberBandScrolling = supportsRubberBandScrolling();
+            const mode = getIonMode(this);
             const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', theme === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
-            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
+            const mode = getIonMode(this);
+            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'circular'));
         }
     }
     renderPullingText() {
@@ -51,27 +84,10 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const theme = getIonTheme(this);
-        const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '3d2d138e485b3b2beae47b9ea4e140f0b9647434', class: {
-                [theme]: true,
-            } }, h("div", { key: 'd0c950b65a37a75b795503574a980cdb61f674e1', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '8c6e27b2fb134c21fb7e8864433802a95ba0f328', class: "refresher-pulling-icon" }, h("div", { key: '0a947b7779502780f2c835f8686f3a06e21a9194', class: "spinner-arrow-container" }, h("ion-spinner", { key: '59c129077809add46b7fe6dcf5fc0edbb1cc94d5', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'a28750ed07d9337febbceb5550683eb1c302858c', class: "arrow-container" }, h("ion-icon", { key: 'e14e3b9f9ad51ce3a138a191a848078bd423fa9b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '22c4c80ef1e340a8ec9ca718849b412a09507967', class: "refresher-pulling-icon" }, h("ion-icon", { key: '6506d0dd30bf639a23cda57c6d1c2a9c29e42ed6', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a54967c5f539ed182106b1c5fa7b499de84c049a', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '2e425f66d780e90474b8ebf7473b9f7c98f30c81', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '286b9b9cce1cb4450ffa5577f0b76044877722ce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'ec378d6a302be697c12c4f973a57c6ad2ada070f', class: mode }, h("div", { key: '0055f98f8c5a1ed7979dc8146ec1f82a575860c7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4f88468e26370df6889e72aa54ebb395ebf3757d', class: "refresher-pulling-icon" }, h("div", { key: '05b3f8679576aaa6c2d84d60df6629a392df29e2', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0bf6ceea416ce1140c0f10a5bede063cae7054f4', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'b71ede8455837968218edae28504e5e14bbc1f5c', class: "arrow-container" }, h("ion-icon", { key: '30b808288d23d3eac681b1225cd8392fdacfefe1', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'fee1ae7e57ef8a02f5654808dff9dca3002b6702', class: "refresher-pulling-icon" }, h("ion-icon", { key: '55b34a98028adb497fbc2ac66bdb3d5ae5b1705b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'ef8f987daa8060cb6f8fd83c0864095042b9eecf', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'cd6fe0e81b34eeae11478fcc8a42044bff6f7a52', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '9cd778229582b538d54589c4d8e4d470efb64aad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
-    static get originalStyleUrls() {
-        return {
-            "ios": ["refresher-content.scss"],
-            "md": ["refresher-content.scss"],
-            "ionic": ["refresher-content.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "ios": ["refresher-content.css"],
-            "md": ["refresher-content.css"],
-            "ionic": ["refresher-content.css"]
-        };
-    }
     static get properties() {
         return {
             "pullingIcon": {

package/dist/collection/components/reorder/reorder.ios.css

@@ -16,12 +16,6 @@
   font-size: dynamic-font(16px);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/reorder/reorder.js

@@ -1,18 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
+    el;
     onClick(ev) {
         const reorderGroup = this.el.closest('ion-reorder-group');
         ev.preventDefault();
@@ -22,45 +18,23 @@ export class Reorder {
             ev.stopImmediatePropagation();
         }
     }
-    /**
-     * Get the icon to use for the handle icon.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get reorderHandleIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: reorderThreeOutline,
-            ionic: listRegular,
-            md: reorderTwoSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured reorder handle icon or the default icon
-        return config.get('reorderHandleIcon', defaultIcon);
-    }
     render() {
-        const { reorderHandleIcon } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'bc0b4cd34db6dfe794ab66a785d406bfc02236c5', class: {
-                [theme]: true,
-            } }, h("slot", { key: '28672768be8598b7cb47b7b2837b77afbc2c2e14' }, h("ion-icon", { key: '03b6620768da18a6f8cb0c55e94b85a53cbab66a', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const mode = getIonMode(this);
+        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        return (h(Host, { key: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, h("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, h("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["reorder.ios.scss"],
-            "md": ["reorder.md.scss"],
-            "ionic": ["reorder.md.scss"]
+            "md": ["reorder.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["reorder.ios.css"],
-            "md": ["reorder.md.css"],
-            "ionic": ["reorder.md.css"]
+            "md": ["reorder.md.css"]
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/reorder/reorder.md.css

@@ -16,12 +16,6 @@
   font-size: dynamic-font(16px);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/reorder-group/reorder-group.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/reorder-group/reorder-group.js

@@ -5,31 +5,56 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, getScrollElement } from "../../utils/content/index";
 import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class ReorderGroup {
-    constructor() {
-        this.lastToIndex = -1;
-        this.cachedHeights = [];
-        this.scrollElTop = 0;
-        this.scrollElBottom = 0;
-        this.scrollElInitial = 0;
-        this.containerTop = 0;
-        this.containerBottom = 0;
-        this.state = 0 /* ReorderGroupState.Idle */;
-        /**
-         * If `true`, the reorder will be hidden.
-         */
-        this.disabled = true;
-    }
+    selectedItemEl;
+    selectedItemHeight;
+    lastToIndex = -1;
+    cachedHeights = [];
+    scrollEl;
+    gesture;
+    scrollElTop = 0;
+    scrollElBottom = 0;
+    scrollElInitial = 0;
+    containerTop = 0;
+    containerBottom = 0;
+    state = 0 /* ReorderGroupState.Idle */;
+    el;
+    /**
+     * If `true`, the reorder will be hidden.
+     */
+    disabled = true;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
+    // TODO(FW-6590): Remove this in a major release.
+    /**
+     * Event that needs to be listened to in order to complete the reorder action.
+     * @deprecated Use `ionReorderEnd` instead. If you are accessing
+     * `event.detail.from` or `event.detail.to` and relying on them
+     * being different you should now add checks as they are always emitted
+     * in `ionReorderEnd`, even when they are the same.
+     */
+    ionItemReorder;
+    /**
+     * Event that is emitted when the reorder gesture starts.
+     */
+    ionReorderStart;
+    /**
+     * Event that is emitted as the reorder gesture moves.
+     */
+    ionReorderMove;
+    /**
+     * Event that is emitted when the reorder gesture ends.
+     * The from and to properties are always available, regardless of
+     * if the reorder gesture moved the item. If the item did not change
+     * from its start position, the from and to properties will be the same.
+     * Once the event has been emitted, the `complete()` method then needs
+     * to be called in order to finalize the reorder action.
+     */
+    ionReorderEnd;
     async connectedCallback() {
         const contentEl = findClosestIonContent(this.el);
         if (contentEl) {
@@ -256,9 +281,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'c095e5428be9f446f245d37a12653978bb2bc2b6', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '3afdc6a6c81bba2f88ea523d4b73c6fccff1b9ec', class: {
+                [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));

package/dist/collection/components/ripple-effect/{ripple-effect.common.css → ripple-effect.css}

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -60,8 +54,8 @@
  * }
  */
 :host {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -2,24 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class RippleEffect {
-    constructor() {
-        /**
-         * Sets the type of ripple-effect:
-         *
-         * - `bounded`: the ripple effect expands from the user's click position
-         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-         *
-         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-         * while surfaces for unbounded ripples should have it set to visible.
-         */
-        this.type = 'bounded';
-    }
+    el;
+    /**
+     * Sets the type of ripple-effect:
+     *
+     * - `bounded`: the ripple effect expands from the user's click position
+     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+     *
+     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+     * while surfaces for unbounded ripples should have it set to visible.
+     */
+    type = 'bounded';
     /**
      * Adds the ripple effect to the parent element.
      *
@@ -71,9 +66,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '51fe7517d41c643bd4e746f366f513c42dac17dc', role: "presentation", class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
+                [mode]: true,
                 unbounded: this.unbounded,
             } }));
     }
@@ -81,16 +76,12 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["ripple-effect.common.scss"],
-            "md": ["ripple-effect.common.scss"],
-            "ionic": ["ripple-effect.ionic.scss"]
+            "$": ["ripple-effect.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["ripple-effect.common.css"],
-            "md": ["ripple-effect.common.css"],
-            "ionic": ["ripple-effect.ionic.css"]
+            "$": ["ripple-effect.css"]
         };
     }
     static get properties() {

package/dist/collection/components/route/route.js

@@ -1,18 +1,43 @@
 // TODO(FW-2832): types
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Route {
-    constructor() {
-        /**
-         * 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);
     }
@@ -71,7 +96,7 @@ export class Route {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
+                    "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/route-redirect/route-redirect.js

@@ -1,4 +1,35 @@
 export class RouteRedirect {
+    /**
+     * 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();
     }

package/dist/collection/components/router/router.js

@@ -6,38 +6,42 @@ import { readNavState, scrollToFragment, waitUntilNavNode, writeNavState } from
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Router {
-    constructor() {
-        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;
+    el;
+    /**
+     * 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());
@@ -107,9 +111,8 @@ export class Router {
      * @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;
@@ -180,11 +183,10 @@ export class Router {
         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;
@@ -258,14 +260,12 @@ export class Router {
         }
         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;
     }