@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.3

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

@@ -1,7 +1,8 @@
-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";
+import { submitForm } from "../../utils/form";
 const ICON_SIZES = {
   large: 'medium',
   medium: 'small',
@@ -21,7 +22,6 @@ let id = 0;
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
  * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
- * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
  *
  * @part base - The component's base wrapper.
  * @part form-control - The form control that wraps the label, input, and help-text.
@@ -39,14 +39,58 @@ export class SixInput {
     this.labelId = `input-label-${id}`;
     this.helpTextId = `input-help-text-${id}`;
     this.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new EventListeners();
-    /** defaultValue which the input will be reverted to when executing reset */
-    this.defaultValue = '';
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      if (this.nativeInput != null) {
+        this.value = this.nativeInput.value;
+        this.sixChange.emit();
+      }
+    };
+    this.handleInput = (event) => {
+      event.stopPropagation();
+      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.handleKeyDown = (event) => {
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === 'Enter' && !hasModifier) {
+        setTimeout(() => {
+          if (!event.defaultPrevented && !event.isComposing) {
+            submitForm(this.host);
+          }
+        });
+      }
+    };
+    this.handlePasswordToggle = () => {
+      this.isPasswordVisible = !this.isPasswordVisible;
+    };
+    this.handleSlotChange = () => {
+      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+      this.hasLabelSlot = hasSlot(this.host, 'label');
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
     this.isPasswordVisible = false;
     this.type = 'text';
@@ -54,9 +98,7 @@ export class SixInput {
     this.name = '';
     this.value = '';
     this.pill = false;
-    this.label = '';
     this.helpText = '';
-    this.errorText = '';
     this.placeholder = undefined;
     this.disabled = false;
     this.readonly = false;
@@ -66,158 +108,83 @@ 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.label = '';
+    this.errorText = '';
     this.invalid = false;
     this.clearable = false;
     this.togglePassword = false;
     this.inputmode = undefined;
     this.line = false;
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleValueChange() {
-    if (!this.input) {
-      return;
+    this.value = this.getValue();
+    if (this.nativeInput != null && this.nativeInput.value !== this.value) {
+      this.nativeInput.value = this.value;
     }
-    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);
+    this.eventListeners.forward('six-input-input', 'input', this.host);
+    this.eventListeners.forward('six-input-change', 'change', this.host);
+    this.eventListeners.forward('six-input-focus', 'focus', this.host);
+    this.eventListeners.forward('six-input-blur', 'blur', this.host);
   }
   componentWillLoad() {
-    this.defaultValue = this.value;
     this.handleSlotChange();
   }
-  componentDidLoad() {
-    this.eventListeners.add(this.input, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.input.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();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.input.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();
-  }
-  /** Returns the native input's validity */
-  async getValidity() {
-    return this.input.validity;
-  }
-  /** Returns the native input's validity */
-  async isValid() {
-    return this.input.validity.valid;
-  }
-  /** Returns the native input's validationMessage */
-  async getValidationMessage() {
-    return this.input.validationMessage;
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.input.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);
+  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: {
         input: true,
         // Sizes
         'input--small': this.size === 'small',
@@ -228,12 +195,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, onKeyDown: this.handleKeyDown, "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"; }
@@ -339,24 +306,6 @@ export class SixInput {
         "reflect": true,
         "defaultValue": "false"
       },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
       "helpText": {
         "type": "string",
         "mutable": false,
@@ -375,34 +324,16 @@ export class SixInput {
         "reflect": false,
         "defaultValue": "''"
       },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input'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 input's placeholder text."
@@ -451,11 +382,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 +399,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 +416,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 +433,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 +450,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 +467,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."
@@ -560,10 +491,11 @@ export class SixInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the input a required field."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": false,
+        "defaultValue": "false"
       },
       "autocapitalize": {
         "type": "string",
@@ -580,14 +512,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 +530,8 @@ export class SixInput {
           "text": "The input's autocorrect attribute."
         },
         "attribute": "autocorrect",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autocomplete": {
         "type": "string",
@@ -614,7 +548,8 @@ export class SixInput {
           "text": "The input's autocomplete attribute."
         },
         "attribute": "autocomplete",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'off'"
       },
       "autofocus": {
         "type": "boolean",
@@ -631,7 +566,8 @@ export class SixInput {
           "text": "The input's autofocus attribute."
         },
         "attribute": "autofocus",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "spellcheck": {
         "type": "boolean",
@@ -648,11 +584,48 @@ export class SixInput {
           "text": "Enables spell checking on the input."
         },
         "attribute": "spellcheck",
-        "reflect": false
+        "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",
@@ -662,7 +635,7 @@ export class SixInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n`required`, `minlength`, `maxlength`, and `pattern` 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,
@@ -709,11 +682,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."
@@ -738,24 +711,6 @@ export class SixInput {
         "attribute": "line",
         "reflect": false,
         "defaultValue": "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"
       }
     };
   }
@@ -763,7 +718,6 @@ export class SixInput {
     return {
       "hasFocus": {},
       "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
       "hasLabelSlot": {},
       "isPasswordVisible": {}
     };
@@ -785,7 +739,8 @@ export class SixInput {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -805,7 +760,8 @@ export class SixInput {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -825,7 +781,8 @@ export class SixInput {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -845,7 +802,8 @@ export class SixInput {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -865,27 +823,8 @@ export class SixInput {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "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"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -902,10 +841,12 @@ export class SixInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -921,7 +862,8 @@ export class SixInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -933,14 +875,15 @@ export class SixInput {
       },
       "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.",
@@ -949,7 +892,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": ""
@@ -962,10 +905,11 @@ export class SixInput {
             }],
           "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).",
@@ -990,7 +934,8 @@ export class SixInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -999,124 +944,6 @@ export class SixInput {
           "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": []
-        }
-      },
-      "getValidity": {
-        "complexType": {
-          "signature": "() => Promise<ValidityState>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "ValidityState": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<ValidityState>"
-        },
-        "docs": {
-          "text": "Returns the native input's validity",
-          "tags": []
-        }
-      },
-      "isValid": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Returns the native input's validity",
-          "tags": []
-        }
-      },
-      "getValidationMessage": {
-        "complexType": {
-          "signature": "() => Promise<string>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "Returns the native input's validationMessage",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
       }
     };
   }