@ionic/core 7.6.8-dev.11706715287.1950fa40 → 7.7.1-dev.11706736578.174d0727

package/components/hardware-back-button.js

@@ -1,6 +1,22 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { w as win } from './index5.js';
+import { c as config } from './ionic-global.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 shoudUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default
@@ -17,7 +33,7 @@ const blockHardwareBackButton = () => {
 const startHardwareBackButton = () => {
     const doc = document;
     let busy = false;
-    doc.addEventListener('backbutton', () => {
+    const backButtonCallback = () => {
         if (busy) {
             return;
         }
@@ -63,9 +79,37 @@ const startHardwareBackButton = () => {
             }
         };
         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 (shoudUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new 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
 
-export { MENU_BACK_BUTTON_PRIORITY, OVERLAY_BACK_BUTTON_PRIORITY, blockHardwareBackButton, startHardwareBackButton };
+export { MENU_BACK_BUTTON_PRIORITY, OVERLAY_BACK_BUTTON_PRIORITY, blockHardwareBackButton, shoudUseCloseWatcher, startHardwareBackButton };

package/components/helpers.js

@@ -34,7 +34,7 @@ const transitionEnd = (el, expectedDuration = 0, callback) => {
         el.addEventListener('transitionend', onTransitionEnd, opts);
         animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
         unRegTrans = () => {
-            if (animationTimeout) {
+            if (animationTimeout !== undefined) {
                 clearTimeout(animationTimeout);
                 animationTimeout = undefined;
             }
@@ -237,7 +237,7 @@ const findItemLabel = (componentEl) => {
     }
     return null;
 };
-const focusElement = (el) => {
+const focusVisibleElement = (el) => {
     el.focus();
     /**
      * When programmatically focusing an element,
@@ -415,4 +415,4 @@ const shallowEqualStringMap = (map1, map2) => {
     return true;
 };
 
-export { addEventListener as a, removeEventListener as b, componentOnReady as c, inheritAttributes as d, renderHiddenInput as e, focusElement as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, getAriaLabel as j, findItemLabel as k, hasLazyBuild as l, clamp as m, debounceEvent as n, isEndSide as o, assert as p, debounce as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u, pointerCoord as v };
+export { addEventListener as a, removeEventListener as b, componentOnReady as c, inheritAttributes as d, renderHiddenInput as e, focusVisibleElement as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, getAriaLabel as j, findItemLabel as k, hasLazyBuild as l, clamp as m, debounceEvent as n, isEndSide as o, assert as p, debounce as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u, pointerCoord as v };

package/components/ion-app.js

@@ -2,6 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
+import { shoudUseCloseWatcher } from './hardware-back-button.js';
+import { p as printIonWarning } from './index6.js';
 import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.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}";
@@ -31,10 +33,18 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
                     import('./input-shims.js').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('./hardware-back-button.js');
-                if (config.getBoolean('hardwareBackButton', isHybrid)) {
+                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
                 else {
+                    /**
+                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                     * then the close watcher will not be used.
+                     */
+                    if (shoudUseCloseWatcher()) {
+                        printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                    }
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
@@ -61,7 +71,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '56c81f5d59b568ffd4a6de2f9b1c48c9a9456e8b', class: {
+        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/components/ion-menu.js

@@ -4,6 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
+import { shoudUseCloseWatcher } from './hardware-back-button.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
 import { o as getPresentedOverlay } from './overlays.js';
@@ -606,13 +607,18 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     render() {
         const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '8665a4cec887bb6b0178d1df62e47c8575104ad1', role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        /**
+         * If the Close Watcher is enabled then
+         * the ionBackButton listener in the menu controller
+         * will handle closing the menu when Escape is pressed.
+         */
+        return (h(Host, { key: 'be7145625a30951e5cc26646f6121ee4fa4c910f', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, h("div", { key: '37f5797a28f2809cb979272525ef64074b2c9730', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '718a506b80373deecb1ea5205384839ac222c74e' })), h("ion-backdrop", { key: 'a499b8f60a8aef2ec125a1814b491e8e1a863825', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'ecd6e0641ed67691db270190801f7be365a2d121', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'aea3780e259f2b3ea84697a509bb7f13fa9531e9' })), h("ion-backdrop", { key: 'be3253506a34c4c00eb1814621c674196b72db46', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -641,7 +647,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         "close": [64],
         "toggle": [64],
         "setOpen": [64]
-    }, [[16, "ionSplitPaneVisible", "onSplitPaneChanged"], [2, "click", "onBackdropClick"], [0, "keydown", "onKeydown"]], {
+    }, [[16, "ionSplitPaneVisible", "onSplitPaneChanged"], [2, "click", "onBackdropClick"]], {
         "type": ["typeChanged"],
         "disabled": ["disabledChanged"],
         "side": ["sideChanged"],

package/components/ion-select.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } fr
 import { c as createLegacyFormController } from './form-controller.js';
 import { c as createNotchController } from './notch-controller.js';
 import { i as isOptionSelected, c as compareOptions, d as defineCustomElement$5 } from './radio.js';
-import { d as inheritAttributes, f as focusElement, k as findItemLabel, e as renderHiddenInput, j as getAriaLabel } from './helpers.js';
+import { d as inheritAttributes, f as focusVisibleElement, k as findItemLabel, e as renderHiddenInput, j as getAriaLabel } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
 import { c as popoverController, b as actionSheetController, a as alertController } from './overlays.js';
 import { i as isRTL } from './dir.js';
@@ -176,7 +176,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusElement(selectedItem);
+                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -200,7 +200,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusElement(firstEnabledOption.closest('ion-item'));
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
                      */

package/components/ion-split-pane.js

@@ -77,16 +77,15 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
             this.visible = false;
             return;
         }
-        if (window.matchMedia) {
-            // Listen on media query
-            const callback = (q) => {
-                this.visible = q.matches;
-            };
-            const mediaList = window.matchMedia(mediaQuery);
-            mediaList.addListener(callback);
-            this.rmL = () => mediaList.removeListener(callback);
-            this.visible = mediaList.matches;
-        }
+        // Listen on media query
+        const callback = (q) => {
+            this.visible = q.matches;
+        };
+        const mediaList = window.matchMedia(mediaQuery);
+        // TODO FW-5869
+        mediaList.addListener(callback);
+        this.rmL = () => mediaList.removeListener(callback);
+        this.visible = mediaList.matches;
     }
     isPane(element) {
         if (!this.visible) {
@@ -120,12 +119,12 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '68f375658524c6b2ecc95f51125f496e76291b99', class: {
+        return (h(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '606277cb63a5772e421c0dad9d0b4568276d8a7a' })));
+            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/overlays.js

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index5.js';
+import { OVERLAY_BACK_BUTTON_PRIORITY, shoudUseCloseWatcher } from './hardware-back-button.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
 import { C as CoreDelegate } from './framework-delegate.js';
-import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
-import { c as componentOnReady, f as focusElement, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
+import { c as componentOnReady, f as focusVisibleElement, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
 
 let lastOverlayIndex = 0;
@@ -98,32 +98,48 @@ const createOverlay = (tagName, opts) => {
  * valid usage for the disabled property on ion-button.
  */
 const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
+/**
+ * Focuses the first descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
 const focusFirstDescendant = (ref, overlay) => {
-    let firstInput = ref.querySelector(focusableQueryString);
-    const shadowRoot = firstInput === null || firstInput === void 0 ? void 0 : firstInput.shadowRoot;
-    if (shadowRoot) {
-        // If there are no inner focusable elements, just focus the host element.
-        firstInput = shadowRoot.querySelector(focusableQueryString) || firstInput;
-    }
-    if (firstInput) {
-        focusElement(firstInput);
-    }
-    else {
-        // Focus overlay instead of letting focus escape
-        overlay.focus();
-    }
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInOverlay(firstInput, overlay);
 };
-const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
+/**
+ * Focuses the last descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
 const focusLastDescendant = (ref, overlay) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
-    let lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    const shadowRoot = lastInput === null || lastInput === void 0 ? void 0 : lastInput.shadowRoot;
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInOverlay(lastInput, overlay);
+};
+/**
+ * Focuses a particular element in an overlay. If the element
+ * doesn't have anything focusable associated with it then
+ * the overlay itself will be focused.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of ion-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInOverlay = (hostToFocus, overlay) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
     }
-    if (lastInput) {
-        lastInput.focus();
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
     }
     else {
         // Focus overlay instead of letting focus escape
@@ -205,6 +221,21 @@ const trapKeyboardFocus = (ev, doc) => {
              */
             if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('ion-backdrop')) {
                 lastOverlay.lastFocus = target;
+                /**
+                 * Toasts can be presented from an overlay.
+                 * However, focus should still be returned to
+                 * the overlay when clicking a toast. Normally,
+                 * focus would be returned to the last focusable
+                 * descendant in the overlay which may not always be
+                 * the button that the toast was presented from. In this case,
+                 * the focus may be returned to an unexpected element.
+                 * To account for this, we make sure to return focus to the
+                 * last focused element in the overlay if focus is
+                 * moved to the toast.
+                 */
+            }
+            else if (target.tagName === 'ION-TOAST') {
+                focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
             }
             else {
                 /**
@@ -245,6 +276,21 @@ const trapKeyboardFocus = (ev, doc) => {
          */
         if (lastOverlay.contains(target)) {
             lastOverlay.lastFocus = target;
+            /**
+             * Toasts can be presented from an overlay.
+             * However, focus should still be returned to
+             * the overlay when clicking a toast. Normally,
+             * focus would be returned to the last focusable
+             * descendant in the overlay which may not always be
+             * the button that the toast was presented from. In this case,
+             * the focus may be returned to an unexpected element.
+             * To account for this, we make sure to return focus to the
+             * last focused element in the overlay if focus is
+             * moved to the toast.
+             */
+        }
+        else if (target.tagName === 'ION-TOAST') {
+            focusElementInOverlay(lastOverlay.lastFocus, lastOverlay);
         }
         else {
             /**
@@ -273,6 +319,7 @@ const trapKeyboardFocus = (ev, doc) => {
              * last focus to equal the active element.
              */
             if (lastFocus === doc.activeElement) {
+                console.log('LAST FOCUS');
                 focusLastDescendant(lastOverlay, lastOverlay);
             }
             lastOverlay.lastFocus = doc.activeElement;
@@ -296,19 +343,38 @@ const connectListeners = (doc) => {
             const lastOverlay = getPresentedOverlay(doc);
             if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
                 ev.detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => {
-                    return lastOverlay.dismiss(undefined, BACKDROP);
+                    /**
+                     * Do not return this promise otherwise
+                     * the hardware back button utility will
+                     * be blocked until the overlay dismisses.
+                     * This is important for a modal with canDismiss.
+                     * If the application presents a confirmation alert
+                     * in the "canDismiss" callback, then it will be impossible
+                     * to use the hardware back button to dismiss the alert
+                     * dialog because the hardware back button utility
+                     * is blocked on waiting for the modal to dismiss.
+                     */
+                    lastOverlay.dismiss(undefined, BACKDROP);
                 });
             }
         });
-        // handle ESC to close overlay
-        doc.addEventListener('keydown', (ev) => {
-            if (ev.key === 'Escape') {
-                const lastOverlay = getPresentedOverlay(doc);
-                if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
-                    lastOverlay.dismiss(undefined, BACKDROP);
+        /**
+         * Handle ESC to close overlay.
+         * CloseWatcher also handles pressing the Esc
+         * key, so if a browser supports CloseWatcher then
+         * this behavior will be handled via the ionBackButton
+         * event.
+         */
+        if (!shoudUseCloseWatcher()) {
+            doc.addEventListener('keydown', (ev) => {
+                if (ev.key === 'Escape') {
+                    const lastOverlay = getPresentedOverlay(doc);
+                    if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
+                        lastOverlay.dismiss(undefined, BACKDROP);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
 };
 const dismissOverlay = (doc, data, role, overlayTag, id) => {

package/dist/cjs/{animation-9b401d39.js → animation-c2840aea.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 
 let animationPrefix;
 /**

package/dist/cjs/{form-controller-7d42a722.js → form-controller-c83330c0.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 
 /**
  * Creates a controller that tracks whether a form control is using the legacy or modern syntax. This should be removed when the legacy form control syntax is removed.

package/dist/cjs/{framework-delegate-1c29b14a.js → framework-delegate-e0e13baa.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/cjs/{hardware-back-button-76833cac.js → hardware-back-button-d23873bb.js}

@@ -3,6 +3,23 @@
  */
 'use strict';
 
+const index = require('./index-c8d52405.js');
+const ionicGlobal = require('./ionic-global-7358c23e.js');
+require('./index-5a471146.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 shoudUseCloseWatcher = () => ionicGlobal.config.get('experimentalCloseWatcher', false) && index.win !== undefined && 'CloseWatcher' in index.win;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default
@@ -19,7 +36,7 @@ const blockHardwareBackButton = () => {
 const startHardwareBackButton = () => {
     const doc = document;
     let busy = false;
-    doc.addEventListener('backbutton', () => {
+    const backButtonCallback = () => {
         if (busy) {
             return;
         }
@@ -65,7 +82,35 @@ const startHardwareBackButton = () => {
             }
         };
         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 (shoudUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new index.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
@@ -73,4 +118,5 @@ const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu
 exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
 exports.OVERLAY_BACK_BUTTON_PRIORITY = OVERLAY_BACK_BUTTON_PRIORITY;
 exports.blockHardwareBackButton = blockHardwareBackButton;
+exports.shoudUseCloseWatcher = shoudUseCloseWatcher;
 exports.startHardwareBackButton = startHardwareBackButton;

package/dist/cjs/{helpers-76bb7efb.js → helpers-da4c0ed1.js}

@@ -36,7 +36,7 @@ const transitionEnd = (el, expectedDuration = 0, callback) => {
         el.addEventListener('transitionend', onTransitionEnd, opts);
         animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
         unRegTrans = () => {
-            if (animationTimeout) {
+            if (animationTimeout !== undefined) {
                 clearTimeout(animationTimeout);
                 animationTimeout = undefined;
             }
@@ -239,7 +239,7 @@ const findItemLabel = (componentEl) => {
     }
     return null;
 };
-const focusElement = (el) => {
+const focusVisibleElement = (el) => {
     el.focus();
     /**
      * When programmatically focusing an element,
@@ -424,7 +424,7 @@ exports.componentOnReady = componentOnReady;
 exports.debounce = debounce;
 exports.debounceEvent = debounceEvent;
 exports.findItemLabel = findItemLabel;
-exports.focusElement = focusElement;
+exports.focusVisibleElement = focusVisibleElement;
 exports.getAriaLabel = getAriaLabel;
 exports.getElementRoot = getElementRoot;
 exports.hasLazyBuild = hasLazyBuild;

package/dist/cjs/{index-fc6d268f.js → index-0ccc7b6f.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-5a471146.js');
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-2d1cf0c0.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-bb342d2a.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-810ef802.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-15315952.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/{index-b4f986cd.js → index-62290fec.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 
 const startTapClick = (config) => {
     if (index.doc === undefined) {

package/dist/cjs/{index-8aef188d.js → index-6600c909.js}

@@ -4,11 +4,11 @@
 'use strict';
 
 const index$1 = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-76833cac.js');
+const hardwareBackButton = require('./hardware-back-button-d23873bb.js');
 const index = require('./index-5915f9b3.js');
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 const ionicGlobal = require('./ionic-global-7358c23e.js');
-const animation = require('./animation-9b401d39.js');
+const animation = require('./animation-c2840aea.js');
 
 /**
  * baseAnimation

package/dist/cjs/{index-da15e99c.js → index-bef98850.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 const index = require('./index-5915f9b3.js');
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/cjs/index.cjs.js

@@ -5,24 +5,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const animation = require('./animation-9b401d39.js');
-const index = require('./index-fc6d268f.js');
-const ios_transition = require('./ios.transition-2d1cf0c0.js');
-const md_transition = require('./md.transition-bb342d2a.js');
+const animation = require('./animation-c2840aea.js');
+const index = require('./index-0ccc7b6f.js');
+const ios_transition = require('./ios.transition-810ef802.js');
+const md_transition = require('./md.transition-15315952.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-d1b59ffa.js');
 const ionicGlobal = require('./ionic-global-7358c23e.js');
-const helpers = require('./helpers-76bb7efb.js');
+const helpers = require('./helpers-da4c0ed1.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-8aef188d.js');
-const overlays = require('./overlays-62679ec5.js');
+const index$2 = require('./index-6600c909.js');
+const overlays = require('./overlays-37b51f7b.js');
 require('./index-c8d52405.js');
 require('./index-5a471146.js');
 require('./gesture-controller-c40c045a.js');
-require('./hardware-back-button-76833cac.js');
+require('./hardware-back-button-d23873bb.js');
 require('./index-5915f9b3.js');
-require('./framework-delegate-1c29b14a.js');
+require('./framework-delegate-e0e13baa.js');
 
 const IonicSlides = (opts) => {
     const { swiper, extendParams } = opts;