voyager-ionic-core 8.5.7 → 8.6.1

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

@@ -35,6 +35,54 @@ export class Toast {
         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);
+        /**
+         * 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 mode 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)) {
@@ -77,29 +125,6 @@ export class Toast {
             const { swipeGesture } = this;
             return swipeGesture === 'vertical';
         };
-        this.revealContentToScreenReader = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.color = undefined;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.cssClass = undefined;
-        this.duration = config.getNumber('toastDuration', 0);
-        this.header = undefined;
-        this.layout = 'baseline';
-        this.message = undefined;
-        this.keyboardClose = false;
-        this.position = 'bottom';
-        this.positionAnchor = undefined;
-        this.buttons = undefined;
-        this.translucent = false;
-        this.animated = true;
-        this.icon = undefined;
-        this.htmlAttributes = undefined;
-        this.swipeGesture = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
     }
     swipeGestureChanged() {
         /**
@@ -391,9 +416,9 @@ 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: 'a2216d860255c99337464370dcb12f6125871a50', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'd5adf8bc4c6c52431600033a76c4795689f9b412', class: wrapperClass }, h("div", { key: 'ab694497ae37ceba123217eb48800129b9bebb84', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '224854fa3989ce0eb69416cb5b0cc55fc9f131ea', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'c8e11fb5bdac202987f5c8613a0ebbd42bda946e', class: "toast-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, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-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"; }
@@ -413,6 +438,7 @@ export class Toast {
         return {
             "overlayIndex": {
                 "type": "number",
+                "attribute": "overlay-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -428,11 +454,13 @@ export class Toast {
                         }],
                     "text": ""
                 },
-                "attribute": "overlay-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "delegate": {
                 "type": "unknown",
+                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -453,10 +481,13 @@ export class Toast {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "hasController": {
                 "type": "boolean",
+                "attribute": "has-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -472,12 +503,14 @@ export class Toast {
                         }],
                     "text": ""
                 },
-                "attribute": "has-controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -496,11 +529,13 @@ export class Toast {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "enterAnimation": {
                 "type": "unknown",
+                "attribute": "enter-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -518,10 +553,13 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the toast is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
+                "attribute": "leave-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -539,10 +577,13 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the toast is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "cssClass": {
                 "type": "string",
+                "attribute": "css-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -555,11 +596,13 @@ export class Toast {
                     "tags": [],
                     "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
             },
             "duration": {
                 "type": "number",
+                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -572,12 +615,14 @@ export class Toast {
                     "tags": [],
                     "text": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called."
                 },
-                "attribute": "duration",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "config.getNumber('toastDuration', 0)"
             },
             "header": {
                 "type": "string",
+                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -590,11 +635,13 @@ export class Toast {
                     "tags": [],
                     "text": "Header to be shown in the toast."
                 },
-                "attribute": "header",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": false,
                 "complexType": {
                     "original": "ToastLayout",
@@ -613,12 +660,14 @@ export class Toast {
                     "tags": [],
                     "text": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons."
                 },
-                "attribute": "layout",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'baseline'"
             },
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string | IonicSafeString",
@@ -637,11 +686,13 @@ export class Toast {
                     "tags": [],
                     "text": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "attribute": "message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "keyboardClose": {
                 "type": "boolean",
+                "attribute": "keyboard-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -654,12 +705,14 @@ export class Toast {
                     "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": "false"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "ToastPosition",
@@ -678,12 +731,14 @@ export class Toast {
                     "tags": [],
                     "text": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property."
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "positionAnchor": {
                 "type": "string",
+                "attribute": "position-anchor",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | string",
@@ -701,11 +756,13 @@ export class Toast {
                     "tags": [],
                     "text": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
                 },
-                "attribute": "position-anchor",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "buttons": {
                 "type": "unknown",
+                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "(ToastButton | string)[]",
@@ -723,10 +780,13 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "An array of buttons for the toast."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "translucent": {
                 "type": "boolean",
+                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -739,12 +799,14 @@ export class Toast {
                     "tags": [],
                     "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)."
                 },
-                "attribute": "translucent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -757,12 +819,14 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the toast will animate."
                 },
-                "attribute": "animated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -775,11 +839,13 @@ export class Toast {
                     "tags": [],
                     "text": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons"
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "htmlAttributes": {
                 "type": "unknown",
+                "attribute": "html-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: any }",
@@ -791,10 +857,13 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the toast."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "swipeGesture": {
                 "type": "string",
+                "attribute": "swipe-gesture",
                 "mutable": false,
                 "complexType": {
                     "original": "ToastSwipeGestureDirection",
@@ -813,11 +882,13 @@ export class Toast {
                     "tags": [],
                     "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
                 },
-                "attribute": "swipe-gesture",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "isOpen": {
                 "type": "boolean",
+                "attribute": "is-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -830,12 +901,14 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast 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",
@@ -848,7 +921,8 @@ export class Toast {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked."
                 },
-                "attribute": "trigger",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };