voyager-ionic-core 7.5.1 → 7.6.0

package/dist/collection/utils/overlays.js

@@ -12,17 +12,17 @@ let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
 const createController = (tagName) => {
-  return {
-    create(options) {
-      return createOverlay(tagName, options);
-    },
-    dismiss(data, role, id) {
-      return dismissOverlay(document, data, role, tagName, id);
-    },
-    async getTop() {
-      return getPresentedOverlay(document, tagName);
-    },
-  };
+    return {
+        create(options) {
+            return createOverlay(tagName, options);
+        },
+        dismiss(data, role, id) {
+            return dismissOverlay(document, data, role, tagName, id);
+        },
+        async getTop() {
+            return getPresentedOverlay(document, tagName);
+        },
+    };
 };
 export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
@@ -35,25 +35,25 @@ export const toastController = /*@__PURE__*/ createController('ion-toast');
  * Prepares the overlay element to be presented.
  */
 export const prepareOverlay = (el) => {
-  if (typeof document !== 'undefined') {
+    if (typeof document !== 'undefined') {
+        /**
+         * Adds a single instance of event listeners for application behaviors:
+         *
+         * - Escape Key behavior to dismiss an overlay
+         * - Trapping focus within an overlay
+         * - Back button behavior to dismiss an overlay
+         *
+         * This only occurs when the first overlay is created.
+         */
+        connectListeners(document);
+    }
+    const overlayIndex = lastOverlayIndex++;
     /**
-     * Adds a single instance of event listeners for application behaviors:
-     *
-     * - Escape Key behavior to dismiss an overlay
-     * - Trapping focus within an overlay
-     * - Back button behavior to dismiss an overlay
-     *
-     * This only occurs when the first overlay is created.
+     * overlayIndex is used in the overlay components to set a zIndex.
+     * This ensures that the most recently presented overlay will be
+     * on top.
      */
-    connectListeners(document);
-  }
-  const overlayIndex = lastOverlayIndex++;
-  /**
-   * overlayIndex is used in the overlay components to set a zIndex.
-   * This ensures that the most recently presented overlay will be
-   * on top.
-   */
-  el.overlayIndex = overlayIndex;
+    el.overlayIndex = overlayIndex;
 };
 /**
  * Assigns an incrementing id to an overlay element, that does not
@@ -62,28 +62,28 @@ export const prepareOverlay = (el) => {
  * Used to track unique instances of an overlay element.
  */
 export const setOverlayId = (el) => {
-  if (!el.hasAttribute('id')) {
-    el.id = `ion-overlay-${++lastId}`;
-  }
-  return el.id;
+    if (!el.hasAttribute('id')) {
+        el.id = `ion-overlay-${++lastId}`;
+    }
+    return el.id;
 };
 export const createOverlay = (tagName, opts) => {
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-  if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
-    return window.customElements.whenDefined(tagName).then(() => {
-      const element = document.createElement(tagName);
-      element.classList.add('overlay-hidden');
-      /**
-       * Convert the passed in overlay options into props
-       * that get passed down into the new overlay.
-       */
-      Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
-      // append the overlay element to the document body
-      getAppRoot(document).appendChild(element);
-      return new Promise((resolve) => componentOnReady(element, resolve));
-    });
-  }
-  return Promise.resolve();
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+    if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+        return window.customElements.whenDefined(tagName).then(() => {
+            const element = document.createElement(tagName);
+            element.classList.add('overlay-hidden');
+            /**
+             * Convert the passed in overlay options into props
+             * that get passed down into the new overlay.
+             */
+            Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
+            // append the overlay element to the document body
+            getAppRoot(document).appendChild(element);
+            return new Promise((resolve) => componentOnReady(element, resolve));
+        });
+    }
+    return Promise.resolve();
 };
 /**
  * This query string selects elements that
@@ -99,36 +99,36 @@ export const createOverlay = (tagName, opts) => {
  */
 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])';
 export 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();
-  }
+    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 isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
 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;
