voyager-ionic-core 7.5.5 → 7.6.1

package/components/overlays.js

@@ -12,17 +12,17 @@ let lastOverlayIndex = 0;
 let lastId = 0;
 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);
+        },
+    };
 };
 const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
@@ -35,25 +35,25 @@ const toastController = /*@__PURE__*/ createController('ion-toast');
  * Prepares the overlay element to be presented.
  */
 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 @@ const prepareOverlay = (el) => {
  * Used to track unique instances of an overlay element.
  */
 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;
 };
 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 @@ 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])';
 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);
+                }
+            }
+        });
+    }
 };
 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.
  */
 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 @@ 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.
  */
 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 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
  * for main content.
  */
 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');
+    }
 };
 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 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
  * 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();
 };
 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;
 };
 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;
 };
 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);
 };
 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.
  */
 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;
 };
 const BACKDROP = 'backdrop';
 const GESTURE = 'gesture';
+const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *
@@ -573,70 +574,70 @@ const GESTURE = 'gesture';
  * @param ref The component class instance.
  */
 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,44 +650,44 @@ const createDelegateController = (ref) => {
  * ```
  */
 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,
-  };
 };
 
-export { BACKDROP as B, GESTURE as G, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, activeAnimations as q, safeCall as s, toastController as t };
+export { BACKDROP as B, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, activeAnimations as q, safeCall as s, toastController as t };