npm - @amwaljs/checkout-button - Versions diffs - 0.3.1 → 0.3.2 - Mend

@amwaljs/checkout-button 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (888) hide show

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

@@ -1,24 +1,26 @@
 'use strict';
-var index$3 = require('./index-DncWzXDA.js');
-var index$2 = require('./index-q1ImtF5k.js');
-var frameworkDelegate = require('./framework-delegate-D-6PUvOi.js');
-var helpers = require('./helpers-B4vhh9gt.js');
-var lockController = require('./lock-controller-58TZFRHC.js');
-var index$4 = require('./index-CH3IFTaK.js');
-var capacitor = require('./capacitor-CqhugS19.js');
-var overlays = require('./overlays-Bc8tk6t5.js');
-var theme = require('./theme-DbHdw1Nx.js');
-var index$5 = require('./index-DZA7ogU0.js');
-var ionicGlobal = require('./ionic-global-DRLi5Iq3.js');
-var keyboard = require('./keyboard-iyHR2ZF4.js');
-var animation = require('./animation-BhN-MT4J.js');
-var cubicBezier = require('./cubic-bezier-Bv3PvaRI.js');
-var index$1 = require('./index-CKcQE8Zg.js');
-var index = require('./index-D3mJ1Cix.js');
-require('./hardware-back-button-C2D2eOk8.js');
-require('./keyboard-DuKzsHsS.js');
-require('./gesture-controller-IMq9Cgi2.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+const index$3 = require('./index-7522b3a9.js');
+const index$2 = require('./index-ce06e6a3.js');
+const frameworkDelegate = require('./framework-delegate-ab2cc190.js');
+const helpers = require('./helpers-72ba682d.js');
+const lockController = require('./lock-controller-e2dfece6.js');
+const index$4 = require('./index-071786b4.js');
+const capacitor = require('./capacitor-a9365f60.js');
+const overlays = require('./overlays-08819e3f.js');
+const theme = require('./theme-12dec869.js');
+const index$5 = require('./index-2cd1a895.js');
+const ionicGlobal = require('./ionic-global-3915f1f1.js');
+const keyboard = require('./keyboard-5d4b83b3.js');
+const animation = require('./animation-26241cb2.js');
+const cubicBezier = require('./cubic-bezier-5ff9b04e.js');
+const index$1 = require('./index-0d0b84fb.js');
+const index = require('./index-a281cac3.js');
+require('./hardware-back-button-ddfefd22.js');
+require('./keyboard-bc8ebbf7.js');
+require('./gesture-controller-b1c0efac.js');
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -469,7 +471,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) =>
          * canDismiss is checked.
          */
         const shouldComplete = !isAttemptingDismissWithCanDismiss && threshold >= DISMISS_THRESHOLD;
-        let newStepValue = shouldComplete ? -1e-3 : 0.001;
+        let newStepValue = shouldComplete ? -0.001 : 0.001;
         if (!shouldComplete) {
             animation.easing('cubic-bezier(1, 0, 0.68, 0.28)');
             newStepValue += cubicBezier.getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], clampedStep)[0];
@@ -1150,584 +1152,580 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     };
 };
