@ionic/core 8.7.6-dev.11759421585.1b377fd1 → 8.7.6-dev.11759523190.11a976aa

package/dist/cjs/{data-B3i-krcw.js → data-DW6ofvJ8.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CmckMMX1.js');
+var index = require('./index-DNh170BW.js');
 
 /**
  * Returns true if the selected day is equal to the reference day
@@ -1149,20 +1149,20 @@ const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
 // h24 hour system uses 1-24. Midnight starts at 24:00.
 const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
 /**
- * Given a locale and a theme,
+ * Given a locale and a mode,
  * return an array with formatted days
- * of the week. iOS and Ionic themes should
- * display days such as "Mon" or "Tue".
+ * of the week. iOS should display days
+ * such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
-const getDaysOfWeek = (locale, theme, firstDayOfWeek = 0) => {
+const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
     /**
      * Nov 1st, 2020 starts on a Sunday.
      * ion-datetime assumes weeks start on Sunday,
      * but is configurable via `firstDayOfWeek`.
      */
-    const weekdayFormat = theme === 'md' ? 'narrow' : 'short';
+    const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
     const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
     const startDate = new Date('11/01/2020');
     const daysOfWeek = [];

package/dist/{esm/focus-visible-vXpMhGrs.js → cjs/focus-visible-CCvKiLh3.js}

@@ -1,6 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+'use strict';
+
 const ION_FOCUSED = 'ion-focused';
 const ION_FOCUSABLE = 'ion-focusable';
 const FOCUS_KEYS = [
@@ -17,28 +19,6 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
-let focusVisibleUtility = null;
-const getOrInitFocusVisibleUtility = () => {
-    if (!focusVisibleUtility) {
-        focusVisibleUtility = startFocusVisible();
-    }
-    return focusVisibleUtility;
-};
-/**
- * Used to set focus on an element that uses `ion-focusable`.
- * Do not use this if focusing the element as a result of a keyboard
- * event as the focus utility should handle this for us. This method
- * should be used when we want to programmatically focus an element as
- * a result of another user action. (Ex: We focus the first element
- * inside of a popover when the user presents it, but the popover is not always
- * presented as a result of keyboard action.)
- *
- * @param elements - The elements to set focus on.
- */
-const focusElements = (elements) => {
-    const focusVisible = getOrInitFocusVisibleUtility();
-    focusVisible.setFocus(elements);
-};
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;
@@ -94,4 +74,4 @@ const startFocusVisible = (rootEl) => {
     };
 };
 
-export { focusElements, getOrInitFocusVisibleUtility, startFocusVisible };
+exports.startFocusVisible = startFocusVisible;

package/dist/cjs/{framework-delegate-DfEY5uyC.js → framework-delegate-WkyjrnCx.js}

@@ -3,8 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CmckMMX1.js');
-var helpers = require('./helpers-DmAvmm2T.js');
+var helpers = require('./helpers-DgwmcYAu.js');
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
@@ -105,8 +104,7 @@ const CoreDelegate = () => {
          * Get the root of the app and
          * add the overlay there.
          */
-        const appRootSelector = index.config.get('appRootSelector', 'ion-app');
-        const app = document.querySelector(appRootSelector) || document.body;
+        const app = document.querySelector('ion-app') || document.body;
         /**
          * Create a placeholder comment so that
          * we can return this component to where

package/dist/cjs/{haptic-DbqPcCc9.js → haptic-ClPPQ_PS.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var capacitor = require('./capacitor-CzFst28-.js');
+var capacitor = require('./capacitor-DmA66EwP.js');
 
 exports.ImpactStyle = void 0;
 (function (ImpactStyle) {

package/dist/cjs/hardware-back-button-BxdNu76F.js

@@ -0,0 +1,121 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index$1 = require('./index-DkNv4J_i.js');
+var index = require('./index-DNh170BW.js');
+
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+const shouldUseCloseWatcher = () => index.config.get('experimentalCloseWatcher', false) && index$1.win !== undefined && 'CloseWatcher' in index$1.win;
+/**
+ * When hardwareBackButton: false in config,
+ * we need to make sure we also block the default
+ * webview behavior. If we don't then it will be
+ * possible for users to navigate backward while
+ * an overlay is still open. Additionally, it will
+ * give the appearance that the hardwareBackButton
+ * config is not working as the page transition
+ * will still happen.
+ */
+const blockHardwareBackButton = () => {
+    document.addEventListener('backbutton', () => { }); // eslint-disable-line
+};
+const startHardwareBackButton = () => {
+    const doc = document;
+    let busy = false;
+    const backButtonCallback = () => {
+        if (busy) {
+            return;
+        }
+        let index$1 = 0;
+        let handlers = [];
+        const ev = new CustomEvent('ionBackButton', {
+            bubbles: false,
+            detail: {
+                register(priority, handler) {
+                    handlers.push({ priority, handler, id: index$1++ });
+                },
+            },
+        });
+        doc.dispatchEvent(ev);
+        const executeAction = async (handlerRegister) => {
+            try {
+                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
+                    const result = handlerRegister.handler(processHandlers);
+                    if (result != null) {
+                        await result;
+                    }
+                }
+            }
+            catch (e) {
+                index.printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+            }
+        };
+        const processHandlers = () => {
+            if (handlers.length > 0) {
+                let selectedHandler = {
+                    priority: Number.MIN_SAFE_INTEGER,
+                    handler: () => undefined,
+                    id: -1,
+                };
+                handlers.forEach((handler) => {
+                    if (handler.priority >= selectedHandler.priority) {
+                        selectedHandler = handler;
+                    }
+                });
+                busy = true;
+                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
+                executeAction(selectedHandler).then(() => (busy = false));
+            }
+        };
+        processHandlers();
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shouldUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new index$1.win.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
+};
+const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
+
+exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
+exports.OVERLAY_BACK_BUTTON_PRIORITY = OVERLAY_BACK_BUTTON_PRIORITY;
+exports.blockHardwareBackButton = blockHardwareBackButton;
+exports.shouldUseCloseWatcher = shouldUseCloseWatcher;
+exports.startHardwareBackButton = startHardwareBackButton;

package/dist/cjs/{helpers-DmAvmm2T.js → helpers-DgwmcYAu.js}

@@ -3,8 +3,7 @@
  */
 'use strict';
 
-var focusVisible = require('./focus-visible-BIj-I3-C.js');
-var index = require('./index-CmckMMX1.js');
+var index = require('./index-DNh170BW.js');
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
@@ -204,17 +203,6 @@ const raf = (h) => {
 const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
-/**
- * Focuses a given element while ensuring proper focus management
- * within the Ionic framework. If the element is marked as `ion-focusable`,
- * this function will delegate focus handling to `ion-app` or manually
- * apply focus when a custom app root is used.
- *
- * This function helps maintain accessibility and expected focus behavior
- * in both standard and custom root environments.
- *
- * @param el - The element to focus.
- */
 const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -226,36 +214,9 @@ const focusVisibleElement = (el) => {
      * which will let us explicitly set the elements to focus.
      */
     if (el.classList.contains('ion-focusable')) {
-        const appRootSelector = index.config.get('appRootSelector', 'ion-app');
-        const app = el.closest(appRootSelector);
+        const app = el.closest('ion-app');
         if (app) {
-            if (appRootSelector === 'ion-app') {
-                /**
-                 * If the app root is the default, then it will be
-                 * in charge of setting focus. This is because the
-                 * focus-visible utility is attached to the app root
-                 * and will handle setting focus on the correct element.
-                 */
-                app.setFocus([el]);
-            }
-            else {
-                /**
-                 * When using a custom app root selector, the focus-visible
-                 * utility is not available to manage focus automatically.
-                 * If we set focus immediately, the element may not be fully
-                 * rendered or interactive, especially if it was just added
-                 * to the DOM. Using requestAnimationFrame ensures that focus
-                 * is applied on the next frame, allowing the DOM to settle
-                 * before changing focus.
-                 */
-                requestAnimationFrame(() => {
-                    /**
-                     * The focus-visible utility is used to set focus on an
-                     * element that uses `ion-focusable`.
-                     */
-                    focusVisible.focusElements([el]);
-                });
-            }
+            app.setFocus([el]);
         }
     }
 };

package/dist/cjs/{index-DxVhwe3d.js → index--3s2Phef.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-CmckMMX1.js');
-var helpers = require('./helpers-DmAvmm2T.js');
+var index = require('./index-DNh170BW.js');
+var helpers = require('./helpers-DgwmcYAu.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -120,15 +120,26 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-BMRClUxZ.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-D2ZL4jgW.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-B_rsAM9j.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-CQt0eBw-.js'); });
 const focusController = createFocusController();
 // TODO(FW-2832): types
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
         index.writeTask(() => {
-            beforeTransition(opts);
-            runTransition(opts).then((result) => {
+            const transitioningInactiveHeader = getIosIonHeader(opts);
+            beforeTransition(opts, transitioningInactiveHeader);
+            runTransition(opts)
+                .then((result) => {
                 if (result.animation) {
                     result.animation.destroy();
                 }
@@ -137,15 +148,21 @@ const transition = (opts) => {
             }, (error) => {
                 afterTransition(opts);
                 reject(error);
+            })
+                .finally(() => {
+                // Ensure that the header is restored to its original state.
+                setHeaderTransitionClass(transitioningInactiveHeader, false);
             });
         });
     });
 };
-const beforeTransition = (opts) => {
+const beforeTransition = (opts, transitioningInactiveHeader) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
     focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
+    // Prevent flickering of the header by adding a class.
+    setHeaderTransitionClass(transitioningInactiveHeader, true);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
     }
@@ -334,6 +351,35 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
         leavingEl.style.zIndex = '100';
     }
 };
