pyro/dist/icon.js

Pyro custom elements

import { i as l, r as c, x as v, t as y } from "./custom-element-CWJsDAat.js";
import { n as p } from "./property-Bf-I6Ep_.js";
import { o as d } from "./query-assigned-elements-DjfhL1cl.js";
import { o as f } from "./style-map-Bdp7bDSk.js";
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (i, r, h, e) => {
  for (var t = e > 1 ? void 0 : e ? g(r, h) : r, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (t = (e ? a(r, h, t) : a(t)) || t);
  return e && t && m(r, h, t), t;
};
let o = class extends c {
  constructor() {
    super(...arguments), this.src = "", this.color = "", this.size = "m", this.alt = "";
  }
  async firstUpdated() {
    var i, r;
    if (this.src) {
      const e = await (await fetch(`../${this.src}`)).text(), t = new DOMParser().parseFromString(e, "text/xml").firstChild;
      if (t) {
        if (this.alt) {
          const s = document.createElement("title");
          s.appendChild(document.createTextNode(this.alt)), t.appendChild(s);
        } else
          this.setAttribute("aria-hidden", "true");
        (r = (i = this.shadowRoot) == null ? void 0 : i.querySelector("div")) == null || r.appendChild(t);
      }
    }
  }
  render() {
    const i = this.color ? { color: `var(--pyro-${this.color}-color)` } : {};
    return v`<div style=${f(i)}></div>`;
  }
};
o.styles = l`
    :host {
      display: inline-block;
      box-sizing: border-box;
    }
    :host {
      height: var(--pyro-icon-height, var(--pyro-font-size));
      width: var(--pyro-icon-width, var(--pyro-font-size));
      min-width: var(--pyro-icon-min-width, var(--pyro-font-size));
      min-height: var(--pyro-icon-min-height, var(--pyro-font-size));
    }
    :host([size='s']) {
      height: var(--pyro-icon-height-s, var(--pyro-font-size-s));
      width: var(--pyro-icon-width-s, var(--pyro-font-size-s));
      min-width: var(--pyro-icon-min-width-s, var(--pyro-font-size-s));
      min-height: var(--pyro-icon-min-height-s, var(--pyro-font-size-s));
    }
    :host([size='l']) {
      height: var(--pyro-icon-height-l, var(--pyro-font-size-l));
      width: var(--pyro-icon-width-l, var(--pyro-font-size-l));
      min-width: var(--pyro-icon-min-width-l, var(--pyro-font-size-l));
      min-height: var(--pyro-icon-min-height-l, var(--pyro-font-size-l));
    }
    div {
      line-height: 0;
    }
    svg,
    img {
      width: 100%;
      height: 100%;
    }
  `;
n([
  p()
], o.prototype, "src", 2);
n([
  p()
], o.prototype, "color", 2);
n([
  p({ reflect: !0 })
], o.prototype, "size", 2);
n([
  p()
], o.prototype, "alt", 2);
n([
  d({ selector: "svg" })
], o.prototype, "slotContent", 2);
o = n([
  y("pyro-icon")
], o);
export {
  o as PyroIcon
};