v4web-components/dist/components/lab-ds-toast.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './lab-ds-button2.js';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';

const labDsToastCss = ".v4-toast{position:absolute;top:3rem;right:1rem}.v4-toast-container{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-top-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:var(--lab-ds-semantic-selectable-border-width-s);border-right-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-style:solid;box-shadow:var(--lab-ds-semantic-selectable-shadow-m)}.toast-body{display:flex;justify-content:space-between;align-items:center;padding:var(--lab-ds-semantic-selectable-space-padding-s)}.small .v4-toast-progress-small{height:0.25rem;width:0%;margin-bottom:-1px;border-radius:0 var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs) var(--lab-ds-semantic-selectable-border-radius-xs);animation:progress-small 10s normal 10ms}@keyframes progress-small{0%{width:0%}100%{width:100%}}.small .toast-icon-message{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.toast-title{display:flex;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.toast-title .title{font:var(--lab-ds-semantic-typography-heading-h6)}.toast-message{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.toast-close{position:relative;z-index:10;cursor:pointer}.close-icon{display:flex;align-items:center;justify-content:center;position:absolute;border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);padding:var(--lab-ds-semantic-selectable-space-padding-xxs);background-color:var(--lab-ds-semantic-selectable-color-bg-pure);box-shadow:var(--lab-ds-semantic-selectable-shadow-m);right:-0.5rem;top:-0.5rem}.medium .v4-toast-container{display:flex;flex-direction:row;height:9rem;border-top-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:var(--lab-ds-semantic-selectable-border-width-l);border-right-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s)}.medium .toast-body{gap:var(--lab-ds-semantic-selectable-space-gap-m);flex-direction:column;align-items:end}.medium .toast-icon-message{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-m)}.medium .toast-message{padding-left:var(--lab-ds-semantic-selectable-space-padding-xl);padding-right:var(--lab-ds-semantic-selectable-space-padding-l)}.success .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);background-color:var(--lab-ds-semantic-selectable-color-bg-light-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.error .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);background-color:var(--lab-ds-semantic-selectable-color-bg-light-error);color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.warning .v4-toast-container{border-color:var(--lab-ds-semantic-selectable-color-border-dark-warning);background-color:var(--lab-ds-semantic-selectable-color-bg-light-warning);color:var(--lab-ds-semantic-selectable-color-bg-dark-warning)}.success.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-success)}.error.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-error)}.warning.small .v4-toast-progress-small{background-color:var(--lab-ds-semantic-selectable-color-border-dark-warning)}";

const LabDsToast$1 = /*@__PURE__*/ proxyCustomElement(class LabDsToast extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.closeToast = createEvent(this, "closeToast", 7);
    this.states = {
      success: { icon: 'check_circle' },
      error: { icon: 'error' },
      warning: { icon: 'warning' },
    };
    this.message = undefined;
    this.label = undefined;
    this.action = undefined;
    this.actionLabel = undefined;
    this.state = 'success';
    this.size = 'small';
    this.openToast = false;
    this.isOpen = false;
  }
  watchPropHandler() {
    this.isOpen = this.openToast;
    if (this.size === 'medium') {
      return;
    }
    this.timeOut = setTimeout(() => {
      this.closeToast.emit(false);
      this.isOpen = false;
    }, 10000);
  }
  handleClose() {
    this.closeToast.emit(false);
    this.isOpen = false;
  }
  render() {
    return (this.isOpen && (h("div", { class: `v4-toast ${this.size} ${this.state}` }, h("div", { class: "toast-close" }, h("lab-ds-icon-not-selectable", { onClick: () => {
        this.handleClose();
      }, class: "close-icon", icon: "close", size: "x-small" })), h("div", { class: "v4-toast-container" }, h("div", { class: "toast-body" }, h("div", { class: "toast-icon-message" }, h("div", { class: "toast-title" }, h("lab-ds-icon-not-selectable", { icon: this.states[this.state].icon, size: "s-medium" }), this.label && this.size === 'medium' && h("span", { class: "title" }, this.label)), h("div", { class: "toast-message" }, this.message)), this.action && (h("div", { class: "toast-action" }, h("lab-ds-button", { size: "small", variant: "link-button", onClick: this.action, label: this.actionLabel })))), this.size === 'small' && h("div", { class: "v4-toast-progress-small" })))));
  }
  static get watchers() { return {
    "openToast": ["watchPropHandler"]
  }; }
  static get style() { return labDsToastCss; }
}, [1, "lab-ds-toast", {
    "message": [1],
    "label": [1],
    "action": [16],
    "actionLabel": [1, "action-label"],
    "state": [1],
    "size": [1],
    "openToast": [4, "open-toast"],
    "isOpen": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-toast", "lab-ds-button", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-toast":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsToast$1);
      }
      break;
    case "lab-ds-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsToast = LabDsToast$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsToast, defineCustomElement };

//# sourceMappingURL=lab-ds-toast.js.map