@ionic/core 7.3.2-dev.11693262117.17edbf6d → 7.3.2-dev.11693321491.12123d27

package/hydrate/index.js

@@ -8004,6 +8004,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.
@@ -8030,6 +8031,7 @@ const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
+      ChildComponent = el;
       await new Promise((resolve) => componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -8038,7 +8040,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
@@ -8053,6 +8055,7 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        ChildComponent = el;
       }
     }
     /**
@@ -8068,7 +8071,7 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    return ChildComponent;
   };
   const removeViewFromDom = () => {
     /**
@@ -8702,27 +8705,6 @@ const createDelegateController = (ref) => {
     removeViewFromDom,
   };
 };
-/**
- * Creates a lock controller.
- *
- * This function locks transitions.
- * The unlock() function within it calls resolve on this function, unlocking the transitions.
- */
-const createLockController = () => {
-  let waitPromise;
-  const lock = async () => {
-    const p = waitPromise;
-    let resolve;
-    waitPromise = new Promise((r) => (resolve = r));
-    if (p !== undefined) {
-      await p;
-    }
-    return resolve;
-  };
-  return {
-    lock,
-  };
-};
 /**
  * Constructs a trigger interaction for an overlay.
  * Presents an overlay when the trigger is clicked.
@@ -9894,7 +9876,6 @@ class ActionSheet {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.presented = false;
     this.onBackdropTap = () => {
@@ -9942,10 +9923,21 @@ class ActionSheet {
    * Present the action sheet overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * 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;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5);
-    unlock();
+    this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5);
+    await this.currentTransition;
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the action sheet overlay after it has been presented.
@@ -9957,12 +9949,11 @@ class ActionSheet {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
-    const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$6, mdLeaveAnimation$5);
+    this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$6, mdLeaveAnimation$5);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**
@@ -10372,7 +10363,6 @@ class Alert {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.processedInputs = [];
@@ -10539,10 +10529,21 @@ class Alert {
    * Present the alert overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * 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;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4);
-    unlock();
+    this.currentTransition = present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4);
+    await this.currentTransition;
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the alert overlay after it has been presented.
@@ -10554,12 +10555,11 @@ class Alert {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
-    const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$5, mdLeaveAnimation$4);
+    this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$5, mdLeaveAnimation$4);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**
@@ -19797,7 +19797,6 @@ class Loading {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -19863,13 +19862,24 @@ class Loading {
    * Present the loading overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * 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;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3);
+    this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3);
+    await this.currentTransition;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
-    unlock();
+    this.currentTransition = undefined;
   }
   /**
    * Dismiss the loading overlay after it has been presented.
@@ -19881,15 +19891,14 @@ class Loading {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$4, mdLeaveAnimation$3);
+    this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$4, mdLeaveAnimation$3);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**
@@ -22390,7 +22399,6 @@ class Modal {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.ionMount = createEvent(this, "ionMount", 7);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -22558,16 +22566,26 @@ class Modal {
     if (this.presented) {
       return;
     }
-    const unlock = await this.lockController.lock();
     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 attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     this.ionMount.emit();
+    this.usersElement = await 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
@@ -22591,6 +22609,11 @@ class Modal {
       await waitForMount();
     }
     writeTask(() => this.el.classList.add('show-modal'));
+    this.currentTransition = present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
+      presentingEl: presentingElement,
+      currentBreakpoint: this.initialBreakpoint,
+      backdropBreakpoint: this.backdropBreakpoint,
+    });
     /* tslint:disable-next-line */
     if (typeof window !== 'undefined') {
       /**
@@ -22633,18 +22656,14 @@ class Modal {
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
     }
-    await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
-      presentingEl: presentingElement,
-      currentBreakpoint: this.initialBreakpoint,
-      backdropBreakpoint: this.backdropBreakpoint,
-    });
+    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    unlock();
+    this.currentTransition = undefined;
   }
   initSwipeToClose() {
     var _a;
@@ -22734,7 +22753,6 @@ class Modal {
     if (this.gestureAnimationDismissing && role !== GESTURE) {
       return false;
     }
-    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
@@ -22758,12 +22776,24 @@ class Modal {
       window.removeEventListener(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 = activeAnimations.get(this) || [];
-    const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$3, mdLeaveAnimation$2, {
+    this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$3, mdLeaveAnimation$2, {
       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 detachComponent(delegate, this.usersElement);
@@ -22777,8 +22807,8 @@ class Modal {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
+    this.currentTransition = undefined;
     this.animation = undefined;
-    unlock();
     return dismissed;
   }
   /**
@@ -23997,7 +24027,6 @@ class Picker {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
@@ -24064,13 +24093,24 @@ class Picker {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * 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;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
+    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
+    await this.currentTransition;
+    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
-    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -24082,15 +24122,14 @@ class Picker {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
+    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
-    unlock();
     return dismissed;
   }
   /**
@@ -26411,7 +26450,6 @@ class Popover {
     this.ionMount = createEvent(this, "ionMount", 7);
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
-    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -26588,15 +26626,25 @@ class Popover {
     if (this.presented) {
       return;
     }
-    const unlock = await this.lockController.lock();
+    /**
+     * 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);
+    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
@@ -26619,7 +26667,7 @@ class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    await present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1, {
+    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -26627,6 +26675,8 @@ class Popover {
       side: this.side,
       align: this.alignment,
     });
+    await this.currentTransition;
+    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -26636,7 +26686,6 @@ class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
-    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -26647,12 +26696,23 @@ class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    const unlock = await this.lockController.lock();
+    /**
+     * 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 { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation$1, mdLeaveAnimation$1, this.event);
+    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation$1, mdLeaveAnimation$1, this.event);
+    const shouldDismiss = await this.currentTransition;
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -26670,7 +26730,7 @@ class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    unlock();
+    this.currentTransition = undefined;
     return shouldDismiss;
   }
   /**
@@ -33414,7 +33474,6 @@ class Toast {
     this.willDismissShorthand = createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = createEvent(this, "didDismiss", 7);
     this.delegateController = createDelegateController(this);
-    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -33484,19 +33543,30 @@ class Toast {
    * Present the toast overlay after it has been created.
    */
   async present() {
-    const unlock = await this.lockController.lock();
+    /**
+     * When using an inline toast
+     * and dismissing a toast it is possible to
+     * quickly present the toast 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;
+    }
     await this.delegateController.attachViewToDom();
-    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    this.currentTransition = present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
+    await this.currentTransition;
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
      * state updates will cause a re-render.
      */
     this.revealContentToScreenReader = true;
+    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
-    unlock();
   }
   /**
    * Dismiss the toast overlay after it has been presented.
@@ -33508,16 +33578,15 @@ class Toast {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    this.currentTransition = dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    const dismissed = await this.currentTransition;
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
-    unlock();
     return dismissed;
   }
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2-dev.11693262117.17edbf6d",
+  "version": "7.3.2-dev.11693321491.12123d27",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/dist/esm-es5/framework-delegate-2b76c681.js

@@ -1,4 +0,0 @@
-import{__awaiter,__generator}from"tslib";
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */import{c as componentOnReady}from"./helpers-3379ba19.js";var attachComponent=function(e,n,t,r,o,i){return __awaiter(void 0,void 0,void 0,(function(){var a,c;return __generator(this,(function(s){switch(s.label){case 0:if(e){return[2,e.attachViewToDom(n,t,o,r)]}if(!i&&typeof t!=="string"&&!(t instanceof HTMLElement)){throw new Error("framework delegate is missing")}c=typeof t==="string"?(a=n.ownerDocument)===null||a===void 0?void 0:a.createElement(t):t;if(r){r.forEach((function(e){return c.classList.add(e)}))}if(o){Object.assign(c,o)}n.appendChild(c);return[4,new Promise((function(e){return componentOnReady(c,e)}))];case 1:s.sent();return[2,c]}}))}))};var detachComponent=function(e,n){if(n){if(e){var t=n.parentElement;return e.removeViewFromDom(t,n)}n.remove()}return Promise.resolve()};var CoreDelegate=function(){var e;var n;var t=function(t,r,o,i){if(o===void 0){o={}}if(i===void 0){i=[]}return __awaiter(void 0,void 0,void 0,(function(){var a,c,s,d,u,l;return __generator(this,(function(m){switch(m.label){case 0:e=t;if(!r)return[3,2];s=typeof r==="string"?(a=e.ownerDocument)===null||a===void 0?void 0:a.createElement(r):r;i.forEach((function(e){return s.classList.add(e)}));Object.assign(s,o);e.appendChild(s);return[4,new Promise((function(e){return componentOnReady(s,e)}))];case 1:m.sent();return[3,3];case 2:if(e.children.length>0&&(e.tagName==="ION-MODAL"||e.tagName==="ION-POPOVER")){d=e.children[0];if(!d.classList.contains("ion-delegate-host")){u=(c=e.ownerDocument)===null||c===void 0?void 0:c.createElement("div");u.classList.add("ion-delegate-host");i.forEach((function(e){return u.classList.add(e)}));u.append.apply(u,e.children);e.appendChild(u)}}m.label=3;case 3:l=document.querySelector("ion-app")||document.body;n=document.createComment("ionic teleport");e.parentNode.insertBefore(n,e);l.appendChild(e);return[2,e]}}))}))};var r=function(){if(e&&n){n.parentNode.insertBefore(e,n);n.remove()}return Promise.resolve()};return{attachViewToDom:t,removeViewFromDom:r}};export{CoreDelegate as C,attachComponent as a,detachComponent as d};