voyager-ionic-core 8.5.7 → 8.6.1

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

@@ -3,27 +3,23 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$3 = require('./index-2e236a04.js');
-const index$2 = require('./index-31b07b9c.js');
-const frameworkDelegate = require('./framework-delegate-862d9d00.js');
-const helpers = require('./helpers-8a48fdea.js');
-const lockController = require('./lock-controller-6585a42a.js');
-const index$4 = require('./index-cc858e97.js');
-const capacitor = require('./capacitor-c04564bf.js');
-const overlays = require('./overlays-4c291a05.js');
-const theme = require('./theme-d1c573d2.js');
-const index$5 = require('./index-1eff7149.js');
-const ionicGlobal = require('./ionic-global-6dea5a96.js');
-const keyboard = require('./keyboard-af1bb365.js');
-const animation = require('./animation-ab2d3449.js');
-const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const index$1 = require('./index-ee07ed59.js');
-const index = require('./index-c8d52405.js');
-require('./hardware-back-button-3d2b1004.js');
-require('./gesture-controller-9436f482.js');
-require('./keyboard-0272231f.js');
+var index$3 = require('./index-DODXXb_r.js');
+var index$2 = require('./index-CVa6JE57.js');
+var frameworkDelegate = require('./framework-delegate-C7sIJyT5.js');
+var helpers = require('./helpers-BITAzJfi.js');
+var lockController = require('./lock-controller-aDB9wrEf.js');
+var capacitor = require('./capacitor-DmA66EwP.js');
+var overlays = require('./overlays-DRDumz2b.js');
+var theme = require('./theme-CeDs6Hcv.js');
+var index$4 = require('./index-y0QaNtCi.js');
+var keyboard = require('./keyboard-hHzlEQpk.js');
+var animation = require('./animation-0T7gKwOt.js');
+var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
+var index$1 = require('./index-CAvQ7Tka.js');
+var index = require('./index-DkNv4J_i.js');
+require('./hardware-back-button-D90qZxju.js');
+require('./gesture-controller-dtqlP_q4.js');
+require('./keyboard-UuAS4D_9.js');
 
 var Style;
 (function (Style) {
@@ -445,7 +441,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) =>
          * canDismiss is checked.
          */
         const shouldComplete = !isAttemptingDismissWithCanDismiss && threshold >= DISMISS_THRESHOLD;
-        let newStepValue = shouldComplete ? -0.001 : 0.001;
+        let newStepValue = shouldComplete ? -1e-3 : 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];
@@ -588,47 +584,7 @@ const iosEnterAnimation = (baseEl, opts) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(500)
-        .addAnimation([wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
+        .addAnimation([wrapperAnimation]);
     if (contentAnimation) {
         baseAnimation.addAnimation(contentAnimation);
     }
@@ -709,7 +665,7 @@ const createLeaveAnimation$1 = () => {
  * iOS Modal Leave Animation
  */
 const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
-    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
+    const { presentingEl, currentBreakpoint } = opts;
     const root = helpers.getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -718,29 +674,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(duration)
-        .addAnimation(wrapperAnimation)
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation(wrapperAnimation);
     const appEl = baseEl.closest('ion-app');
     if (presentingEl && appEl) {
         const isMobile = window.innerWidth < 768;
@@ -831,52 +765,12 @@ const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = animation.createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     if (contentAnimation) {
         baseAnimation.addAnimation(contentAnimation);
     }
@@ -895,7 +789,7 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 const mdLeaveAnimation = (baseEl, opts) => {
-    const { currentBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint } = opts;
     const root = helpers.getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -903,29 +797,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
     const baseAnimation = animation.createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     return baseAnimation;
 };
 
@@ -957,6 +829,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
+    let cachedFooterEls = null;
+    let cachedFooterYPosition = null;
+    let currentFooterState = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -986,29 +861,87 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         baseEl.classList.add(overlays.FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
+     * Toggles the footer to an absolute position while moving to prevent
+     * it from shaking while the sheet is being dragged.
+     * @param newPosition Whether the footer is in a moving or stationary position.
      */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
+    const swapFooterPosition = (newPosition) => {
+        if (!cachedFooterEls) {
+            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
+            if (!cachedFooterEls.length) {
+                return;
+            }
         }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
         const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
+        currentFooterState = newPosition;
+        if (newPosition === 'stationary') {
+            cachedFooterEls.forEach((cachedFooterEl) => {
+                // Reset positioning styles to allow normal document flow
+                cachedFooterEl.classList.remove('modal-footer-moving');
+                cachedFooterEl.style.removeProperty('position');
+                cachedFooterEl.style.removeProperty('width');
+                cachedFooterEl.style.removeProperty('height');
+                cachedFooterEl.style.removeProperty('top');
+                cachedFooterEl.style.removeProperty('left');
+                page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+                // Move to page
+                page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
+            });
         }
         else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+            let footerHeights = 0;
+            cachedFooterEls.forEach((cachedFooterEl, index) => {
+                // Get both the footer and document body positions
+                const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
+                const bodyRect = document.body.getBoundingClientRect();
+                // Calculate the total height of all footers
+                // so we can add padding to the page element
+                footerHeights += cachedFooterEl.clientHeight;
+                // Calculate absolute position relative to body
+                // We need to subtract the body's offsetTop to get true position within document.body
+                const absoluteTop = cachedFooterElRect.top - bodyRect.top;
+                const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
+                // Capture the footer's current dimensions and store them in CSS variables for
+                // later use when applying absolute positioning.
+                cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
+                cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
+                cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
+                cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
+                // Only cache the first footer's Y position
+                // This is used to determine if the sheet has been moved below the footer
+                // and needs to be swapped back to stationary so it collapses correctly.
+                if (index === 0) {
+                    cachedFooterYPosition = absoluteTop;
+                    // If there's a header, we need to combine the header height with the footer position
+                    // because the header moves with the drag handle, so when it starts overlapping the footer,
+                    // we need to account for that.
+                    const header = baseEl.querySelector('ion-header');
+                    if (header) {
+                        cachedFooterYPosition -= header.clientHeight;
+                    }
+                }
+            });
+            // Apply the pinning of styles after we've calculated everything
+            // so that we don't cause layouts to shift while calculating the footer positions.
+            // Otherwise, with multiple footers we'll end up capturing the wrong positions.
+            cachedFooterEls.forEach((cachedFooterEl) => {
+                // Add padding to the parent element to prevent content from being hidden
+                // when the footer is positioned absolutely. This has to be done before we
+                // make the footer absolutely positioned or we may accidentally cause the
+                // sheet to scroll.
+                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
+                // Apply positioning styles to keep footer at bottom
+                cachedFooterEl.classList.add('modal-footer-moving');
+                // Apply our preserved styles to pin the footer
+                cachedFooterEl.style.setProperty('position', 'absolute');
+                cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
+                cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
+                cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
+                cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
+                // Move the element to the body when everything else is done
+                document.body.appendChild(cachedFooterEl);
+            });
         }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
     };
     /**
      * After the entering animation completes,
@@ -1102,12 +1035,11 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         }
         /**
          * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
+         * the footer position to moving so that it doesn't shake
+         * while the sheet is being dragged.
          */
         if (!expandToScroll) {
-            swapFooterVisibility('original');
+            swapFooterPosition('moving');
         }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
@@ -1126,6 +1058,21 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If `expandToScroll` is disabled, we need to see if we're currently below
+         * the footer element and the footer is in a stationary position. If so,
+         * we need to make the stationary the original position so that the footer
+         * collapses with the sheet.
+         */
+        if (!expandToScroll && cachedFooterYPosition !== null && currentFooterState !== null) {
+            // Check if we need to swap the footer position
+            if (detail.currentY >= cachedFooterYPosition && currentFooterState === 'moving') {
+                swapFooterPosition('stationary');
+            }
+            else if (detail.currentY < cachedFooterYPosition && currentFooterState === 'stationary') {
+                swapFooterPosition('moving');
+            }
+        }
         /**
          * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
          * the scrollable content, we should not allow the swipe gesture to continue.
@@ -1185,6 +1132,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * is not scrolled to the top.
          */
         if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
+            /**
+             * If expand to scroll is disabled, we need to make sure we swap the footer position
+             * back to stationary so that it will collapse correctly if the modal is dismissed without
+             * dragging (e.g. through a dismiss button).
+             * This can cause issues if the user has a modal with content that can be dragged, as we'll
+             * swap to moving on drag and if we don't swap back here then the footer will get stuck.
+             */
+            swapFooterPosition('stationary');
             return;
         }
         /**
@@ -1259,14 +1214,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -1283,10 +1230,28 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
+        /**
+         * If expandToScroll is disabled and we're animating
+         * to close the sheet, we need to swap
+         * the footer position to stationary so that it
+         * will collapse correctly. We cannot just always swap
+         * here or it'll be jittery while animating movement.
+         */
+        if (!expandToScroll && snapToBreakpoint === 0) {
+            swapFooterPosition('stationary');
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
                 if (shouldRemainOpen) {
+                    /**
+                     * If expandToScroll is disabled, we need to swap
+                     * the footer position to stationary so that it
+                     * will act as it would by default.
+                     */
+                    if (!expandToScroll) {
+                        swapFooterPosition('stationary');
+                    }
                     /**
                      * Once the snapping animation completes,
                      * we need to reset the animation to go
@@ -1351,11 +1316,9 @@ 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:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--box-shadow);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;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-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;-webkit-transform:translate(-50%, -50%);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(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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{-webkit-transform:translate3d(0,  100%,  0);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-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;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);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
-const IonModalIosStyle0 = modalIosCss;
+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:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--box-shadow);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;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-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;-webkit-transform:translate(-50%, -50%);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(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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{-webkit-transform:translate3d(0,  100%,  0);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-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;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);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-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:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-box-shadow:var(--box-shadow);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;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-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;-webkit-transform:translate(-50%, -50%);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(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}: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{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
-const IonModalMdStyle0 = modalMdCss;
 
 const Modal = class {
     constructor(hostRef) {
@@ -1378,6 +1341,112 @@ const Modal = class {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Controls whether scrolling or dragging within the sheet modal expands
+         * it to a larger breakpoint. This only takes effect when `breakpoints`
+         * and `initialBreakpoint` are set.
+         *
+         * If `true`, scrolling or dragging anywhere in the modal will first expand
+         * it to the next breakpoint. Once fully expanded, scrolling will affect the
+         * content.
+         * If `false`, scrolling will always affect the content. The modal will
+         * only expand when dragging the header or handle. The modal will close when
+         * dragging the header or handle. It can also be closed when dragging the
+         * content, but only if the content is scrolled to the top.
+         */
+        this.expandToScroll = true;
+        /**
+         * A decimal value between 0 and 1 that indicates the
+         * point after which the backdrop will begin to fade in
+         * when using a sheet modal. Prior to this point, the
+         * backdrop will be hidden and the content underneath
+         * the sheet can be interacted with. This value is exclusive
+         * meaning the backdrop will become active after the value
+         * specified.
+         */
+        this.backdropBreakpoint = 0;
+        /**
+         * The interaction behavior for the sheet modal when the handle is pressed.
+         *
+         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
+         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
+         *
+         * Handle behavior is unavailable when the `handle` property is set to `false` or
+         * when the `breakpoints` property is not set (using a fullscreen or card modal).
+         */
+        this.handleBehavior = 'none';
+        /**
+         * If `true`, the modal will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, a backdrop will be displayed behind the modal.
+         * This property controls whether or not the backdrop
+         * darkens the screen when the modal is presented.
+         * It does not control whether or not the backdrop
+         * is active or present in the DOM.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the modal will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the modal will open. If `false`, the modal will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the modalController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the modal dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        /**
+         * If `true`, the component passed into `ion-modal` will
+         * automatically be mounted when the modal is created. The
+         * component will remain mounted even when the modal is dismissed.
+         * However, the component will be destroyed when the modal is
+         * destroyed. This property is not reactive and should only be
+         * used when initially creating a modal.
+         *
+         * Note: This feature only applies to inline modals in JavaScript
+         * frameworks such as Angular, React, and Vue.
+         */
+        this.keepContentsMounted = false;
+        /**
+         * If `true`, focus will not be allowed to move outside of this overlay.
+         * If `false`, focus will be allowed to move outside of the overlay.
+         *
+         * In most scenarios this property should remain set to `true`. Setting
+         * this property to `false` can cause severe accessibility issues as users
+         * relying on assistive technologies may be able to move focus into
+         * a confusing state. We recommend only setting this to `false` when
+         * absolutely necessary.
+         *
+         * Developers may want to consider disabling focus trapping if this
+         * overlay presents a non-Ionic overlay from a 3rd party library.
+         * Developers would disable focus trapping on the Ionic overlay
+         * when presenting the 3rd party overlay and then re-enable
+         * focus trapping when dismissing the 3rd party overlay and moving
+         * focus back to the Ionic overlay.
+         */
+        this.focusTrap = true;
+        /**
+         * Determines whether or not a modal can dismiss
+         * when calling the `dismiss` method.
+         *
+         * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
+         * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+         *
+         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+         * if you need to access `this` from within the callback.
+         */
+        this.canDismiss = true;
         this.onHandleClick = () => {
             const { sheetTransition, handleBehavior } = this;
             if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
@@ -1415,32 +1484,6 @@ const Modal = class {
                 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.expandToScroll = true;
-        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.focusTrap = true;
-        this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -1510,7 +1553,7 @@ const Modal = class {
             this.currentBreakpoint = this.initialBreakpoint;
         }
         if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
-            index$4.printIonWarning('[ion-modal] - Your breakpoints array must include the initialBreakpoint value.');
+            index$3.printIonWarning('[ion-modal] - Your breakpoints array must include the initialBreakpoint value.');
         }
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             overlays.setOverlayId(this.el);
@@ -1610,7 +1653,7 @@ const Modal = class {
          * get the transition incorrect.
          */
         if (helpers.hasLazyBuild(el)) {
-            await index$5.deepReady(this.usersElement);
+            await index$4.deepReady(this.usersElement);
             /**
              * If keepContentsMounted="true" then the
              * JS Framework has already mounted the inner
@@ -1621,7 +1664,7 @@ const Modal = class {
              */
         }
         else if (!this.keepContentsMounted) {
-            await index$5.waitForMount();
+            await index$4.waitForMount();
         }
         index$3.writeTask(() => this.el.classList.add('show-modal'));
         const hasCardModal = presentingElement !== undefined;
@@ -1630,7 +1673,7 @@ const Modal = class {
          * start of the animation so that it completes
          * by the time the card animation is done.
          */
-        if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
+        if (hasCardModal && index$3.getIonMode(this) === 'ios') {
             // Cache the original status bar color before the modal is presented
             this.statusBarStyle = await StatusBar.getStyle();
             setCardStatusBarDark();
@@ -1682,14 +1725,14 @@ const Modal = class {
     }
     initSwipeToClose() {
         var _a;
-        if (ionicGlobal.getIonMode(this) !== 'ios') {
+        if (index$3.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 || index$4.config.get('modalLeave', iosLeaveAnimation);
+        const animationBuilder = this.leaveAnimation || index$3.config.get('modalLeave', iosLeaveAnimation);
         const ani = (this.animation = animationBuilder(el, {
             presentingEl: this.presentingElement,
             expandToScroll: this.expandToScroll,
@@ -1733,7 +1776,7 @@ const Modal = class {
         if (!wrapperEl || initialBreakpoint === undefined) {
             return;
         }
-        const animationBuilder = this.enterAnimation || index$4.config.get('modalEnter', iosEnterAnimation);
+        const animationBuilder = this.enterAnimation || index$3.config.get('modalEnter', iosEnterAnimation);
         const ani = (this.animation = animationBuilder(this.el, {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
@@ -1807,7 +1850,7 @@ const Modal = class {
          * finishes when the dismiss animation does.
          */
         const hasCardModal = presentingElement !== undefined;
-        if (hasCardModal && ionicGlobal.getIonMode(this) === 'ios') {
+        if (hasCardModal && index$3.getIonMode(this) === 'ios') {
             setCardStatusBarDefault(this.statusBarStyle);
         }
         /* tslint:disable-next-line */
@@ -1855,11 +1898,11 @@ const Modal = class {
      */
     async setCurrentBreakpoint(breakpoint) {
         if (!this.isSheetModal) {
-            index$4.printIonWarning('[ion-modal] - setCurrentBreakpoint is only supported on sheet modals.');
+            index$3.printIonWarning('[ion-modal] - setCurrentBreakpoint is only supported on sheet modals.');
             return;
         }
         if (!this.breakpoints.includes(breakpoint)) {
-            index$4.printIonWarning(`[ion-modal] - Attempted to set invalid breakpoint value ${breakpoint}. Please double check that the breakpoint value is part of your defined breakpoints.`);
+            index$3.printIonWarning(`[ion-modal] - 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;
@@ -1907,21 +1950,21 @@ const Modal = class {
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
-        const mode = ionicGlobal.getIonMode(this);
+        const mode = index$3.getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (index$3.h(index$3.Host, Object.assign({ key: '0991b2e4e32da511e59fb1463b47e4ac1b86d1ca', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index$3.h(index$3.Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "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, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, 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: 'ca9453ffe1021fb252ad9460676cfabb5633f00f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '9f8da446a7b0f3b26aec856e13f6d6d131a7e37b', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9d08bf600571849c97b58f66df40b496a358d1e1',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, 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: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
             /*
               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: 'f8bf0d1126e5376519101225d9965727121ee042', class: "modal-handle",
+            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: '332dc0b40363a77c7be62331d9f26def91c790e9', 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: '6d52849df98f2c6c8fbc03996a931ea6a39a512b' }))));
+            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: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {
@@ -1936,8 +1979,8 @@ const LIFECYCLE_MAP = {
     ionModalDidDismiss: 'ionViewDidLeave',
 };
 Modal.style = {
-    ios: IonModalIosStyle0,
-    md: IonModalMdStyle0
+    ios: modalIosCss,
+    md: modalMdCss
 };
 
 exports.ion_modal = Modal;