@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786730389.1a1927bf

package/dist/collection/components/toast/toast.js

@@ -10,7 +10,7 @@ import { GESTURE, createDelegateController, createTriggerController, dismiss, ev
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,8 +19,7 @@ import { getAnimationPosition } from "./animations/utils";
 import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part wrapper - The outer wrapper for the toast overlay.
  * @part container - Groups the icon, content, and buttons.
@@ -32,110 +31,126 @@ import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
  * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  */
 export class Toast {
-    constructor() {
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.presented = false;
-        /**
-         * When `true`, content inside of .toast-content
-         * will have aria-hidden elements removed causing
-         * screen readers to announce the remaining content.
-         */
-        this.revealContentToScreenReader = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * How many milliseconds to wait before hiding the toast. By default, it will show
-         * until `dismiss()` is called.
-         */
-        this.duration = config.getNumber('toastDuration', 0);
-        /**
-         * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for
-         * a toast with muted, subtle colors.
-         *
-         * Only applies to the `ionic` theme.
-         */
-        this.hue = 'subtle';
-        /**
-         * Defines how the message and buttons are laid out in the toast.
-         * 'baseline': The message and the buttons will appear on the same line.
-         * Message text may wrap within the message container.
-         * 'stacked': The buttons containers and message will stack on top
-         * of each other. Use this if you have long text in your buttons.
-         */
-        this.layout = 'baseline';
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = false;
-        /**
-         * The starting position of the toast on the screen. Can be tweaked further
-         * using the `positionAnchor` property.
-         */
-        this.position = 'bottom';
-        /**
-         * If `true`, the toast will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * If `true`, the toast will animate.
-         */
-        this.animated = true;
-        /**
-         * If `true`, the toast will open. If `false`, the toast will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the toastController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the toast dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
-        /**
-         * Create a new swipe gesture so Toast
-         * can be swiped to dismiss.
-         */
-        this.createSwipeGesture = (toastPosition) => {
-            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-                /**
-                 * If the gesture completed then
-                 * we should dismiss the toast.
-                 */
-                this.dismiss(undefined, GESTURE);
-            }));
-            gesture.enable(true);
-        };
-        /**
-         * Destroy an existing swipe gesture
-         * so Toast can no longer be swiped to dismiss.
-         */
-        this.destroySwipeGesture = () => {
-            const { gesture } = this;
-            if (gesture === undefined) {
-                return;
-            }
-            gesture.destroy();
-            this.gesture = undefined;
-        };
-        /**
-         * Returns `true` if swipeGesture
-         * is configured to a value that enables the swipe behavior.
-         * Returns `false` otherwise.
-         */
-        this.prefersSwipeGesture = () => {
-            const { swipeGesture } = this;
-            return swipeGesture === 'vertical';
-        };
-    }
+    delegateController = createDelegateController(this);
+    lockController = createLockController();
+    triggerController = createTriggerController();
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    durationTimeout;
+    gesture;
+    /**
+     * Holds the position of the toast calculated in the present
+     * animation, to be passed along to the dismiss animation so
+     * we don't have to calculate the position twice.
+     */
+    lastPresentedPosition;
+    presented = false;
+    /**
+     * When `true`, content inside of .toast-content
+     * will have aria-hidden elements removed causing
+     * screen readers to announce the remaining content.
+     */
+    revealContentToScreenReader = false;
+    el;
+    /**
+     * @internal
+     */
+    overlayIndex;
+    /** @internal */
+    delegate;
+    /** @internal */
+    hasController = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * Animation to use when the toast is presented.
+     */
+    enterAnimation;
+    /**
+     * Animation to use when the toast is dismissed.
+     */
+    leaveAnimation;
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are
+     * provided they should be separated by spaces.
+     */
+    cssClass;
+    /**
+     * How many milliseconds to wait before hiding the toast. By default, it will show
+     * until `dismiss()` is called.
+     */
+    duration = config.getNumber('toastDuration', 0);
+    /**
+     * Header to be shown in the toast.
+     */
+    header;
+    /**
+     * Defines how the message and buttons are laid out in the toast.
+     * 'baseline': The message and the buttons will appear on the same line.
+     * Message text may wrap within the message container.
+     * 'stacked': The buttons containers and message will stack on top
+     * of each other. Use this if you have long text in your buttons.
+     */
+    layout = 'baseline';
+    /**
+     * Message to be shown in the toast.
+     * This property accepts custom HTML as a string.
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    message;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    keyboardClose = false;
+    /**
+     * The starting position of the toast on the screen. Can be tweaked further
+     * using the `positionAnchor` property.
+     */
+    position = 'bottom';
+    /**
+     * The element to anchor the toast's position to. Can be set as a direct reference
+     * or the ID of the element. With `position="bottom"`, the toast will sit above the
+     * chosen element. With `position="top"`, the toast will sit below the chosen element.
+     * With `position="middle"`, the value of `positionAnchor` is ignored.
+     */
+    positionAnchor;
+    /**
+     * An array of buttons for the toast.
+     */
+    buttons;
+    /**
+     * If `true`, the toast will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    translucent = false;
+    /**
+     * If `true`, the toast will animate.
+     */
+    animated = true;
+    /**
+     * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.
+     * https://ionic.io/ionicons
+     */
+    icon;
+    /**
+     * Additional attributes to pass to the toast.
+     */
+    htmlAttributes;
+    /**
+     * If set to 'vertical', the Toast can be dismissed with
+     * a swipe gesture. The swipe direction is determined by
+     * the value of the `position` property:
+     * `top`: The Toast can be swiped up to dismiss.
+     * `bottom`: The Toast can be swiped down to dismiss.
+     * `middle`: The Toast can be swiped up or down to dismiss.
+     */
+    swipeGesture;
     swipeGestureChanged() {
         /**
          * If the Toast is presented, then we need to destroy
@@ -163,6 +178,14 @@ export class Toast {
             this.createSwipeGesture(this.lastPresentedPosition);
         }
     }
+    /**
+     * If `true`, the toast will open. If `false`, the toast will close.
+     * Use this if you need finer grained control over presentation, otherwise
+     * just use the toastController or the `trigger` property.
+     * Note: `isOpen` will not automatically be set back to `false` when
+     * the toast dismisses. You will need to do that in your code.
+     */
+    isOpen = false;
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -171,12 +194,53 @@ export class Toast {
             this.dismiss();
         }
     }
