var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuIcon_instances, _KlevuIcon_downloadFile;
import { Host, getAssetPath, h } from "@stencil/core";
import preloadedIcons from "./preloaded-icons.json";
const cache = new Map();
/**
 * Klevu icon component. Uses Google Material Icons.
 *
 */
export class KlevuIcon {
  constructor() {
    _KlevuIcon_instances.add(this);
    this.name = undefined;
    this.iconURL = undefined;
    this.iconURLSvg = undefined;
    this.iconAssetURL = undefined;
    this.svgStyle = undefined;
  }
  async connectedCallback() {
    var _a, _b;
    const url = (_b = (_a = window["klevu_ui_settings"]) === null || _a === void 0 ? void 0 : _a.icons) === null || _b === void 0 ? void 0 : _b[this.name];
    if (url === null || url === void 0 ? void 0 : url.endsWith(".svg")) {
      await __classPrivateFieldGet(this, _KlevuIcon_instances, "m", _KlevuIcon_downloadFile).call(this, url);
    }
    else if (preloadedIcons.includes(this.name)) {
      this.iconAssetURL = getAssetPath("./assets/" + this.name + ".svg");
    }
    else if (url) {
      this.iconURL = url;
    }
    if (!this.iconURL && !this.iconURLSvg) {
      // Inject material fonts to project
      const fontCssUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,600,0,0";
      let element = document.querySelector(`link[href="${fontCssUrl}"]`);
      // Only inject the element if it's not yet present
      if (!element) {
        element = document.createElement("link");
        element.setAttribute("rel", "stylesheet");
        element.setAttribute("href", fontCssUrl);
        document.head.appendChild(element);
      }
    }
  }
  render() {
    return (h(Host, null, this.iconURLSvg ? (h("div", { style: this.svgStyle, innerHTML: this.iconURLSvg })) : this.iconAssetURL ? (h("svg", { width: "20", height: "20" }, h("use", { xlinkHref: `${this.iconAssetURL}#img`, href: `${this.iconAssetURL}#img` }))) : this.iconURL ? (h("img", { src: this.iconURL })) : (h("span", null, this.name))));
  }
  static get is() { return "klevu-icon"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-icon.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-icon.css"]
    };
  }
  static get assetsDirs() { return ["assets"]; }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Name of the icon. Please use tokens of material icons"
        },
        "attribute": "name",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "iconURL": {},
      "iconURLSvg": {},
      "iconAssetURL": {},
      "svgStyle": {}
    };
  }
  static get elementRef() { return "el"; }
}
_KlevuIcon_instances = new WeakSet(), _KlevuIcon_downloadFile = async function _KlevuIcon_downloadFile(url) {
  try {
    if (cache.has(url)) {
      this.iconURLSvg = cache.get(url);
    }
    else {
      const data = await window.fetch(url);
      if (data.status == 200) {
        this.iconURLSvg = await data.text();
        cache.set(url, this.iconURLSvg);
      }
    }
  }
  catch (e) { }
  const fontSize = getComputedStyle(this.el).fontSize;
  this.svgStyle = {
    fill: getComputedStyle(this.el).color,
    height: fontSize,
    width: fontSize,
  };
};
//# sourceMappingURL=klevu-icon.js.map
