@ionic/core 8.4.2-dev.11736797843.16cc5058 → 8.4.2-dev.11739377372.17be7c08

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

@@ -12,7 +12,7 @@ import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, creat
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
@@ -23,7 +23,8 @@ import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed inside of the `.modal-content` element.
  *
@@ -41,98 +42,6 @@ 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;
-        /**
-         * 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) {
@@ -170,6 +79,32 @@ 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.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;
+        this.shape = undefined;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -368,6 +303,7 @@ export class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
+            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -463,6 +399,7 @@ export class Modal {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
+            staticBackdropOpacity: getIonTheme(this) === 'ionic',
         }));
         ani.progressStart(true, 1);
         const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
@@ -470,7 +407,7 @@ export class Modal {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-        });
+        }, getIonTheme(this) === 'ionic');
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
@@ -627,37 +564,52 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11167): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
-        const mode = getIonMode(this);
-        const isCardModal = presentingElement !== undefined && mode === 'ios';
+        const theme = getIonTheme(this);
+        const isCardModal = presentingElement !== undefined && theme === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const shape = this.getShape();
+        return (h(Host, Object.assign({ key: '900cb0c7c99bf9c6cd74d87826318938571dff8f', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [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: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), h("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, '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: '4f72dfb1afc92f4f405530ba3c75843ccc645b5f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '5a17ac89097f522191af09ae70b5f962f2dc07fd', class: "modal-shadow" }), h("div", Object.assign({ key: '94bc47c8fc046f82e39e86ce65294089006638e2',
             /*
               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: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', 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: 'a80bed25fe327dfe7d0f69425892faec601e2445', 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: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
+            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: '77abe39febab091fee80d859a47108c1ee5c2377' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["modal.ios.scss"],
-            "md": ["modal.md.scss"]
+            "md": ["modal.md.scss"],
+            "ionic": ["modal.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["modal.ios.css"],
-            "md": ["modal.md.css"]
+            "md": ["modal.md.css"],
+            "ionic": ["modal.ionic.css"]
         };
     }
     static get properties() {
@@ -679,8 +631,6 @@ export class Modal {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -702,8 +652,6 @@ export class Modal {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -729,9 +677,7 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "keyboardClose": {
                 "type": "boolean",
@@ -747,8 +693,6 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "true"
@@ -772,9 +716,7 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is presented."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -795,9 +737,7 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is dismissed."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "breakpoints": {
                 "type": "unknown",
@@ -812,9 +752,7 @@ 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
+                }
             },
             "initialBreakpoint": {
                 "type": "number",
@@ -830,8 +768,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "initial-breakpoint",
                 "reflect": false
             },
@@ -849,8 +785,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "backdrop-breakpoint",
                 "reflect": false,
                 "defaultValue": "0"
@@ -869,8 +803,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "handle",
                 "reflect": false
             },
@@ -894,8 +826,6 @@ 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)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "handle-behavior",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -923,8 +853,6 @@ export class Modal {
                         }],
                     "text": "The component to display inside of the modal."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "component",
                 "reflect": false
             },
@@ -950,9 +878,7 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": "The data to pass to the modal component."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "cssClass": {
                 "type": "string",
@@ -971,8 +897,6 @@ export class Modal {
                         }],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -990,8 +914,6 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will be dismissed when the backdrop is clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1010,8 +932,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-backdrop",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1030,8 +950,6 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will animate."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1054,9 +972,7 @@ 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",
@@ -1071,9 +987,7 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the modal."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "isOpen": {
                 "type": "boolean",
@@ -1089,8 +1003,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1109,8 +1021,6 @@ export class Modal {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "trigger",
                 "reflect": false
             },
@@ -1128,8 +1038,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "keep-contents-mounted",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1148,8 +1056,6 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "focus-trap",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1173,11 +1079,26 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "can-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a modal with slightly rounded corners,\n`\"round\"` for a modal with fully rounded corners, or `\"rectangular\"`\nfor a modal without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }