pyro/dist/tag.js

Pyro custom elements

import { i as y, r as g, x as p, t as v } from "./custom-element-CWJsDAat.js";
import { n as t } from "./property-Bf-I6Ep_.js";
import { o as d } from "./unsafe-html-DZSpJPU8.js";
import { C as h } from "./close-Cj_Rmt2D.js";
var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, e = (n, s, i, a) => {
  for (var o = a > 1 ? void 0 : a ? f(s, i) : s, l = n.length - 1, c; l >= 0; l--)
    (c = n[l]) && (o = (a ? c(s, i, o) : c(o)) || o);
  return a && o && u(s, i, o), o;
};
let r = class extends g {
  constructor() {
    super(...arguments), this.label = "", this.severity = "", this.size = "m", this.dismissible = !1, this.pill = !1, this.dismiss = () => {
      this.setAttribute("dismissed", "");
    };
  }
  render() {
    return p`
      <slot>${this.label}</slot>
      ${this.dismissible ? p`<slot name="dismissible" @click=${this.dismiss}>${d(h)}</slot>` : p``}
    `;
  }
};
r.styles = y`
    :host {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: var(--pyro-tag-text-color, var(--pyro-text-color));
      border: var(--pyro-tag-border, var(--pyro-border));
      border-radius: var(--pyro-tag-border-radius, var(--pyro-border-radius));
      padding: var(--pyro-tag-spacing, calc(var(--pyro-spacing) / 2));
      background: var(--pyro-tag-surface-color), var(--pyro-surface-color);
      text-align: center;
      min-width: var(--pyro-tag-min-width, 3em);
      font-weight: var(--pyro-tag-font-weight, inherit);
      font-size: 0.85em;
      line-height: 1;
      gap: var(--pyro-spacing-s);
      user-select: none;
    }
    :host([severity='info']) {
      background: var(--pyro-tag-info-color-lighter, var(--pyro-info-color-lighter));
      border-color: var(--pyro-tag-info-color, var(--pyro-info-color));
      color: var(--pyro-tag-text-color, var(--pyro-text-color-on-info));
    }
    :host([severity='success']) {
      background: var(--pyro-tag-success-color-lighter, var(--pyro-success-color-lighter));
      border-color: var(--pyro-tag-success-color, var(--pyro-success-color));
      color: var(--pyro-tag-text-color, var(--pyro-text-color-on-success));
    }
    :host([severity='warning']) {
      background: var(--pyro-tag-warning-color-lighter, var(--pyro-warning-color-lighter));
      border-color: var(--pyro-tag-warning-color, var(--pyro-warning-color));
      color: var(--pyro-tag-text-color, var(--pyro-text-color-on-warning));
    }
    :host([severity='error']) {
      background: var(--pyro-tag-error-color-lighter, var(--pyro-error-color-lighter));
      border-color: var(--pyro-tag-error-color, var(--pyro-error-color));
      color: var(--pyro-tag-text-color, var(--pyro-text-color-on-error));
    }
    :host([size='s']) {
      padding: calc(var(--pyro-spacing-s) / 2);
      font-size: 0.7em;
    }
    :host([size='l']) {
      padding: calc(var(--pyro-spacing-l) / 2);
    }
    :host([pill]) {
      border-radius: 1.5em;
    }
    slot[name='dismissible'] {
      color: var(--pyro-tag-text-color, var(--pyro-text-color));
      cursor: pointer;
    }
    :host([dismissed]) {
      display: none;
    }
  `;
e([
  t()
], r.prototype, "label", 2);
e([
  t({ reflect: !0 })
], r.prototype, "severity", 2);
e([
  t({ reflect: !0 })
], r.prototype, "size", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "dismissible", 2);
e([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "pill", 2);
r = e([
  v("pyro-tag")
], r);
export {
  r as PyroTag
};