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

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

@@ -1,20 +1,20 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, g as getElement, e as config, f as printIonWarning, h, d as Host, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-D1CQtpUN.js';
-import { shouldUseCloseWatcher } from './hardware-back-button-DcHMMB9j.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global-5bZ91kOL.js';
-import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-BPcITY5s.js';
-import { i as isRTL } from './dir-B-FxiyeI.js';
-import { c as createColorClasses, h as hostContext } from './theme-byZM6qHV.js';
-import { a as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-DcUt1pPn.js';
-import { c as createKeyboardController } from './keyboard-controller-DEwoa1ev.js';
+import { r as registerInstance, e as config, f as printIonWarning, h, d as Host, g as getElement, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-tcQvqkiX.js';
+import { shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-HEqiOzXb.js';
+import { i as isRTL } from './dir-C53feagD.js';
+import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
+import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-Dw-wN0Ja.js';
+import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-BfAlKlW5.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-FnPGymXL.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { t as transition } from './index-DqVqy_Cy.js';
+import { t as transition } from './index-B_dQk_WE.js';
 import './index-ZjP4CjeZ.js';
-import './keyboard-DAF8GNJ9.js';
+import './keyboard-CUw4ekVy.js';
 import './capacitor-CFERIeaU.js';
 
 const appCss = () => `html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}`;
@@ -23,18 +23,15 @@ const App = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    focusVisible;
-    loadTimeout;
-    get el() { return getElement(this); }
     componentDidLoad() {
         {
             this.rIC(async () => {
                 const isHybrid = isPlatform(window, 'hybrid');
                 if (!config.getBoolean('_testing')) {
-                    import('./index-B9GsUd2c.js').then((module) => module.startTapClick(config));
+                    import('./index-BRHzoo00.js').then((module) => module.startTapClick(config));
                 }
                 if (config.getBoolean('statusTap', isHybrid)) {
-                    import('./status-tap-C-wNhea0.js').then((module) => module.startStatusTap());
+                    import('./status-tap-vO-6s4Yp.js').then((module) => module.startStatusTap());
                 }
                 if (config.getBoolean('inputShims', needInputShims())) {
                     /**
@@ -42,9 +39,9 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims-C1dCKVMO.js').then((module) => module.startInputShims(config, platform));
+                    import('./input-shims-LXhI7LEx.js').then((module) => module.startInputShims(config, platform));
                 }
-                const hardwareBackButtonModule = await import('./hardware-back-button-DcHMMB9j.js');
+                const hardwareBackButtonModule = await import('./hardware-back-button-B93Gru0Y.js');
                 const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
@@ -60,7 +57,7 @@ const App = class {
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
-                    import('./keyboard-Cj8mLJeq.js').then((module) => module.startKeyboardAssist(window));
+                    import('./keyboard-ywgs5efA.js').then((module) => module.startKeyboardAssist(window));
                 }
                 import('./focus-visible-BmVRXR1y.js').then((module) => (this.focusVisible = module.startFocusVisible()));
             });
@@ -103,6 +100,7 @@ const App = class {
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
     }
+    get el() { return getElement(this); }
 };
 const needInputShims = () => {
     /**
@@ -132,20 +130,20 @@ const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:fle
 const Buttons = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * If true, buttons will disappear when its
+         * parent toolbar has fully collapsed if the toolbar
+         * is not the first toolbar. If the toolbar is the
+         * first toolbar, the buttons will be hidden and will
+         * only be shown once all toolbars have fully collapsed.
+         *
+         * Only applies in `ios` mode with `collapse` set to
+         * `true` on `ion-header`.
+         *
+         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+         */
+        this.collapse = false;
     }
-    /**
-     * If true, buttons will disappear when its
-     * parent toolbar has fully collapsed if the toolbar
-     * is not the first toolbar. If the toolbar is the
-     * first toolbar, the buttons will be hidden and will
-     * only be shown once all toolbars have fully collapsed.
-     *
-     * Only applies in `ios` mode with `collapse` set to
-     * `true` on `ion-header`.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    collapse = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
@@ -167,96 +165,65 @@ const Content = class {
         this.ionScrollStart = createEvent(this, "ionScrollStart", 7);
         this.ionScroll = createEvent(this, "ionScroll", 7);
         this.ionScrollEnd = createEvent(this, "ionScrollEnd", 7);
+        this.watchDog = null;
+        this.isScrolling = false;
+        this.lastScroll = 0;
+        this.queued = false;
+        this.cTop = -1;
+        this.cBottom = -1;
+        this.isMainContent = true;
+        this.resizeTimeout = null;
+        this.inheritedAttributes = {};
+        this.tabsElement = null;
+        // Detail is used in a hot loop in the scroll event, by allocating it here
+        // V8 will be able to inline any read/write to it since it's a monomorphic class.
+        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+        this.detail = {
+            scrollTop: 0,
+            scrollLeft: 0,
+            type: 'scroll',
+            event: undefined,
+            startX: 0,
+            startY: 0,
+            startTime: 0,
+            currentX: 0,
+            currentY: 0,
+            velocityX: 0,
+            velocityY: 0,
+            deltaX: 0,
+            deltaY: 0,
+            currentTime: 0,
+            data: undefined,
+            isScrolling: true,
+        };
+        /**
+         * If `true`, the content will scroll behind the headers
+         * and footers. This effect can easily be seen by setting the toolbar
+         * to transparent.
+         */
+        this.fullscreen = false;
+        /**
+         * Controls where the fixed content is placed relative to the main content
+         * in the DOM. This can be used to control the order in which fixed elements
+         * receive keyboard focus.
+         * For example, if a FAB in the fixed slot should receive keyboard focus before
+         * the main page content, set this property to `'before'`.
+         */
+        this.fixedSlotPlacement = 'after';
+        /**
+         * If you want to enable the content scrolling in the X axis, set this property to `true`.
+         */
+        this.scrollX = false;
+        /**
+         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+         */
+        this.scrollY = true;
+        /**
+         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+         * and start listening from (ionScroll), set this property to `true`.
+         */
+        this.scrollEvents = false;
     }
-    watchDog = null;
-    isScrolling = false;
-    lastScroll = 0;
-    queued = false;
-    cTop = -1;
-    cBottom = -1;
-    scrollEl;
-    backgroundContentEl;
-    isMainContent = true;
-    resizeTimeout = null;
-    inheritedAttributes = {};
-    tabsElement = null;
-    tabsLoadCallback;
-    // Detail is used in a hot loop in the scroll event, by allocating it here
-    // V8 will be able to inline any read/write to it since it's a monomorphic class.
-    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-    detail = {
-        scrollTop: 0,
-        scrollLeft: 0,
-        type: 'scroll',
-        event: undefined,
-        startX: 0,
-        startY: 0,
-        startTime: 0,
-        currentX: 0,
-        currentY: 0,
-        velocityX: 0,
-        velocityY: 0,
-        deltaX: 0,
-        deltaY: 0,
-        currentTime: 0,
-        data: undefined,
-        isScrolling: true,
-    };
-    get el() { return getElement(this); }
-    /**
-     * 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;
-    /**
-     * If `true`, the content will scroll behind the headers
-     * and footers. This effect can easily be seen by setting the toolbar
-     * to transparent.
-     */
-    fullscreen = false;
-    /**
-     * Controls where the fixed content is placed relative to the main content
-     * in the DOM. This can be used to control the order in which fixed elements
-     * receive keyboard focus.
-     * For example, if a FAB in the fixed slot should receive keyboard focus before
-     * the main page content, set this property to `'before'`.
-     */
-    fixedSlotPlacement = 'after';
-    /**
-     * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
-     * If the content exceeds the bounds of ionContent, nothing will change.
-     * Note, this does not disable the system bounce on iOS. That is an OS level setting.
-     */
-    forceOverscroll;
-    /**
-     * If you want to enable the content scrolling in the X axis, set this property to `true`.
-     */
-    scrollX = false;
-    /**
-     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-     */
-    scrollY = true;
-    /**
-     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-     * and start listening from (ionScroll), set this property to `true`.
-     */
-    scrollEvents = false;
-    /**
-     * Emitted when the scroll has started. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollStart;
-    /**
-     * Emitted while scrolling. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScroll;
-    /**
-     * Emitted when the scroll has ended. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollEnd;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -555,7 +522,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -564,20 +531,22 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
             }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
+    get el() { return getElement(this); }
 };
 const getParentElement = (el) => {
+    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if (el.parentNode?.host) {
+    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }
@@ -664,27 +633,48 @@ const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-o
 const Footer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.keyboardCtrl = null;
+        this.keyboardCtrlPromise = null;
+        this.keyboardVisible = false;
+        /**
+         * If `true`, the footer will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         *
+         * Note: In order to scroll content behind the footer, the `fullscreen`
+         * attribute needs to be set on the content.
+         */
+        this.translucent = false;
+        this.checkCollapsibleFooter = () => {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
+                return;
+            }
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
+            this.destroyCollapsibleFooter();
+            if (hasFade) {
+                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+                const contentEl = pageEl ? findIonContent(pageEl) : null;
+                if (!contentEl) {
+                    printIonContentErrorMsg(this.el);
+                    return;
+                }
+                this.setupFadeFooter(contentEl);
+            }
+        };
+        this.setupFadeFooter = async (contentEl) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleFooterFade(scrollEl, this.el);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleFooterFade(scrollEl, this.el);
+        };
     }
-    scrollEl;
-    contentScrollCallback;
-    keyboardCtrl = null;
-    keyboardCtrlPromise = null;
-    keyboardVisible = false;
-    get el() { return getElement(this); }
-    /**
-     * Describes the scroll effect that will be applied to the footer.
-     * Only applies in iOS mode.
-     */
-    collapse;
-    /**
-     * If `true`, the footer will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     *
-     * Note: In order to scroll content behind the footer, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    translucent = false;
     componentDidLoad() {
         this.checkCollapsibleFooter();
     }
@@ -728,35 +718,6 @@ const Footer = class {
             this.keyboardCtrl = null;
         }
     }
-    checkCollapsibleFooter = () => {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
-            return;
-        }
-        const { collapse } = this;
-        const hasFade = collapse === 'fade';
-        this.destroyCollapsibleFooter();
-        if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            this.setupFadeFooter(contentEl);
-        }
-    };
-    setupFadeFooter = async (contentEl) => {
-        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-        /**
-         * Handle fading of toolbars on scroll
-         */
-        this.contentScrollCallback = () => {
-            handleFooterFade(scrollEl, this.el);
-        };
-        scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        handleFooterFade(scrollEl, this.el);
-    };
     destroyCollapsibleFooter() {
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
@@ -767,7 +728,7 @@ const Footer = class {
         const { translucent, collapse } = this;
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
+        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
         return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
@@ -778,6 +739,7 @@ const Footer = class {
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
             } }, mode === 'ios' && translucent && h("div", { key: '2fa14f61661c47c661cecd696176728d6eafa74f', class: "footer-background" }), h("slot", { key: '8e63696e7c528d5c38201e546bf08135290d0945' })));
     }
