import { h, Host } from '@stencil/core';
import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
export class EzClassicTextArea {
  constructor() {
    this.name = StringUtils.generateUUID();
    this.label = '';
    this.placeholder = '';
    this.value = '';
    this.helpText = undefined;
    this.state = "default";
    this.enabled = true;
    this.readonly = false;
    this.maxlength = undefined;
    this.resize = 'vertical';
    this.leftIconName = undefined;
    this.rightIconName = undefined;
    this.rightIconTooltip = undefined;
    this.leftIconTooltip = undefined;
    this.leftIconClickable = false;
    this.rightIconClickable = false;
    this.rows = 5;
  }
  /** Aplica o foco no campo. */
  async setFocus(option) {
    if (option === null || option === void 0 ? void 0 : option.selectText) {
      this._textAreaElem.select();
    }
    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
      this._textAreaElem.scrollIntoView({ behavior: "smooth", block: "center" });
    }
    this._textAreaElem.focus({ preventScroll: true });
  }
  /** Remove o foco do campo. */
  async setBlur() {
    this._textAreaElem.blur();
  }
  onBlur() {
    this.ezBlur.emit(this.value);
  }
  handleInput(event) {
    const target = event.target;
    this.ezChange.emit(target.value);
  }
  ;
  handleIconClick(event, icon) {
    if (!this.enabled) {
      return;
    }
    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
      this.setFocus({ preventScroll: true });
      return;
    }
    event.stopPropagation();
    this.iconClick.emit({ icon });
  }
  addInfoId() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._textAreaElem) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._textAreaElem, 'classic-text-area', dataInfo);
    }
  }
  componentDidLoad() {
    this.addInfoId();
  }
  render() {
    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
  }
  static get is() { return "ez-classic-text-area"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-classic-text-area.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-classic-text-area.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome da textarea"
        },
        "attribute": "name",
        "reflect": false,
        "defaultValue": "StringUtils.generateUUID()"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto do r\u00F3tulo exibido acima da \u00E1rea de texto"
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "''"
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto de placeholder exibido quando a \u00E1rea de texto est\u00E1 vazia"
        },
        "attribute": "placeholder",
        "reflect": false,
        "defaultValue": "''"
      },
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Valor atual da \u00E1rea de texto"
        },
        "attribute": "value",
        "reflect": false,
        "defaultValue": "''"
      },
      "helpText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto de ajuda exibido abaixo da textarea"
        },
        "attribute": "help-text",
        "reflect": false
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"default\" | \"error\" | \"success\" | \"warning\"",
          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Estado visual da textarea: default, error, success ou warning"
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "\"default\""
      },
      "enabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se a textarea est\u00E1 habilitada"
        },
        "attribute": "enabled",
        "reflect": false,
        "defaultValue": "true"
      },
      "readonly": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Se a \u00E1rea de texto \u00E9 somente leitura"
        },
        "attribute": "readonly",
        "reflect": false,
        "defaultValue": "false"
      },
      "maxlength": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "N\u00FAmero m\u00E1ximo de caracteres permitidos"
        },
        "attribute": "maxlength",
        "reflect": false
      },
      "resize": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'none' | 'both' | 'horizontal' | 'vertical'",
          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Comportamento de redimensionamento da \u00E1rea de texto"
        },
        "attribute": "resize",
        "reflect": false,
        "defaultValue": "'vertical'"
      },
      "leftIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do \u00EDcone \u00E0 esquerda"
        },
        "attribute": "left-icon-name",
        "reflect": false
      },
      "rightIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do \u00EDcone \u00E0 direita"
        },
        "attribute": "right-icon-name",
        "reflect": false
      },
      "rightIconTooltip": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "T\u00EDtulo do \u00EDcone \u00E0 direita (tooltip)"
        },
        "attribute": "right-icon-tooltip",
        "reflect": false
      },
      "leftIconTooltip": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "T\u00EDtulo do \u00EDcone \u00E0 esquerda (tooltip)"
        },
        "attribute": "left-icon-tooltip",
        "reflect": false
      },
      "leftIconClickable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o \u00EDcone da esquerda \u00E9 clic\u00E1vel"
        },
        "attribute": "left-icon-clickable",
        "reflect": false,
        "defaultValue": "false"
      },
      "rightIconClickable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o \u00EDcone da direita \u00E9 clic\u00E1vel"
        },
        "attribute": "right-icon-clickable",
        "reflect": false,
        "defaultValue": "false"
      },
      "rows": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o n\u00FAmero de linhas da \u00E1rea de texto"
        },
        "attribute": "rows",
        "reflect": false,
        "defaultValue": "5"
      }
    };
  }
  static get events() {
    return [{
        "method": "ezChange",
        "name": "ezChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento emitido quando o valor da \u00E1rea de texto muda"
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "ezBlur",
        "name": "ezBlur",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento emitido quando a \u00E1rea de texto perde foco"
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "iconClick",
        "name": "iconClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento disparado quando um \u00EDcone \u00E9 clicado.\nPayload: { icon: \"left\" | \"right\" }"
        },
        "complexType": {
          "original": "{ icon: \"left\" | \"right\" }",
          "resolved": "{ icon: \"left\" | \"right\"; }",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "setFocus": {
        "complexType": {
          "signature": "(option?: OptionsSetFocus) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            },
            "OptionsSetFocus": {
              "location": "import",
              "path": "./interfaces/optionsSetFocus"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no campo.",
          "tags": []
        }
      },
      "setBlur": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Remove o foco do campo.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
}