+/**
+ * Add a class to ensure that the inactive header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * inactive header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * inactive header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header, isTransitioning) => {
+    if (!header) {
+        return;
+    }
+    const transitionClass = 'header-transitioning';
+    if (isTransitioning) {
+        header.classList.add(transitionClass);
+    }
+    else {
+        header.classList.remove(transitionClass);
+    }
+};
 const getIonPageElement = (element) => {
     if (element.classList.contains('ion-page')) {
         return element;
@@ -345,6 +391,27 @@ const getIonPageElement = (element) => {
     // idk, return the original element so at least something animates and we don't have a null pointer
     return element;
 };
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts) => {
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const direction = opts.direction;
+    const mode = opts.mode;
+    if (mode !== 'ios') {
+        return null;
+    }
+    const element = direction === 'back' ? leavingEl : enteringEl;
+    if (!element) {
+        return null;
+    }
+    return element.querySelector('ion-header');
+};
 
 exports.LIFECYCLE_DID_ENTER = LIFECYCLE_DID_ENTER;
 exports.LIFECYCLE_DID_LEAVE = LIFECYCLE_DID_LEAVE;

package/dist/cjs/{index-CaZ3uzAD.js → index-Cc5PNMyz.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var helpers = require('./helpers-DmAvmm2T.js');
-var index = require('./index-CmckMMX1.js');
+var helpers = require('./helpers-DgwmcYAu.js');
+var index = require('./index-DNh170BW.js');
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
 const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';

package/dist/cjs/{index-DcPe_YcG.js → index-D24wggHR.js}

@@ -3,9 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-CmckMMX1.js');
-var helpers = require('./helpers-DmAvmm2T.js');
-var animation = require('./animation-Bcz4qmJk.js');
+var index = require('./index-DkNv4J_i.js');
+var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
+var index$1 = require('./index-DNh170BW.js');
+var helpers = require('./helpers-DgwmcYAu.js');
+var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
+var animation = require('./animation-ZJ1lAkZD.js');
 
 /**
  * baseAnimation
@@ -46,11 +49,11 @@ const menuOverlayAnimation = (menu) => {
         openedX = '0px';
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
-    const mode = index.getIonMode(menu);
-    const isIOS = mode === 'ios';
-    const opacity = isIOS ? 0.2 : 0.25;
+    const mode = ionicGlobal.getIonMode(menu);
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
 };
 
 /**
@@ -61,9 +64,8 @@ const menuOverlayAnimation = (menu) => {
 const menuPushAnimation = (menu) => {
     let contentOpenedX;
     let menuClosedX;
-    const mode = index.getIonMode(menu);
+    const mode = ionicGlobal.getIonMode(menu);
     const width = menu.width;
-    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -79,7 +81,7 @@ const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = animation.createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };
 
 /**
@@ -88,13 +90,12 @@ const menuPushAnimation = (menu) => {
  * The menu itself, which is under the content, does not move.
  */
 const menuRevealAnimation = (menu) => {
-    const mode = index.getIonMode(menu);
-    const isIOS = mode === 'ios';
+    const mode = ionicGlobal.getIonMode(menu);
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = animation.createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(isIOS).addAnimation(contentOpen);
+    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };
 
 const createMenuController = () => {
@@ -169,7 +170,7 @@ const createMenuController = () => {
             const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
             if (menuRefs.length >= 1) {
                 if (menuRefs.length > 1 && logOnMultipleSideMenus) {
-                    index.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+                    index$1.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
                 }
                 return menuRefs[0].el;
             }
@@ -178,7 +179,7 @@ const createMenuController = () => {
             const sideMenuRefs = menus.filter((m) => m.side === menu);
             if (sideMenuRefs.length >= 1) {
                 if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
-                    index.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+                    index$1.printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
                 }
                 return sideMenuRefs[0].el;
             }
@@ -277,7 +278,7 @@ const createMenuController = () => {
     index.doc === null || index.doc === void 0 ? void 0 : index.doc.addEventListener('ionBackButton', (ev) => {
         const openMenu = _getOpenSync();
         if (openMenu) {
-            ev.detail.register(index.MENU_BACK_BUTTON_PRIORITY, () => {
+            ev.detail.register(hardwareBackButton.MENU_BACK_BUTTON_PRIORITY, () => {
                 return openMenu.close();
             });
         }