+    get el() { return getElement(this); }
 };
 Footer.style = {
     ios: footerIosCss(),
@@ -1023,29 +985,28 @@ const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-o
 const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the header will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         *
+         * Note: In order to scroll content behind the header, the `fullscreen`
+         * attribute needs to be set on the content.
+         */
+        this.translucent = false;
+        this.setupFadeHeader = async (contentEl, condenseHeader) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+        };
     }
-    scrollEl;
-    contentScrollCallback;
-    intersectionObserver;
-    collapsibleMainHeader;
-    inheritedAttributes = {};
-    get el() { return getElement(this); }
-    /**
-     * Describes the scroll effect that will be applied to the header.
-     * Only applies in iOS mode.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    collapse;
-    /**
-     * If `true`, the header will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     *
-     * Note: In order to scroll content behind the header, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    translucent = false;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -1089,17 +1050,6 @@ const Header = class {
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
-    setupFadeHeader = async (contentEl, condenseHeader) => {
-        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-        /**
-         * Handle fading of toolbars on scroll
-         */
-        this.contentScrollCallback = () => {
-            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-        };
-        scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-    };
     destroyCollapsibleHeader() {
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
@@ -1171,15 +1121,16 @@ const Header = class {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            }, ...inheritedAttributes }, mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
+    get el() { return getElement(this); }
 };
 Header.style = {
     ios: headerIosCss(),
@@ -1194,47 +1145,22 @@ const RouterOutlet = class {
         this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
         this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
         this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
+        this.lockController = createLockController();
+        this.gestureOrAnimationInProgress = false;
+        /**
+         * The mode determines which platform styles to use.
+         */
+        this.mode = getIonMode(this);
+        /**
+         * If `true`, the router-outlet should animate the transition of components.
+         */
+        this.animated = true;
     }
-    lockController = createLockController();
-    activeEl;
-    // TODO(FW-2832): types
-    activeComponent;
-    activeParams;
-    gesture;
-    ani;
-    gestureOrAnimationInProgress = false;
-    get el() { return getElement(this); }
-    /**
-     * The mode determines which platform styles to use.
-     */
-    mode = getIonMode(this);
-    /** @internal */
-    delegate;
-    /**
-     * If `true`, the router-outlet should animate the transition of components.
-     */
-    animated = true;
-    /** This property allows to create custom transition using AnimationBuilder functions. */
-    animation;
-    /**
-     * If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.
-     * Defaults to `true` for `"ios"` mode and `false` for `"md"` mode.
-     */
-    swipeGesture;
-    swipeGestureChanged() {
-        this.updateGestureEnabled();
-    }
-    /** @internal */
-    swipeHandler;
     swipeHandlerChanged() {
-        this.updateGestureEnabled();
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined);
+        }
     }
