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

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

@@ -44,6 +44,44 @@ export class SixInput {
     this.eventListeners = new EventListeners();
     /** defaultValue which the input will be reverted to when executing reset */
     this.defaultValue = '';
+    this.handleChange = () => {
+      if (this.nativeInput != null) {
+        this.value = this.nativeInput.value;
+        this.sixChange.emit();
+      }
+    };
+    this.handleInput = () => {
+      if (this.nativeInput != null) {
+        this.value = this.nativeInput.value;
+        this.sixInput.emit();
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleClearClick = (event) => {
+      this.value = '';
+      this.sixClear.emit();
+      this.sixInput.emit();
+      this.sixChange.emit();
+      if (this.nativeInput != null) {
+        this.nativeInput.focus();
+      }
+      event.stopPropagation();
+    };
+    this.handlePasswordToggle = () => {
+      this.isPasswordVisible = !this.isPasswordVisible;
+    };
+    this.handleSlotChange = () => {
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+      this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
     this.hasErrorTextSlot = false;
@@ -66,12 +104,12 @@ export class SixInput {
     this.max = undefined;
     this.step = undefined;
     this.pattern = undefined;
-    this.required = undefined;
-    this.autocapitalize = undefined;
-    this.autocorrect = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.spellcheck = undefined;
+    this.required = false;
+    this.autocapitalize = 'off';
+    this.autocorrect = 'off';
+    this.autocomplete = 'off';
+    this.autofocus = false;
+    this.spellcheck = false;
     this.invalid = false;
     this.clearable = false;
     this.togglePassword = false;
@@ -83,141 +121,130 @@ export class SixInput {
     this.handleSlotChange();
   }
   handleValueChange() {
-    if (!this.input) {
-      return;
+    this.value = this.getValue();
+    if (this.nativeInput != null) {
+      if (this.nativeInput.value !== this.value) {
+        this.nativeInput.value = this.value;
+      }
+      this.invalid = !this.nativeInput.checkValidity();
     }
-    this.input.value = this.value;
-    this.invalid = !this.input.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.handleClearClick = this.handleClearClick.bind(this);
-    this.handlePasswordToggle = this.handlePasswordToggle.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);
   }
   componentWillLoad() {
-    this.defaultValue = this.value;
+    this.defaultValue = this.getValue();
     this.handleSlotChange();
   }
   componentDidLoad() {
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.validationMessage;
+    const nativeInput = this.nativeInput;
+    if (nativeInput == null) {
+      return;
+    }
+    this.eventListeners.add(nativeInput, 'invalid', (event) => {
+      this.invalid = true;
+      if (this.customValidation || (!this.hasErrorTextSlot && this.errorText === '' && this.customErrorText === '')) {
+        this.customErrorText = nativeInput.validationMessage;
       }
       event.preventDefault();
     });
   }
   disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the input. */
   async setFocus(options) {
-    this.input.focus(options);
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus from the input. */
   async removeFocus() {
-    this.input.blur();
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Selects all the text in the input. */
   async select() {
-    return this.input.select();
+    var _a;
+    return (_a = this.nativeInput) === 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.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    var _a;
+    return (_a = this.nativeInput) === 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.input.setRangeText(replacement, start, end, selectMode);
-    if (this.value !== this.input.value) {
-      this.value = this.input.value;
+    if (this.nativeInput == null) {
+      return;
+    }
+    this.nativeInput.setRangeText(replacement, start, end, selectMode);
+    if (this.getValue() !== this.nativeInput.value) {
+      this.value = this.nativeInput.value;
       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.input.reportValidity();
+    var _a;
+    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
   }
   /** Checks for validity. */
   async checkValidity() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.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.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
+    if (this.nativeInput != null) {
+      this.nativeInput.setCustomValidity(message);
+      this.invalid = !this.nativeInput.checkValidity();
+    }
   }
   /** Returns the native input's validity */
   async getValidity() {
-    return this.input.validity;
+    var _a;
+    return (_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.validity;
   }
   /** Returns the native input's validity */
   async isValid() {
-    return this.input.validity.valid;
+    if (this.nativeInput == null) {
+      return true;
+    }
+    return this.nativeInput.validity.valid;
   }
   /** Returns the native input's validationMessage */
   async getValidationMessage() {
-    return this.input.validationMessage;
+    if (this.nativeInput == null) {
+      return '';
+    }
+    return this.nativeInput.validationMessage;
   }
   /** Resets the formcontrol */
   async reset() {
+    var _a;
     this.value = this.defaultValue;
     this.customErrorText = '';
     this.customValidation = false;
-    this.input.setCustomValidity('');
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
     this.invalid = false;
   }
-  handleChange() {
-    this.value = this.input.value;
-    this.sixChange.emit();
-  }
-  handleInput() {
-    this.value = this.input.value;
-    this.sixInput.emit();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleClearClick(event) {
-    this.value = '';
-    this.sixClear.emit();
-    this.sixInput.emit();
-    this.sixChange.emit();
-    this.input.focus();
-    event.stopPropagation();
-  }
-  handlePasswordToggle() {
-    this.isPasswordVisible = !this.isPasswordVisible;
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-  }
   displayError() {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
-  render() {
+  getValue() {
     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 ((_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 !== '' ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("div", { part: "base", class: {
         input: true,
         // Sizes
         'input--small': this.size === 'small',
@@ -228,12 +255,12 @@ export class SixInput {
         'input--pill': this.pill,
         'input--disabled': this.disabled,
         'input--focused': this.hasFocus,
-        'input--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+        'input--empty': this.getValue().length === 0,
         'input--invalid': this.invalid,
-      } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.input = el), id: this.inputId, size: 1, class: {
+      } }, h("span", { part: "prefix", class: "input__prefix" }, h("slot", { name: "prefix" })), h("input", { part: "input", ref: (el) => (this.nativeInput = el), id: this.inputId, size: 1, class: {
         input__control: true,
         input__control__prefix: hasSlot(this.host, 'prefix'),
-      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.value, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onInvalid: this.handleInvalid, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
+      }, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, step: this.step, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.pattern, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-testid": "input-control" }), this.clearable && (h("button", { part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { name: "clear-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { part: "password-toggle-button", class: "input__password-toggle", type: "button", onClick: this.handlePasswordToggle, tabindex: "-1" }, this.isPasswordVisible ? (h("slot", { name: "show-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility_off"))) : (h("slot", { name: "hide-password-icon" }, h("six-icon", { size: ICON_SIZES[this.size] }, "visibility"))))), h("span", { part: "suffix", class: "input__suffix" }, h("slot", { name: "suffix" })))));
   }
   static get is() { return "six-input"; }
   static get encapsulation() { return "shadow"; }
@@ -398,11 +425,11 @@ export class SixInput {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The input's placeholder text."
@@ -451,11 +478,11 @@ export class SixInput {
         "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."
@@ -468,11 +495,11 @@ export class SixInput {
         "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."
@@ -485,11 +512,11 @@ export class SixInput {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The input's minimum value."
@@ -502,11 +529,11 @@ export class SixInput {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The input's maximum value."
@@ -519,11 +546,11 @@ export class SixInput {
         "mutable": false,
         "complexType": {
           "original": "number",
-          "resolved": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The input's step attribute."
@@ -536,11 +563,11 @@ export class SixInput {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "A pattern to validate input against."
@@ -563,7 +590,8 @@ export class SixInput {
           "text": "Set to true to make the input a required field."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
       "autocapitalize": {
         "type": "string",
@@ -580,14 +608,15 @@ export class SixInput {
           "text": "The input'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,
@@ -597,7 +626,8 @@ export class SixInput {
           "text": "The input's autocorrect attribute."
         },
         "attribute": "autocorrect",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autocomplete": {
         "type": "string",
@@ -614,7 +644,8 @@ export class SixInput {
           "text": "The input's autocomplete attribute."
         },
         "attribute": "autocomplete",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autofocus": {
         "type": "boolean",
@@ -631,7 +662,8 @@ export class SixInput {
           "text": "The input's autofocus attribute."
         },
         "attribute": "autofocus",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "spellcheck": {
         "type": "boolean",
@@ -648,7 +680,8 @@ export class SixInput {
           "text": "Enables spell checking on the input."
         },
         "attribute": "spellcheck",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "invalid": {
         "type": "boolean",
@@ -709,11 +742,11 @@ export class SixInput {
         "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 input's inputmode attribute."
@@ -869,26 +902,6 @@ export class SixInput {
             }
           }
         }
-      }, {
-        "method": "sixValueChange",
-        "name": "six-input-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-input-value-change will emit whenever the value changes.\nSo be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\nbut not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\nor leaves the input field after entering some data."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
       }];
   }
   static get methods() {
@@ -933,14 +946,14 @@ export class SixInput {
       },
       "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.",
@@ -949,7 +962,7 @@ export class SixInput {
       },
       "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": ""
@@ -965,7 +978,7 @@ export class SixInput {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<void | undefined>"
         },
         "docs": {
           "text": "Sets the start and end positions of the text selection (0-based).",
@@ -1002,14 +1015,14 @@ export class SixInput {
       },
       "reportValidity": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<boolean | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
           "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
@@ -1053,7 +1066,7 @@ export class SixInput {
       },
       "getValidity": {
         "complexType": {
-          "signature": "() => Promise<ValidityState>",
+          "signature": "() => Promise<ValidityState | undefined>",
           "parameters": [],
           "references": {
             "Promise": {
@@ -1063,7 +1076,7 @@ export class SixInput {
               "location": "global"
             }
           },
-          "return": "Promise<ValidityState>"
+          "return": "Promise<ValidityState | undefined>"
         },
         "docs": {
           "text": "Returns the native input's validity",