@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.18

package/dist/components/ic-toast.js

@@ -26,33 +26,53 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
       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.variant = undefined;
     this.message = undefined;
-    this.dismissMode = "manual";
-    this.autoDismissTimeout = 5000;
     this.neutralIconAriaLabel = undefined;
-    this.dismissButtonAriaLabel = "dismiss";
-    this.visible = false;
-    this.timerProgress = 100;
+    this.variant = undefined;
   }
-  /**
-   * 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;
+  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;
     }
-    else {
-      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
-      return document.activeElement;
+    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);
@@ -87,6 +107,23 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
       }
     }
   }
+  /**
+   * 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`);
@@ -115,43 +152,6 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
       return !!this.el.shadowRoot.activeElement;
     return document.activeElement === targetEl;
   }
-  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);
-  }
-  disconnectedCallback() {
-    window.clearTimeout(this.dismissTimeout);
-    window.clearInterval(this.timerRefreshInterval);
-  }
   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: {
@@ -165,15 +165,15 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
   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],
-    "variant": [1025],
     "message": [1],
-    "dismissMode": [1025, "dismiss-mode"],
-    "autoDismissTimeout": [1026, "auto-dismiss-timeout"],
     "neutralIconAriaLabel": [1, "neutral-icon-aria-label"],
-    "dismissButtonAriaLabel": [1, "dismiss-button-aria-label"],
-    "visible": [32],
+    "variant": [1025],
     "timerProgress": [32],
+    "visible": [32],
     "setVisible": [64]
   }, [[2, "icDismiss", "handleDismiss"], [4, "keydown", "handleKeyboard"], [1, "mouseenter", "handleTimer"], [1, "mouseleave", "handleTimer"]]]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"ic-toast.js","mappings":"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","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-architectural-500);\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-architectural-500);\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  @Element() el: HTMLIcToastElement;\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   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\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   * 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   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\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   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  @State() visible = false;\n  @State() timerProgress = 100;\n\n  dismissTimeout: number;\n  timerRefreshInterval: number;\n  isManual: boolean;\n  interactiveElements: ActionAreaElementTypes[] = [];\n  neutralVariantLabel: string;\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() {\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  @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  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  componentWillLoad() {\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() {\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  disconnectedCallback() {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\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}
+{"file":"ic-toast.js","mappings":"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","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-architectural-500);\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-architectural-500);\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-tooltip2.js

@@ -1807,13 +1807,21 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.delayedHideEvents = ["mouseleave"];
+    this.instantHideEvents = ["focusout"];
     this.mouseOverTool = false;
+    this.persistTooltip = false;
+    this.screenReaderOnlyStyles = {
+      position: "absolute",
+      left: "-10000px",
+      top: "auto",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden",
+    };
     this.showEvents = this.disableHover
       ? ["click"]
       : ["mouseenter", "focusin"];
-    this.instantHideEvents = ["focusout"];
-    this.delayedHideEvents = ["mouseleave"];
-    this.persistTooltip = false;
     this.show = () => {
       this.toolTip.setAttribute("data-show", "");
       this.popperInstance.update();
@@ -1862,18 +1870,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
       });
       document[method]("keydown", this.handleKeyDown);
     };
-    this.screenReaderOnlyStyles = {
-      position: "absolute",
-      left: "-10000px",
-      top: "auto",
-      width: "1px",
-      height: "1px",
-      overflow: "hidden",
-    };
-    this.target = undefined;
+    this.disableHover = false;
     this.placement = "bottom";
+    this.target = undefined;
     this.label = undefined;
-    this.disableHover = false;
   }
   updateLabel(newValue) {
     const describedBySpan = this.el.previousElementSibling;
@@ -1881,14 +1881,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
       describedBySpan.innerText = newValue;
     }
   }
-  /**
-   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
-   * @param show Whether to show or hide the tooltip
-   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
-   */
-  async displayTooltip(show, persistTooltip) {
-    this.persistTooltip = persistTooltip;
-    show ? this.show() : this.hide();
+  disconnectedCallback() {
+    this.manageEventListeners("remove");
+    this.popperInstance.destroy();
   }
   componentDidLoad() {
     this.popperInstance = createPopper(this.el, this.toolTip, {
@@ -1923,9 +1918,14 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
       this.el.insertAdjacentElement("beforebegin", ariaDescribedBy);
     }
   }
-  disconnectedCallback() {
-    this.manageEventListeners("remove");
-    this.popperInstance.destroy();
+  /**
+   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
+   * @param show Whether to show or hide the tooltip
+   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover
+   */
+  async displayTooltip(show, persistTooltip) {
+    this.persistTooltip = persistTooltip;
+    show ? this.show() : this.hide();
   }
   render() {
     const { label } = this;
@@ -1937,10 +1937,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
   }; }
   static get style() { return icTooltipCss; }
 }, [1, "ic-tooltip", {
-    "target": [513],
+    "disableHover": [4, "disable-hover"],
     "placement": [1],
+    "target": [513],
     "label": [1],
-    "disableHover": [4, "disable-hover"],
     "displayTooltip": [64]
   }]);
 function defineCustomElement() {