-    /** @internal */
-    ionNavWillLoad;
-    /** @internal */
-    ionNavWillChange;
-    /** @internal */
-    ionNavDidChange;
     async connectedCallback() {
         const onStart = () => {
             this.gestureOrAnimationInProgress = true;
@@ -1242,7 +1168,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await import('./swipe-back-D6YSgAn7.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => this.ani?.progressStep(step), (shouldComplete, step, dur) => {
+        this.gesture = (await import('./swipe-back-DQ1q5MgD.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;
@@ -1273,21 +1199,11 @@ const RouterOutlet = class {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        if (this.swipeGesture === undefined) {
-            this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
-        }
-        else {
-            this.updateGestureEnabled();
-        }
+        this.swipeHandlerChanged();
     }
     componentWillLoad() {
         this.ionNavWillLoad.emit();
     }
-    updateGestureEnabled() {
-        if (this.gesture) {
-            this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
-        }
-    }
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -1354,19 +1270,16 @@ const RouterOutlet = class {
         const { el, mode } = this;
         const animated = this.animated && config.getBoolean('animated', true);
         const animationBuilder = opts.animationBuilder || this.animation || config.get('navAnimation');
-        await transition({
-            mode,
+        await transition(Object.assign(Object.assign({ mode,
             animated,
             enteringEl,
-            leavingEl,
-            baseEl: el,
+            leavingEl, baseEl: el,
             /**
              * We need to wait for all Stencil components
              * to be ready only when using the lazy
              * loaded bundle.
              */
-            deepWait: hasLazyBuild(el),
-            progressCallback: opts.progressAnimation
+            deepWait: hasLazyBuild(el), progressCallback: opts.progressAnimation
                 ? (ani) => {
                     /**
                      * Because this progress callback is called asynchronously
@@ -1395,21 +1308,16 @@ const RouterOutlet = class {
                         this.ani = ani;
                     }
                 }
-                : undefined,
-            ...opts,
-            animationBuilder,
-        });
+                : undefined }, opts), { animationBuilder }));
         // emit nav changed event
         this.ionNavDidChange.emit();
         return true;
     }
     render() {
-        return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
+        return h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
-        "swipeGesture": [{
-                "swipeGestureChanged": 0
-            }],
         "swipeHandler": [{
                 "swipeHandlerChanged": 0
             }]
@@ -1426,22 +1334,6 @@ const ToolbarTitle = class {
         registerInstance(this, hostRef);
         this.ionStyle = createEvent(this, "ionStyle", 7);
     }
-    get el() { return getElement(this); }
-    /**
-     * 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;
-    /**
-     * The size of the toolbar title.
-     */
-    size;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
     sizeChanged() {
         this.emitStyle();
     }
@@ -1460,12 +1352,13 @@ const ToolbarTitle = class {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: createColorClasses(this.color, {
+        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, h("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
+            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "size": [{
                 "sizeChanged": 0
@@ -1484,15 +1377,8 @@ const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacit
 const Toolbar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.childrenStyles = new Map();
     }
-    childrenStyles = new Map();
-    get el() { return getElement(this); }
-    /**
-     * 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;
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
         const firstButtons = buttons.find((button) => {
@@ -1537,14 +1423,12 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: {
-                ...childStyles,
-                ...createColorClasses(this.color, {
-                    [mode]: true,
-                    'in-toolbar': hostContext('ion-toolbar', this.el),
-                }),
-            } }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
+        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [mode]: true,
+                'in-toolbar': hostContext('ion-toolbar', this.el),
+            })) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
     }
+    get el() { return getElement(this); }
 };
 Toolbar.style = {
     ios: toolbarIosCss(),