-  if (shadowRoot) {
-    // If there are no inner focusable elements, just focus the host element.
-    lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
-  }
-  if (lastInput) {
-    lastInput.focus();
-  }
-  else {
-    // Focus overlay instead of letting focus escape
-    overlay.focus();
-  }
+    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;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        lastInput = shadowRoot.querySelector(focusableQueryString) || lastInput;
+    }
+    if (lastInput) {
+        lastInput.focus();
+    }
+    else {
+        // Focus overlay instead of letting focus escape
+        overlay.focus();
+    }
 };
 /**
  * Traps keyboard focus inside of overlay components.
@@ -138,194 +138,194 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
-  const target = ev.target;
-  /**
-   * If no active overlay, ignore this event.
-   *
-   * If this component uses the shadow dom,
-   * this global listener is pointless
-   * since it will not catch the focus
-   * traps as they are inside the shadow root.
-   * We need to add a listener to the shadow root
-   * itself to ensure the focus trap works.
-   */
-  if (!lastOverlay || !target) {
-    return;
-  }
-  /**
-   * If the ion-disable-focus-trap class
-   * is present on an overlay, then this component
-   * instance has opted out of focus trapping.
-   * An example of this is when the sheet modal
-   * has a backdrop that is disabled. The content
-   * behind the sheet should be focusable until
-   * the backdrop is enabled.
-   */
-  if (lastOverlay.classList.contains('ion-disable-focus-trap')) {
-    return;
-  }
-  const trapScopedFocus = () => {
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+    const target = ev.target;
     /**
-     * If we are focusing the overlay, clear
-     * the last focused element so that hitting
-     * tab activates the first focusable element
-     * in the overlay wrapper.
+     * If no active overlay, ignore this event.
+     *
+     * If this component uses the shadow dom,
+     * this global listener is pointless
+     * since it will not catch the focus
+     * traps as they are inside the shadow root.
+     * We need to add a listener to the shadow root
+     * itself to ensure the focus trap works.
      */
-    if (lastOverlay === target) {
-      lastOverlay.lastFocus = undefined;
-      /**
-       * Otherwise, we must be focusing an element
-       * inside of the overlay. The two possible options
-       * here are an input/button/etc or the ion-focus-trap
-       * element. The focus trap element is used to prevent
-       * the keyboard focus from leaving the overlay when
-       * using Tab or screen assistants.
-       */
-    }
-    else {
-      /**
-       * We do not want to focus the traps, so get the overlay
-       * wrapper element as the traps live outside of the wrapper.
-       */
-      const overlayRoot = getElementRoot(lastOverlay);
-      if (!overlayRoot.contains(target)) {
+    if (!lastOverlay || !target) {
         return;
-      }
-      const overlayWrapper = overlayRoot.querySelector('.ion-overlay-wrapper');
-      if (!overlayWrapper) {
+    }
+    /**
+     * If the ion-disable-focus-trap class
+     * is present on an overlay, then this component
+     * instance has opted out of focus trapping.
+     * An example of this is when the sheet modal
+     * has a backdrop that is disabled. The content
+     * behind the sheet should be focusable until
+     * the backdrop is enabled.
+     */
+    if (lastOverlay.classList.contains('ion-disable-focus-trap')) {
         return;
-      }
-      /**
-       * If the target is inside the wrapper, let the browser
-       * focus as normal and keep a log of the last focused element.
-       * Additionally, if the backdrop was tapped we should not
-       * move focus back inside the wrapper as that could cause
-       * an interactive elements focus state to activate.
-       */
-      if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('ion-backdrop')) {
-        lastOverlay.lastFocus = target;
-      }
-      else {
-        /**
-         * Otherwise, we must have focused one of the focus traps.
-         * We need to wrap the focus to either the first element
-         * or the last element.
-         */
+    }
+    const trapScopedFocus = () => {
         /**
-         * Once we call `focusFirstDescendant` and focus the first
-         * descendant, another focus event will fire which will
-         * cause `lastOverlay.lastFocus` to be updated before
-         * we can run the code after that. We will cache the value
-         * here to avoid that.
+         * If we are focusing the overlay, clear
+         * the last focused element so that hitting
+         * tab activates the first focusable element
+         * in the overlay wrapper.
          */
-        const lastFocus = lastOverlay.lastFocus;
-        // Focus the first element in the overlay wrapper
-        focusFirstDescendant(overlayWrapper, lastOverlay);
+        if (lastOverlay === target) {
+            lastOverlay.lastFocus = undefined;
+            /**
+             * Otherwise, we must be focusing an element
+             * inside of the overlay. The two possible options
+             * here are an input/button/etc or the ion-focus-trap
+             * element. The focus trap element is used to prevent
+             * the keyboard focus from leaving the overlay when
+             * using Tab or screen assistants.
+             */
+        }
+        else {
+            /**
+             * We do not want to focus the traps, so get the overlay
+             * wrapper element as the traps live outside of the wrapper.
+             */
+            const overlayRoot = getElementRoot(lastOverlay);
+            if (!overlayRoot.contains(target)) {
+                return;
+            }
+            const overlayWrapper = overlayRoot.querySelector('.ion-overlay-wrapper');
+            if (!overlayWrapper) {
+                return;
+            }
+            /**
+             * If the target is inside the wrapper, let the browser
+             * focus as normal and keep a log of the last focused element.
+             * Additionally, if the backdrop was tapped we should not
+             * move focus back inside the wrapper as that could cause
+             * an interactive elements focus state to activate.
+             */
+            if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('ion-backdrop')) {
+                lastOverlay.lastFocus = target;
+            }
+            else {
+                /**
+                 * Otherwise, we must have focused one of the focus traps.
+                 * We need to wrap the focus to either the first element
+                 * or the last element.
+                 */
+                /**
+                 * Once we call `focusFirstDescendant` and focus the first
+                 * descendant, another focus event will fire which will
+                 * cause `lastOverlay.lastFocus` to be updated before
+                 * we can run the code after that. We will cache the value
+                 * here to avoid that.
+                 */
+                const lastFocus = lastOverlay.lastFocus;
+                // Focus the first element in the overlay wrapper
+                focusFirstDescendant(overlayWrapper, lastOverlay);
+                /**
+                 * If the cached last focused element is the
+                 * same as the active element, then we need
+                 * to wrap focus to the last descendant. This happens
+                 * when the first descendant is focused, and the user
+                 * presses Shift + Tab. The previous line will focus
+                 * the same descendant again (the first one), causing
+                 * last focus to equal the active element.
+                 */
+                if (lastFocus === doc.activeElement) {
+                    focusLastDescendant(overlayWrapper, lastOverlay);
+                }
+                lastOverlay.lastFocus = doc.activeElement;
+            }
+        }
+    };
+    const trapShadowFocus = () => {
         /**
-         * If the cached last focused element is the
-         * same as the active element, then we need
-         * to wrap focus to the last descendant. This happens
-         * when the first descendant is focused, and the user
-         * presses Shift + Tab. The previous line will focus
-         * the same descendant again (the first one), causing
-         * last focus to equal the active element.
+         * If the target is inside the wrapper, let the browser
+         * focus as normal and keep a log of the last focused element.
          */
-        if (lastFocus === doc.activeElement) {
-          focusLastDescendant(overlayWrapper, lastOverlay);
+        if (lastOverlay.contains(target)) {
+            lastOverlay.lastFocus = target;
         }
-        lastOverlay.lastFocus = doc.activeElement;
-      }
-    }
-  };
-  const trapShadowFocus = () => {
-    /**
-     * If the target is inside the wrapper, let the browser
-     * focus as normal and keep a log of the last focused element.
-     */
-    if (lastOverlay.contains(target)) {
-      lastOverlay.lastFocus = target;
+        else {
+            /**
+             * Otherwise, we are about to have focus
+             * go out of the overlay. We need to wrap
+             * the focus to either the first element
+             * or the last element.
+             */
+            /**
+             * Once we call `focusFirstDescendant` and focus the first
+             * descendant, another focus event will fire which will
+             * cause `lastOverlay.lastFocus` to be updated before
+             * we can run the code after that. We will cache the value
+             * here to avoid that.
+             */
+            const lastFocus = lastOverlay.lastFocus;
+            // Focus the first element in the overlay wrapper
+            focusFirstDescendant(lastOverlay, lastOverlay);
+            /**
+             * If the cached last focused element is the
+             * same as the active element, then we need
+             * to wrap focus to the last descendant. This happens
+             * when the first descendant is focused, and the user
+             * presses Shift + Tab. The previous line will focus
+             * the same descendant again (the first one), causing
+             * last focus to equal the active element.
+             */
+            if (lastFocus === doc.activeElement) {
+                focusLastDescendant(lastOverlay, lastOverlay);
+            }
+            lastOverlay.lastFocus = doc.activeElement;
+        }
+    };
+    if (lastOverlay.shadowRoot) {
+        trapShadowFocus();
     }
     else {
-      /**
-       * Otherwise, we are about to have focus
-       * go out of the overlay. We need to wrap
-       * the focus to either the first element
-       * or the last element.
-       */
-      /**
-       * Once we call `focusFirstDescendant` and focus the first
-       * descendant, another focus event will fire which will
-       * cause `lastOverlay.lastFocus` to be updated before
-       * we can run the code after that. We will cache the value
-       * here to avoid that.
-       */
-      const lastFocus = lastOverlay.lastFocus;
-      // Focus the first element in the overlay wrapper
-      focusFirstDescendant(lastOverlay, lastOverlay);
-      /**
-       * If the cached last focused element is the
-       * same as the active element, then we need
-       * to wrap focus to the last descendant. This happens
-       * when the first descendant is focused, and the user
-       * presses Shift + Tab. The previous line will focus
-       * the same descendant again (the first one), causing
-       * last focus to equal the active element.
-       */
-      if (lastFocus === doc.activeElement) {
-        focusLastDescendant(lastOverlay, lastOverlay);
-      }
-      lastOverlay.lastFocus = doc.activeElement;
-    }
-  };
-  if (lastOverlay.shadowRoot) {
-    trapShadowFocus();
-  }
-  else {
-    trapScopedFocus();
-  }
+        trapScopedFocus();
+    }
 };
 const connectListeners = (doc) => {
-  if (lastOverlayIndex === 0) {
-    lastOverlayIndex = 1;
-    doc.addEventListener('focus', (ev) => {
-      trapKeyboardFocus(ev, doc);
-    }, true);
-    // handle back-button click
-    doc.addEventListener('ionBackButton', (ev) => {
-      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);
+    if (lastOverlayIndex === 0) {
+        lastOverlayIndex = 1;
+        doc.addEventListener('focus', (ev) => {
+            trapKeyboardFocus(ev, doc);
+        }, true);
+        // handle back-button click
+        doc.addEventListener('ionBackButton', (ev) => {
+            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);
+                });
+            }
         });
