@ukic/canary-web-components 2.0.0-canary.0

package/dist/components/ic-theme.js

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { O as getThemeColorBrightness, P as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS, Q as hexToRgba, R as rgbaStrToObj, t as getThemeForegroundColor } from './helpers.js';
+
+const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.themeChange = createEvent(this, "themeChange", 7);
+    this.checkThemeColorContrast = () => {
+      if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
+        getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
+        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.`);
+      }
+    };
+    this.setThemeColor = () => {
+      if (this.color !== null) {
+        let colorRGBA = null;
+        const firstChar = this.color.slice(0, 1);
+        if (firstChar === "#") {
+          colorRGBA = hexToRgba(this.color);
+        }
+        else if (firstChar.toLowerCase() === "r") {
+          colorRGBA = rgbaStrToObj(this.color);
+        }
+        this.setThemeRGBA(colorRGBA);
+      }
+    };
+    this.setThemeRGBA = (colorRGBA) => {
+      if (colorRGBA !== null) {
+        const root = document.documentElement;
+        root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
+        root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
+        root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
+        root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+        this.checkThemeColorContrast();
+        const foregroundColor = getThemeForegroundColor();
+        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+      }
+    };
+    this.color = null;
+  }
+  watchColorPropHandler() {
+    this.setThemeColor();
+  }
+  componentWillLoad() {
+    this.setThemeColor();
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get watchers() { return {
+    "color": ["watchColorPropHandler"]
+  }; }
+}, [1, "ic-theme", {
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-theme"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-theme":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Theme);
+      }
+      break;
+  } });
+}
+
+const IcTheme = Theme;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcTheme, defineCustomElement };
+
+//# sourceMappingURL=ic-theme.js.map

package/dist/components/ic-theme.js.map

@@ -0,0 +1 @@
+{"file":"ic-theme.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}

package/dist/components/ic-toast-region.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcToastRegion extends Components.IcToastRegion, HTMLElement {}
+export const IcToastRegion: {
+  prototype: IcToastRegion;
+  new (): IcToastRegion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-toast-region.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const ToastRegion = /*@__PURE__*/ proxyCustomElement(class ToastRegion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.pendingVisibility = [];
+  }
+  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();
+    }
+  }
+  /**
+   * 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));
+    }
+    if (visibleToasts.length > 0)
+      this.pendingVisibility.push(toast);
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return this; }
+}, [4, "ic-toast-region", {
+    "setVisible": [64]
+  }, [[2, "icDismiss", "handleDismissedToast"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-toast-region"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-toast-region":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToastRegion);
+      }
+      break;
+  } });
+}
+
+const IcToastRegion = ToastRegion;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcToastRegion, defineCustomElement };
+
+//# sourceMappingURL=ic-toast-region.js.map

package/dist/components/ic-toast-region.js.map

@@ -0,0 +1 @@
+{"file":"ic-toast-region.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}

package/dist/components/ic-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcToast extends Components.IcToast, HTMLElement {}
+export const IcToast: {
+  prototype: IcToast;
+  new (): IcToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-toast.js

@@ -0,0 +1,218 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as closeIcon } from './close-icon.js';
+import { i as isSlotUsed, V as VARIANT_ICONS, o as onComponentRequiredPropUndefined, E as getSlot } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.js';
+import { d as defineCustomElement$5 } from './ic-button2.js';
+import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.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}}";
+
+const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
+const TOAST_HEADING_CHAR_LIMIT = 70;
+const TOAST_MESSAGE_CHAR_LIMIT = 140;
+const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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;
+    }
+    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);
+    }
+  }
+  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;
+      }
+    }
+  }
+  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;
+      }
+    }
+  }
+  /**
+   * 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 this; }
+  static get style() { return icToastCss; }
+}, [1, "ic-toast", {
+    "autoDismissTimeout": [1026, "auto-dismiss-timeout"],
+    "dismissButtonAriaLabel": [1, "dismiss-button-aria-label"],
+    "dismissMode": [1025, "dismiss-mode"],
+    "heading": [1],
+    "message": [1],
+    "neutralIconAriaLabel": [1, "neutral-icon-aria-label"],
+    "variant": [1025],
+    "timerProgress": [32],
+    "visible": [32],
+    "setVisible": [64]
+  }, [[2, "icDismiss", "handleDismiss"], [4, "keydown", "handleKeyboard"], [1, "mouseenter", "handleTimer"], [1, "mouseleave", "handleTimer"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-toast", "ic-button", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcToast, defineCustomElement };
+
+//# sourceMappingURL=ic-toast.js.map

package/dist/components/ic-toast.js.map

@@ -0,0 +1 @@
+{"file":"ic-toast.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,4rJAA4rJ;;AC0B/sJ,MAAM,kCAAkC,GAAG,IAAI,CAAC;AAChD,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,wBAAwB,GAAG,GAAG,CAAC;MAWxB,KAAK;;;;;;IAER,wBAAmB,GAA6B,EAAE,CAAC;IA6KnD,kBAAa,GAAG;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,yBAAoB,GAAG;MAC7B,IAAI,CAAC,aAAa;QAChB,CAAC,kCAAkC,GAAG,IAAI,CAAC,kBAAkB,IAAI,GAAG,CAAC;KACxE,CAAC;yBA7KuB,GAAG;mBACT,KAAK;8BAMuB,IAAI;kCAKjB,SAAS;uBAKgB,QAAQ;;;;;;EA2BnE,oBAAoB;IAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;GACjD;EAED,iBAAiB;;IACf,IAAI,CAAC,cAAc,CACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,wBAAwB,EAC9C,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,IAAG,wBAAwB,CAChD,CAAC;IAEF,IAAI,IAAI,CAAC,kBAAkB,GAAG,IAAI;MAAE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAEnE,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC;MAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;IAE9C,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;MAAE,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAClE,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;MAC9B,IAAI,CAAC,mBAAmB;QACtB,MAAA,IAAI,CAAC,oBAAoB,mCAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC;KACtE;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,YAAY,EACZ,IAAI,CAAC,OAAO;UACR,IAAI,CAAC,mBAAmB,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS;UACjE,IAAI,CAAC,OAAO,CACjB,CAAC;MACF,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO;QAC3B,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,kBAAkB,EAClB,IAAI,CAAC,OAAO;YACR,GAAG,IAAI,CAAC,OAAO,GACb,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,EACrD,EAAE;YACF,IAAI,CAAC,OAAO,CACjB,CAAC;KACL;GACF;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,OAAO,CACR,CAAC;IACF,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAA2B,CAAC;IAC3E,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpE,IAAI,aAAa;MAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChE,IAAI,aAAa;MAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACjE;EAGD,aAAa;IACX,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;GAC1B;EAGD,cAAc,CAAC,EAAiB;IAC9B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,QAAQ,EAAE,CAAC,GAAG;QACZ,KAAK,KAAK;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UACpB,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;UACxD,MAAM;QACR,KAAK,QAAQ;UACX,CAAC,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;UACnC,EAAE,CAAC,wBAAwB,EAAE,CAAC;UAC9B,MAAM;OACT;KACF;GACF;EAID,WAAW,CAAC,EAAc;IACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,QAAQ,EAAE,CAAC,IAAI;QACb,KAAK,YAAY;UACf,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;UACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;UAChD,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;UACzB,MAAM;QACR,KAAK,YAAY;UACf,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;UACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;UACF,MAAM;OACT;KACF;GACF;;;;;EAOD,MAAM,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;MACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;MACF,OAAO,IAAI,CAAC;KACb;SAAM;MACL,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC;MACrE,OAAO,QAAQ,CAAC,aAA4B,CAAC;KAC9C;GACF;EAWO,cAAc,CACpB,cAAuB,EACvB,cAAwB;IAExB,IAAI,cAAc,IAAI,cAAc,EAAE;MACpC,OAAO,CAAC,KAAK,CACX,gCAAgC,cAAc,GAAG,SAAS,GAAG,EAAE,GAC7D,cAAc,IAAI,cAAc,GAAG,OAAO,GAAG,EAC/C,GACE,cAAc,GAAG,SAAS,GAAG,EAC/B,+DAA+D,CAChE,CAAC;KACH;GACF;EAEO,0BAA0B,CAChC,WAAoB;IAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE3E,MAAM,MAAM,GAAG,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC;IAC1C,MAAM,MAAM,GAAG,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;MAAE,OAAO,MAAM,CAAC;IAEzC,IAAI,YAAoB,CAAC;IACzB,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK;MACpD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAAE,OAAO,KAAK,CAAC;MACrC,YAAY,GAAG,KAAK,CAAC;MACrB,OAAO,IAAI,CAAC;KACb,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK;MAAE,OAAO,KAAK,CAAC;IACzB,OAAO,IAAI,CAAC,mBAAmB,CAAC,YAAY,IAAI,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;GACxE;EAEO,QAAQ,CAAC,QAAqB;IACpC,IAAI,QAAQ,KAAK,IAAI,CAAC,EAAE;MAAE,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC;IACpE,OAAO,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC;GAC5C;EAED,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,sBAAsB,GACvB,GAAG,IAAI,CAAC;IACT,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,QAAQ,GAAG,CAAC,OAAO,EAAE,EAC/B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,IAEpC,WAAK,KAAK,EAAC,WAAW,IACnB,OAAO,IAAI,OAAO,KACjB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WACE,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,IAAI;QACjB,CAAC,WAAW,OAAO,EAAE,GAAG,IAAI;OAC7B,GACI,EACN,OAAO,KAAK,SAAS,IACpB,YAAM,IAAI,EAAC,cAAc,GAAG,KAE5B,YACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACT,CACG,CACP,EACD,WACE,KAAK,EAAE;QACL,CAAC,eAAe,GAAG,IAAI;QACvB,CAAC,SAAS,GACR,OAAO,KAAK,SAAS,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;OAChE,IAED,WAAK,KAAK,EAAC,eAAe,IACxB,qBAAe,OAAO,EAAC,gBAAgB,IACpC,OAAO,IAAI,cAAK,OAAO,CAAM,CAChB,EACf,OAAO,KACN,qBAAe,OAAO,EAAC,MAAM,IAC1B,OAAO,IAAI,aAAI,OAAO,CAAK,CACd,CACjB,CACG,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,KAC5B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,EACL,CAAC,QAAQ,IACR,4BACE,KAAK,EAAC,qBAAqB,EAC3B,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,aAAa,GACN,KAExB,iBACE,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,qBAAqB,CAAC,KAAK,gBAC3B,sBAAsB,GACvB,CACd,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","./src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n:host {\n  --bottom-position: var(--ic-space-xl);\n\n  position: fixed;\n  bottom: var(--bottom-position);\n  left: 50%;\n  transform: translate(-50%);\n  animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n  z-index: var(--ic-z-index-toast);\n}\n\n:host(.hidden) {\n  display: none;\n  animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n}\n\n.container {\n  max-width: 32.5rem;\n  min-width: 18rem;\n  box-shadow: var(--ic-elevation-overlay);\n  min-height: 3.5rem;\n  background-color: var(--ic-architectural-800);\n  color: var(--ic-color-white-text);\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  position: absolute;\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n  background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n  background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n  background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n  background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n  background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n  fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n  fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n  fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n  fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n  fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n  margin-left: var(--ic-space-xs);\n  width: 100%;\n}\n\n.no-icon {\n  margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n  padding-bottom: var(--ic-space-md);\n}\n\nic-button,\n.toast-dismiss-timer {\n  padding: var(--ic-space-xs);\n}\n\n@media (max-width: 576px) {\n  :host {\n    --bottom-position: var(--ic-space-lg);\n\n    width: calc(100% - 2 * var(--ic-space-md));\n  }\n}\n\n@media (min-width: 993px) {\n  :host {\n    --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-hc-border);\n  }\n}\n\n@keyframes fadein {\n  from {\n    bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeout {\n  from {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcActivationTypes,\n  IcStatusVariants,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private isManual: boolean;\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant\n            ? `${this.heading}${\n                this.message !== undefined ? `. ${this.message}` : \"\"\n              }`\n            : this.message\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n    const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n    const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n    if (actionContent) this.interactiveElements.push(actionContent);\n    if (dismissButton) this.interactiveElements.push(dismissButton);\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.isManual && this.visible) {\n      switch (ev.key) {\n        case \"Tab\":\n          ev.preventDefault();\n          this.findNextInteractiveElement(ev.shiftKey).setFocus();\n          break;\n        case \"Escape\":\n          !ev.repeat && this.dismissAction();\n          ev.stopImmediatePropagation();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    if (!this.isManual) {\n      switch (ev.type) {\n        case \"mouseenter\":\n          window.clearTimeout(this.dismissTimeout);\n          window.clearInterval(this.timerRefreshInterval);\n          this.timerProgress = 100;\n          break;\n        case \"mouseleave\":\n          this.dismissTimeout = window.setTimeout(\n            this.dismissAction,\n            this.autoDismissTimeout\n          );\n          this.timerRefreshInterval = window.setInterval(\n            this.handleProgressChange,\n            AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n          );\n          break;\n      }\n    }\n  }\n\n  /**\n   * Used to display the individual toast\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const first = this.interactiveElements[0];\n    const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n    const source = isBackwards ? first : last;\n    const target = isBackwards ? last : first;\n    if (this.isActive(source)) return target;\n\n    let currentIndex: number;\n    const found = this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    });\n\n    if (!found) return first;\n    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n    return document.activeElement === targetEl;\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{ [\"hidden\"]: !visible }}\n        role={isManual ? \"dialog\" : \"status\"}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                {visible && <h5>{heading}</h5>}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              appearance=\"light\"\n              size=\"icon\"\n              progress={this.timerProgress}\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon\"\n              appearance={IcThemeForegroundEnum.Light}\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcTooltip extends Components.IcTooltip, HTMLElement {}
+export const IcTooltip: {
+  prototype: IcTooltip;
+  new (): IcTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-tooltip.js

@@ -0,0 +1,8 @@
+import { T as Tooltip, d as defineCustomElement$1 } from './ic-tooltip2.js';
+
+const IcTooltip = Tooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcTooltip, defineCustomElement };
+
+//# sourceMappingURL=ic-tooltip.js.map

package/dist/components/ic-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"ic-tooltip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}