@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.a8d68c7

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

@@ -25,21 +25,39 @@ 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.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.nativeTextarea);
+        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.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';
@@ -47,149 +65,110 @@ export class SixTextarea {
     this.readonly = false;
     this.minlength = undefined;
     this.maxlength = undefined;
-    this.required = undefined;
+    this.required = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
-    this.autocapitalize = undefined;
-    this.autocorrect = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.spellcheck = undefined;
+    this.autocapitalize = 'off';
+    this.autocorrect = 'off';
+    this.autocomplete = 'off';
+    this.autofocus = false;
+    this.spellcheck = false;
     this.inputmode = undefined;
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleRowsChange() {
-    if (this.textarea) {
-      this.setTextareaHeight();
+    if (this.nativeTextarea != null) {
+      this.setTextareaHeight(this.nativeTextarea);
     }
   }
   handleValueChange() {
-    if (!this.textarea) {
-      return;
+    this.value = this.getValue();
+    if (this.nativeTextarea != null) {
+      if (this.nativeTextarea.value !== this.value) {
+        this.nativeTextarea.value = this.value;
+      }
     }
-    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);
+    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() {
-    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();
-    });
+    const nativeTextarea = this.nativeTextarea;
+    if (nativeTextarea == null) {
+      return;
+    }
+    this.setTextareaHeight(nativeTextarea);
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight(nativeTextarea));
+    this.resizeObserver.observe(nativeTextarea);
   }
   disconnectedCallback() {
-    this.resizeObserver.unobserve(this.textarea);
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a, _b;
+    if (this.nativeTextarea != null) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.nativeTextarea);
+    }
+    (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the textarea. */
   async setFocus(options) {
-    this.textarea.focus(options);
+    var _a;
+    (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus fromt the textarea. */
   async removeFocus() {
-    this.textarea.blur();
+    var _a;
+    (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Selects all the text in the input. */
   async select() {
-    return this.textarea.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') {
-    return this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    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') {
-    this.textarea.setRangeText(replacement, start, end, selectMode);
-    if (this.value !== this.textarea.value) {
-      this.value = this.textarea.value;
-      this.setTextareaHeight();
+    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.sixChange.emit();
       this.sixInput.emit();
     }
   }
-  /** 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() {
+  setTextareaHeight(nativeTextarea) {
     if (this.resize === 'auto') {
-      this.textarea.style.height = 'auto';
-      this.textarea.style.height = this.textarea.scrollHeight + 'px';
+      nativeTextarea.style.height = 'auto';
+      const height = nativeTextarea.scrollHeight + 1;
+      nativeTextarea.style.height = height + 'px';
     }
     else {
-      this.textarea.style.height = undefined;
+      nativeTextarea.style.height = '';
     }
   }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  getValue() {
+    var _a;
+    return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
   }
   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: {
+    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',
@@ -198,13 +177,13 @@ export class SixTextarea {
         // States
         'textarea--disabled': this.disabled,
         'textarea--focused': this.hasFocus,
-        'textarea--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+        '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.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 }))));
+      } }, 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"; }
@@ -274,24 +253,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,
@@ -310,34 +271,16 @@ 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,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The textarea's placeholder text."
@@ -422,11 +365,11 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The minimum length of input that will be considered valid."
@@ -439,11 +382,11 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The maximum length of input that will be considered valid."
@@ -463,14 +406,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",
@@ -480,7 +460,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,
@@ -501,14 +481,15 @@ export class SixTextarea {
           "text": "The textarea's autocaptialize attribute."
         },
         "attribute": "autocapitalize",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autocorrect": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'on' | 'off'",
+          "resolved": "\"off\" | \"on\"",
           "references": {}
         },
         "required": false,
@@ -518,7 +499,8 @@ export class SixTextarea {
           "text": "The textarea's autocorrect attribute."
         },
         "attribute": "autocorrect",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autocomplete": {
         "type": "string",
@@ -535,7 +517,8 @@ export class SixTextarea {
           "text": "The textarea's autocomplete attribute."
         },
         "attribute": "autocomplete",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autofocus": {
         "type": "boolean",
@@ -552,7 +535,8 @@ export class SixTextarea {
           "text": "The textarea's autofocus attribute."
         },
         "attribute": "autofocus",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "spellcheck": {
         "type": "boolean",
@@ -569,42 +553,25 @@ export class SixTextarea {
           "text": "The textarea's spellcheck attribute."
         },
         "attribute": "spellcheck",
-        "reflect": false
+        "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\"",
+          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "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"
       }
     };
   }
@@ -612,7 +579,6 @@ export class SixTextarea {
     return {
       "hasFocus": {},
       "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
       "hasLabelSlot": {}
     };
   }
@@ -697,26 +663,6 @@ export class SixTextarea {
             }
           }
         }
-      }, {
-        "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"
-            }
-          }
-        }
       }];
   }
   static get methods() {
@@ -761,14 +707,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.",
@@ -777,7 +723,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": ""
@@ -793,7 +739,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).",
@@ -827,73 +773,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": []
-        }
       }
     };
   }