import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzIcon {
  constructor() {
    this.size = "medium";
    this.fontSize = undefined;
    this.href = undefined;
    this.iconName = undefined;
  }
  isSprite() {
    return this.href && this.href.indexOf("#") > -1;
  }
  getIconClassName() {
    return `ez-icon-${this.iconName}`;
  }
  getIconContent() {
    if (this.isSprite()) {
      return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
    }
    if (!StringUtils.isEmpty(this.iconName)) {
      return h("span", { style: this.getStyle(), class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
    }
    return h("img", { class: this.size, src: this.href });
  }
  getStyle() {
    if (!this.fontSize)
      return undefined;
    return {
      fontSize: `${this.fontSize}px`,
    };
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._hostElement, "icon");
  }
  render() {
    return (h(Host, null, this.getIconContent()));
  }
  static get is() { return "ez-icon"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-icon.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-icon.css"]
    };
  }
  static get properties() {
    return {
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"x-small\" | \"small\"| \"medium\" | \"large\" | \"x-large\"",
          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do \u00EDcone."
        },
        "attribute": "size",
        "reflect": true,
        "defaultValue": "\"medium\""
      },
      "fontSize": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "number | string",
          "resolved": "number | string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o tamanho da fonte."
        },
        "attribute": "font-size",
        "reflect": true
      },
      "href": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o endere\u00E7o da imagem quando n\u00E3o contempladas na biblioteca de \u00EDcones."
        },
        "attribute": "href",
        "reflect": true
      },
      "iconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
        },
        "attribute": "icon-name",
        "reflect": true
      }
    };
  }
  static get elementRef() { return "_hostElement"; }
}
