@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.cd0cd0d

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

@@ -25,11 +25,8 @@ export class SixTextarea {
     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.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
     this.handleChange = () => {
       if (this.nativeTextarea != null) {
         this.value = this.nativeTextarea.value;
@@ -39,7 +36,7 @@ export class SixTextarea {
     this.handleInput = () => {
       if (this.nativeTextarea != null) {
         this.value = this.nativeTextarea.value;
-        this.setTextareaHeight(this.nativeTextarea);
+        this.setTextareaHeight();
         this.sixInput.emit();
       }
     };
@@ -54,18 +51,14 @@ export class SixTextarea {
     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.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';
@@ -74,6 +67,8 @@ export class SixTextarea {
     this.minlength = undefined;
     this.maxlength = undefined;
     this.required = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.autocapitalize = 'off';
     this.autocorrect = 'off';
@@ -81,15 +76,12 @@ export class SixTextarea {
     this.autofocus = false;
     this.spellcheck = false;
     this.inputmode = undefined;
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleRowsChange() {
-    if (this.nativeTextarea != null) {
-      this.setTextareaHeight(this.nativeTextarea);
-    }
+    this.setTextareaHeight();
   }
   handleValueChange() {
     this.value = this.getValue();
@@ -97,39 +89,31 @@ export class SixTextarea {
       if (this.nativeTextarea.value !== this.value) {
         this.nativeTextarea.value = this.value;
       }
-      this.invalid = !this.nativeTextarea.checkValidity();
     }
   }
   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);
   }
   componentWillLoad() {
-    this.defaultValue = this.value || '';
     this.handleSlotChange();
   }
   componentDidLoad() {
-    const nativeTextarea = this.nativeTextarea;
-    if (nativeTextarea == null) {
-      return;
+    this.setTextareaHeight();
+    if (this.nativeTextarea != null) {
+      this.resizeObserver.observe(this.nativeTextarea);
     }
-    this.setTextareaHeight(nativeTextarea);
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight(nativeTextarea));
-    this.resizeObserver.observe(nativeTextarea);
-    this.eventListeners.add(nativeTextarea, 'invalid', (event) => {
-      this.invalid = true;
-      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
-        this.customErrorText = nativeTextarea.validationMessage;
-      }
-      event.preventDefault();
-    });
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a;
     if (this.nativeTextarea != null) {
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeTextarea);
+      this.resizeObserver.unobserve(this.nativeTextarea);
     }
-    (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeEventListener('slotchange', this.handleSlotChange);
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the textarea. */
@@ -154,66 +138,33 @@ export class SixTextarea {
   }
   /** Replaces a range of text with a new string. */
   async setRangeText(replacement, start, end, selectMode = 'preserve') {
-    if (this.nativeTextarea == null) {
+    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.nativeTextarea);
+      this.setTextareaHeight();
       this.sixChange.emit();
       this.sixInput.emit();
     }
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    if (this.nativeTextarea == null) {
-      return true;
-    }
-    return this.nativeTextarea.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 !== '';
-    if (this.nativeTextarea != null) {
-      this.nativeTextarea.setCustomValidity(message);
-      this.invalid = !this.nativeTextarea.checkValidity();
-    }
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  setTextareaHeight(nativeTextarea) {
+  setTextareaHeight() {
+    if (this.nativeTextarea == null)
+      return;
     if (this.resize === 'auto') {
-      nativeTextarea.style.height = 'auto';
-      const height = nativeTextarea.scrollHeight + 1;
-      nativeTextarea.style.height = height + 'px';
+      this.nativeTextarea.style.height = 'auto';
+      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';
     }
     else {
-      nativeTextarea.style.height = '';
+      this.nativeTextarea.style.height = undefined;
     }
   }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
-  }
   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.customErrorText != null ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
+    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, 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',
@@ -298,24 +249,6 @@ export class SixTextarea {
         "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,
@@ -334,30 +267,12 @@ export class SixTextarea {
         "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",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -446,7 +361,7 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
@@ -463,7 +378,7 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
@@ -487,15 +402,51 @@ export class SixTextarea {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The textarea's required attribute."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
-        "reflect": true,
+        "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",
+          "resolved": "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": "''"
+      },
       "invalid": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -505,7 +456,7 @@ export class SixTextarea {
         "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."
+          "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,
@@ -606,7 +557,7 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
-          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
           "references": {}
         },
         "required": false,
@@ -617,24 +568,6 @@ export class SixTextarea {
         },
         "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"
       }
     };
   }
@@ -642,7 +575,6 @@ export class SixTextarea {
     return {
       "hasFocus": {},
       "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
       "hasLabelSlot": {}
     };
   }
@@ -771,14 +703,14 @@ export class SixTextarea {
       },
       "select": {
         "complexType": {
-          "signature": "() => Promise<void>",
+          "signature": "() => Promise<void | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<void | undefined>"
         },
         "docs": {
           "text": "Selects all the text in the input.",
@@ -787,7 +719,7 @@ export class SixTextarea {
       },
       "setSelectionRange": {
         "complexType": {
-          "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>",
+          "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -803,7 +735,7 @@ export class SixTextarea {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<void | undefined>"
         },
         "docs": {
           "text": "Sets the start and end positions of the text selection (0-based).",
@@ -837,73 +769,6 @@ export class SixTextarea {
           "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": []
-        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"six-textarea.js","sourceRoot":"","sources":["../../../src/components/six-textarea/six-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private customErrorText = '';\n  private customValidation = false;\n  private eventListeners = new EventListeners();\n  private resizeObserver?: ResizeObserver;\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** The textarea's required attribute. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * 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.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (this.nativeTextarea != null) {\n      this.setTextareaHeight(this.nativeTextarea);\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n      this.invalid = !this.nativeTextarea.checkValidity();\n    }\n  }\n\n  /** default value the textarea will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value || '';\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeTextarea = this.nativeTextarea;\n    if (nativeTextarea == null) {\n      return;\n    }\n    this.setTextareaHeight(nativeTextarea);\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight(nativeTextarea));\n    this.resizeObserver.observe(nativeTextarea);\n    this.eventListeners.add(nativeTextarea, 'invalid', (event) => {\n      this.invalid = true;\n      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {\n        this.customErrorText = nativeTextarea.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver?.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) {\n      return;\n    }\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight(this.nativeTextarea);\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.nativeTextarea?.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    if (this.nativeTextarea == null) {\n      return true;\n    }\n    return this.nativeTextarea.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    if (this.nativeTextarea != null) {\n      this.nativeTextarea.setCustomValidity(message);\n      this.invalid = !this.nativeTextarea.checkValidity();\n    }\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.nativeTextarea?.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight(this.nativeTextarea);\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  };\n\n  private setTextareaHeight(nativeTextarea: HTMLTextAreaElement) {\n    if (this.resize === 'auto') {\n      nativeTextarea.style.height = 'auto';\n      const height = nativeTextarea.scrollHeight + 1;\n      nativeTextarea.style.height = height + 'px';\n    } else {\n      nativeTextarea.style.height = '';\n    }\n  }\n\n  private displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText != null ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-textarea.js","sourceRoot":"","sources":["../../../src/components/six-textarea/six-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,WAAW;;IACd,YAAO,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC7B,YAAO,GAAG,kBAAkB,EAAE,EAAE,CAAC;IACjC,eAAU,GAAG,sBAAsB,EAAE,EAAE,CAAC;IACxC,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;IAEvC,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IACtC,mBAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAmLpE,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;OACtB;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC,CAAC;oBA3MkB,KAAK;2BACE,KAAK;wBACR,KAAK;gBAGiC,QAAQ;gBAGtC,EAAE;iBAGc,EAAE;oBAG/B,EAAE;;gBAMN,CAAC;kBAG+B,UAAU;oBAGrB,KAAK;oBAGL,KAAK;;;oBAStB,KAAK;iBAGR,EAAE;qBAGE,EAAE;mBAGa,KAAK;0BAGf,KAAK;uBAGM,KAAK;wBAGlB,KAAK;qBAGR,KAAK;sBAGJ,KAAK;;;EAoB1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC7B,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;MAC/B,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;QAC5C,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;OACxC;KACF;EACH,CAAC;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;EACtE,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;MAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAClD;EACH,CAAC;EAED,oBAAoB;;IAClB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;MAC/B,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACpD;IACD,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;EAClC,CAAC;EAED,kCAAkC;EAElC,KAAK,CAAC,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;EACtC,CAAC;EAED,wCAAwC;EAExC,KAAK,CAAC,WAAW;;IACf,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,EAAE,CAAC;EAC9B,CAAC;EAED,yCAAyC;EAEzC,KAAK,CAAC,MAAM;;IACV,OAAO,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,EAAE,CAAC;EACvC,CAAC;EAED,wEAAwE;EAExE,KAAK,CAAC,iBAAiB,CACrB,cAAsB,EACtB,YAAoB,EACpB,qBAAsD,MAAM;;IAE5D,OAAO,MAAA,IAAI,CAAC,cAAc,0CAAE,iBAAiB,CAAC,cAAc,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC;EAClG,CAAC;EAED,kDAAkD;EAElD,KAAK,CAAC,YAAY,CAChB,WAAmB,EACnB,KAAa,EACb,GAAW,EACX,aAAsD,UAAU;IAEhE,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI;MAAE,OAAO;IAExC,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACtE,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;MACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;MACvC,IAAI,CAAC,iBAAiB,EAAE,CAAC;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;EACH,CAAC;EAgCO,iBAAiB;IACvB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI;MAAE,OAAO;IAExC,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;MAC1B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;MAC1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,IAAI,CAAC;KAC5E;SAAM;MACJ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAA6B,GAAG,SAAS,CAAC;KACtE;EACH,CAAC;EAEO,QAAQ;;IACd,OAAO,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EACvC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO;MAE1B,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;UACL,QAAQ,EAAE,IAAI;UAEd,QAAQ;UACR,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UACxC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;UAC1C,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UAExC,SAAS;UACT,oBAAoB,EAAE,IAAI,CAAC,QAAQ;UACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;UAClC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC;UAC/C,mBAAmB,EAAE,IAAI,CAAC,OAAO;UAEjC,YAAY;UACZ,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;UAC/C,2BAA2B,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;UACvD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;SAChD;QAED,gBACE,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,qBACR,IAAI,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,CACE,CACM,CACf,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  private inputId = `textarea-${++id}`;\n  private labelId = `textarea-label-${id}`;\n  private helpTextId = `textarea-help-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeTextarea?: HTMLTextAreaElement;\n  private eventListeners = new EventListeners();\n  private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n  @Element() host!: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength?: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength?: number;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize = 'off';\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete = 'off';\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus = false;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck = false;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.value = this.getValue();\n    if (this.nativeTextarea != null) {\n      if (this.nativeTextarea.value !== this.value) {\n        this.nativeTextarea.value = this.value;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-textarea-input', 'input', this.host);\n    this.eventListeners.forward('six-textarea-change', 'change', this.host);\n    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.observe(this.nativeTextarea);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.nativeTextarea != null) {\n      this.resizeObserver.unobserve(this.nativeTextarea);\n    }\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeTextarea?.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.nativeTextarea?.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.nativeTextarea?.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    if (this.nativeTextarea == null) return;\n\n    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n    if (this.getValue() !== this.nativeTextarea.value) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  private handleChange = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleInput = () => {\n    if (this.nativeTextarea != null) {\n      this.value = this.nativeTextarea.value;\n      this.setTextareaHeight();\n      this.sixInput.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  private setTextareaHeight() {\n    if (this.nativeTextarea == null) return;\n\n    if (this.resize === 'auto') {\n      this.nativeTextarea.style.height = 'auto';\n      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n    } else {\n      (this.nativeTextarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  private getValue(): string {\n    return (this.value ?? '').toString();\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.errorText}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.getValue().length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.nativeTextarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.getValue()}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -1,11 +1,23 @@
 import { h } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
+import { getSlot, hasSlot } from '../../utils/slot';
 /**
  * @since 1.0
  * @status stable
  */
 export class SixTile {
   constructor() {
+    this.handleSlotChange = () => {
+      this.hasIconSlot = hasSlot(this.host, 'icon');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+      if (this.hasIconSlot) {
+        const slot = getSlot(this.host, 'icon');
+        slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
+      }
+      if (this.hasLabelSlot) {
+        const slot = getSlot(this.host, 'label');
+        slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
+      }
+    };
     this.handleCloseClickEvent = () => {
       this.visible = false;
       this.sixTileClose.emit();
@@ -32,24 +44,9 @@ export class SixTile {
   async show() {
     this.visible = true;
   }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
   componentWillLoad() {
     this.handleSlotChange();
   }
-  handleSlotChange() {
-    this.hasIconSlot = hasSlot(this.host, 'icon');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    if (this.hasIconSlot) {
-      let slot = this.host.querySelector(`[slot="icon"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-    if (this.hasLabelSlot) {
-      let slot = this.host.querySelector(`[slot="label"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-  }
   render() {
     return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { part: "base", class: {
         tile: true,
@@ -101,15 +98,15 @@ export class SixTile {
         "defaultValue": "''"
       },
       "iconName": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The icon's name."