-const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;transform:translateZ(0);border:0;background:var(--ion-color-step-350, #c0c0be);cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.modal-card) .modal-wrapper,:host-context([dir=rtl]).modal-card .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}@supports selector(:dir(rtl)){:host(.modal-card:dir(rtl)) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}}:host(.modal-card){--backdrop-opacity:0;--width:100%;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{box-shadow:none}:host(.modal-card) .modal-shadow{box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.modal-sheet) .modal-wrapper,:host-context([dir=rtl]).modal-sheet .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}@supports selector(:dir(rtl)){:host(.modal-sheet:dir(rtl)) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}}`;
+const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;transform:translateZ(0);border:0;background:var(--ion-color-step-350, #c0c0be);cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.modal-card) .modal-wrapper,:host-context([dir=rtl]).modal-card .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}@supports selector(:dir(rtl)){:host(.modal-card:dir(rtl)) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}}:host(.modal-card){--backdrop-opacity:0;--width:100%;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{box-shadow:none}:host(.modal-card) .modal-shadow{box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.modal-sheet) .modal-wrapper,:host-context([dir=rtl]).modal-sheet .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}@supports selector(:dir(rtl)){:host(.modal-sheet:dir(rtl)) .modal-wrapper{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-right-radius:0;border-bottom-left-radius:0}}";
-const modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;transform:translateZ(0);border:0;background:var(--ion-color-step-350, #c0c0be);cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{transform:translate3d(0,  40px,  0);opacity:0.01}`;
+const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;transform:translateZ(0);border:0;background:var(--ion-color-step-350, #c0c0be);cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{transform:translate3d(0,  40px,  0);opacity:0.01}";
 const Modal = class {
-    constructor(hostRef) {
-        index$3.registerInstance(this, hostRef);
-        this.didPresent = index$3.createEvent(this, "ionModalDidPresent", 7);
-        this.willPresent = index$3.createEvent(this, "ionModalWillPresent", 7);
-        this.willDismiss = index$3.createEvent(this, "ionModalWillDismiss", 7);
-        this.didDismiss = index$3.createEvent(this, "ionModalDidDismiss", 7);
-        this.ionBreakpointDidChange = index$3.createEvent(this, "ionBreakpointDidChange", 7);
-        this.didPresentShorthand = index$3.createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = index$3.createEvent(this, "willPresent", 7);
-        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;
-        this.inheritedAttributes = {};
-        this.inline = false;
-        // Whether or not modal is being dismissed via gesture
-        this.gestureAnimationDismissing = false;
-        this.onHandleClick = () => {
-            const { sheetTransition, handleBehavior } = this;
-            if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
-                /**
-                 * The sheet modal should not advance to the next breakpoint
-                 * if the handle behavior is not `cycle` or if the handle
-                 * is clicked while the sheet is moving to a breakpoint.
-                 */
-                return;
-            }
-            this.moveToNextBreakpoint();
-        };
-        this.onBackdropTap = () => {
-            const { sheetTransition } = this;
-            if (sheetTransition !== undefined) {
-                /**
-                 * When the handle is double clicked at the largest breakpoint,
-                 * it will start to move to the first breakpoint. While transitioning,
-                 * the backdrop will often receive the second click. We prevent the
-                 * backdrop from dismissing the modal while moving between breakpoints.
-                 */
-                return;
-            }
-            this.dismiss(undefined, overlays.BACKDROP);
-        };
-        this.onLifecycle = (modalEvent) => {
-            const el = this.usersElement;
-            const name = LIFECYCLE_MAP[modalEvent.type];
-            if (el && name) {
-                const ev = new CustomEvent(name, {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: modalEvent.detail,
-                });
-                el.dispatchEvent(ev);
-            }
-        };
-        this.presented = false;
-        this.hasController = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.breakpoints = undefined;
-        this.initialBreakpoint = undefined;
-        this.backdropBreakpoint = 0;
-        this.handle = undefined;
-        this.handleBehavior = 'none';
-        this.component = undefined;
-        this.componentProps = undefined;
-        this.cssClass = undefined;
-        this.backdropDismiss = true;
-        this.showBackdrop = true;
-        this.animated = true;
-        this.presentingElement = undefined;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-        this.keepContentsMounted = false;
-        this.canDismiss = true;
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    triggerChanged() {
-        const { trigger, el, triggerController } = this;
-        if (trigger) {
-            triggerController.addClickListener(el, trigger);
-        }
+  constructor(hostRef) {
+    index$3.registerInstance(this, hostRef);
+    this.didPresent = index$3.createEvent(this, "ionModalDidPresent", 7);
+    this.willPresent = index$3.createEvent(this, "ionModalWillPresent", 7);
+    this.willDismiss = index$3.createEvent(this, "ionModalWillDismiss", 7);
+    this.didDismiss = index$3.createEvent(this, "ionModalDidDismiss", 7);
+    this.ionBreakpointDidChange = index$3.createEvent(this, "ionBreakpointDidChange", 7);
+    this.didPresentShorthand = index$3.createEvent(this, "didPresent", 7);
+    this.willPresentShorthand = index$3.createEvent(this, "willPresent", 7);
+    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;
+    this.inheritedAttributes = {};
+    this.inline = false;
+    // Whether or not modal is being dismissed via gesture
+    this.gestureAnimationDismissing = false;
+    this.onHandleClick = () => {
+      const { sheetTransition, handleBehavior } = this;
+      if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
+        /**
+         * The sheet modal should not advance to the next breakpoint
+         * if the handle behavior is not `cycle` or if the handle
+         * is clicked while the sheet is moving to a breakpoint.
+         */
+        return;
+      }
+      this.moveToNextBreakpoint();
+    };
+    this.onBackdropTap = () => {
+      const { sheetTransition } = this;
+      if (sheetTransition !== undefined) {
+        /**
+         * When the handle is double clicked at the largest breakpoint,
+         * it will start to move to the first breakpoint. While transitioning,
+         * the backdrop will often receive the second click. We prevent the
+         * backdrop from dismissing the modal while moving between breakpoints.
+         */
+        return;
+      }
+      this.dismiss(undefined, overlays.BACKDROP);
+    };
+    this.onLifecycle = (modalEvent) => {
+      const el = this.usersElement;
+      const name = LIFECYCLE_MAP[modalEvent.type];
+      if (el && name) {
+        const ev = new CustomEvent(name, {
+          bubbles: false,
+          cancelable: false,
+          detail: modalEvent.detail,
+        });
+        el.dispatchEvent(ev);
+      }
+    };
+    this.presented = false;
+    this.hasController = false;
+    this.overlayIndex = undefined;
+    this.delegate = undefined;
+    this.keyboardClose = true;
+    this.enterAnimation = undefined;
+    this.leaveAnimation = undefined;
+    this.breakpoints = undefined;
+    this.initialBreakpoint = undefined;
+    this.backdropBreakpoint = 0;
+    this.handle = undefined;
+    this.handleBehavior = 'none';
+    this.component = undefined;
+    this.componentProps = undefined;
+    this.cssClass = undefined;
+    this.backdropDismiss = true;
+    this.showBackdrop = true;
+    this.animated = true;
+    this.presentingElement = undefined;
+    this.htmlAttributes = undefined;
+    this.isOpen = false;
+    this.trigger = undefined;
+    this.keepContentsMounted = false;
+    this.canDismiss = true;
+  }
+  onIsOpenChange(newValue, oldValue) {
+    if (newValue === true && oldValue === false) {
+      this.present();
     }
-    breakpointsChanged(breakpoints) {
-        if (breakpoints !== undefined) {
-            this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
-        }
+    else if (newValue === false && oldValue === true) {
+      this.dismiss();
     }
-    connectedCallback() {
-        const { el } = this;
-        overlays.prepareOverlay(el);
-        this.triggerChanged();
+  }
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
     }
-    disconnectedCallback() {
-        this.triggerController.removeClickListener();
+  }
+  breakpointsChanged(breakpoints) {
+    if (breakpoints !== undefined) {
+      this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
     }
-    componentWillLoad() {
-        const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
-        const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
-        const attributesToInherit = ['aria-label', 'role'];
-        this.inheritedAttributes = helpers.inheritAttributes(el, attributesToInherit);
-        /**
-         * When using a controller modal you can set attributes
-         * using the htmlAttributes property. Since the above attributes
-         * need to be inherited inside of the modal, we need to look
-         * and see if these attributes are being set via htmlAttributes.
-         *
-         * We could alternatively move this to componentDidLoad to simplify the work
-         * here, but we'd then need to make inheritedAttributes a State variable,
-         * thus causing another render to always happen after the first render.
-         */
-        if (htmlAttributes !== undefined) {
-            attributesToInherit.forEach((attribute) => {
-                const attributeValue = htmlAttributes[attribute];
-                if (attributeValue) {
-                    /**
-                     * If an attribute we need to inherit was
-                     * set using htmlAttributes then add it to
-                     * inheritedAttributes and remove it from htmlAttributes.
-                     * This ensures the attribute is inherited and not
-                     * set on the host.
-                     *
-                     * In this case, if an inherited attribute is set
-                     * on the host element and using htmlAttributes then
-                     * htmlAttributes wins, but that's not a pattern that we recommend.
-                     * The only time you'd need htmlAttributes is when using modalController.
-                     */
-                    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attribute]: htmlAttributes[attribute] });
-                    delete htmlAttributes[attribute];
-                }
-            });
-        }
-        if (isSheetModal) {
-            this.currentBreakpoint = this.initialBreakpoint;
-        }
-        if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
-            index$4.printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
+  }
+  connectedCallback() {
+    const { el } = this;
+    overlays.prepareOverlay(el);
+    this.triggerChanged();
+  }
+  disconnectedCallback() {
+    this.triggerController.removeClickListener();
+  }
+  componentWillLoad() {
+    const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
+    const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
+    const attributesToInherit = ['aria-label', 'role'];
+    this.inheritedAttributes = helpers.inheritAttributes(el, attributesToInherit);
+    /**
+     * When using a controller modal you can set attributes
+     * using the htmlAttributes property. Since the above attributes
+     * need to be inherited inside of the modal, we need to look
+     * and see if these attributes are being set via htmlAttributes.
+     *
+     * We could alternatively move this to componentDidLoad to simplify the work
+     * here, but we'd then need to make inheritedAttributes a State variable,
+     * thus causing another render to always happen after the first render.
+     */
+    if (htmlAttributes !== undefined) {
+      attributesToInherit.forEach((attribute) => {
+        const attributeValue = htmlAttributes[attribute];
+        if (attributeValue) {
+          /**
+           * If an attribute we need to inherit was
+           * set using htmlAttributes then add it to
+           * inheritedAttributes and remove it from htmlAttributes.
+           * This ensures the attribute is inherited and not
+           * set on the host.
+           *
+           * In this case, if an inherited attribute is set
+           * on the host element and using htmlAttributes then
+           * htmlAttributes wins, but that's not a pattern that we recommend.
+           * The only time you'd need htmlAttributes is when using modalController.
+           */
+          this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attribute]: htmlAttributes[attribute] });
+          delete htmlAttributes[attribute];
         }
-        overlays.setOverlayId(el);
+      });
     }
-    componentDidLoad() {
-        /**
-         * If modal was rendered with isOpen="true"
-         * then we should open modal immediately.
-         */
-        if (this.isOpen === true) {
-            helpers.raf(() => this.present());
-        }
-        this.breakpointsChanged(this.breakpoints);
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.triggerChanged();
+    if (isSheetModal) {
+      this.currentBreakpoint = this.initialBreakpoint;
     }
+    if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
+      index$4.printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
+    }
+    overlays.setOverlayId(el);
+  }
+  componentDidLoad() {
     /**
-     * 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.
+     * If modal was rendered with isOpen="true"
+     * then we should open modal immediately.
      */
-    getDelegate(force = false) {
-        if (this.workingDelegate && !force) {
-            return {
-                delegate: this.workingDelegate,
-                inline: this.inline,
-            };
-        }
-        /**
-         * 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 = this.el.parentNode;
-        const inline = (this.inline = parentEl !== null && !this.hasController);
-        const delegate = (this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate);
-        return { inline, delegate };
+    if (this.isOpen === true) {
+      helpers.raf(() => this.present());
     }
+    this.breakpointsChanged(this.breakpoints);
     /**
-     * Determines whether or not the
-     * modal is allowed to dismiss based
-     * on the state of the canDismiss prop.
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
      */
-    async checkCanDismiss(data, role) {
-        const { canDismiss } = this;
-        if (typeof canDismiss === 'function') {
-            return canDismiss(data, role);
-        }
-        return canDismiss;
+    this.triggerChanged();
+  }
+  /**
+   * 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.
+   */
+  getDelegate(force = false) {
+    if (this.workingDelegate && !force) {
+      return {
+        delegate: this.workingDelegate,
+        inline: this.inline,
+      };
     }
     /**
-     * Present the modal overlay after it has been created.
+     * 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.
      */
-    async present() {
-        const unlock = await this.lockController.lock();
-        if (this.presented) {
-            unlock();
-            return;
-        }
-        const { presentingElement, el } = this;
-        /**
-         * 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);
-        /**
-         * 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
-         * otherwise there can be a flash of unstyled content. With the
-         * custom elements bundle we need to wait for the JS framework
-         * mount the inner contents of the overlay otherwise WebKit may
-         * get the transition incorrect.
-         */
-        if (helpers.hasLazyBuild(el)) {
-            await index$5.deepReady(this.usersElement);
-            /**
-             * If keepContentsMounted="true" then the
-             * JS Framework has already mounted the inner
-             * contents so there is no need to wait.
-             * Otherwise, we need to wait for the JS
-             * Framework to mount the inner contents
-             * of this component.
-             */
-        }
-        else if (!this.keepContentsMounted) {
-            await index$5.waitForMount();
-        }
-        index$3.writeTask(() => this.el.classList.add('show-modal'));
-        const hasCardModal = presentingElement !== undefined;
-        /**
-         * We need to change the status bar at the
-         * start of the animation so that it completes
-         * by the time the card animation is done.
-         */
-        if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
-            // Cache the original status bar color before the modal is presented
-            this.statusBarStyle = await StatusBar.getStyle();
-            setCardStatusBarDark();
-        }
-        await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
-            presentingEl: presentingElement,
-            currentBreakpoint: this.initialBreakpoint,
-            backdropBreakpoint: this.backdropBreakpoint,
-        });
-        /* tslint:disable-next-line */
-        if (typeof window !== 'undefined') {
-            /**
-             * This needs to be setup before any
-             * non-transition async work so it can be dereferenced
-             * in the dismiss method. The dismiss method
-             * only waits for the entering transition
-             * to finish. It does not wait for all of the `present`
-             * method to resolve.
-             */
-            this.keyboardOpenCallback = () => {
-                if (this.gesture) {
-                    /**
-                     * When the native keyboard is opened and the webview
-                     * is resized, the gesture implementation will become unresponsive
-                     * and enter a free-scroll mode.
-                     *
-                     * When the keyboard is opened, we disable the gesture for
-                     * a single frame and re-enable once the contents have repositioned
-                     * from the keyboard placement.
-                     */
-                    this.gesture.enable(false);
-                    helpers.raf(() => {
-                        if (this.gesture) {
-                            this.gesture.enable(true);
-                        }
-                    });
-                }
-            };
-            window.addEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
-        }
-        if (this.isSheetModal) {
-            this.initSheetGesture();
-        }
-        else if (hasCardModal) {
-            this.initSwipeToClose();
-        }
-        unlock();
+    const parentEl = this.el.parentNode;
+    const inline = (this.inline = parentEl !== null && !this.hasController);
+    const delegate = (this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate);
+    return { inline, delegate };
+  }
+  /**
+   * Determines whether or not the
+   * modal is allowed to dismiss based
+   * on the state of the canDismiss prop.
+   */
+  async checkCanDismiss(data, role) {
+    const { canDismiss } = this;
+    if (typeof canDismiss === 'function') {
+      return canDismiss(data, role);
     }
-    initSwipeToClose() {
-        var _a;
-        if (ionicGlobal.getIonMode(this) !== 'ios') {
-            return;
-        }
-        const { el } = this;
-        // All of the elements needed for the swipe gesture
-        // should be in the DOM and referenced by now, except
-        // for the presenting el
-        const animationBuilder = this.leaveAnimation || ionicGlobal.config.get('modalLeave', iosLeaveAnimation);
-        const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
-        const contentEl = index$2.findIonContent(el);
-        if (!contentEl) {
-            index$2.printIonContentErrorMsg(el);
-            return;
-        }
-        const statusBarStyle = (_a = this.statusBarStyle) !== null && _a !== void 0 ? _a : Style.Default;
-        this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => {
-            /**
-             * While the gesture animation is finishing
-             * it is possible for a user to tap the backdrop.
-             * This would result in the dismiss animation
-             * being played again. Typically this is avoided
-             * by setting `presented = false` on the overlay
-             * component; however, we cannot do that here as
-             * that would prevent the element from being
-             * removed from the DOM.
-             */
-            this.gestureAnimationDismissing = true;
-            /**
-             * Reset the status bar style as the dismiss animation
-             * starts otherwise the status bar will be the wrong
-             * color for the duration of the dismiss animation.
-             * The dismiss method does this as well, but
-             * in this case it's only called once the animation
-             * has finished.
-             */
-            setCardStatusBarDefault(this.statusBarStyle);
-            this.animation.onFinish(async () => {
-                await this.dismiss(undefined, overlays.GESTURE);
-                this.gestureAnimationDismissing = false;
-            });
-        });
-        this.gesture.enable(true);
+    return canDismiss;
+  }
+  /**
+   * Present the modal overlay after it has been created.
+   */
+  async present() {
+    const unlock = await this.lockController.lock();
+    if (this.presented) {
+      unlock();
+      return;
     }
-    initSheetGesture() {
-        const { wrapperEl, initialBreakpoint, backdropBreakpoint } = this;
-        if (!wrapperEl || initialBreakpoint === undefined) {
-            return;
-        }
-        const animationBuilder = this.enterAnimation || ionicGlobal.config.get('modalEnter', iosEnterAnimation);
-        const ani = (this.animation = animationBuilder(this.el, {
-            presentingEl: this.presentingElement,
-            currentBreakpoint: initialBreakpoint,
-            backdropBreakpoint,
-        }));
-        ani.progressStart(true, 1);
-        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
-            if (this.currentBreakpoint !== breakpoint) {
-                this.currentBreakpoint = breakpoint;
-                this.ionBreakpointDidChange.emit({ breakpoint });
-            }
-        });
-        this.gesture = gesture;
-        this.moveSheetToBreakpoint = moveSheetToBreakpoint;
-        this.gesture.enable(true);
+    const { presentingElement, el } = this;
+    /**
+     * 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);
+    /**
+     * 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
+     * otherwise there can be a flash of unstyled content. With the
+     * custom elements bundle we need to wait for the JS framework
+     * mount the inner contents of the overlay otherwise WebKit may
+     * get the transition incorrect.
+     */
+    if (helpers.hasLazyBuild(el)) {
+      await index$5.deepReady(this.usersElement);
+      /**
+       * If keepContentsMounted="true" then the
+       * JS Framework has already mounted the inner
+       * contents so there is no need to wait.
+       * Otherwise, we need to wait for the JS
+       * Framework to mount the inner contents
+       * of this component.
+       */
     }
-    sheetOnDismiss() {
-        /**
-         * While the gesture animation is finishing
-         * it is possible for a user to tap the backdrop.
-         * This would result in the dismiss animation
-         * being played again. Typically this is avoided
-         * by setting `presented = false` on the overlay
-         * component; however, we cannot do that here as
-         * that would prevent the element from being
-         * removed from the DOM.
-         */
-        this.gestureAnimationDismissing = true;
-        this.animation.onFinish(async () => {
-            this.currentBreakpoint = 0;
-            this.ionBreakpointDidChange.emit({ breakpoint: this.currentBreakpoint });
-            await this.dismiss(undefined, overlays.GESTURE);
-            this.gestureAnimationDismissing = false;
-        });
+    else if (!this.keepContentsMounted) {
+      await index$5.waitForMount();
     }
+    index$3.writeTask(() => this.el.classList.add('show-modal'));
+    const hasCardModal = presentingElement !== undefined;
     /**
-     * Dismiss the modal overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * We need to change the status bar at the
+     * start of the animation so that it completes
+     * by the time the card animation is done.
      */
-    async dismiss(data, role) {
-        var _a;
-        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;
-        /**
-         * We need to start the status bar change
-         * before the animation so that the change
-         * finishes when the dismiss animation does.
-         */
-        const hasCardModal = presentingElement !== undefined;
-        if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
-            setCardStatusBarDefault(this.statusBarStyle);
-        }
-        /* tslint:disable-next-line */
-        if (typeof window !== 'undefined' && this.keyboardOpenCallback) {
-            window.removeEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
-            this.keyboardOpenCallback = undefined;
-        }
-        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,
-        });
-        if (dismissed) {
-            const { delegate } = this.getDelegate();
-            await frameworkDelegate.detachComponent(delegate, this.usersElement);
-            index$3.writeTask(() => this.el.classList.remove('show-modal'));
-            if (this.animation) {
-                this.animation.destroy();
-            }
+    if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
+      // Cache the original status bar color before the modal is presented
+      this.statusBarStyle = await StatusBar.getStyle();
+      setCardStatusBarDark();
+    }
+    await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+      presentingEl: presentingElement,
+      currentBreakpoint: this.initialBreakpoint,
+      backdropBreakpoint: this.backdropBreakpoint,
+    });
+    /* tslint:disable-next-line */
+    if (typeof window !== 'undefined') {
+      /**
+       * This needs to be setup before any
+       * non-transition async work so it can be dereferenced
+       * in the dismiss method. The dismiss method
+       * only waits for the entering transition
+       * to finish. It does not wait for all of the `present`
+       * method to resolve.
+       */
+      this.keyboardOpenCallback = () => {
+        if (this.gesture) {
+          /**
+           * When the native keyboard is opened and the webview
+           * is resized, the gesture implementation will become unresponsive
+           * and enter a free-scroll mode.
+           *
+           * When the keyboard is opened, we disable the gesture for
+           * a single frame and re-enable once the contents have repositioned
+           * from the keyboard placement.
+           */
+          this.gesture.enable(false);
+          helpers.raf(() => {
             if (this.gesture) {
-                this.gesture.destroy();
+              this.gesture.enable(true);
             }
+          });
         }
-        this.currentBreakpoint = undefined;
-        this.animation = undefined;
-        unlock();
-        return dismissed;
+      };
+      window.addEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
+    }
+    if (this.isSheetModal) {
+      this.initSheetGesture();
+    }
+    else if (hasCardModal) {
+      this.initSwipeToClose();
+    }
+    unlock();
+  }
+  initSwipeToClose() {
+    var _a;
+    if (ionicGlobal.getIonMode(this) !== 'ios') {
+      return;
+    }
+    const { el } = this;
+    // All of the elements needed for the swipe gesture
+    // should be in the DOM and referenced by now, except
+    // for the presenting el
+    const animationBuilder = this.leaveAnimation || ionicGlobal.config.get('modalLeave', iosLeaveAnimation);
+    const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
+    const contentEl = index$2.findIonContent(el);
+    if (!contentEl) {
+      index$2.printIonContentErrorMsg(el);
+      return;
+    }
+    const statusBarStyle = (_a = this.statusBarStyle) !== null && _a !== void 0 ? _a : Style.Default;
+    this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => {
+      /**
+       * While the gesture animation is finishing
+       * it is possible for a user to tap the backdrop.
+       * This would result in the dismiss animation
+       * being played again. Typically this is avoided
+       * by setting `presented = false` on the overlay
+       * component; however, we cannot do that here as
+       * that would prevent the element from being
+       * removed from the DOM.
+       */
+      this.gestureAnimationDismissing = true;
+      /**
+       * Reset the status bar style as the dismiss animation
+       * starts otherwise the status bar will be the wrong
+       * color for the duration of the dismiss animation.
+       * The dismiss method does this as well, but
+       * in this case it's only called once the animation
+       * has finished.
+       */
+      setCardStatusBarDefault(this.statusBarStyle);
+      this.animation.onFinish(async () => {
+        await this.dismiss(undefined, overlays.GESTURE);
+        this.gestureAnimationDismissing = false;
+      });
+    });
+    this.gesture.enable(true);
+  }
+  initSheetGesture() {
+    const { wrapperEl, initialBreakpoint, backdropBreakpoint } = this;
+    if (!wrapperEl || initialBreakpoint === undefined) {
+      return;
     }
+    const animationBuilder = this.enterAnimation || ionicGlobal.config.get('modalEnter', iosEnterAnimation);
+    const ani = (this.animation = animationBuilder(this.el, {
+      presentingEl: this.presentingElement,
+      currentBreakpoint: initialBreakpoint,
+      backdropBreakpoint,
+    }));
+    ani.progressStart(true, 1);
+    const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
+      if (this.currentBreakpoint !== breakpoint) {
+        this.currentBreakpoint = breakpoint;
+        this.ionBreakpointDidChange.emit({ breakpoint });
+      }
+    });
+    this.gesture = gesture;
+    this.moveSheetToBreakpoint = moveSheetToBreakpoint;
+    this.gesture.enable(true);
+  }
+  sheetOnDismiss() {
     /**
-     * Returns a promise that resolves when the modal did dismiss.
+     * While the gesture animation is finishing
+     * it is possible for a user to tap the backdrop.
+     * This would result in the dismiss animation
+     * being played again. Typically this is avoided
+     * by setting `presented = false` on the overlay
+     * component; however, we cannot do that here as
+     * that would prevent the element from being
+     * removed from the DOM.
      */
-    onDidDismiss() {
-        return overlays.eventMethod(this.el, 'ionModalDidDismiss');
+    this.gestureAnimationDismissing = true;
+    this.animation.onFinish(async () => {
+      this.currentBreakpoint = 0;
+      this.ionBreakpointDidChange.emit({ breakpoint: this.currentBreakpoint });
+      await this.dismiss(undefined, overlays.GESTURE);
+      this.gestureAnimationDismissing = false;
+    });
+  }
+  /**
+   * Dismiss the modal overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+   */
+  async dismiss(data, role) {
+    var _a;
+    if (this.gestureAnimationDismissing && role !== overlays.GESTURE) {
+      return false;
     }
     /**
-     * Returns a promise that resolves when the modal will dismiss.
+     * Because the canDismiss check below is async,
+     * we need to claim a lock before the check happens,
+     * in case the dismiss transition does run.
      */
-    onWillDismiss() {
-        return overlays.eventMethod(this.el, 'ionModalWillDismiss');
-    }
+    const unlock = await this.lockController.lock();
     /**
-     * Move a sheet style modal to a specific breakpoint. The breakpoint value must
-     * be a value defined in your `breakpoints` array.
+     * If a canDismiss handler is responsible
+     * for calling the dismiss method, we should
+     * not run the canDismiss check again.
      */
-    async setCurrentBreakpoint(breakpoint) {
-        if (!this.isSheetModal) {
-            index$4.printIonWarning('setCurrentBreakpoint is only supported on sheet modals.');
-            return;
-        }
-        if (!this.breakpoints.includes(breakpoint)) {
-            index$4.printIonWarning(`Attempted to set invalid breakpoint value ${breakpoint}. Please double check that the breakpoint value is part of your defined breakpoints.`);
-            return;
-        }
-        const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints, animated } = this;
-        if (currentBreakpoint === breakpoint) {
-            return;
-        }
-        if (moveSheetToBreakpoint) {
-            this.sheetTransition = moveSheetToBreakpoint({
-                breakpoint,
-                breakpointOffset: 1 - currentBreakpoint,
-                canDismiss: canDismiss !== undefined && canDismiss !== true && breakpoints[0] === 0,
-                animated,
-            });
-            await this.sheetTransition;
-            this.sheetTransition = undefined;
-        }
+    if (role !== 'handler' && !(await this.checkCanDismiss(data, role))) {
+      unlock();
+      return false;
     }
+    const { presentingElement } = this;
     /**
-     * Returns the current breakpoint of a sheet style modal
+     * We need to start the status bar change
+     * before the animation so that the change
+     * finishes when the dismiss animation does.
      */
-    async getCurrentBreakpoint() {
-        return this.currentBreakpoint;
+    const hasCardModal = presentingElement !== undefined;
+    if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
+      setCardStatusBarDefault(this.statusBarStyle);
     }
-    async moveToNextBreakpoint() {
-        const { breakpoints, currentBreakpoint } = this;
-        if (!breakpoints || currentBreakpoint == null) {
-            /**
-             * If the modal does not have breakpoints and/or the current
-             * breakpoint is not set, we can't move to the next breakpoint.
-             */
-            return false;
-        }
-        const allowedBreakpoints = breakpoints.filter((b) => b !== 0);
-        const currentBreakpointIndex = allowedBreakpoints.indexOf(currentBreakpoint);
-        const nextBreakpointIndex = (currentBreakpointIndex + 1) % allowedBreakpoints.length;
-        const nextBreakpoint = allowedBreakpoints[nextBreakpointIndex];
-        /**
-         * Sets the current breakpoint to the next available breakpoint.
-         * If the current breakpoint is the last breakpoint, we set the current
-         * breakpoint to the first non-zero breakpoint to avoid dismissing the sheet.
-         */
-        await this.setCurrentBreakpoint(nextBreakpoint);
-        return true;
+    /* tslint:disable-next-line */
+    if (typeof window !== 'undefined' && this.keyboardOpenCallback) {
+      window.removeEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
+      this.keyboardOpenCallback = undefined;
     }
-    render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
-        const showHandle = handle !== false && isSheetModal;
-        const mode = ionicGlobal.getIonMode(this);
-        const isCardModal = presentingElement !== undefined && mode === 'ios';
-        const isHandleCycle = handleBehavior === 'cycle';
-        return (index$3.h(index$3.Host, Object.assign({ key: 'e4ad28e6e794560d85252aebdca7f4752e4e7e99', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
-                zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '6efd67361a062d15488390f9f0d6c0841e541893', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '557b1c6b297df75acc80d1350b971e65ace6c343', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '67f9b27b662303fbaadaee2ae89972caadfd9994',
-            /*
-              role and aria-modal must be used on the
-              same element. They must also be set inside the
-              shadow DOM otherwise ion-button will not be highlighted
-              when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
-            */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '8f1eecc451b52467a8c3cfe500335cf6254bbfbc', class: "modal-handle",
-            // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: 'cdc923404f01a14b9071a434c68547da3b22c71e' }))));
+    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,
+    });
+    if (dismissed) {
+      const { delegate } = this.getDelegate();
+      await frameworkDelegate.detachComponent(delegate, this.usersElement);
+      index$3.writeTask(() => this.el.classList.remove('show-modal'));
+      if (this.animation) {
+        this.animation.destroy();
+      }
+      if (this.gesture) {
+        this.gesture.destroy();
+      }
+    }
+    this.currentBreakpoint = undefined;
+    this.animation = undefined;
+    unlock();
+    return dismissed;
+  }
+  /**
+   * Returns a promise that resolves when the modal did dismiss.
+   */
+  onDidDismiss() {
+    return overlays.eventMethod(this.el, 'ionModalDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the modal will dismiss.
+   */
+  onWillDismiss() {
+    return overlays.eventMethod(this.el, 'ionModalWillDismiss');
+  }
+  /**
+   * Move a sheet style modal to a specific breakpoint. The breakpoint value must
+   * be a value defined in your `breakpoints` array.
+   */
+  async setCurrentBreakpoint(breakpoint) {
+    if (!this.isSheetModal) {
+      index$4.printIonWarning('setCurrentBreakpoint is only supported on sheet modals.');
+      return;
+    }
+    if (!this.breakpoints.includes(breakpoint)) {
+      index$4.printIonWarning(`Attempted to set invalid breakpoint value ${breakpoint}. Please double check that the breakpoint value is part of your defined breakpoints.`);
+      return;
+    }
+    const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints, animated } = this;
+    if (currentBreakpoint === breakpoint) {
+      return;
     }
-    get el() { return index$3.getElement(this); }
-    static get watchers() { return {
-        "isOpen": [{
-                "onIsOpenChange": 0
-            }],
-        "trigger": [{
-                "triggerChanged": 0
-            }]
-    }; }
+    if (moveSheetToBreakpoint) {
+      this.sheetTransition = moveSheetToBreakpoint({
+        breakpoint,
+        breakpointOffset: 1 - currentBreakpoint,
+        canDismiss: canDismiss !== undefined && canDismiss !== true && breakpoints[0] === 0,
+        animated,
+      });
+      await this.sheetTransition;
+      this.sheetTransition = undefined;
+    }
+  }
+  /**
+   * Returns the current breakpoint of a sheet style modal
+   */
+  async getCurrentBreakpoint() {
+    return this.currentBreakpoint;
+  }
+  async moveToNextBreakpoint() {
+    const { breakpoints, currentBreakpoint } = this;
+    if (!breakpoints || currentBreakpoint == null) {
+      /**
+       * If the modal does not have breakpoints and/or the current
+       * breakpoint is not set, we can't move to the next breakpoint.
+       */
+      return false;
+    }
+    const allowedBreakpoints = breakpoints.filter((b) => b !== 0);
+    const currentBreakpointIndex = allowedBreakpoints.indexOf(currentBreakpoint);
+    const nextBreakpointIndex = (currentBreakpointIndex + 1) % allowedBreakpoints.length;
+    const nextBreakpoint = allowedBreakpoints[nextBreakpointIndex];
+    /**
+     * Sets the current breakpoint to the next available breakpoint.
+     * If the current breakpoint is the last breakpoint, we set the current
+     * breakpoint to the first non-zero breakpoint to avoid dismissing the sheet.
+     */
+    await this.setCurrentBreakpoint(nextBreakpoint);
+    return true;
+  }
+  render() {
+    const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
+    const showHandle = handle !== false && isSheetModal;
+    const mode = ionicGlobal.getIonMode(this);
+    const isCardModal = presentingElement !== undefined && mode === 'ios';
+    const isHandleCycle = handleBehavior === 'cycle';
+    return (index$3.h(index$3.Host, Object.assign({ key: 'e4ad28e6e794560d85252aebdca7f4752e4e7e99', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        zIndex: `${20000 + this.overlayIndex}`,
+      }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '6efd67361a062d15488390f9f0d6c0841e541893', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '557b1c6b297df75acc80d1350b971e65ace6c343', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '67f9b27b662303fbaadaee2ae89972caadfd9994',
+      /*
+        role and aria-modal must be used on the
+        same element. They must also be set inside the
+        shadow DOM otherwise ion-button will not be highlighted
+        when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+      */
+      role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '8f1eecc451b52467a8c3cfe500335cf6254bbfbc', class: "modal-handle",
+      // Prevents the handle from receiving keyboard focus when it does not cycle
+      tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: 'cdc923404f01a14b9071a434c68547da3b22c71e' }))));
+  }
+  get el() { return index$3.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["onIsOpenChange"],
+    "trigger": ["triggerChanged"]
+  }; }
 };
 const LIFECYCLE_MAP = {
-    ionModalDidPresent: 'ionViewDidEnter',
-    ionModalWillPresent: 'ionViewWillEnter',
-    ionModalWillDismiss: 'ionViewWillLeave',
-    ionModalDidDismiss: 'ionViewDidLeave',
+  ionModalDidPresent: 'ionViewDidEnter',
+  ionModalWillPresent: 'ionViewWillEnter',
+  ionModalWillDismiss: 'ionViewWillLeave',
+  ionModalDidDismiss: 'ionViewDidLeave',
 };
 Modal.style = {
-    ios: modalIosCss(),
-    md: modalMdCss()
+  ios: modalIosCss,
+  md: modalMdCss
 };
 exports.ion_modal = Modal;