import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const klevuIconCss = ":host{display:inline-block}span{font-family:\"Material Symbols Rounded\";font-variation-settings:\"FILL\" 0, \"wght\" 600, \"GRAD\" 0, \"opsz\" 20}div svg{width:100%;height:100%}";

const KlevuIcon = /*@__PURE__*/ proxyCustomElement(class KlevuIcon extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.name = undefined;
    this.iconURL = undefined;
    this.iconURLSvg = 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")) {
      try {
        const data = await window.fetch(url);
        this.iconURLSvg = await data.text();
        const fontSize = getComputedStyle(this.el).fontSize;
        this.svgStyle = {
          fill: getComputedStyle(this.el).color,
          height: fontSize,
          width: fontSize,
        };
      }
      catch (e) { }
    }
    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.iconURL ? (h("img", { src: this.iconURL })) : (h("span", null, this.name))));
  }
  get el() { return this; }
  static get style() { return klevuIconCss; }
}, [1, "klevu-icon", {
    "name": [1],
    "iconURL": [32],
    "iconURLSvg": [32],
    "svgStyle": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuIcon);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuIcon as K, defineCustomElement as d };

//# sourceMappingURL=klevu-icon2.js.map