import { r as registerInstance, h, H as Host, g as getElement } from './index-e582ed08.js';
import { c as closestElement } from './utils-e68d78f6.js';

const preloadedIcons = [
	"expand_more",
	"thumb_up",
	"thumb_down",
	"check",
	"upload",
	"info",
	"menu",
	"close",
	"navigate_before",
	"navigate_next",
	"image_not_supported",
	"photo_camera",
	"upload",
	"search",
	"chevron_left",
	"chevron_right"
];

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{height:100%;width:100%}";

var __classPrivateFieldGet = (undefined && undefined.__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_setIcon;
const cache = new Map();
const KlevuIcon = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    _KlevuIcon_instances.add(this);
    this.name = undefined;
    this.originElement = undefined;
    this.iconURL = undefined;
    this.iconURLSvg = undefined;
    this.svgStyle = undefined;
  }
  async connectedCallback() {
    var _a, _b;
    let init = closestElement("klevu-init", this.originElement || this.el);
    if (!init) {
      console.warn("could not find closest init for ", this.name);
      const initFields = document.getElementsByTagName("klevu-init");
      if (initFields.length > 0) {
        init = initFields[0];
      }
    }
    const url = (_b = (_a = init === null || init === void 0 ? void 0 : init.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_setIcon).call(this, url);
    }
    else if (preloadedIcons.includes(this.name)) {
      let path = window.location.origin;
      if (init) {
        path = await init.getAssetsPath();
      }
      if (path) {
        const url = `${path}/assets/${this.name}.svg`;
        await __classPrivateFieldGet(this, _KlevuIcon_instances, "m", _KlevuIcon_setIcon).call(this, url, false);
      }
    }
    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))));
  }
  static get assetsDirs() { return ["assets"]; }
  get el() { return getElement(this); }
};
_KlevuIcon_instances = new WeakSet(), _KlevuIcon_setIcon = async function _KlevuIcon_setIcon(url, shouldAddStyles = true) {
  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) { }
  if (shouldAddStyles) {
    const fontSize = getComputedStyle(this.el).fontSize;
    this.svgStyle = {
      fill: getComputedStyle(this.el).color,
      height: fontSize,
      width: fontSize,
    };
  }
};
KlevuIcon.style = klevuIconCss;

const klevuTypographyCss = ":host{display:block;--font-weight:var(--klevu-typography-font-weight)}span{display:inline-block;color:var(--klevu-typography-color, currentColor)}.variant-h1{font-size:var(--klevu-typography-font-size, var(--klevu-h1-size));font-weight:var(--font-weight, var(--klevu-h1-weight));line-height:var(--klevu-h1-line-height)}.variant-h2{font-size:var(--klevu-typography-font-size, var(--klevu-h2-size));font-weight:var(--font-weight, var(--klevu-h2-weight));line-height:var(--klevu-h2-line-height)}.variant-h3{font-size:var(--klevu-typography-font-size, var(--klevu-h3-size));font-weight:var(--font-weight, var(--klevu-h3-weight));line-height:var(--klevu-h3-line-height)}.variant-h4{font-size:var(--klevu-typography-font-size, var(--klevu-h4-size));font-weight:var(--font-weight, var(--klevu-h4-weight));line-height:var(--klevu-h4-line-height)}.variant-body-l,.variant-body-l-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-l-size));line-height:var(--klevu-body-l-line-height)}.variant-body-m,.variant-body-m-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-m-size));line-height:var(--klevu-body-m-line-height)}.variant-body-s,.variant-body-s-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-s-size));line-height:var(--klevu-body-s-line-height)}.variant-body-xs,.variant-body-xs-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-xs-size));line-height:var(--klevu-body-xs-line-height)}.variant-body-l,.variant-body-m,.variant-body-s,.variant-body-xs{font-weight:var(--font-weight, var(--klevu-typography-font-weight, 400))}.variant-body-l-bold,.variant-body-m-bold,.variant-body-s-bold,.variant-body-xs-bold{font-weight:var(--font-weight, var(--klevu-typography-font-weight, 600))}";

const KlevuTypography = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.variant = undefined;
    this.fullWidth = undefined;
  }
  render() {
    let style = {};
    if (this.fullWidth) {
      style.width = "100%";
    }
    return (h("span", { class: `variant-${this.variant}`, style: style }, h("slot", null)));
  }
};
KlevuTypography.style = klevuTypographyCss;

export { KlevuIcon as klevu_icon, KlevuTypography as klevu_typography };

//# sourceMappingURL=klevu-icon_2.entry.js.map