@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f015905

package/dist/collection/components/six-textarea/six-textarea.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import FormControl from '../../functional-components/form-control/form-control';
-import { hasSlot } from '../../utils/slot';
-import { EventListeners } from '../../utils/event-listeners';
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
+import { EventListeners } from "../../utils/event-listeners";
 let id = 0;
 /**
  * @since 1.0
@@ -20,901 +20,815 @@ let id = 0;
  * @part help-text - The textarea help text.
  */
 export class SixTextarea {
-  constructor() {
-    this.inputId = `textarea-${++id}`;
-    this.labelId = `textarea-label-${id}`;
-    this.helpTextId = `textarea-help-text-${id}`;
-    this.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.eventListeners = new EventListeners();
-    /** default value the textarea will be reverted to when reset is executed */
-    this.defaultValue = '';
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasLabelSlot = false;
-    this.size = 'medium';
-    this.name = '';
-    this.value = '';
-    this.label = '';
-    this.helpText = '';
-    this.errorText = '';
-    this.placeholder = undefined;
-    this.rows = 4;
-    this.resize = 'vertical';
-    this.disabled = false;
-    this.readonly = false;
-    this.minlength = undefined;
-    this.maxlength = undefined;
-    this.required = undefined;
-    this.invalid = false;
-    this.autocapitalize = undefined;
-    this.autocorrect = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.spellcheck = undefined;
-    this.inputmode = undefined;
-    this.errorOnBlur = false;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleRowsChange() {
-    if (this.textarea) {
-      this.setTextareaHeight();
+    constructor() {
+        this.inputId = `textarea-${++id}`;
+        this.labelId = `textarea-label-${id}`;
+        this.helpTextId = `textarea-help-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+        this.handleChange = () => {
+            if (this.nativeTextarea != null) {
+                this.value = this.nativeTextarea.value;
+                this.sixChange.emit();
+            }
+        };
+        this.handleInput = () => {
+            if (this.nativeTextarea != null) {
+                this.value = this.nativeTextarea.value;
+                this.setTextareaHeight();
+                this.sixInput.emit();
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+            this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+        };
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorTextSlot = false;
+        this.size = 'medium';
+        this.name = '';
+        this.value = '';
+        this.helpText = '';
+        this.placeholder = undefined;
+        this.rows = 4;
+        this.resize = 'vertical';
+        this.disabled = false;
+        this.readonly = false;
+        this.minlength = undefined;
+        this.maxlength = undefined;
+        this.required = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.autocapitalize = 'off';
+        this.autocorrect = 'off';
+        this.autocomplete = 'off';
+        this.autofocus = false;
+        this.spellcheck = false;
+        this.inputmode = undefined;
     }
-  }
-  handleValueChange() {
-    if (!this.textarea) {
-      return;
+    handleLabelChange() {
+        this.handleSlotChange();
     }
-    this.textarea.value = this.value;
-    this.invalid = !this.textarea.checkValidity();
-    this.sixValueChange.emit();
-  }
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.defaultValue = this.value || '';
-    this.handleSlotChange();
-  }
-  componentDidLoad() {
-    this.setTextareaHeight();
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
-    this.resizeObserver.observe(this.textarea);
-    this.eventListeners.add(this.textarea, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.textarea.validationMessage;
-      }
-      event.preventDefault();
-    });
-  }
-  disconnectedCallback() {
-    this.resizeObserver.unobserve(this.textarea);
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Sets focus on the textarea. */
-  async setFocus(options) {
-    this.textarea.focus(options);
-  }
-  /** Removes focus fromt the textarea. */
-  async removeFocus() {
-    this.textarea.blur();
-  }
-  /** Selects all the text in the input. */
-  async select() {
-    return this.textarea.select();
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  async setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
-    return this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
-  }
-  /** Replaces a range of text with a new string. */
-  async setRangeText(replacement, start, end, selectMode = 'preserve') {
-    this.textarea.setRangeText(replacement, start, end, selectMode);
-    if (this.value !== this.textarea.value) {
-      this.value = this.textarea.value;
-      this.setTextareaHeight();
-      this.sixChange.emit();
-      this.sixInput.emit();
+    handleRowsChange() {
+        this.setTextareaHeight();
     }
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.textarea.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.textarea.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    this.textarea.setCustomValidity(message);
-    this.invalid = !this.textarea.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.textarea.setCustomValidity('');
-    this.invalid = false;
-  }
-  handleChange() {
-    this.sixChange.emit();
-  }
-  handleInput() {
-    this.value = this.textarea.value;
-    this.setTextareaHeight();
-    this.sixInput.emit();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleSlotChange() {
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-  }
-  setTextareaHeight() {
-    if (this.resize === 'auto') {
-      this.textarea.style.height = 'auto';
-      this.textarea.style.height = this.textarea.scrollHeight + 'px';
+    handleValueChange() {
+        this.value = this.getValue();
+        if (this.nativeTextarea != null) {
+            if (this.nativeTextarea.value !== this.value) {
+                this.nativeTextarea.value = this.value;
+            }
+        }
     }
-    else {
-      this.textarea.style.height = undefined;
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-textarea-input', 'input', this.host);
+        this.eventListeners.forward('six-textarea-change', 'change', this.host);
+        this.eventListeners.forward('six-textarea-focus', 'focus', this.host);
+        this.eventListeners.forward('six-textarea-blur', 'blur', this.host);
     }
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
-  render() {
-    var _a;
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
-        textarea: true,
-        // Sizes
-        'textarea--small': this.size === 'small',
-        'textarea--medium': this.size === 'medium',
-        'textarea--large': this.size === 'large',
-        // States
-        'textarea--disabled': this.disabled,
-        'textarea--focused': this.hasFocus,
-        'textarea--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
-        'textarea--invalid': this.invalid,
-        // Modifiers
-        'textarea--resize-none': this.resize === 'none',
-        'textarea--resize-vertical': this.resize === 'vertical',
-        'textarea--resize-auto': this.resize === 'auto',
-      } }, h("textarea", { part: "textarea", ref: (el) => (this.textarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.value, autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onInvalid: this.handleInvalid, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
-  }
-  static get is() { return "six-textarea"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-textarea.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-textarea.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's size."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's name attribute."
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's value attribute."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's help text. Alternatively, you can use the help-text slot."
-        },
-        "attribute": "help-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's error text. Alternatively, you can use the error-text slot."
-        },
-        "attribute": "error-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's placeholder text."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "rows": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The number of rows to display by default."
-        },
-        "attribute": "rows",
-        "reflect": false,
-        "defaultValue": "4"
-      },
-      "resize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'vertical' | 'auto'",
-          "resolved": "\"auto\" | \"none\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls how the textarea can be resized."
-        },
-        "attribute": "resize",
-        "reflect": false,
-        "defaultValue": "'vertical'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the textarea."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true for a readonly textarea."
-        },
-        "attribute": "readonly",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "minlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The minimum length of input that will be considered valid."
-        },
-        "attribute": "minlength",
-        "reflect": true
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum length of input that will be considered valid."
-        },
-        "attribute": "maxlength",
-        "reflect": true
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's required attribute."
-        },
-        "attribute": "required",
-        "reflect": true
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n`minlength`, and `maxlength` using the browser's constraint validation API."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "autocapitalize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's autocaptialize attribute."
-        },
-        "attribute": "autocapitalize",
-        "reflect": false
-      },
-      "autocorrect": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's autocorrect attribute."
-        },
-        "attribute": "autocorrect",
-        "reflect": false
-      },
-      "autocomplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's autocomplete attribute."
-        },
-        "attribute": "autocomplete",
-        "reflect": false
-      },
-      "autofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's autofocus attribute."
-        },
-        "attribute": "autofocus",
-        "reflect": false
-      },
-      "spellcheck": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's spellcheck attribute."
-        },
-        "attribute": "spellcheck",
-        "reflect": false
-      },
-      "inputmode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
-          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The textarea's inputmode attribute."
-        },
-        "attribute": "inputmode",
-        "reflect": false
-      },
-      "errorOnBlur": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
-        },
-        "attribute": "error-on-blur",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {},
-      "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
-      "hasLabelSlot": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixChange",
-        "name": "six-textarea-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control's value changes. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    componentDidLoad() {
+        this.setTextareaHeight();
+        if (this.nativeTextarea != null) {
+            this.resizeObserver.observe(this.nativeTextarea);
         }
-      }, {
-        "method": "sixInput",
-        "name": "six-textarea-input",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control receives input. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.nativeTextarea != null) {
+            this.resizeObserver.unobserve(this.nativeTextarea);
         }
-      }, {
-        "method": "sixFocus",
-        "name": "six-textarea-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control gains focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    /** Sets focus on the textarea. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus fromt the textarea. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** Selects all the text in the input. */
+    async select() {
+        var _a;
+        return (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    /** Sets the start and end positions of the text selection (0-based). */
+    async setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
+        var _a;
+        return (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    }
+    /** Replaces a range of text with a new string. */
+    async setRangeText(replacement, start, end, selectMode = 'preserve') {
+        if (this.nativeTextarea == null)
+            return;
+        this.nativeTextarea.setRangeText(replacement, start, end, selectMode);
+        if (this.getValue() !== this.nativeTextarea.value) {
+            this.value = this.nativeTextarea.value;
+            this.setTextareaHeight();
+            this.sixChange.emit();
+            this.sixInput.emit();
         }
-      }, {
-        "method": "sixBlur",
-        "name": "six-textarea-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control loses focus. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    }
+    setTextareaHeight() {
+        if (this.nativeTextarea == null)
+            return;
+        if (this.resize === 'auto') {
+            this.nativeTextarea.style.height = 'auto';
+            this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';
         }
-      }, {
-        "method": "sixValueChange",
-        "name": "six-textarea-value-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted whenever the value changes. Access the new value via event.target.value.\nsix-textarea-value-change will emit whenever the value changes.\nSo be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\nbut not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\nor leaves the textarea field after entering some data."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        else {
+            this.nativeTextarea.style.height = undefined;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    getValue() {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
+    }
+    render() {
+        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
+                textarea: true,
+                // Sizes
+                'textarea--small': this.size === 'small',
+                'textarea--medium': this.size === 'medium',
+                'textarea--large': this.size === 'large',
+                // States
+                'textarea--disabled': this.disabled,
+                'textarea--focused': this.hasFocus,
+                'textarea--empty': this.getValue().length === 0,
+                'textarea--invalid': this.invalid,
+                // Modifiers
+                'textarea--resize-none': this.resize === 'none',
+                'textarea--resize-vertical': this.resize === 'vertical',
+                'textarea--resize-auto': this.resize === 'auto',
+            } }, h("textarea", { part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+    }
+    static get is() { return "six-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
             },
-            "FocusOptions": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the textarea.",
-          "tags": []
-        }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus fromt the textarea.",
-          "tags": []
-        }
-      },
-      "select": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's name attribute."
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's value attribute."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's help text. Alternatively, you can use the help-text slot."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's placeholder text."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of rows to display by default."
+                },
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'vertical' | 'auto'",
+                    "resolved": "\"auto\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls how the textarea can be resized."
+                },
+                "attribute": "resize",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the textarea."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true for a readonly textarea."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum length of input that will be considered valid."
+                },
+                "attribute": "minlength",
+                "reflect": true
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum length of input that will be considered valid."
+                },
+                "attribute": "maxlength",
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autocapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's autocaptialize attribute."
+                },
+                "attribute": "autocapitalize",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autocorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'on' | 'off'",
+                    "resolved": "\"off\" | \"on\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's autocorrect attribute."
+                },
+                "attribute": "autocorrect",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's autocomplete attribute."
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's autofocus attribute."
+                },
+                "attribute": "autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "spellcheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's spellcheck attribute."
+                },
+                "attribute": "spellcheck",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputmode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's inputmode attribute."
+                },
+                "attribute": "inputmode",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Selects all the text in the input.",
-          "tags": []
-        }
-      },
-      "setSelectionRange": {
-        "complexType": {
-          "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasHelpTextSlot": {},
+            "hasLabelSlot": {},
+            "hasErrorTextSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "six-textarea-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixInput",
+                "name": "six-textarea-input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control receives input. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
+                "method": "sixFocus",
+                "name": "six-textarea-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+                "method": "sixBlur",
+                "name": "six-textarea-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the textarea.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus fromt the textarea.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "Selects all the text in the input.",
+                    "tags": []
+                }
+            },
+            "setSelectionRange": {
+                "complexType": {
+                    "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>",
+                    "parameters": [{
+                            "name": "selectionStart",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionEnd",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionDirection",
+                            "type": "\"none\" | \"forward\" | \"backward\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "Sets the start and end positions of the text selection (0-based).",
+                    "tags": []
+                }
+            },
+            "setRangeText": {
+                "complexType": {
+                    "signature": "(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>",
+                    "parameters": [{
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectMode",
+                            "type": "\"select\" | \"start\" | \"end\" | \"preserve\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replaces a range of text with a new string.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the start and end positions of the text selection (0-based).",
-          "tags": []
-        }
-      },
-      "setRangeText": {
-        "complexType": {
-          "signature": "(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "helpText",
+                "methodName": "handleLabelChange"
             }, {
-              "tags": [],
-              "text": ""
+                "propName": "errorText",
+                "methodName": "handleLabelChange"
             }, {
-              "tags": [],
-              "text": ""
+                "propName": "label",
+                "methodName": "handleLabelChange"
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Replaces a range of text with a new string.",
-          "tags": []
-        }
-      },
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
-        }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "helpText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "errorText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "label",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "rows",
-        "methodName": "handleRowsChange"
-      }, {
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }];
-  }
+                "propName": "rows",
+                "methodName": "handleRowsChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-textarea.js.map