import { Component, Element, h, Prop } from "@stencil/core";
import { modifiersToClass } from "../../utils/utils";
export class IbkBadge {
  constructor() {
    /** <strong>Info: </strong> color azul<br>
     * <strong>Promo: </strong>color rojo
     */
    this.type = 'info';
    /** Posición en la que se encuentra ubicado el badge */
    this.position = "left";
    /** Le agrega el estilo position relative al contenedor del badge para posicionarlo correctamente */
    this.setPositionRelativeToParent = () => {
      this.host.parentElement.style.position = 'relative';
    };
  }
  componentWillLoad() {
    this.setPositionRelativeToParent();
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-badge', [
      this.type,
      this.position
    ]);
  }
  render() {
    return (h("div", { class: this.containerClass(), innerHTML: this.text }));
  }
  static get is() { return "ibk-badge"; }
  static get originalStyleUrls() { return {
    "$": ["badge.css"]
  }; }
  static get styleUrls() { return {
    "$": ["badge.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'info' | 'promo'",
        "resolved": "\"info\" | \"promo\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "<strong>Info: </strong> color azul<br>\r\n<strong>Promo: </strong>color rojo"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'info'"
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto a mostrar"
      },
      "attribute": "text",
      "reflect": false
    },
    "position": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'left' | 'right'",
        "resolved": "\"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Posici\u00F3n en la que se encuentra ubicado el badge"
      },
      "attribute": "position",
      "reflect": false,
      "defaultValue": "\"left\""
    }
  }; }
  static get elementRef() { return "host"; }
}
