@ionic/core 7.3.3-dev.11693454416.1cb6a7ec → 7.3.3-dev.11693533652.1969cc78

package/components/popover.js

@@ -4,6 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
 import { r as raf, g as getElementRoot, a as addEventListener, l as hasLazyBuild } from './helpers.js';
+import { c as createLockController } from './lock-controller.js';
 import { p as printIonWarning } from './index6.js';
 import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global.js';
@@ -984,6 +985,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     this.ionMount = createEvent(this, "ionMount", 7);
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
+    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -1157,28 +1159,24 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * When using an inline popover
-     * and dismissing a popover it is possible to
-     * quickly present the popover while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -1201,7 +1199,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -1209,8 +1207,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       side: this.side,
       align: this.alignment,
     });
-    await this.currentTransition;
-    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -1220,6 +1216,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -1230,23 +1227,12 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * When using an inline popover
-     * and presenting a popover it is possible to
-     * quickly dismiss the popover while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -1264,7 +1250,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**

package/dist/cjs/{framework-delegate-e8174951.js → framework-delegate-c0873a6f.js}

@@ -41,6 +41,7 @@ const CoreDelegate = () => {
   const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
     var _a, _b;
     BaseComponent = parentElement;
+    let ChildComponent;
     /**
      * If passing in a component via the `component` props
      * we need to append it inside of our overlay component.
@@ -67,6 +68,7 @@ const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
+      ChildComponent = el;
       await new Promise((resolve) => helpers.componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -75,7 +77,7 @@ const CoreDelegate = () => {
        * The delegate host wrapper el is only needed for modals and popovers
        * because they allow the dev to provide custom content to the overlay.
        */
-      const root = BaseComponent.children[0];
+      const root = (ChildComponent = BaseComponent.children[0]);
       if (!root.classList.contains('ion-delegate-host')) {
         /**
          * If the root element is not a delegate host, it means
@@ -90,6 +92,12 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        /**
+         * Update the ChildComponent to be the
+         * newly created div in the event that one
+         * does not already exist.
+         */
+        ChildComponent = el;
       }
     }
     /**
@@ -105,7 +113,18 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    /**
+     * We return the child component rather than the overlay
+     * reference itself since modal and popover will
+     * use this to wait for any Ionic components in the child view
+     * to be ready (i.e. componentOnReady) when using the
+     * lazy loaded component bundle.
+     *
+     * However, we fall back to returning BaseComponent
+     * in the event that a modal or popover is presented
+     * with no child content.
+     */
+    return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
   };
   const removeViewFromDom = () => {
     /**

package/dist/cjs/index.cjs.js

@@ -15,12 +15,12 @@ const helpers = require('./helpers-ea4ccbcb.js');
 const config = require('./config-d5882735.js');
 const index$1 = require('./index-8568bedb.js');
 const index$2 = require('./index-653be4df.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 require('./index-306a7476.js');
 require('./gesture-controller-b46721be.js');
 require('./index-484b1104.js');
 require('./hardware-back-button-b67c8e75.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./index-cc7dfb7c.js');
 
 const IonicSlides = (opts) => {

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-484b1104.js');
 const buttonActive = require('./button-active-dfd2756e.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
+const overlays = require('./overlays-5c1706ed.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
@@ -17,7 +18,7 @@ require('./capacitor-2ffba62a.js');
 require('./index-306a7476.js');
 require('./index-0ee995e4.js');
 require('./gesture-controller-b46721be.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 
@@ -121,6 +122,7 @@ const ActionSheet = class {
     this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.presented = false;
     this.onBackdropTap = () => {
@@ -168,21 +170,10 @@ const ActionSheet = class {
    * Present the action sheet overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline action sheet
-     * and dismissing a action sheet it is possible to
-     * quickly present the action sheet while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = overlays.present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await overlays.present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+    unlock();
   }
   /**
    * Dismiss the action sheet overlay after it has been presented.
@@ -194,11 +185,12 @@ const ActionSheet = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    this.currentTransition = overlays.dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+    const dismissed = await overlays.dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -9,7 +9,8 @@ const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const buttonActive = require('./button-active-dfd2756e.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
+const overlays = require('./overlays-5c1706ed.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
@@ -18,7 +19,7 @@ require('./capacitor-2ffba62a.js');
 require('./index-306a7476.js');
 require('./index-0ee995e4.js');
 require('./gesture-controller-b46721be.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 
@@ -123,6 +124,7 @@ const Alert = class {
     this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
     this.processedInputs = [];
@@ -289,21 +291,10 @@ const Alert = class {
    * Present the alert overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline alert
-     * and dismissing an alert it is possible to
-     * quickly present the alert while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = overlays.present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await overlays.present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    unlock();
   }
   /**
    * Dismiss the alert overlay after it has been presented.
@@ -315,11 +306,12 @@ const Alert = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    this.currentTransition = overlays.dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+    const dismissed = await overlays.dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -13,7 +13,7 @@ const theme = require('./theme-fbc56b3b.js');
 const index$1 = require('./index-10873539.js');
 const keyboardController = require('./keyboard-controller-50beb83a.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const index$2 = require('./index-8568bedb.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');
@@ -1111,6 +1111,7 @@ const RouterOutlet = class {
     this.ionNavDidChange.emit();
     return true;
   }
+  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
   async lock() {
     const p = this.waitPromise;
     let resolve;

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

@@ -14,10 +14,11 @@ const theme = require('./theme-fbc56b3b.js');
 const index$2 = require('./index-d8d1fc0b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const data = require('./data-967b9c15.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
+const overlays = require('./overlays-5c1706ed.js');
 const animation = require('./animation-2bb33618.js');
 const haptic = require('./haptic-c5f6b4d5.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-306a7476.js');
 require('./capacitor-2ffba62a.js');
@@ -1730,6 +1731,7 @@ const Picker = class {
     this.willDismissShorthand = index$1.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index$1.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, overlays.BACKDROP);
@@ -1796,24 +1798,13 @@ const Picker = class {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline picker
-     * and dismissing an picker it is possible to
-     * quickly present the picker while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -1825,14 +1816,15 @@ const Picker = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = overlays.dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await overlays.dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -8,11 +8,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
+const overlays = require('./overlays-5c1706ed.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');
@@ -121,6 +122,7 @@ const Loading = class {
     this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -186,24 +188,13 @@ const Loading = class {
    * Present the loading overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline loading indicator
-     * and dismissing a loading indicator it is possible to
-     * quickly present the loading indicator while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
+    await overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   /**
    * Dismiss the loading overlay after it has been presented.
@@ -215,14 +206,15 @@ const Loading = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = overlays.dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await overlays.dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -11,13 +11,13 @@ const index$2 = require('./index-306a7476.js');
 const gestureController = require('./gesture-controller-b46721be.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-653be4df.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$3 = require('./index-d8d1fc0b.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./index-cc7dfb7c.js');
 
 const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";

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

@@ -7,11 +7,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$3 = require('./index-484b1104.js');
 const index$2 = require('./index-10873539.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const helpers = require('./helpers-ea4ccbcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
 const index$4 = require('./index-cc7dfb7c.js');
 const capacitor = require('./capacitor-2ffba62a.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$5 = require('./index-8568bedb.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
@@ -1117,6 +1118,7 @@ const Modal = class {
     this.willDismissShorthand = index$3.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index$3.createEvent(this, "didDismiss", 7);
     this.ionMount = index$3.createEvent(this, "ionMount", 7);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.coreDelegate = frameworkDelegate.CoreDelegate();
     this.isSheetModal = false;
@@ -1281,29 +1283,25 @@ const Modal = class {
    * Present the modal overlay after it has been created.
    */
   async present() {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
     const { presentingElement, el } = this;
-    /**
-     * When using an inline modal
-     * and dismissing a modal it is possible to
-     * quickly present the modal while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     /**
      * If the modal is presented multiple times (inline modals), we
      * need to reset the current breakpoint to the initial breakpoint.
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await frameworkDelegate.attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
     this.ionMount.emit();
+    this.usersElement = await frameworkDelegate.attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -1327,7 +1325,7 @@ const Modal = class {
       await index$5.waitForMount();
     }
     index$3.writeTask(() => this.el.classList.add('show-modal'));
-    this.currentTransition = overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+    await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
@@ -1374,14 +1372,13 @@ const Modal = class {
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
     }
-    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   initSwipeToClose() {
     var _a;
@@ -1471,12 +1468,19 @@ const Modal = class {
     if (this.gestureAnimationDismissing && role !== overlays.GESTURE) {
       return false;
     }
+    /**
+     * Because the canDismiss check below is async,
+     * we need to claim a lock before the check happens,
+     * in case the dismiss transition does run.
+     */
+    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
      * not run the canDismiss check again.
      */
     if (role !== 'handler' && !(await this.checkCanDismiss(data, role))) {
+      unlock();
       return false;
     }
     const { presentingElement } = this;
@@ -1494,24 +1498,12 @@ const Modal = class {
       window.removeEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
       this.keyboardOpenCallback = undefined;
     }
-    /**
-     * When using an inline modal
-     * and presenting a modal it is possible to
-     * quickly dismiss the modal while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const enteringAnimation = overlays.activeAnimations.get(this) || [];
-    this.currentTransition = overlays.dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
+    const dismissed = await overlays.dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
     });
-    const dismissed = await this.currentTransition;
     if (dismissed) {
       const { delegate } = this.getDelegate();
       await frameworkDelegate.detachComponent(delegate, this.usersElement);
@@ -1525,8 +1517,8 @@ const Modal = class {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
-    this.currentTransition = undefined;
     this.animation = undefined;
+    unlock();
     return dismissed;
   }
   /**

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

@@ -10,7 +10,7 @@ const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-8568bedb.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
@@ -931,13 +931,7 @@ const NavLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.onClick = () => {
-      const { el } = this;
-      const button = el.querySelector('button,ion-button,a');
-      if (button === null || button === void 0 ? void 0 : button.hasAttribute('disabled')) {
-        // Do not navigate if the button is disabled
-        return;
-      }
-      return navLink(el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
+      return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
     };
     this.component = undefined;
     this.componentProps = undefined;