import { Component, h, Prop } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkTag {
  constructor() {
    /** Define la posición del ícono a mostrar */
    this.iconPosition = 'left';
    /** El tag solo usará el color en el borde */
    this.outline = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-tag', [
        `icon-${this.iconPosition}`,
        { outline: this.outline }
      ]);
    };
  }
  render() {
    var _a, _b;
    return (h("div", { class: this.containerClass(), style: { backgroundColor: !this.outline && this.color, borderColor: this.outline && this.color, width: `${this.width}px` } },
      this.icon && h("i", { class: this.icon + ' ibk-tag__icon', style: { color: (_a = this.textColor) !== null && _a !== void 0 ? _a : (this.outline && this.color) } }),
      h("span", { class: "ibk-tag__text", style: { color: (_b = this.textColor) !== null && _b !== void 0 ? _b : (this.outline && this.color) }, innerHTML: this.text })));
  }
  static get is() { return "ibk-tag"; }
  static get originalStyleUrls() { return {
    "$": ["tag.css"]
  }; }
  static get styleUrls() { return {
    "$": ["tag.css"]
  }; }
  static get properties() { return {
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto que se mostrar\u00E1 en el tag"
      },
      "attribute": "text",
      "reflect": false
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "\u00CDcono que se mostrar\u00E1 en el tag"
      },
      "attribute": "icon",
      "reflect": false
    },
    "iconPosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'left' | 'right'",
        "resolved": "\"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define la posici\u00F3n del \u00EDcono a mostrar"
      },
      "attribute": "icon-position",
      "reflect": false,
      "defaultValue": "'left'"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el color de fondo del tag"
      },
      "attribute": "color",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el color del texto"
      },
      "attribute": "text-color",
      "reflect": false
    },
    "outline": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El tag solo usar\u00E1 el color en el borde"
      },
      "attribute": "outline",
      "reflect": false,
      "defaultValue": "false"
    },
    "width": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Definir un ancho fijo para el tag"
      },
      "attribute": "width",
      "reflect": false
    }
  }; }
}
