@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.4

package/dist/esm/ic-theme.entry.js.map

@@ -1 +1 @@
-{"file":"ic-theme.entry.js","mappings":";;;;MA0Ba,KAAK;;;;IAoBR,4BAAuB,GAAG;MAChC,IACE,uBAAuB,EAAE,GAAG,0BAA0B;QACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;KACF,CAAC;iBArDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAOD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAyCD,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":[],"sources":["src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"ic-theme.entry.js","mappings":";;;;MAIa,KAAK;IACd;;;QACI,IAAI,CAAC,uBAAuB,GAAG;YAC3B,IAAI,uBAAuB,EAAE,GAAG,0BAA0B;gBACtD,uBAAuB,EAAE,GAAG,0BAA0B,EAAE;gBACxD,OAAO,CAAC,IAAI,CAAC,2TAA2T,CAAC,CAAC;aAC7U;SACJ,CAAC;QACF,IAAI,CAAC,aAAa,GAAG;YACjB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;gBACrB,IAAI,SAAS,GAAG,IAAI,CAAC;gBACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzC,IAAI,SAAS,KAAK,GAAG,EAAE;oBACnB,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACrC;qBACI,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;oBACtC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACxC;gBACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAChC;SACJ,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,CAAC,SAAS;YAC1B,IAAI,SAAS,KAAK,IAAI,EAAE;gBACpB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,MAAM,eAAe,GAAG,uBAAuB,EAAE,CAAC;gBAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;aACtE;SACJ,CAAC;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACrB;IACD,qBAAqB;QACjB,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IACD,iBAAiB;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IACD,MAAM;QACF,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACxB;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-theme/ic-theme.js"],"sourcesContent":["import { Host, h, } from \"@stencil/core\";\nimport { getThemeForegroundColor, hexToRgba, rgbaStrToObj, } from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from \"../../utils/constants\";\nexport class Theme {\n    constructor() {\n        this.checkThemeColorContrast = () => {\n            if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n                getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {\n                console.warn(`The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);\n            }\n        };\n        this.setThemeColor = () => {\n            if (this.color !== null) {\n                let colorRGBA = null;\n                const firstChar = this.color.slice(0, 1);\n                if (firstChar === \"#\") {\n                    colorRGBA = hexToRgba(this.color);\n                }\n                else if (firstChar.toLowerCase() === \"r\") {\n                    colorRGBA = rgbaStrToObj(this.color);\n                }\n                this.setThemeRGBA(colorRGBA);\n            }\n        };\n        this.setThemeRGBA = (colorRGBA) => {\n            if (colorRGBA !== null) {\n                const root = document.documentElement;\n                root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n                root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n                root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n                root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n                this.checkThemeColorContrast();\n                const foregroundColor = getThemeForegroundColor();\n                this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n            }\n        };\n        this.color = null;\n    }\n    watchColorPropHandler() {\n        this.setThemeColor();\n    }\n    componentWillLoad() {\n        this.setThemeColor();\n    }\n    render() {\n        return h(Host, null);\n    }\n    static get is() { return \"ic-theme\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The theme colour. Can be a hex value e.g. \\\"#ff0000\\\", RGB e.g. \\\"rgb(255, 0, 0)\\\", or RGBA e.g. \\\"rgba(255, 0, 0, 1)\\\".\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": false,\n                \"defaultValue\": \"null\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"themeChange\",\n                \"name\": \"themeChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when the theme is changed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcTheme\",\n                    \"resolved\": \"{ mode: IcThemeForeground; color: IcColorRGB; }\",\n                    \"references\": {\n                        \"IcTheme\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcTheme\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"color\",\n                \"methodName\": \"watchColorPropHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-theme.js.map\n"],"version":3}

package/dist/esm/ic-toast-region.entry.js

@@ -1,42 +1,55 @@
-import { r as registerInstance, h, g as getElement } from './index-5e4f5b3b.js';
+import { r as registerInstance, h, g as getElement } from './index-93509377.js';
 
 const ToastRegion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.pendingVisibility = [];
-  }
-  handleDismissedToast() {
-    var _a;
-    if (this.pendingVisibility.length > 0) {
-      this.pendingVisibility[0]
-        .setVisible()
-        .then((res) => (this.previouslyFocused = res));
-      this.pendingVisibility.shift();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pendingVisibility = [];
+        this.showToast = (toast) => {
+            const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
+            if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
+                toast.setVisible().then((res) => (this.previouslyFocused = res));
+            }
+            if (visibleToasts.length > 0)
+                this.pendingVisibility.push(toast);
+        };
+        this.openToast = undefined;
     }