+    /**
+     * An ID corresponding to the trigger element that
+     * causes the toast to open when clicked.
+     */
+    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
+    /**
+     * Emitted after the toast has presented.
+     */
+    didPresent;
+    /**
+     * Emitted before the toast has presented.
+     */
+    willPresent;
+    /**
+     * Emitted before the toast has dismissed.
+     */
+    willDismiss;
+    /**
+     * Emitted after the toast has dismissed.
+     */
+    didDismiss;
+    /**
+     * Emitted after the toast has presented.
+     * Shorthand for ionToastWillDismiss.
+     */
+    didPresentShorthand;
+    /**
+     * Emitted before the toast has presented.
+     * Shorthand for ionToastWillPresent.
+     */
+    willPresentShorthand;
+    /**
+     * Emitted before the toast has dismissed.
+     * Shorthand for ionToastWillDismiss.
+     */
+    willDismissShorthand;
+    /**
+     * Emitted after the toast has dismissed.
+     * Shorthand for ionToastDidDismiss.
+     */
+    didDismissShorthand;
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -185,8 +249,7 @@ export class Toast {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        var _a;
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+        if (!this.htmlAttributes?.id) {
             setOverlayId(this.el);
         }
     }
@@ -213,18 +276,17 @@ export class Toast {
      * Present the toast overlay after it has been created.
      */
     async present() {
-        const mode = getIonMode(this);
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
         const { el, position } = this;
         const anchor = this.getAnchorElement();
-        const animationPosition = getAnimationPosition(position, anchor, mode, el);
+        const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
         /**
          * Cache the calculated position of the toast, so we can re-use it
          * in the dismiss animation.
          */
         this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, undefined, {
+        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
             position,
             top: animationPosition.top,
             bottom: animationPosition.bottom,
@@ -261,7 +323,6 @@ export class Toast {
      * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
-        var _a, _b;
         const unlock = await this.lockController.lock();
         const { durationTimeout, position, lastPresentedPosition } = this;
         if (durationTimeout) {
@@ -275,8 +336,8 @@ export class Toast {
          */
         {
             position,
-            top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
-            bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
+            top: lastPresentedPosition?.top ?? '',
+            bottom: lastPresentedPosition?.bottom ?? '',
         });
         if (dismissed) {
             this.delegateController.removeViewFromDom();
@@ -311,17 +372,6 @@ export class Toast {
             : [];
         return buttons;
     }
-    getShape() {
-        const { shape } = this;
-        // TODO(ROU-11300): Remove theme check when shapes are defined for all themes.
-        if (getIonTheme(this) !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
     /**
      * Returns the element specified by the positionAnchor prop,
      * or undefined if prop's value is an ID string and the element
@@ -372,7 +422,7 @@ export class Toast {
         return Promise.resolve();
     }
     async callButtonHandler(button) {
-        if (button === null || button === void 0 ? void 0 : button.handler) {
+        if (button?.handler) {
             // a handler has been provided, execute it
             // pass the handler the values from the inputs
             try {
@@ -388,16 +438,58 @@ export class Toast {
         }
         return true;
     }
+    dispatchCancelHandler = (ev) => {
+        const role = ev.detail.role;
+        if (isCancel(role)) {
+            const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
+            this.callButtonHandler(cancelButton);
+        }
+    };
+    /**
+     * Create a new swipe gesture so Toast
+     * can be swiped to dismiss.
+     */
+    createSwipeGesture = (toastPosition) => {
+        const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
+            /**
+             * If the gesture completed then
+             * we should dismiss the toast.
+             */
+            this.dismiss(undefined, GESTURE);
+        }));
+        gesture.enable(true);
+    };
+    /**
+     * Destroy an existing swipe gesture
+     * so Toast can no longer be swiped to dismiss.
+     */
+    destroySwipeGesture = () => {
+        const { gesture } = this;
+        if (gesture === undefined) {
+            return;
+        }
+        gesture.destroy();
+        this.gesture = undefined;
+    };
+    /**
+     * Returns `true` if swipeGesture
+     * is configured to a value that enables the swipe behavior.
+     * Returns `false` otherwise.
+     */
+    prefersSwipeGesture = () => {
+        const { swipeGesture } = this;
+        return swipeGesture === 'vertical';
+    };
     renderButtons(buttons, side) {
         if (buttons.length === 0) {
             return;
         }
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const buttonGroupsClasses = {
             'toast-button-group': true,
             [`toast-button-group-${side}`]: true,
         };
-        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), theme === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", { ...b.htmlAttributes, type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }, h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
     }
     /**
      * Render the `message` property.
@@ -420,13 +512,11 @@ export class Toast {
         return (h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
     }
     render() {
-        const { layout, el, revealContentToScreenReader, header, hue, message } = this;
+        const { layout, el, revealContentToScreenReader, header, message } = this;
         const allButtons = this.getButtons();
         const startButtons = allButtons.filter((b) => b.side === 'start');
         const endButtons = allButtons.filter((b) => b.side !== 'start');
-        const theme = getIonTheme(this);
         const mode = getIonMode(this);
-        const shape = this.getShape();
         const wrapperClass = {
             'toast-wrapper': true,
             [`toast-${this.position}`]: true,
@@ -439,24 +529,27 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'f0d62f099dd68f8f541110a60695c2a083c6a4d5', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, { key: '2acb2cd2e12ea0082986495929e4a596d4da2f38', tabindex: "-1", ...this.htmlAttributes, style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '054ba519f93892a000832990097b265887272da4', class: wrapperClass, part: "wrapper" }, h("div", { key: '45fa83c1711ab98e81b8b00e0af3af436eaa5264', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'eb4143899be5259e3d933461bc4ca593c8b9dd9b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'bae8a899abb9bcd4895df45def79bfe3d704e6e4', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, {
+                [mode]: true,
+                ...getClassMap(this.cssClass),
+                'overlay-hidden': true,
+                'toast-translucent': this.translucent,
+            }), onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { key: '8b24ba5d3d51d1ab94b9bf6bb5d6e4b8bb3248a7', class: wrapperClass, part: "wrapper" }, h("div", { key: 'e1ebdf4f0425cc7b1e2688667ee9a2b3c545804a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '552b1ab8f4e72882cc8e878579c7a594119677e1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '8ac8d64f632fbedadb180132c83043474466bee0', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toast.ios.scss"],
-            "md": ["toast.md.scss"],
-            "ionic": ["toast.ionic.scss"]
+            "md": ["toast.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toast.ios.css"],
-            "md": ["toast.md.css"],
-            "ionic": ["toast.ionic.css"]
+            "md": ["toast.md.css"]
         };
     }
     static get properties() {
@@ -665,26 +758,6 @@ export class Toast {
                 "reflect": false,
                 "attribute": "header"
             },
-            "hue": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'bold' | 'subtle'",
-                    "resolved": "\"bold\" | \"subtle\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"bold\"` for a toast with vibrant, bold colors or to `\"subtle\"` for\na toast with muted, subtle colors.\n\nOnly applies to the `ionic` theme."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hue",
-                "defaultValue": "'subtle'"
-            },
             "layout": {
                 "type": "string",
                 "mutable": false,
@@ -809,25 +882,6 @@ export class Toast {
                 "reflect": false,
                 "attribute": "position-anchor"
             },
-            "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 toast with slightly rounded corners,\n`\"round\"` for a toast with fully rounded corners, or `\"rectangular\"`\nfor a toast without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape"
-            },
             "buttons": {
                 "type": "unknown",
                 "mutable": false,
@@ -864,7 +918,7 @@ export class Toast {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the toast will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,