import { Component, Host, h, Prop, Watch, Event } from '@stencil/core';
export class UxplTextarea {
  constructor() {
    this.inputId = `toggle-button-${textareaIds++}`;
    this.disabled = false;
    this.readonly = false;
    this.value = '';
    this.onInput = () => {
      if (this.nativeInput) {
        this.value = this.nativeInput.value;
      }
    };
  }
  valueChanged() {
    const value = this.getValue();
    this.uxplChanged.emit({ value });
  }
  getValue() {
    return this.value || '';
  }
  render() {
    return (h(Host, null,
      h("div", { class: "pl-form-field pl-form-field--textarea", part: "form-field" },
        h("label", { class: "pl-form-field__label", htmlFor: this.inputId, part: "label" },
          h("slot", null)),
        h("textarea", { part: "text-area", ref: el => this.nativeInput = el, class: "pl-form-field__textarea", disabled: this.disabled, maxlength: this.maxlength, name: this.inputId, onInput: this.onInput, placeholder: this.placeholder || '', readonly: this.readonly, value: this.value }),
        h("div", { class: "pl-form-field__helper-text" }, this.hint))));
  }
  static get is() { return "uxpl-textarea"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-textarea.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-textarea.css"]
  }; }
  static get properties() { return {
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "maxlength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "maxlength",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "readonly",
      "reflect": false,
      "defaultValue": "false"
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "hint"
      },
      "attribute": "hint",
      "reflect": false
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string | null",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
  static get events() { return [{
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "TextareaChangeEventDetail",
        "resolved": "TextareaChangeEventDetail",
        "references": {
          "TextareaChangeEventDetail": {
            "location": "import",
            "path": "./uxpl-textarea-interface"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "valueChanged"
    }]; }
}
let textareaIds = 0;