-    else {
-      if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
-        this.previouslyFocused.setFocus();
-      }
-      else
-        (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+    watchOpenToastHandler(newValue) {
+        if (this.openToast !== undefined) {
+            this.showToast(newValue);
+            this.openToast = undefined;
+        }
     }
-  }
-  /**
-   * Handles setting the visibility of various toasts based on what is already visible
-   * @param toast The toast element being requested to display
-   */
-  async setVisible(toast) {
-    const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
-    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
-      toast.setVisible().then((res) => (this.previouslyFocused = res));
+    handleDismissedToast() {
+        var _a;
+        if (this.pendingVisibility.length > 0) {
+            this.pendingVisibility[0]
+                .setVisible()
+                .then((res) => (this.previouslyFocused = res));
+            this.pendingVisibility.shift();
+        }
+        else {
+            if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
+                this.previouslyFocused.setFocus();
+            }
+            else
+                (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
-    if (visibleToasts.length > 0)
-      this.pendingVisibility.push(toast);
-  }
-  render() {
-    return h("slot", null);
-  }
-  get el() { return getElement(this); }
+    /**
+     * @deprecated Use openToast prop to display toast instead.
+     * @param {HTMLIcToastElement} toast The toast component to display
+     */
+    async setVisible(toast) {
+        this.showToast(toast);
+    }
+    render() {
+        return h("slot", null);
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "openToast": ["watchOpenToastHandler"]
+    }; }
 };
 
 export { ToastRegion as ic_toast_region };

package/dist/esm/ic-toast-region.entry.js.map

@@ -1 +1 @@
-{"file":"ic-toast-region.entry.js","mappings":";;MAIa,WAAW;EADxB;;IAEU,sBAAiB,GAAyB,EAAE,CAAC;GAqCtD;EA/BC,oBAAoB;;IAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SACtB,UAAU,EAAE;SACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;MACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;SAAM;MACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;QACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;OAC9D;;QAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACxC;GACF;;;;;EAOD,MAAM,UAAU,CAAC,KAAyB;IACxC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;IACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;MACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;KAClE;IACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;MAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAClE;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;","names":[],"sources":["src/components/ic-toast-region/ic-toast-region.tsx"],"sourcesContent":["import { Component, Element, h, Listen, Method } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n  private pendingVisibility: HTMLIcToastElement[] = [];\n  private previouslyFocused: HTMLElement;\n\n  @Element() el: HTMLIcToastRegionElement;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismissedToast(): void {\n    if (this.pendingVisibility.length > 0) {\n      this.pendingVisibility[0]\n        .setVisible()\n        .then((res) => (this.previouslyFocused = res));\n      this.pendingVisibility.shift();\n    } else {\n      if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n        (this.previouslyFocused as IcFocusableComponents).setFocus();\n      } else this.previouslyFocused?.focus();\n    }\n  }\n\n  /**\n   * Handles setting the visibility of various toasts based on what is already visible\n   * @param toast The toast element being requested to display\n   */\n  @Method()\n  async setVisible(toast: HTMLIcToastElement): Promise<void> {\n    const visibleToasts = Array.from(\n      document.querySelectorAll(\"ic-toast\")\n    ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n      toast.setVisible().then((res) => (this.previouslyFocused = res));\n    }\n    if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"ic-toast-region.entry.js","mappings":";;MACa,WAAW;IACpB;;QACI,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,CAAC,KAAK;YACnB,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;YACvI,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;gBAClE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;aACpE;YACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;gBACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1C,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC9B;IACD,qBAAqB,CAAC,QAAQ;QAC1B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;SAC9B;KACJ;IACD,oBAAoB;QAChB,IAAI,EAAE,CAAC;QACP,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;iBACpB,UAAU,EAAE;iBACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;SAClC;aACI;YACD,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAChE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,CAAC;aACrC;;gBAEG,CAAC,EAAE,GAAG,IAAI,CAAC,iBAAiB,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC;SACrF;KACJ;;;;;IAKD,MAAM,UAAU,CAAC,KAAK;QAClB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;KACzB;IACD,MAAM;QACF,OAAO,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;KAC1B;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-toast-region/ic-toast-region.js"],"sourcesContent":["import { h, } from \"@stencil/core\";\nexport class ToastRegion {\n    constructor() {\n        this.pendingVisibility = [];\n        this.showToast = (toast) => {\n            const visibleToasts = Array.from(document.querySelectorAll(\"ic-toast\")).filter((el) => window.getComputedStyle(el).display !== \"none\");\n            if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n                toast.setVisible().then((res) => (this.previouslyFocused = res));\n            }\n            if (visibleToasts.length > 0)\n                this.pendingVisibility.push(toast);\n        };\n        this.openToast = undefined;\n    }\n    watchOpenToastHandler(newValue) {\n        if (this.openToast !== undefined) {\n            this.showToast(newValue);\n            this.openToast = undefined;\n        }\n    }\n    handleDismissedToast() {\n        var _a;\n        if (this.pendingVisibility.length > 0) {\n            this.pendingVisibility[0]\n                .setVisible()\n                .then((res) => (this.previouslyFocused = res));\n            this.pendingVisibility.shift();\n        }\n        else {\n            if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n                this.previouslyFocused.setFocus();\n            }\n            else\n                (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n    }\n    /**\n     * @deprecated Use openToast prop to display toast instead.\n     * @param {HTMLIcToastElement} toast The toast component to display\n     */\n    async setVisible(toast) {\n        this.showToast(toast);\n    }\n    render() {\n        return h(\"slot\", null);\n    }\n    static get is() { return \"ic-toast-region\"; }\n    static get properties() {\n        return {\n            \"openToast\": {\n                \"type\": \"unknown\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"HTMLIcToastElement\",\n                    \"resolved\": \"HTMLIcToastElement\",\n                    \"references\": {\n                        \"HTMLIcToastElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLIcToastElement\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The toast element to be displayed.\"\n                }\n            }\n        };\n    }\n    static get methods() {\n        return {\n            \"setVisible\": {\n                \"complexType\": {\n                    \"signature\": \"(toast: HTMLIcToastElement) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"toast\",\n                            \"type\": \"HTMLIcToastElement\",\n                            \"docs\": \"The toast component to display\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"HTMLIcToastElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLIcToastElement\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"\",\n                    \"tags\": [{\n                            \"name\": \"deprecated\",\n                            \"text\": \"Use openToast prop to display toast instead.\"\n                        }, {\n                            \"name\": \"param\",\n                            \"text\": \"toast The toast component to display\"\n                        }]\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"openToast\",\n                \"methodName\": \"watchOpenToastHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"icDismiss\",\n                \"method\": \"handleDismissedToast\",\n                \"target\": undefined,\n                \"capture\": true,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=ic-toast-region.js.map\n"],"version":3}

