import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzTag {
  constructor() {
    this.label = undefined;
    this.color = "ocean-green";
    this.customBackgroundColor = undefined;
    this.customLabelColor = undefined;
  }
  componentDidLoad() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._tag) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
    }
  }
  validateLabel() {
    return (this.label) && this.label.trim() !== "";
  }
  render() {
    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
  }
  static get is() { return "ez-tag"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-tag.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-tag.css"]
    };
  }
  static get properties() {
    return {
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
        },
        "attribute": "label",
        "reflect": true
      },
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"ocean-green\" | \"light-ocean-green\" | \"green\" | \"light-green\" | \"yellow\" | \"light-yellow\" | \"red\" | \"light-red\" | \"gray\" | \"light-gray\" | \"petroleum\" | \"light-petroleum\"",
          "resolved": "\"gray\" | \"green\" | \"light-gray\" | \"light-green\" | \"light-ocean-green\" | \"light-petroleum\" | \"light-red\" | \"light-yellow\" | \"ocean-green\" | \"petroleum\" | \"red\" | \"yellow\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a cor de fundo do componente."
        },
        "attribute": "color",
        "reflect": true,
        "defaultValue": "\"ocean-green\""
      },
      "customBackgroundColor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define uma cor de fundo customizada, dentro da paleta de cores do Design System para o componente."
        },
        "attribute": "custom-background-color",
        "reflect": false
      },
      "customLabelColor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define uma cor de texto customizada, dentro da paleta de cores do Design System para o componente."
        },
        "attribute": "custom-label-color",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "_element"; }
}
