voyager-ionic-core 8.5.7 → 8.7.1

package/dist/collection/components/modal/modal.js

@@ -4,7 +4,7 @@
 import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
-import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
+import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
@@ -16,10 +16,11 @@ import { getIonMode } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
+import { portraitToLandscapeTransition, landscapeToPortraitTransition } from "./animations/ios.transition";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
-import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
+import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
@@ -41,6 +42,112 @@ export class Modal {
         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) {
@@ -78,32 +185,37 @@ export class Modal {
                 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;
+        /**
+         * When the modal receives focus directly, pass focus to the handle
+         * if it exists and is focusable, otherwise let the focus trap handle it.
+         */
+        this.onModalFocus = (ev) => {
+            const { dragHandleEl, el } = this;
+            // Only handle focus if the modal itself was focused (not a child element)
+            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+                dragHandleEl.focus();
+            }
+        };
+        /**
+         * When the slot changes, we need to find all the modals in the slot
+         * and set the data-parent-ion-modal attribute on them so we can find them
+         * and dismiss them when we get dismissed.
+         * We need to do it this way because when a modal is opened, it's moved to
+         * the end of the body and is no longer an actual child of the modal.
+         */
+        this.onSlotChange = ({ target }) => {
+            const slot = target;
+            slot.assignedElements().forEach((el) => {
+                el.querySelectorAll('ion-modal').forEach((childModal) => {
+                    // We don't need to write to the DOM if the modal is already tagged
+                    // If this is a deeply nested modal, this effect should cascade so we don't
+                    // need to worry about another modal claiming the same child.
+                    if (childModal.getAttribute('data-parent-ion-modal') === null) {
+                        childModal.setAttribute('data-parent-ion-modal', this.el.id);
+                    }
+                });
+            });
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -119,6 +231,16 @@ export class Modal {
             triggerController.addClickListener(el, trigger);
         }
     }
+    onWindowResize() {
+        // Only handle resize for iOS card modals when no custom animations are provided
+        if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            this.handleViewTransition();
+        }, 50); // Debounce to avoid excessive calls during active resizing
+    }
     breakpointsChanged(breakpoints) {
         if (breakpoints !== undefined) {
             this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
@@ -131,6 +253,8 @@ export class Modal {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -138,6 +262,10 @@ export class Modal {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -341,6 +469,10 @@ export class Modal {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
+        // Initialize view transition listener for iOS card modals
+        this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -435,13 +567,13 @@ export class Modal {
     }
     /**
      * 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.
+     *
+     * @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`.
      */
     async dismiss(data, role) {
         var _a;
@@ -454,6 +586,12 @@ export class Modal {
          * in case the dismiss transition does run.
          */
         const unlock = await this.lockController.lock();
+        /**
+         * Dismiss all child modals. This is especially important in
+         * Angular and React because it's possible to lose control of a child
+         * modal when the parent modal is dismissed.
+         */
+        await this.dismissNestedModals();
         /**
          * If a canDismiss handler is responsible
          * for calling the dismiss method, we should
@@ -494,6 +632,8 @@ export class Modal {
             if (this.gesture) {
                 this.gesture.destroy();
             }
+            this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -513,8 +653,10 @@ export class Modal {
         return 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.
+     * Move a sheet style modal to a specific breakpoint.
+     *
+     * @param breakpoint The breakpoint value to move the sheet modal to.
+     * Must be a value defined in your `breakpoints` array.
      */
     async setCurrentBreakpoint(breakpoint) {
         if (!this.isSheetModal) {
@@ -567,24 +709,190 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    initViewTransitionListener() {
+        // Only enable for iOS card modals when no custom animations are provided
+        if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        // Set initial view state
+        this.currentViewIsPortrait = window.innerWidth < 768;
+    }
+    handleViewTransition() {
+        const isPortrait = window.innerWidth < 768;
+        // Only transition if view state actually changed
+        if (this.currentViewIsPortrait === isPortrait) {
+            return;
+        }
+        // Cancel any ongoing transition animation
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+        const { presentingElement } = this;
+        if (!presentingElement) {
+            return;
+        }
+        // Create transition animation
+        let transitionAnimation;
+        if (this.currentViewIsPortrait && !isPortrait) {
+            // Portrait to landscape transition
+            transitionAnimation = portraitToLandscapeTransition(this.el, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        else {
+            // Landscape to portrait transition
+            transitionAnimation = landscapeToPortraitTransition(this.el, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        // Update state and play animation
+        this.currentViewIsPortrait = isPortrait;
+        this.viewTransitionAnimation = transitionAnimation;
+        transitionAnimation.play().then(() => {
+            this.viewTransitionAnimation = undefined;
+            // After orientation transition, recreate the swipe-to-close gesture
+            // with updated animation that reflects the new presenting element state
+            this.reinitSwipeToClose();
+        });
+    }
+    cleanupViewTransitionListener() {
+        // Clear any pending resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+    }
+    reinitSwipeToClose() {
+        // Only reinitialize if we have a presenting element and are on iOS
+        if (getIonMode(this) !== 'ios' || !this.presentingElement) {
+            return;
+        }
+        // Clean up existing gesture and animation
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+        if (this.animation) {
+            // Properly end the progress-based animation at initial state before destroying
+            // to avoid leaving modal in intermediate swipe position
+            this.animation.progressEnd(0, 0, 0);
+            this.animation.destroy();
+            this.animation = undefined;
+        }
+        // Force the modal back to the correct position or it could end up
+        // in a weird state after destroying the animation
+        raf(() => {
+            this.ensureCorrectModalPosition();
+            this.initSwipeToClose();
+        });
+    }
+    ensureCorrectModalPosition() {
+        const { el, presentingElement } = this;
+        const root = getElementRoot(el);
+        const wrapperEl = root.querySelector('.modal-wrapper');
+        if (wrapperEl) {
+            wrapperEl.style.transform = 'translateY(0vh)';
+            wrapperEl.style.opacity = '1';
+        }
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
+            const isPortrait = window.innerWidth < 768;
+            if (isPortrait) {
+                const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
+                    ? '30px'
+                    : 'max(30px, var(--ion-safe-area-top))';
+                const scale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+                presentingElement.style.transform = `translateY(${transformOffset}) scale(${scale})`;
+            }
+            else {
+                presentingElement.style.transform = 'translateY(0px) scale(1)';
+            }
+        }
+    }
+    async dismissNestedModals() {
+        const nestedModals = document.querySelectorAll(`ion-modal[data-parent-ion-modal="${this.el.id}"]`);
+        nestedModals === null || nestedModals === void 0 ? void 0 : nestedModals.forEach(async (modal) => {
+            await modal.dismiss(undefined, 'parent-dismissed');
+        });
+    }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '0991b2e4e32da511e59fb1463b47e4ac1b86d1ca', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const isSheetModalWithHandle = isSheetModal && showHandle;
+        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+            // Allow the modal to be navigable when the handle is focusable
+            tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'ca9453ffe1021fb252ad9460676cfabb5633f00f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9f8da446a7b0f3b26aec856e13f6d6d131a7e37b', class: "modal-shadow" }), 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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               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 && (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 && (h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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" })), 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -604,6 +912,7 @@ export class Modal {
         return {
             "hasController": {
                 "type": "boolean",
+                "attribute": "has-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -619,12 +928,14 @@ export class Modal {
                         }],
                     "text": ""
                 },
-                "attribute": "has-controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "overlayIndex": {
                 "type": "number",
+                "attribute": "overlay-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -640,11 +951,13 @@ export class Modal {
                         }],
                     "text": ""
                 },
-                "attribute": "overlay-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "delegate": {
                 "type": "unknown",
+                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -665,10 +978,13 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "keyboardClose": {
                 "type": "boolean",
+                "attribute": "keyboard-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -681,12 +997,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "attribute": "keyboard-close",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "enterAnimation": {
                 "type": "unknown",
+                "attribute": "enter-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -704,10 +1022,13 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
+                "attribute": "leave-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -725,10 +1046,13 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "breakpoints": {
                 "type": "unknown",
+                "attribute": "breakpoints",
                 "mutable": false,
                 "complexType": {
                     "original": "number[]",
@@ -740,10 +1064,13 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "expandToScroll": {
                 "type": "boolean",
+                "attribute": "expand-to-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -756,12 +1083,14 @@ export class Modal {
                     "tags": [],
                     "text": "Controls whether scrolling or dragging within the sheet modal expands\nit to a larger breakpoint. This only takes effect when `breakpoints`\nand `initialBreakpoint` are set.\n\nIf `true`, scrolling or dragging anywhere in the modal will first expand\nit to the next breakpoint. Once fully expanded, scrolling will affect the\ncontent.\nIf `false`, scrolling will always affect the content. The modal will\nonly expand when dragging the header or handle. The modal will close when\ndragging the header or handle. It can also be closed when dragging the\ncontent, but only if the content is scrolled to the top."
                 },
-                "attribute": "expand-to-scroll",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "initialBreakpoint": {
                 "type": "number",
+                "attribute": "initial-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -774,11 +1103,13 @@ export class Modal {
                     "tags": [],
                     "text": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array."
                 },
-                "attribute": "initial-breakpoint",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "backdropBreakpoint": {
                 "type": "number",
+                "attribute": "backdrop-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -791,12 +1122,14 @@ export class Modal {
                     "tags": [],
                     "text": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified."
                 },
-                "attribute": "backdrop-breakpoint",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "handle": {
                 "type": "boolean",
+                "attribute": "handle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -809,11 +1142,13 @@ export class Modal {
                     "tags": [],
                     "text": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties."
                 },
-                "attribute": "handle",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "handleBehavior": {
                 "type": "string",
+                "attribute": "handle-behavior",
                 "mutable": false,
                 "complexType": {
                     "original": "ModalHandleBehavior",
@@ -832,12 +1167,14 @@ export class Modal {
                     "tags": [],
                     "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal)."
                 },
-                "attribute": "handle-behavior",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "component": {
                 "type": "string",
+                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentRef",
@@ -859,11 +1196,13 @@ export class Modal {
                         }],
                     "text": "The component to display inside of the modal."
                 },
-                "attribute": "component",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "componentProps": {
                 "type": "unknown",
+                "attribute": "component-props",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentProps",
@@ -884,10 +1223,13 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": "The data to pass to the modal component."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "cssClass": {
                 "type": "string",
+                "attribute": "css-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -903,11 +1245,13 @@ export class Modal {
                         }],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "attribute": "css-class",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "backdropDismiss": {
                 "type": "boolean",
+                "attribute": "backdrop-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -920,12 +1264,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will be dismissed when the backdrop is clicked."
                 },
-                "attribute": "backdrop-dismiss",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "showBackdrop": {
                 "type": "boolean",
+                "attribute": "show-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -938,12 +1284,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM."
                 },
-                "attribute": "show-backdrop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -956,12 +1304,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will animate."
                 },
-                "attribute": "animated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "presentingElement": {
                 "type": "unknown",
+                "attribute": "presenting-element",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
@@ -978,10 +1328,13 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "htmlAttributes": {
                 "type": "unknown",
+                "attribute": "html-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: any }",
@@ -993,10 +1346,13 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the modal."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "isOpen": {
                 "type": "boolean",
+                "attribute": "is-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1009,12 +1365,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code."
                 },
-                "attribute": "is-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "trigger": {
                 "type": "string",
+                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -1027,11 +1385,13 @@ export class Modal {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked."
                 },
-                "attribute": "trigger",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "keepContentsMounted": {
                 "type": "boolean",
+                "attribute": "keep-contents-mounted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1044,12 +1404,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue."
                 },
-                "attribute": "keep-contents-mounted",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusTrap": {
                 "type": "boolean",
+                "attribute": "focus-trap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1062,12 +1424,14 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
                 },
-                "attribute": "focus-trap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "canDismiss": {
                 "type": "boolean",
+                "attribute": "can-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | ((data?: any, role?: string) => Promise<boolean>)",
@@ -1085,7 +1449,8 @@ export class Modal {
                     "tags": [],
                     "text": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
-                "attribute": "can-dismiss",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             }
@@ -1315,7 +1680,7 @@ export class Modal {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }],
                     "references": {
                         "Promise": {
@@ -1330,13 +1695,13 @@ export class Modal {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the modal overlay after it has been presented.",
+                    "text": "Dismiss the modal overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }]
                 }
             },
@@ -1398,7 +1763,7 @@ export class Modal {
                     "parameters": [{
                             "name": "breakpoint",
                             "type": "number",
-                            "docs": ""
+                            "docs": "The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
                         }],
                     "references": {
                         "Promise": {
@@ -1409,8 +1774,11 @@ export class Modal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
-                    "tags": []
+                    "text": "Move a sheet style modal to a specific breakpoint.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "breakpoint The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
+                        }]
                 }
             },
             "getCurrentBreakpoint": {
@@ -1442,6 +1810,15 @@ export class Modal {
                 "methodName": "triggerChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 const LIFECYCLE_MAP = {
     ionModalDidPresent: 'ionViewDidEnter',