-      }
-    });
-    // 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
+        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);
+                }
+            }
+        });
+    }
 };
 export const dismissOverlay = (doc, data, role, overlayTag, id) => {
-  const overlay = getPresentedOverlay(doc, overlayTag, id);
-  if (!overlay) {
-    return Promise.reject('overlay does not exist');
-  }
-  return overlay.dismiss(data, role);
+    const overlay = getPresentedOverlay(doc, overlayTag, id);
+    if (!overlay) {
+        return Promise.reject('overlay does not exist');
+    }
+    return overlay.dismiss(data, role);
 };
 /**
  * Returns a list of all overlays in the DOM even if they are not presented.
  */
 export const getOverlays = (doc, selector) => {
-  if (selector === undefined) {
-    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
-  }
-  return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
+    if (selector === undefined) {
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+    }
+    return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
 /**
  * Returns a list of all presented overlays.
@@ -335,7 +335,7 @@ export const getOverlays = (doc, selector) => {
  * @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
  */
 const getPresentedOverlays = (doc, overlayTag) => {
-  return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
+    return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
 };
 /**
  * Returns a presented overlay element.
@@ -345,8 +345,8 @@ const getPresentedOverlays = (doc, overlayTag) => {
  * @returns The overlay element or `undefined` if no overlay element is found.
  */
 export const getPresentedOverlay = (doc, overlayTag, id) => {
-  const overlays = getPresentedOverlays(doc, overlayTag);
-  return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
+    const overlays = getPresentedOverlays(doc, overlayTag);
+    return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
 };
 /**
  * When an overlay is presented, the main
@@ -371,57 +371,57 @@ export const getPresentedOverlay = (doc, overlayTag, id) => {
  * for main content.
  */
 export const setRootAriaHidden = (hidden = false) => {
-  const root = getAppRoot(document);
-  const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
-  if (!viewContainer) {
-    return;
-  }
-  if (hidden) {
-    viewContainer.setAttribute('aria-hidden', 'true');
-  }
-  else {
-    viewContainer.removeAttribute('aria-hidden');
-  }
+    const root = getAppRoot(document);
+    const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
+    if (!viewContainer) {
+        return;
+    }
+    if (hidden) {
+        viewContainer.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        viewContainer.removeAttribute('aria-hidden');
+    }
 };
 export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-  var _a, _b;
-  if (overlay.presented) {
-    return;
-  }
-  setRootAriaHidden(true);
-  overlay.presented = true;
-  overlay.willPresent.emit();
-  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
-  const mode = getIonMode(overlay);
-  // get the user's animation fn if one was provided
-  const animationBuilder = overlay.enterAnimation
-    ? overlay.enterAnimation
-    : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
-  const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
-  if (completed) {
-    overlay.didPresent.emit();
-    (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
-  }
-  /**
-   * When an overlay that steals focus
-   * is dismissed, focus should be returned
-   * to the element that was focused
-   * prior to the overlay opening. Toast
-   * does not steal focus and is excluded
-   * from returning focus as a result.
-   */
-  if (overlay.el.tagName !== 'ION-TOAST') {
-    focusPreviousElementOnDismiss(overlay.el);
-  }
-  /**
-   * If the focused element is already
-   * inside the overlay component then
-   * focus should not be moved from that
-   * to the overlay container.
-   */
-  if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
-    overlay.el.focus();
-  }
+    var _a, _b;
+    if (overlay.presented) {
+        return;
+    }
+    setRootAriaHidden(true);
+    overlay.presented = true;
+    overlay.willPresent.emit();
+    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const mode = getIonMode(overlay);
+    // get the user's animation fn if one was provided
+    const animationBuilder = overlay.enterAnimation
+        ? overlay.enterAnimation
+        : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
+    if (completed) {
+        overlay.didPresent.emit();
+        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+    }
+    /**
+     * When an overlay that steals focus
+     * is dismissed, focus should be returned
+     * to the element that was focused
+     * prior to the overlay opening. Toast
+     * does not steal focus and is excluded
+     * from returning focus as a result.
+     */
+    if (overlay.el.tagName !== 'ION-TOAST') {
+        focusPreviousElementOnDismiss(overlay.el);
+    }
+    /**
+     * If the focused element is already
+     * inside the overlay component then
+     * focus should not be moved from that
+     * to the overlay container.
+     */
+    if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
+        overlay.el.focus();
+    }
 };
 /**
  * When an overlay component is dismissed,
@@ -434,109 +434,109 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
  * opened the overlay.
  */
 const focusPreviousElementOnDismiss = async (overlayEl) => {
-  let previousElement = document.activeElement;
-  if (!previousElement) {
-    return;
-  }
-  const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
-  if (shadowRoot) {
-    // If there are no inner focusable elements, just focus the host element.
-    previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
-  }
-  await overlayEl.onDidDismiss();
-  previousElement.focus();
+    let previousElement = document.activeElement;
+    if (!previousElement) {
+        return;
+    }
+    const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
+    }
+    await overlayEl.onDidDismiss();
+    previousElement.focus();
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-  var _a, _b;
-  if (!overlay.presented) {
-    return false;
-  }
-  /**
-   * If this is the last visible overlay then
-   * we want to re-add the root to the accessibility tree.
-   */
-  if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
-    setRootAriaHidden(false);
-  }
-  overlay.presented = false;
-  try {
-    // Overlay contents should not be clickable during dismiss
-    overlay.el.style.setProperty('pointer-events', 'none');
-    overlay.willDismiss.emit({ data, role });
-    (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
-    const mode = getIonMode(overlay);
-    const animationBuilder = overlay.leaveAnimation
-      ? overlay.leaveAnimation
-      : config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
-    // If dismissed via gesture, no need to play leaving animation again
-    if (role !== GESTURE) {
-      await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
-    }
-    overlay.didDismiss.emit({ data, role });
-    (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
-    activeAnimations.delete(overlay);
-    /**
-     * Make overlay hidden again in case it is being reused.
-     * We can safely remove pointer-events: none as
-     * overlay-hidden will set display: none.
-     */
-    overlay.el.classList.add('overlay-hidden');
-    overlay.el.style.removeProperty('pointer-events');
+    var _a, _b;
+    if (!overlay.presented) {
+        return false;
+    }
     /**
-     * Clear any focus trapping references
-     * when the overlay is dismissed.
+     * If this is the last visible overlay then
+     * we want to re-add the root to the accessibility tree.
      */
-    if (overlay.el.lastFocus !== undefined) {
-      overlay.el.lastFocus = undefined;
-    }
-  }
-  catch (err) {
-    console.error(err);
-  }
-  overlay.el.remove();
-  return true;
+    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+        setRootAriaHidden(false);
+    }
+    overlay.presented = false;
+    try {
+        // Overlay contents should not be clickable during dismiss
+        overlay.el.style.setProperty('pointer-events', 'none');
+        overlay.willDismiss.emit({ data, role });
+        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
+        const mode = getIonMode(overlay);
+        const animationBuilder = overlay.leaveAnimation
+            ? overlay.leaveAnimation
+            : config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+        // If dismissed via gesture, no need to play leaving animation again
+        if (role !== GESTURE) {
+            await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
+        }
+        overlay.didDismiss.emit({ data, role });
+        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        activeAnimations.delete(overlay);
+        /**
+         * Make overlay hidden again in case it is being reused.
+         * We can safely remove pointer-events: none as
+         * overlay-hidden will set display: none.
+         */
+        overlay.el.classList.add('overlay-hidden');
+        overlay.el.style.removeProperty('pointer-events');
+        /**
+         * Clear any focus trapping references
+         * when the overlay is dismissed.
+         */
+        if (overlay.el.lastFocus !== undefined) {
+            overlay.el.lastFocus = undefined;
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+    overlay.el.remove();
+    return true;
 };
 const getAppRoot = (doc) => {
-  return doc.querySelector('ion-app') || doc.body;
+    return doc.querySelector('ion-app') || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
-  // Make overlay visible in case it's hidden
-  baseEl.classList.remove('overlay-hidden');
-  const aniRoot = overlay.el;
-  const animation = animationBuilder(aniRoot, opts);
-  if (!overlay.animated || !config.getBoolean('animated', true)) {
-    animation.duration(0);
-  }
-  if (overlay.keyboardClose) {
-    animation.beforeAddWrite(() => {
-      const activeElement = baseEl.ownerDocument.activeElement;
-      if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('input,ion-input, ion-textarea')) {
-        activeElement.blur();
-      }
-    });
-  }
-  const activeAni = activeAnimations.get(overlay) || [];
-  activeAnimations.set(overlay, [...activeAni, animation]);
-  await animation.play();
-  return true;
+    // Make overlay visible in case it's hidden
+    baseEl.classList.remove('overlay-hidden');
+    const aniRoot = overlay.el;
+    const animation = animationBuilder(aniRoot, opts);
+    if (!overlay.animated || !config.getBoolean('animated', true)) {
+        animation.duration(0);
+    }
+    if (overlay.keyboardClose) {
+        animation.beforeAddWrite(() => {
+            const activeElement = baseEl.ownerDocument.activeElement;
+            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('input,ion-input, ion-textarea')) {
+                activeElement.blur();
+            }
+        });
+    }
+    const activeAni = activeAnimations.get(overlay) || [];
+    activeAnimations.set(overlay, [...activeAni, animation]);
+    await animation.play();
+    return true;
 };
 export const eventMethod = (element, eventName) => {
-  let resolve;
-  const promise = new Promise((r) => (resolve = r));
-  onceEvent(element, eventName, (event) => {
-    resolve(event.detail);
-  });
-  return promise;
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    onceEvent(element, eventName, (event) => {
+        resolve(event.detail);
+    });
+    return promise;
 };
 export const onceEvent = (element, eventName, callback) => {
-  const handler = (ev) => {
-    removeEventListener(element, eventName, handler);
-    callback(ev);
-  };
-  addEventListener(element, eventName, handler);
+    const handler = (ev) => {
+        removeEventListener(element, eventName, handler);
+        callback(ev);
+    };
+    addEventListener(element, eventName, handler);
 };
 export const isCancel = (role) => {
-  return role === 'cancel' || role === BACKDROP;
+    return role === 'cancel' || role === BACKDROP;
 };
 const defaultGate = (h) => h();
 /**
@@ -547,21 +547,22 @@ const defaultGate = (h) => h();
  * tracking software can log it.
  */
 export const safeCall = (handler, arg) => {
-  if (typeof handler === 'function') {
-    const jmp = config.get('_zoneGate', defaultGate);
-    return jmp(() => {
-      try {
-        return handler(arg);
-      }
-      catch (e) {
-        throw e;
-      }
-    });
-  }
-  return undefined;
+    if (typeof handler === 'function') {
+        const jmp = config.get('_zoneGate', defaultGate);
+        return jmp(() => {
+            try {
+                return handler(arg);
+            }
+            catch (e) {
+                throw e;
+            }
+        });
+    }
+    return undefined;
 };
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
+export const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *
@@ -573,70 +574,70 @@ export const GESTURE = 'gesture';
  * @param ref The component class instance.
  */
 export const createDelegateController = (ref) => {
-  let inline = false;
-  let workingDelegate;
-  const coreDelegate = CoreDelegate();
-  /**
-   * Determines whether or not an overlay is being used
-   * inline or via a controller/JS and returns the correct delegate.
-   * By default, subsequent calls to getDelegate will use
-   * a cached version of the delegate.
-   * This is useful for calling dismiss after present,
-   * so that the correct delegate is given.
-   * @param force `true` to force the non-cached version of the delegate.
-   * @returns The delegate to use and whether or not the overlay is inline.
-   */
-  const getDelegate = (force = false) => {
-    if (workingDelegate && !force) {
-      return {
-        delegate: workingDelegate,
-        inline,
-      };
-    }
-    const { el, hasController, delegate } = ref;
+    let inline = false;
+    let workingDelegate;
+    const coreDelegate = CoreDelegate();
+    /**
+     * Determines whether or not an overlay is being used
+     * inline or via a controller/JS and returns the correct delegate.
+     * By default, subsequent calls to getDelegate will use
+     * a cached version of the delegate.
+     * This is useful for calling dismiss after present,
+     * so that the correct delegate is given.
+     * @param force `true` to force the non-cached version of the delegate.
+     * @returns The delegate to use and whether or not the overlay is inline.
+     */
+    const getDelegate = (force = false) => {
+        if (workingDelegate && !force) {
+            return {
+                delegate: workingDelegate,
+                inline,
+            };
+        }
+        const { el, hasController, delegate } = ref;
+        /**
+         * If using overlay inline
+         * we potentially need to use the coreDelegate
+         * so that this works in vanilla JS apps.
+         * If a developer has presented this component
+         * via a controller, then we can assume
+         * the component is already in the
+         * correct place.
+         */
+        const parentEl = el.parentNode;
+        inline = parentEl !== null && !hasController;
+        workingDelegate = inline ? delegate || coreDelegate : delegate;
+        return { inline, delegate: workingDelegate };
+    };
+    /**
+     * Attaches a component in the DOM. Teleports the component
+     * to the root of the app.
+     * @param component The component to optionally construct and append to the element.
+     */
+    const attachViewToDom = async (component) => {
+        const { delegate } = getDelegate(true);
+        if (delegate) {
+            return await delegate.attachViewToDom(ref.el, component);
+        }
+        const { hasController } = ref;
+        if (hasController && component !== undefined) {
+            throw new Error('framework delegate is missing');
+        }
+        return null;
+    };
     /**
-     * If using overlay inline
-     * we potentially need to use the coreDelegate
-     * so that this works in vanilla JS apps.
-     * If a developer has presented this component
-     * via a controller, then we can assume
-     * the component is already in the
-     * correct place.
+     * Moves a component back to its original location in the DOM.
      */
-    const parentEl = el.parentNode;
-    inline = parentEl !== null && !hasController;
-    workingDelegate = inline ? delegate || coreDelegate : delegate;
-    return { inline, delegate: workingDelegate };
-  };
-  /**
-   * Attaches a component in the DOM. Teleports the component
-   * to the root of the app.
-   * @param component The component to optionally construct and append to the element.
-   */
-  const attachViewToDom = async (component) => {
-    const { delegate } = getDelegate(true);
-    if (delegate) {
-      return await delegate.attachViewToDom(ref.el, component);
-    }
-    const { hasController } = ref;
-    if (hasController && component !== undefined) {
-      throw new Error('framework delegate is missing');
-    }
-    return null;
-  };
-  /**
-   * Moves a component back to its original location in the DOM.
-   */
-  const removeViewFromDom = () => {
-    const { delegate } = getDelegate();
-    if (delegate && ref.el !== undefined) {
-      delegate.removeViewFromDom(ref.el.parentElement, ref.el);
-    }
-  };
-  return {
-    attachViewToDom,
-    removeViewFromDom,
-  };
+    const removeViewFromDom = () => {
+        const { delegate } = getDelegate();
+        if (delegate && ref.el !== undefined) {
+            delegate.removeViewFromDom(ref.el.parentElement, ref.el);
+        }
+    };
+    return {
+        attachViewToDom,
+        removeViewFromDom,
+    };
 };
 /**
  * Constructs a trigger interaction for an overlay.
@@ -649,42 +650,42 @@ export const createDelegateController = (ref) => {
  * ```
  */
 export const createTriggerController = () => {
-  let destroyTriggerInteraction;
-  /**
-   * Removes the click listener from the trigger element.
-   */
-  const removeClickListener = () => {
-    if (destroyTriggerInteraction) {
-      destroyTriggerInteraction();
-      destroyTriggerInteraction = undefined;
-    }
-  };
-  /**
-   * Adds a click listener to the trigger element.
-   * Presents the overlay when the trigger is clicked.
-   * @param el The overlay element.
-   * @param trigger The ID of the element to add a click listener to.
-   */
-  const addClickListener = (el, trigger) => {
-    removeClickListener();
-    const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
-    if (!triggerEl) {
-      printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
-      return;
-    }
-    const configureTriggerInteraction = (targetEl, overlayEl) => {
-      const openOverlay = () => {
-        overlayEl.present();
-      };
-      targetEl.addEventListener('click', openOverlay);
-      return () => {
-        targetEl.removeEventListener('click', openOverlay);
-      };
+    let destroyTriggerInteraction;
+    /**
+     * Removes the click listener from the trigger element.
+     */
+    const removeClickListener = () => {
+        if (destroyTriggerInteraction) {
+            destroyTriggerInteraction();
+            destroyTriggerInteraction = undefined;
+        }
+    };
+    /**
+     * Adds a click listener to the trigger element.
+     * Presents the overlay when the trigger is clicked.
+     * @param el The overlay element.
+     * @param trigger The ID of the element to add a click listener to.
+     */
+    const addClickListener = (el, trigger) => {
+        removeClickListener();
+        const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
+        if (!triggerEl) {
+            printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
+            return;
+        }
+        const configureTriggerInteraction = (targetEl, overlayEl) => {
+            const openOverlay = () => {
+                overlayEl.present();
+            };
+            targetEl.addEventListener('click', openOverlay);
+            return () => {
+                targetEl.removeEventListener('click', openOverlay);
+            };
+        };
+        destroyTriggerInteraction = configureTriggerInteraction(triggerEl, el);
+    };
+    return {
+        addClickListener,
+        removeClickListener,
     };
-    destroyTriggerInteraction = configureTriggerInteraction(triggerEl, el);
-  };
-  return {
-    addClickListener,
-    removeClickListener,
-  };
 };