import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzTile {
  constructor() {
    this.text = undefined;
    this.size = "small";
    this.height = undefined;
    this.width = undefined;
    this.color = "default";
    this.iconName = "home";
    this.maximumLines = undefined;
    this.isInteractive = false;
  }
  /**
   * Aplica o foco no componente.
   */
  async setFocus() {
    this._container.focus();
  }
  /**
   * Remove o foco do componente.
   */
  async setBlur() {
    this._container.blur();
  }
  clickListener(evt) {
    if (!this.isInteractive) {
      evt.stopImmediatePropagation();
    }
  }
  handleClick() {
    if (this.isInteractive) {
      this.tileClick.emit();
    }
  }
  componentDidRender() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._container) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
    }
  }
  render() {
    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
    return (h(Host, { style: customStyleVars }, h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), h("span", { title: this.text }, this.text))));
  }
  static get is() { return "ez-tile"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-tile.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-tile.css"]
    };
  }
  static get properties() {
    return {
      "text": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como t\u00EDtulo do componente."
        },
        "attribute": "text",
        "reflect": true
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"small\" | \"medium\"",
          "resolved": "\"medium\" | \"small\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define qual o tamanho do componente.\n- `\"default\"`: 120x80px\n- `\"medium\"`: 120x170px"
        },
        "attribute": "size",
        "reflect": true,
        "defaultValue": "\"small\""
      },
      "height": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do componente, sobrescrevendo o padr\u00E3o da propriedade size."
        },
        "attribute": "height",
        "reflect": true
      },
      "width": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a largura do componente, sobrescrevendo o padr\u00E3o da propriedade size."
        },
        "attribute": "width",
        "reflect": true
      },
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"default\" | \"green\" | \"gray\" | \"red\" | \"yellow\"",
          "resolved": "\"default\" | \"gray\" | \"green\" | \"red\" | \"yellow\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a cor tema do componente."
        },
        "attribute": "color",
        "reflect": true,
        "defaultValue": "\"default\""
      },
      "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://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
        },
        "attribute": "icon-name",
        "reflect": true,
        "defaultValue": "\"home\""
      },
      "maximumLines": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
        },
        "attribute": "maximum-lines",
        "reflect": true
      },
      "isInteractive": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o componente ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico. \nSe true, permite permite clique.\nSe false, n\u00E3o permite clique"
        },
        "attribute": "is-interactive",
        "reflect": true,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "tileClick",
        "name": "tileClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o elemento principal \u00E9 clicado"
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "setFocus": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no componente.",
          "tags": []
        }
      },
      "setBlur": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Remove o foco do componente.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
  static get listeners() {
    return [{
        "name": "click",
        "method": "clickListener",
        "target": undefined,
        "capture": true,
        "passive": false
      }];
  }
}
