pyro/dist/badge.js

Pyro custom elements

import { i as c, r as d, x as p, t as g } from "./custom-element-CWJsDAat.js";
import { n as h } from "./property-Bf-I6Ep_.js";
var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (l, r, o, t) => {
  for (var e = t > 1 ? void 0 : t ? f(r, o) : r, i = l.length - 1, s; i >= 0; i--)
    (s = l[i]) && (e = (t ? s(r, o, e) : s(e)) || e);
  return t && e && v(r, o, e), e;
};
let a = class extends d {
  constructor() {
    super(...arguments), this.label = "";
  }
  render() {
    return p`<slot></slot>
      <div>${this.label}</div>`;
  }
};
a.styles = c`
    :host {
      display: inline-grid;
      grid-template-areas: 'stack';
      width: fit-content;
      cursor: default;
      user-select: none;
    }
    ::slotted(*) {
      grid-area: stack;
    }
    div {
      grid-area: stack;
      align-self: baseline;
      justify-self: end;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--pyro-badge-height, 1.5em);
      min-width: var(--pyro-badge-height, 1.5em);
      font-size: var(--pyro-badge-font-size, calc(var(--pyro-badge-height, 1.5em) / 2));
      line-height: 1;
      padding: 0 0.25em;
      color: var(--pyro-badge-text-color, var(--pyro-text-color));
      z-index: 10;
      border-radius: calc(var(--pyro-badge-height, 1.5em) / 2);
      background: var(--pyro-badge-accent-color, var(--pyro-accent-color));
      /* position in top left */
      transform: translateX(50%);
      margin-top: calc(var(--pyro-badge-height, 1.5em) / 2 * -1);
    }
  `;
n([
  h()
], a.prototype, "label", 2);
a = n([
  g("pyro-badge")
], a);
export {
  a as PyroBadge
};