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

Stencil Component Starter

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

const labDsBadgeCss = ":host{display:block}.badge{display:inline-flex;cursor:default;align-items:center;padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-style:solid}.badge .label{display:flex;align-items:center;color:var(--lab-ds-semantic-color-fg-default)}.badge.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-xxs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xxs);font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}.badge.medium{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.badge.success{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-success);color:var(--lab-ds-semantic-placeholder-color-bg-dark-success)}.badge.error{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-error);color:var(--lab-ds-semantic-placeholder-color-bg-dark-error)}.badge.warning{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-warning);color:var(--lab-ds-semantic-placeholder-color-bg-dark-warning)}.badge.ghost{border-color:transparent}.badge.dot{border-color:transparent}.badge.dot .success{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-success)}.badge.dot .error{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-error)}.badge.dot .warning{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-warning)}.badge.dot .holder{border-radius:10rem}.badge.dot .label{display:none}";

const LabDsBadge = /*@__PURE__*/ proxyCustomElement(class LabDsBadge extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.states = {
      success: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-success)', icon: 'check_circle' },
      error: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-error)', icon: 'error' },
      warning: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-warning)', icon: 'warning' },
    };
    this.label = 'badge';
    this.variant = 'outlined';
    this.state = 'success';
    this.size = 'medium';
  }
  render() {
    return (h("div", { class: `${this.variant} ${this.state} ${this.size} badge` }, h("span", { class: "label" }, this.label), this.variant === 'dot' ? (h("lab-ds-icon-not-selectable", { class: `holder ${this.state}`, size: `${this.size === 'medium' ? 'x-small' : 'xx-small'}`, icon: "circle", color: this.states[this.state].color })) : (h("lab-ds-icon-not-selectable", { class: "holder", size: `small`, icon: this.states[this.state].icon, color: this.states[this.state].color }))));
  }
  static get style() { return labDsBadgeCss; }
}, [1, "lab-ds-badge", {
    "label": [1],
    "variant": [1],
    "state": [1],
    "size": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-badge", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-badge":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsBadge);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsBadge as L, defineCustomElement as d };

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