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

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

@@ -3,20 +3,20 @@
  */
 'use strict';
 
-var index = require('./index-CAThePqm.js');
-var hardwareBackButton = require('./hardware-back-button-zr8zeYaH.js');
-var ionicGlobal = require('./ionic-global-dMut1Czp.js');
-var helpers = require('./helpers-DURh1XdY.js');
-var dir = require('./dir-Brx7VkvP.js');
-var theme = require('./theme-Bw0rpaNN.js');
-var index$1 = require('./index-BnhnwL1o.js');
-var keyboardController = require('./keyboard-controller-PtZoN2GS.js');
+var index = require('./index-Ct7gcRif.js');
+var hardwareBackButton = require('./hardware-back-button-iUuF_76h.js');
+var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
+var helpers = require('./helpers-Cv23MFHM.js');
+var dir = require('./dir-Cn0z1rJH.js');
+var theme = require('./theme-CeDs6Hcv.js');
+var index$1 = require('./index-Dqpns5vP.js');
+var keyboardController = require('./keyboard-controller-GXBiBRKS.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var frameworkDelegate = require('./framework-delegate-Bdvk3JQO.js');
+var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var index$2 = require('./index-DsoHs7Ly.js');
+var index$2 = require('./index-BERfRao3.js');
 require('./index-DkNv4J_i.js');
-require('./keyboard-cHxZlTyz.js');
+require('./keyboard-UuAS4D_9.js');
 require('./capacitor-DmA66EwP.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}`;
@@ -25,18 +25,15 @@ const App = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    focusVisible;
-    loadTimeout;
-    get el() { return index.getElement(this); }
     componentDidLoad() {
         {
             this.rIC(async () => {
                 const isHybrid = ionicGlobal.isPlatform(window, 'hybrid');
                 if (!index.config.getBoolean('_testing')) {
-                    Promise.resolve().then(function () { return require('./index-Btdix80K.js'); }).then((module) => module.startTapClick(index.config));
+                    Promise.resolve().then(function () { return require('./index-D81eLYUM.js'); }).then((module) => module.startTapClick(index.config));
                 }
                 if (index.config.getBoolean('statusTap', isHybrid)) {
-                    Promise.resolve().then(function () { return require('./status-tap-CgjQ-6jq.js'); }).then((module) => module.startStatusTap());
+                    Promise.resolve().then(function () { return require('./status-tap-N1kaBbuk.js'); }).then((module) => module.startStatusTap());
                 }
                 if (index.config.getBoolean('inputShims', needInputShims())) {
                     /**
@@ -44,9 +41,9 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = ionicGlobal.isPlatform(window, 'ios') ? 'ios' : 'android';
-                    Promise.resolve().then(function () { return require('./input-shims-CPbWb84M.js'); }).then((module) => module.startInputShims(index.config, platform));
+                    Promise.resolve().then(function () { return require('./input-shims-DpA1zUN9.js'); }).then((module) => module.startInputShims(index.config, platform));
                 }
-                const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-zr8zeYaH.js'); });
+                const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-iUuF_76h.js'); });
                 const supportsHardwareBackButtonEvents = isHybrid || hardwareBackButton.shouldUseCloseWatcher();
                 if (index.config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
@@ -62,7 +59,7 @@ const App = class {
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
-                    Promise.resolve().then(function () { return require('./keyboard-Cix5TVkD.js'); }).then((module) => module.startKeyboardAssist(window));
+                    Promise.resolve().then(function () { return require('./keyboard-hHzlEQpk.js'); }).then((module) => module.startKeyboardAssist(window));
                 }
                 Promise.resolve().then(function () { return require('./focus-visible-CCvKiLh3.js'); }).then((module) => (this.focusVisible = module.startFocusVisible()));
             });
@@ -105,6 +102,7 @@ const App = class {
                 'force-statusbar-padding': index.config.getBoolean('_forceStatusbarPadding'),
             } }));
     }
+    get el() { return index.getElement(this); }
 };
 const needInputShims = () => {
     /**
@@ -134,20 +132,20 @@ const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:fle
 const Buttons = class {
     constructor(hostRef) {
         index.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 = ionicGlobal.getIonMode(this);
         return (index.h(index.Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
@@ -169,96 +167,65 @@ const Content = class {
         this.ionScrollStart = index.createEvent(this, "ionScrollStart", 7);
         this.ionScroll = index.createEvent(this, "ionScroll", 7);
         this.ionScrollEnd = index.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 index.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 = helpers.inheritAriaAttributes(this.el);
     }
@@ -557,7 +524,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (index.h(index.Host, { key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': theme.hostContext('ion-popover', this.el),
@@ -566,20 +533,22 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, index.h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            } }, inheritedAttributes), index.h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.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" }, index.h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
     }
+    get el() { return index.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;
     }
@@ -666,27 +635,48 @@ const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-o
 const Footer = class {
     constructor(hostRef) {
         index.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 = ionicGlobal.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 ? index$1.findIonContent(pageEl) : null;
+                if (!contentEl) {
+                    index$1.printIonContentErrorMsg(this.el);
+                    return;
+                }
+                this.setupFadeFooter(contentEl);
+            }
+        };
+        this.setupFadeFooter = async (contentEl) => {
+            const scrollEl = (this.scrollEl = await index$1.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 index.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();
     }
@@ -730,35 +720,6 @@ const Footer = class {
             this.keyboardCtrl = null;
         }
     }
-    checkCollapsibleFooter = () => {
-        const mode = ionicGlobal.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 ? index$1.findIonContent(pageEl) : null;
-            if (!contentEl) {
-                index$1.printIonContentErrorMsg(this.el);
-                return;
-            }
-            this.setupFadeFooter(contentEl);
-        }
-    };
-    setupFadeFooter = async (contentEl) => {
-        const scrollEl = (this.scrollEl = await index$1.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);
@@ -769,7 +730,7 @@ const Footer = class {
         const { translucent, collapse } = this;
         const mode = ionicGlobal.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 (index.h(index.Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
@@ -780,6 +741,7 @@ const Footer = class {
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
             } }, mode === 'ios' && translucent && index.h("div", { key: '2fa14f61661c47c661cecd696176728d6eafa74f', class: "footer-background" }), index.h("slot", { key: '8e63696e7c528d5c38201e546bf08135290d0945' })));
     }
+    get el() { return index.getElement(this); }
 };
 Footer.style = {
     ios: footerIosCss(),
@@ -1025,29 +987,28 @@ const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-o
 const Header = class {
     constructor(hostRef) {
         index.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 index$1.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 index.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 = helpers.inheritAriaAttributes(this.el);
     }
@@ -1091,17 +1052,6 @@ const Header = class {
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
-    setupFadeHeader = async (contentEl, condenseHeader) => {
-        const scrollEl = (this.scrollEl = await index$1.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();
@@ -1173,15 +1123,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(theme.hostContext('ion-menu', this.el), isCondensed, mode);
-        return (index.h(index.Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+        return (index.h(index.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 && index.h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), index.h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && index.h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), index.h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
+    get el() { return index.getElement(this); }
 };
 Header.style = {
     ios: headerIosCss(),
@@ -1196,47 +1147,22 @@ const RouterOutlet = class {
         this.ionNavWillLoad = index.createEvent(this, "ionNavWillLoad", 7);
         this.ionNavWillChange = index.createEvent(this, "ionNavWillChange", 3);
         this.ionNavDidChange = index.createEvent(this, "ionNavDidChange", 3);
+        this.lockController = lockController.createLockController();
+        this.gestureOrAnimationInProgress = false;
+        /**
+         * The mode determines which platform styles to use.
+         */
+        this.mode = ionicGlobal.getIonMode(this);
+        /**
+         * If `true`, the router-outlet should animate the transition of components.
+         */
+        this.animated = true;
     }
-    lockController = lockController.createLockController();
-    activeEl;
-    // TODO(FW-2832): types
-    activeComponent;
-    activeParams;
-    gesture;
-    ani;
-    gestureOrAnimationInProgress = false;
-    get el() { return index.getElement(this); }
-    /**
-     * The mode determines which platform styles to use.
-     */
-    mode = ionicGlobal.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;
@@ -1244,7 +1170,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-CmfRYdWQ.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => this.ani?.progressStep(step), (shouldComplete, step, dur) => {
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-C0GCB18x.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;
@@ -1275,21 +1201,11 @@ const RouterOutlet = class {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        if (this.swipeGesture === undefined) {
-            this.swipeGesture = index.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();
@@ -1356,19 +1272,16 @@ const RouterOutlet = class {
         const { el, mode } = this;
         const animated = this.animated && index.config.getBoolean('animated', true);
         const animationBuilder = opts.animationBuilder || this.animation || index.config.get('navAnimation');
-        await index$2.transition({
-            mode,
+        await index$2.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: helpers.hasLazyBuild(el),
-            progressCallback: opts.progressAnimation
+            deepWait: helpers.hasLazyBuild(el), progressCallback: opts.progressAnimation
                 ? (ani) => {
                     /**
                      * Because this progress callback is called asynchronously
@@ -1397,21 +1310,16 @@ const RouterOutlet = class {
                         this.ani = ani;
                     }
                 }
-                : undefined,
-            ...opts,
-            animationBuilder,
-        });
+                : undefined }, opts), { animationBuilder }));
         // emit nav changed event
         this.ionNavDidChange.emit();
         return true;
     }
     render() {
-        return index.h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
+        return index.h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
-        "swipeGesture": [{
-                "swipeGestureChanged": 0
-            }],
         "swipeHandler": [{
                 "swipeHandlerChanged": 0
             }]
@@ -1428,22 +1336,6 @@ const ToolbarTitle = class {
         index.registerInstance(this, hostRef);
         this.ionStyle = index.createEvent(this, "ionStyle", 7);
     }
-    get el() { return index.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();
     }
@@ -1462,12 +1354,13 @@ const ToolbarTitle = class {
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const size = this.getSize();
-        return (index.h(index.Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '44e63f8439df64c470692904427b417e19406476', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, index.h("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, index.h("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
+            }) }, index.h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, index.h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "size": [{
                 "sizeChanged": 0
@@ -1486,15 +1379,8 @@ const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacit
 const Toolbar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.childrenStyles = new Map();
     }
-    childrenStyles = new Map();
-    get el() { return index.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) => {
@@ -1539,14 +1425,12 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (index.h(index.Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: {
-                ...childStyles,
-                ...theme.createColorClasses(this.color, {
-                    [mode]: true,
-                    'in-toolbar': theme.hostContext('ion-toolbar', this.el),
-                }),
-            } }, index.h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), index.h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, index.h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), index.h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), index.h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, index.h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), index.h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), index.h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
+        return (index.h(index.Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
+                [mode]: true,
+                'in-toolbar': theme.hostContext('ion-toolbar', this.el),
+            })) }, index.h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), index.h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, index.h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), index.h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), index.h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, index.h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), index.h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), index.h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
     }
+    get el() { return index.getElement(this); }
 };
 Toolbar.style = {
     ios: toolbarIosCss(),