@six-group/ui-library 0.0.0-insider.3f37dd4 → 0.0.0-insider.5b24078

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
@@ -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();
       }
     };
@@ -58,14 +55,12 @@ export class SixTextarea {
     };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
+    this.hasErrorTextSlot = 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 +69,9 @@ export class SixTextarea {
     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';
@@ -81,15 +79,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 +92,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 +141,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, 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',
@@ -298,24 +252,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 +270,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 +364,7 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
@@ -463,7 +381,7 @@ export class SixTextarea {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
@@ -487,15 +405,68 @@ 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 | 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": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -505,7 +476,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 +577,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 +588,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,8 +595,8 @@ export class SixTextarea {
     return {
       "hasFocus": {},
       "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
-      "hasLabelSlot": {}
+      "hasLabelSlot": {},
+      "hasErrorTextSlot": {}
     };
   }
   static get events() {
@@ -663,7 +616,8 @@ export class SixTextarea {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -683,7 +637,8 @@ export class SixTextarea {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -703,7 +658,8 @@ export class SixTextarea {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -723,7 +679,8 @@ export class SixTextarea {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -740,10 +697,12 @@ export class SixTextarea {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -759,7 +718,8 @@ export class SixTextarea {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -771,14 +731,15 @@ export class SixTextarea {
       },
       "select": {
         "complexType": {
-          "signature": "() => Promise<void>",
+          "signature": "() => Promise<void | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<void | undefined>"
         },
         "docs": {
           "text": "Selects all the text in the input.",
@@ -787,7 +748,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": ""
@@ -800,10 +761,11 @@ export class SixTextarea {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<void | undefined>"
         },
         "docs": {
           "text": "Sets the start and end positions of the text selection (0-based).",
@@ -828,7 +790,8 @@ export class SixTextarea {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -837,73 +800,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": []
-        }
       }
     };
   }