@ionic/core 8.7.18 → 8.7.19-dev.11772655618.1af0949f

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

@@ -526,32 +526,7 @@ export class Modal {
             return;
         }
         const statusBarStyle = (_a = this.statusBarStyle) !== null && _a !== void 0 ? _a : StatusBarStyle.Default;
-        this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => {
-            /**
-             * While the gesture animation is finishing
-             * it is possible for a user to tap the backdrop.
-             * This would result in the dismiss animation
-             * being played again. Typically this is avoided
-             * by setting `presented = false` on the overlay
-             * component; however, we cannot do that here as
-             * that would prevent the element from being
-             * removed from the DOM.
-             */
-            this.gestureAnimationDismissing = true;
-            /**
-             * Reset the status bar style as the dismiss animation
-             * starts otherwise the status bar will be the wrong
-             * color for the duration of the dismiss animation.
-             * The dismiss method does this as well, but
-             * in this case it's only called once the animation
-             * has finished.
-             */
-            setCardStatusBarDefault(this.statusBarStyle);
-            this.animation.onFinish(async () => {
-                await this.dismiss(undefined, GESTURE);
-                this.gestureAnimationDismissing = false;
-            });
-        });
+        this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => this.cardOnDismiss(), () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
         this.gesture.enable(true);
     }
     initSheetGesture() {
@@ -572,7 +547,7 @@ export class Modal {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-        });
+        }, () => this.onDragStart(), (detail) => this.onDragMove(detail), (detail) => this.onDragEnd(detail));
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
@@ -669,6 +644,32 @@ export class Modal {
             this.gestureAnimationDismissing = false;
         });
     }
+    cardOnDismiss() {
+        /**
+         * While the gesture animation is finishing
+         * it is possible for a user to tap the backdrop.
+         * This would result in the dismiss animation
+         * being played again. Typically this is avoided
+         * by setting `presented = false` on the overlay
+         * component; however, we cannot do that here as
+         * that would prevent the element from being
+         * removed from the DOM.
+         */
+        this.gestureAnimationDismissing = true;
+        /**
+         * Reset the status bar style as the dismiss animation
+         * starts otherwise the status bar will be the wrong
+         * color for the duration of the dismiss animation.
+         * The dismiss method does this as well, but
+         * in this case it's only called once the animation
+         * has finished.
+         */
+        setCardStatusBarDefault(this.statusBarStyle);
+        this.animation.onFinish(async () => {
+            await this.dismiss(undefined, GESTURE);
+            this.gestureAnimationDismissing = false;
+        });
+    }
     /**
      * Dismiss the modal overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -999,6 +1000,15 @@ export class Modal {
         (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.parentRemovalObserver = undefined;
     }
+    onDragStart() {
+        this.ionDragStart.emit();
+    }
+    onDragMove(detail) {
+        this.ionDragMove.emit(detail);
+    }
+    onDragEnd(detail) {
+        this.ionDragEnd.emit(detail);
+    }
     /**
      * Creates the context object for safe-area utilities.
      */
@@ -1123,20 +1133,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '952cbd52d1fc737332a23d523b02d5fa60abf30a', "no-router": true,
+        return (h(Host, Object.assign({ key: '1a53e8f87532abccc169ca4b24973a39c5f9ba16', "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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '66e3658cfcc2961d99ecc1174f26b1794ceb65e9', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '3d1b9b26daf87374e2029d0e0a7fc09b9257fd77', class: "modal-shadow" }), h("div", Object.assign({ key: 'e652c2b3eb66afa8367d94c3b14ba0e825877a82',
+            }, 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: 'fa8e0a436c0d458331402e1850f87af3dc97b582', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'f00de6027d3c8b5bc93db3b0f7a50a87628d40bb', class: "modal-shadow" }), h("div", Object.assign({ key: 'ae5e33bd6c58e541edb2edbca92420ea02dd5175',
             /*
               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: '41662183450e8ef2f7d96dac2bea5952bad8b7a5', 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: '141cdd8f8522331f4b764e2a4d79ec6596b1eb3a', 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '4aac4e2928929b9e5e59b33c83395182105da529', onSlotchange: this.onSlotChange }))));
+            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: '7de20298b61abee67a16d275c9ebd9a25ce7dd26', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1209,7 +1219,8 @@ export class Modal {
                         "FrameworkDelegate": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::FrameworkDelegate"
+                            "id": "src/interface.d.ts::FrameworkDelegate",
+                            "referenceLocation": "FrameworkDelegate"
                         }
                     }
                 },
@@ -1255,7 +1266,8 @@ export class Modal {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -1278,7 +1290,8 @@ export class Modal {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -1396,7 +1409,8 @@ export class Modal {
                         "ModalHandleBehavior": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
+                            "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior",
+                            "referenceLocation": "ModalHandleBehavior"
                         }
                     }
                 },
@@ -1422,7 +1436,8 @@ export class Modal {
                         "ComponentRef": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentRef"
+                            "id": "src/interface.d.ts::ComponentRef",
+                            "referenceLocation": "ComponentRef"
                         }
                     }
                 },
@@ -1445,12 +1460,13 @@ export class Modal {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentProps",
-                    "resolved": "undefined | { [key: string]: any; }",
+                    "resolved": "T | undefined",
                     "references": {
                         "ComponentProps": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::ComponentProps"
+                            "id": "src/interface.d.ts::ComponentProps",
+                            "referenceLocation": "ComponentProps"
                         }
                     }
                 },
@@ -1747,7 +1763,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1768,7 +1785,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1789,7 +1807,8 @@ export class Modal {
                         "ModalBreakpointChangeEventDetail": {
                             "location": "import",
                             "path": "./modal-interface",
-                            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
+                            "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail",
+                            "referenceLocation": "ModalBreakpointChangeEventDetail"
                         }
                     }
                 }
@@ -1840,7 +1859,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1861,7 +1881,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -1883,6 +1904,65 @@ export class Modal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "ionDragStart",
+                "name": "ionDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the sheet modal or card modal gesture starts."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ionDragMove",
+                "name": "ionDragMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the sheet modal or card modal gesture moves."
+                },
+                "complexType": {
+                    "original": "ModalDragEventDetail",
+                    "resolved": "ModalDragEventDetail",
+                    "references": {
+                        "ModalDragEventDetail": {
+                            "location": "import",
+                            "path": "./modal-interface",
+                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail",
+                            "referenceLocation": "ModalDragEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ionDragEnd",
+                "name": "ionDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the sheet modal or card modal gesture ends."
+                },
+                "complexType": {
+                    "original": "ModalDragEventDetail",
+                    "resolved": "ModalDragEventDetail",
+                    "references": {
+                        "ModalDragEventDetail": {
+                            "location": "import",
+                            "path": "./modal-interface",
+                            "id": "src/components/modal/modal-interface.ts::ModalDragEventDetail",
+                            "referenceLocation": "ModalDragEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -1955,7 +2035,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",
@@ -1981,7 +2062,8 @@ export class Modal {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",