pyro/dist/avatar.js

Pyro custom elements

import { i as n, r as p, x as v, t as h } from "./custom-element-CWJsDAat.js";
import { n as d } from "./property-Bf-I6Ep_.js";
var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (i, t, o, e) => {
  for (var r = e > 1 ? void 0 : e ? y(t, o) : t, s = i.length - 1, l; s >= 0; s--)
    (l = i[s]) && (r = (e ? l(t, o, r) : l(r)) || r);
  return e && r && u(t, o, r), r;
};
let a = class extends p {
  constructor() {
    super(...arguments), this.label = "";
  }
  render() {
    return v`<slot>${this.label}</slot><slot name="image"></slot>`;
  }
};
a.styles = n`
    :host {
      display: inline-grid;
      grid-template-areas: 'stack';
      align-items: center;
      justify-content: center;
      line-height: 1;
      border-radius: 50%;
      width: var(--pyro-avatar-width, 1.5em);
      height: var(--pyro-avatar-height, 1.5em);
      color: var(--pyro-avatar-text-color, var(--pyro-text-color));
      background: var(--pyro-avatar-accent-color, var(--pyro-accent-color));
      cursor: default;
      user-select: none;
    }
    ::slotted(*) {
      border-radius: 50%;
      grid-area: stack;
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
    }
  `;
c([
  d()
], a.prototype, "label", 2);
a = c([
  h("pyro-avatar")
], a);
export {
  a as PyroAvatar
};