@synergy-design-system/components/dist/chunks/chunk.WFJVDRQR.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  getIconLibrary,
  unwatchIcon,
  watchIcon
} from "./chunk.PNQZGRUP.js";
import {
  icon_custom_styles_default
} from "./chunk.PJO6TM3T.js";
import {
  icon_styles_default
} from "./chunk.ZBW4ZSZ7.js";
import {
  watch
} from "./chunk.BVZQ6QSY.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/icon/icon.component.ts
import { html } from "lit";
import { isTemplateResult } from "lit/directive-helpers.js";
import { property, state } from "lit/decorators.js";
var CACHEABLE_ERROR = Symbol();
var RETRYABLE_ERROR = Symbol();
var parser;
var iconCache = /* @__PURE__ */ new Map();
var SynIcon = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.initialRender = false;
    this.svg = null;
    this.label = "";
    this.library = "default";
  }
  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
  async resolveIcon(url, library) {
    var _a;
    let fileData;
    if (library == null ? void 0 : library.spriteSheet) {
      this.svg = html`<svg part="svg">
        <use part="use" href="${url}" width="100%" height="100%"></use>
      </svg>`;
      return this.svg;
    }
    if (this.library === "system") {
      if (!url) {
        return CACHEABLE_ERROR;
      }
      fileData = new Response(url, {
        status: 200
      });
    } else {
      try {
        fileData = await fetch(url, { mode: "cors" });
        if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
      } catch (e) {
        return RETRYABLE_ERROR;
      }
    }
    try {
      const div = document.createElement("div");
      div.innerHTML = await fileData.text();
      const svg = div.firstElementChild;
      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
      if (!parser) parser = new DOMParser();
      const doc = parser.parseFromString(svg.outerHTML, "text/html");
      const svgEl = doc.body.querySelector("svg");
      if (!svgEl) return CACHEABLE_ERROR;
      svgEl.part.add("svg");
      return document.adoptNode(svgEl);
    } catch (e) {
      return CACHEABLE_ERROR;
    }
  }
  connectedCallback() {
    super.connectedCallback();
    watchIcon(this);
  }
  firstUpdated() {
    this.initialRender = true;
    this.setIcon();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    unwatchIcon(this);
  }
  getIconSource() {
    const library = getIconLibrary(this.library);
    if (this.name && library) {
      return {
        url: library.resolver(this.name),
        fromLibrary: true
      };
    }
    return {
      url: this.src,
      fromLibrary: false
    };
  }
  handleLabelChange() {
    const hasLabel = typeof this.label === "string" && this.label.length > 0;
    if (hasLabel) {
      this.setAttribute("role", "img");
      this.setAttribute("aria-label", this.label);
      this.removeAttribute("aria-hidden");
    } else {
      this.removeAttribute("role");
      this.removeAttribute("aria-label");
      this.setAttribute("aria-hidden", "true");
    }
  }
  async setIcon() {
    var _a;
    const { url, fromLibrary } = this.getIconSource();
    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
    if (!url) {
      this.svg = null;
      return;
    }
    let iconResolver = iconCache.get(url);
    if (!iconResolver) {
      iconResolver = this.resolveIcon(url, library);
      iconCache.set(url, iconResolver);
    }
    if (!this.initialRender) {
      return;
    }
    const svg = await iconResolver;
    if (svg === RETRYABLE_ERROR) {
      iconCache.delete(url);
    }
    if (url !== this.getIconSource().url) {
      return;
    }
    if (isTemplateResult(svg)) {
      this.svg = svg;
      if (library) {
        await this.updateComplete;
        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
        if (typeof library.mutator === "function" && shadowSVG) {
          library.mutator(shadowSVG);
        }
      }
      return;
    }
    switch (svg) {
      case RETRYABLE_ERROR:
      case CACHEABLE_ERROR:
        this.svg = null;
        this.emit("syn-error");
        break;
      default:
        this.svg = svg.cloneNode(true);
        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
        this.emit("syn-load");
    }
  }
  render() {
    return this.svg;
  }
};
SynIcon.styles = [component_styles_default, icon_styles_default, icon_custom_styles_default];
__decorateClass([
  state()
], SynIcon.prototype, "svg", 2);
__decorateClass([
  property({ reflect: true })
], SynIcon.prototype, "name", 2);
__decorateClass([
  property()
], SynIcon.prototype, "src", 2);
__decorateClass([
  property()
], SynIcon.prototype, "label", 2);
__decorateClass([
  property({ reflect: true })
], SynIcon.prototype, "library", 2);
__decorateClass([
  watch("label")
], SynIcon.prototype, "handleLabelChange", 1);
__decorateClass([
  watch(["name", "src", "library"])
], SynIcon.prototype, "setIcon", 1);

export {
  SynIcon
};
//# sourceMappingURL=chunk.WFJVDRQR.js.map