@ionic/core 8.5.5-dev.11744729748.174bf7e0 → 8.5.5-dev.11745934912.1dcd33ea

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

@@ -5,12 +5,12 @@ import { h, Host } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { printIonError, printIonWarning } from "../../utils/logging/index";
+import { printIonWarning } from "../../utils/logging/index";
 import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,7 +19,8 @@ import { getAnimationPosition } from "./animations/utils";
 import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // 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.
  *
  * @part button - Any button element that is displayed inside of the toast.
  * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
@@ -87,11 +88,13 @@ export class Toast {
         this.cssClass = undefined;
         this.duration = config.getNumber('toastDuration', 0);
         this.header = undefined;
+        this.hue = 'subtle';
         this.layout = 'baseline';
         this.message = undefined;
         this.keyboardClose = false;
         this.position = 'bottom';
         this.positionAnchor = undefined;
+        this.shape = undefined;
         this.buttons = undefined;
         this.translucent = false;
         this.animated = true;
@@ -178,11 +181,12 @@ 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, getIonMode(this), el);
+        const animationPosition = getAnimationPosition(position, anchor, mode, el);
         /**
          * Cache the calculated position of the toast, so we can re-use it
          * in the dismiss animation.
@@ -276,6 +280,17 @@ 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
@@ -291,7 +306,7 @@ export class Toast {
             return;
         }
         if (position === 'middle' && positionAnchor !== undefined) {
-            printIonWarning('[ion-toast] - The positionAnchor property is ignored when using position="middle".', this.el);
+            printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
             return undefined;
         }
         if (typeof positionAnchor === 'string') {
@@ -303,7 +318,7 @@ export class Toast {
              */
             const foundEl = document.getElementById(positionAnchor);
             if (foundEl === null) {
-                printIonWarning(`[ion-toast] - An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
+                printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
                 return undefined;
             }
             return foundEl;
@@ -311,7 +326,7 @@ export class Toast {
         if (positionAnchor instanceof HTMLElement) {
             return positionAnchor;
         }
-        printIonWarning('[ion-toast] - Invalid positionAnchor value:', positionAnchor, el);
+        printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
         return undefined;
     }
     async buttonClick(button) {
@@ -337,7 +352,7 @@ export class Toast {
                 }
             }
             catch (e) {
-                printIonError('[ion-toast] - Exception in callButtonHandler:', e);
+                console.error(e);
             }
         }
         return true;
@@ -346,12 +361,12 @@ export class Toast {
         if (buttons.length === 0) {
             return;
         }
-        const mode = getIonMode(this);
+        const theme = getIonTheme(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), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+        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' })))))));
     }
     /**
      * Render the `message` property.
@@ -374,11 +389,13 @@ export class Toast {
         return (h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
     }
     render() {
-        const { layout, el, revealContentToScreenReader, header, message } = this;
+        const { layout, el, revealContentToScreenReader, header, hue, 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,
@@ -389,24 +406,26 @@ export class Toast {
          *  used with one type of button.
          */
         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);
+            printIonWarning('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: 'b9313024f7ccc23bf9dbd81fec858e76c0f0002e', 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, [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: '99390f209983ab846b7b358ac1359a524885b57b', class: wrapperClass }, h("div", { key: '29ff3bc150473d67ac3120449e6abb631ad57366', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'd550e11c28a7ba2025662a40dd3a0d7d9fbdb708', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '83233159baad4ec5db29fbb2beabf4fc2d4d6232', 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"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toast.ios.scss"],
-            "md": ["toast.md.scss"]
+            "md": ["toast.md.scss"],
+            "ionic": ["toast.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toast.ios.css"],
-            "md": ["toast.md.css"]
+            "md": ["toast.md.css"],
+            "ionic": ["toast.ionic.css"]
         };
     }
     static get properties() {
@@ -593,6 +612,24 @@ export class Toast {
                 "attribute": "header",
                 "reflect": false
             },
+            "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."
+                },
+                "attribute": "hue",
+                "reflect": false,
+                "defaultValue": "'subtle'"
+            },
             "layout": {
                 "type": "string",
                 "mutable": false,
@@ -704,6 +741,23 @@ export class Toast {
                 "attribute": "position-anchor",
                 "reflect": false
             },
+            "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."
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
             "buttons": {
                 "type": "unknown",
                 "mutable": false,
@@ -737,7 +791,7 @@ export class Toast {
                 "optional": false,
                 "docs": {
                     "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)."
+                    "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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/toast/toast.md.css

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -97,11 +64,10 @@
   height: 100%;
   outline: none;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: strict;
-  z-index: 1001;
   pointer-events: none;
 }
+
 :host {
   inset-inline-start: 0;
 }
@@ -138,6 +104,7 @@
   box-shadow: var(--box-shadow);
   pointer-events: auto;
 }
+
 .toast-wrapper {
   inset-inline-start: var(--start);
   inset-inline-end: var(--end);
@@ -173,11 +140,6 @@
   justify-content: center;
 }
 
-.toast-icon {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-}
-
 .toast-content {
   min-width: 0;
 }
@@ -203,11 +165,6 @@
   z-index: 0;
 }
 
-.toast-icon,
-.toast-button-icon {
-  font-size: 1.4em;
-}
-
 .toast-button-inner {
   display: flex;
   align-items: center;
@@ -218,6 +175,88 @@
     cursor: pointer;
   }
 }
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 1001;
+}
+
+.toast-icon {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+}
+
+.toast-icon,
+.toast-button-icon {
+  font-size: 1.4em;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use