package/dist/esm/ic-toast.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5e4f5b3b.js';
-import { c as closeIcon } from './close-icon-539ec8d1.js';
-import { i as isSlotUsed, V as VARIANT_ICONS, a as onComponentRequiredPropUndefined, H as getSlot } from './helpers-10f9f399.js';
-import { I as IcThemeForegroundEnum } from './types-b2398b37.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93509377.js';
+import { c as closeIcon } from './close-icon-c9e09475.js';
+import { i as isSlotUsed, V as VARIANT_ICONS, a as onComponentRequiredPropUndefined, K as getSlot, d as isPropDefined } from './helpers-268c2b7f.js';
+import { I as IcThemeForegroundEnum } from './types-f605c21c.js';
 
 const icToastCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out;z-index:var(--ic-z-index-toast)}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant=\"neutral\"]) .toast-icon svg,::slotted(svg){fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant=\"warning\"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant=\"error\"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant=\"success\"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}";
 
@@ -9,154 +9,155 @@ const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
 const TOAST_HEADING_CHAR_LIMIT = 70;
 const TOAST_MESSAGE_CHAR_LIMIT = 140;
 const Toast = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icDismiss = createEvent(this, "icDismiss", 7);
-    this.interactiveElements = [];
-    this.dismissAction = () => {
-      this.icDismiss.emit();
-    };
-    this.handleProgressChange = () => {
-      this.timerProgress -=
-        (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
-    };
-    this.timerProgress = 100;
-    this.visible = false;
-    this.autoDismissTimeout = 5000;
-    this.dismissButtonAriaLabel = "dismiss";
-    this.dismissMode = "manual";
-    this.heading = undefined;
-    this.message = undefined;
-    this.neutralIconAriaLabel = undefined;
-    this.variant = undefined;
-  }
-  disconnectedCallback() {
-    window.clearTimeout(this.dismissTimeout);
-    window.clearInterval(this.timerRefreshInterval);
-  }
-  componentWillLoad() {
-    var _a, _b;
-    this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
-    if (this.autoDismissTimeout < 5000)
-      this.autoDismissTimeout = 5000;
-    if (isSlotUsed(this.el, "action"))
-      this.dismissMode = "manual";
-    this.isManual = this.dismissMode === "manual";
-    if (isSlotUsed(this.el, "neutral-icon"))
-      this.variant = "neutral";
-    if (this.variant === "neutral") {
-      this.neutralVariantLabel =
-        (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icDismiss = createEvent(this, "icDismiss", 7);
+        this.interactiveElements = [];
+        this.dismissAction = () => {
+            this.icDismiss.emit();
+        };
+        this.handleProgressChange = () => {
+            this.timerProgress -=
+                (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
+        };
+        this.timerProgress = 100;
+        this.visible = false;
+        this.autoDismissTimeout = 5000;
+        this.dismissButtonAriaLabel = "dismiss";
+        this.dismissMode = "manual";
+        this.heading = undefined;
+        this.message = undefined;
+        this.neutralIconAriaLabel = undefined;
+        this.variant = undefined;
     }
-    if (this.isManual) {
-      this.el.setAttribute("aria-label", this.variant
-        ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel
-        : this.heading);
-      (this.variant || this.message) &&
-        this.el.setAttribute("aria-description", this.variant
-          ? `${this.heading}${this.message !== undefined ? `. ${this.message}` : ""}`
-          : this.message);
+    disconnectedCallback() {
+        window.clearTimeout(this.dismissTimeout);
+        window.clearInterval(this.timerRefreshInterval);
     }
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
-    const actionContent = getSlot(this.el, "action");
-    const dismissButton = this.el.shadowRoot.querySelector("ic-button");
-    if (actionContent)
-      this.interactiveElements.push(actionContent);
-    if (dismissButton)
-      this.interactiveElements.push(dismissButton);
-  }
-  handleDismiss() {
-    this.visible = false;
-    clearInterval(this.timerRefreshInterval);
-    this.timerProgress = 100;
-  }
-  handleKeyboard(ev) {
-    if (this.isManual && this.visible) {
-      switch (ev.key) {
-        case "Tab":
-          ev.preventDefault();
-          this.findNextInteractiveElement(ev.shiftKey).setFocus();
-          break;
-        case "Escape":
-          !ev.repeat && this.dismissAction();
-          ev.stopImmediatePropagation();
-          break;
-      }
+    componentWillLoad() {
+        var _a, _b;
+        this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
+        if (this.autoDismissTimeout < 5000)
+            this.autoDismissTimeout = 5000;
+        if (isSlotUsed(this.el, "action"))
+            this.dismissMode = "manual";
+        this.isManual = this.dismissMode === "manual";
+        if (isSlotUsed(this.el, "neutral-icon"))
+            this.variant = "neutral";
+        if (this.variant === "neutral") {
+            this.neutralVariantLabel =
+                (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
+        }
+        if (this.isManual) {
+            const toastMessage = isPropDefined(this.message)
+                ? `. ${this.message}`
+                : "";
+            this.el.setAttribute("aria-label", this.variant
+                ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel
+                : this.heading);
+            (this.variant || this.message) &&
+                this.el.setAttribute("aria-description", this.variant ? `${this.heading}${toastMessage}` : this.message);
+        }
     }
-  }
-  handleTimer(ev) {
-    if (!this.isManual) {
-      switch (ev.type) {
-        case "mouseenter":
-          window.clearTimeout(this.dismissTimeout);
-          window.clearInterval(this.timerRefreshInterval);
-          this.timerProgress = 100;
-          break;
-        case "mouseleave":
-          this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
-          this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
-          break;
-      }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
+        const actionContent = getSlot(this.el, "action");
+        const dismissButton = this.el.shadowRoot.querySelector("ic-button");
+        if (actionContent)
+            this.interactiveElements.push(actionContent);
+        if (dismissButton)
+            this.interactiveElements.push(dismissButton);
     }
-  }
-  /**
-   * Used to display the individual toast
-   * @returns The element that previously had focus before the toast appeared
-   */
-  async setVisible() {
-    if (!this.visible)
-      this.visible = true;
-    if (!this.isManual) {
-      this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
-      this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
-      return null;
+    handleDismiss() {
+        this.visible = false;
+        clearInterval(this.timerRefreshInterval);
+        this.timerProgress = 100;
     }
-    else {
-      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
-      return document.activeElement;
+    handleKeyboard(ev) {
+        if (this.isManual && this.visible) {
+            switch (ev.key) {
+                case "Tab":
+                    ev.preventDefault();
+                    this.findNextInteractiveElement(ev.shiftKey).setFocus();
+                    break;
+                case "Escape":
+                    !ev.repeat && this.dismissAction();
+                    ev.stopImmediatePropagation();
+                    break;
+            }
+        }
     }
-  }
-  handleLongText(headingTooLong, messageTooLong) {
-    if (messageTooLong || headingTooLong) {
-      console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+    handleTimer(ev) {
+        if (!this.isManual) {
+            switch (ev.type) {
+                case "mouseenter":
+                    window.clearTimeout(this.dismissTimeout);
+                    window.clearInterval(this.timerRefreshInterval);
+                    this.timerProgress = 100;
+                    break;
+                case "mouseleave":
+                    this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+                    this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+                    break;
+            }
+        }
     }
-  }
-  findNextInteractiveElement(isBackwards) {
-    const first = this.interactiveElements[0];
-    const last = this.interactiveElements[this.interactiveElements.length - 1];
-    const source = isBackwards ? first : last;
-    const target = isBackwards ? last : first;
-    if (this.isActive(source))
-      return target;
-    let currentIndex;
-    const found = this.interactiveElements.some((el, index) => {
-      if (!this.isActive(el))
-        return false;
-      currentIndex = index;
-      return true;
-    });
-    if (!found)
-      return first;
-    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
-  }
-  isActive(targetEl) {
-    if (targetEl === this.el)
-      return !!this.el.shadowRoot.activeElement;
-    return document.activeElement === targetEl;
-  }
-  render() {
-    const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-    return (h(Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, h("div", { class: "container" }, variant && visible && (h("div", { class: "toast-icon-container" }, h("div", { class: {
-        ["divider"]: true,
-        [`divider-${variant}`]: true,
-      } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { class: {
-        ["toast-content"]: true,
-        ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-      } }, h("div", { class: "toast-message" }, h("ic-typography", { variant: "subtitle-large" }, visible && h("h5", null, heading)), message && (h("ic-typography", { variant: "body" }, visible && h("p", null, message)))), isSlotUsed(this.el, "action") && (h("div", { class: "toast-action-container" }, h("slot", { name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
-  }
-  get el() { return getElement(this); }
+    /**
+     * @internal Used to display the individual toast.
+     * @returns The element that previously had focus before the toast appeared
+     */
+    async setVisible() {
+        if (!this.visible)
+            this.visible = true;
+        if (!this.isManual) {
+            this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+            this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+            return null;
+        }
+        else {
+            window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
+            return document.activeElement;
+        }
+    }
+    handleLongText(headingTooLong, messageTooLong) {
+        if (messageTooLong || headingTooLong) {
+            console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+        }
+    }
+    findNextInteractiveElement(isBackwards) {
+        const first = this.interactiveElements[0];
+        const last = this.interactiveElements[this.interactiveElements.length - 1];
+        const source = isBackwards ? first : last;
+        const target = isBackwards ? last : first;
+        if (this.isActive(source))
+            return target;
+        let currentIndex;
+        const found = this.interactiveElements.some((el, index) => {
+            if (!this.isActive(el))
+                return false;
+            currentIndex = index;
+            return true;
+        });
+        if (!found)
+            return first;
+        return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
+    }
+    isActive(targetEl) {
+        if (targetEl === this.el)
+            return !!this.el.shadowRoot.activeElement;
+        return document.activeElement === targetEl;
+    }
+    render() {
+        const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
+        return (h(Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, h("div", { class: "container" }, variant && visible && (h("div", { class: "toast-icon-container" }, h("div", { class: {
+                ["divider"]: true,
+                [`divider-${variant}`]: true,
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { class: {
+                ["toast-content"]: true,
+                ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
+            } }, h("div", { class: "toast-message" }, h("ic-typography", { variant: "subtitle-large" }, visible && h("h5", null, heading)), message && (h("ic-typography", { variant: "body" }, visible && h("p", null, message)))), isSlotUsed(this.el, "action") && (h("div", { class: "toast-action-container" }, h("slot", { name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
+    }
+    get el() { return getElement(this); }
 };
 Toast.style = icToastCss;