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

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

@@ -1,11 +1,12 @@
-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',
-  small: 'xSmall',
+    large: 'medium',
+    medium: 'small',
+    small: 'xSmall',
 };
 let id = 0;
 /**
@@ -21,10 +22,10 @@ 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.
+ * @slot error-text - Error text that is shown when the status is set to invalid. 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.
+ * @part form-control - The form control that wraps the label, input, error-text and help-text.
  * @part label - The input label.
  * @part input - The input control.
  * @part prefix - The input prefix container.
@@ -32,1122 +33,1022 @@ let id = 0;
  * @part password-toggle-button - The password toggle button.
  * @part suffix - The input suffix container.
  * @part help-text - The input help text.
+ * @part error-text - The input error text.
  */
 export class SixInput {
-  constructor() {
-    this.inputId = `input-${++id}`;
-    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 = () => {
-      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;
-    this.hasLabelSlot = false;
-    this.isPasswordVisible = false;
-    this.type = 'text';
-    this.size = 'medium';
-    this.name = '';
-    this.value = '';
-    this.pill = false;
-    this.label = '';
-    this.helpText = '';
-    this.errorText = '';
-    this.placeholder = undefined;
-    this.disabled = false;
-    this.readonly = false;
-    this.minlength = undefined;
-    this.maxlength = undefined;
-    this.min = undefined;
-    this.max = undefined;
-    this.step = undefined;
-    this.pattern = 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;
-    this.inputmode = undefined;
-    this.line = false;
-    this.errorOnBlur = false;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleValueChange() {
-    this.value = this.getValue();
-    if (this.nativeInput != null) {
-      if (this.nativeInput.value !== this.value) {
-        this.nativeInput.value = this.value;
-      }
-      this.invalid = !this.nativeInput.checkValidity();
+    constructor() {
+        this.inputId = `input-${++id}`;
+        this.labelId = `input-label-${id}`;
+        this.helpTextId = `input-help-text-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        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.hasErrorSlot = hasSlot(this.host, 'error-text');
+        };
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorSlot = false;
+        this.isPasswordVisible = false;
+        this.type = 'text';
+        this.size = 'medium';
+        this.name = '';
+        this.value = '';
+        this.pill = false;
+        this.helpText = '';
+        this.placeholder = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.minlength = undefined;
+        this.maxlength = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.step = undefined;
+        this.pattern = undefined;
+        this.dropdownSearch = false;
+        this.required = false;
+        this.autocapitalize = 'off';
+        this.autocorrect = 'off';
+        this.autocomplete = 'off';
+        this.autofocus = false;
+        this.spellcheck = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.clearable = false;
+        this.togglePassword = false;
+        this.inputmode = undefined;
+        this.line = false;
     }
-  }
-  connectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.defaultValue = this.getValue();
-    this.handleSlotChange();
-  }
-  componentDidLoad() {
-    const nativeInput = this.nativeInput;
-    if (nativeInput == null) {
-      return;
+    handleLabelChange() {
+        this.handleSlotChange();
     }
-    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() {
-    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) {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  /** Removes focus from the input. */
-  async removeFocus() {
-    var _a;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  /** Selects all the text in the input. */
-  async 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') {
-    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') {
-    if (this.nativeInput == null) {
-      return;
+    handleValueChange() {
+        this.value = this.getValue();
+        if (this.nativeInput != null && this.nativeInput.value !== this.value) {
+            this.nativeInput.value = this.value;
+        }
     }
-    this.nativeInput.setRangeText(replacement, start, end, selectMode);
-    if (this.getValue() !== this.nativeInput.value) {
-      this.value = this.nativeInput.value;
-      this.sixChange.emit();
-      this.sixInput.emit();
+    connectedCallback() {
+        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);
     }
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    var _a;
-    return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    if (this.nativeInput == null) {
-      return true;
+    componentWillLoad() {
+        this.handleSlotChange();
     }
-    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 !== '';
-    if (this.nativeInput != null) {
-      this.nativeInput.setCustomValidity(message);
-      this.invalid = !this.nativeInput.checkValidity();
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
     }
-  }
-  /** Returns the native input's validity */
-  async getValidity() {
-    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() {
-    if (this.nativeInput == null) {
-      return true;
+    /** Sets focus on the input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
-    return this.nativeInput.validity.valid;
-  }
-  /** Returns the native input's validationMessage */
-  async getValidationMessage() {
-    if (this.nativeInput == null) {
-      return '';
+    /** Removes focus from the input. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
     }
-    return this.nativeInput.validationMessage;
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    var _a;
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
-    this.invalid = false;
-  }
-  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 !== '' ? 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',
-        'input--medium': this.size === 'medium',
-        'input--large': this.size === 'large',
-        // States
-        'input--line': this.line,
-        'input--pill': this.pill,
-        'input--disabled': this.disabled,
-        'input--focused': this.hasFocus,
-        '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.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.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"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'",
-          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's type."
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'text'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's size."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's name attribute."
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's value attribute."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "pill": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to draw a pill-style input with rounded edges."
-        },
-        "attribute": "pill",
-        "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,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's help text. Alternatively, you can use the help-text slot."
-        },
-        "attribute": "help-text",
-        "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 | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's placeholder text."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the input."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the input readonly."
-        },
-        "attribute": "readonly",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "minlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The minimum length of input that will be considered valid."
-        },
-        "attribute": "minlength",
-        "reflect": true
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The maximum length of input that will be considered valid."
-        },
-        "attribute": "maxlength",
-        "reflect": true
-      },
-      "min": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's minimum value."
-        },
-        "attribute": "min",
-        "reflect": true
-      },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's maximum value."
-        },
-        "attribute": "max",
-        "reflect": true
-      },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's step attribute."
-        },
-        "attribute": "step",
-        "reflect": true
-      },
-      "pattern": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A pattern to validate input against."
-        },
-        "attribute": "pattern",
-        "reflect": true
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the input a required field."
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "autocapitalize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's autocaptialize attribute."
-        },
-        "attribute": "autocapitalize",
-        "reflect": false,
-        "defaultValue": "'off'"
-      },
-      "autocorrect": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'on' | 'off'",
-          "resolved": "\"off\" | \"on\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's autocorrect attribute."
-        },
-        "attribute": "autocorrect",
-        "reflect": false,
-        "defaultValue": "'off'"
-      },
-      "autocomplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's autocomplete attribute."
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "'off'"
-      },
-      "autofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's autofocus attribute."
-        },
-        "attribute": "autofocus",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "spellcheck": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enables spell checking on the input."
-        },
-        "attribute": "spellcheck",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "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."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to add a clear button when the input is populated."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "togglePassword": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to add a password toggle button for password inputs."
-        },
-        "attribute": "toggle-password",
-        "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\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The input's inputmode attribute."
-        },
-        "attribute": "inputmode",
-        "reflect": false
-      },
-      "line": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to render as line"
-        },
-        "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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFocus": {},
-      "hasHelpTextSlot": {},
-      "hasErrorTextSlot": {},
-      "hasLabelSlot": {},
-      "isPasswordVisible": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixChange",
-        "name": "six-input-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control's value changes. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "method": "sixClear",
-        "name": "six-input-clear",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the clear button is activated."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "method": "sixInput",
-        "name": "six-input-input",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control receives input. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
-        }
-      }, {
-        "method": "sixFocus",
-        "name": "six-input-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control gains focus."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    /** Selects all the text in the input. */
+    async 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') {
+        var _a;
+        return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    }
+    /** Returns the start and end positions of the text selection */
+    async getSelectionRange() {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            selectionStart: (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : undefined,
+            selectionEnd: (_d = (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.selectionEnd) !== null && _d !== void 0 ? _d : undefined,
+            selectionDirection: (_f = (_e = this.nativeInput) === null || _e === void 0 ? void 0 : _e.selectionDirection) !== null && _f !== void 0 ? _f : undefined,
+        };
+    }
+    /** Replaces a range of text with a new string. */
+    async setRangeText(replacement, start, end, selectMode = 'preserve') {
+        if (this.nativeInput == null) {
+            return;
         }
-      }, {
-        "method": "sixBlur",
-        "name": "six-input-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the control loses focus. Access the new value via event.target.value."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        this.nativeInput.setRangeText(replacement, start, end, selectMode);
+        if (this.getValue() !== this.nativeInput.value) {
+            this.value = this.nativeInput.value;
+            this.sixChange.emit();
+            this.sixInput.emit();
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    getValue() {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
+    }
+    render() {
+        return (h(FormControl, { key: '8db2b6cf7a3065d1fd4c958c1301ffa459e2ce37', 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.hasErrorSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '4b2564db4347ab7bd6cb44c51f65770fcb6ea816', part: "base", class: {
+                input: true,
+                // Sizes
+                'input--small': this.size === 'small',
+                'input--medium': this.size === 'medium',
+                'input--large': this.size === 'large',
+                // States
+                'input--line': this.line,
+                'input--pill': this.pill,
+                'input--disabled': this.disabled,
+                'input--dropdown-search': this.dropdownSearch,
+                'input--focused': this.hasFocus,
+                'input--empty': this.getValue().length === 0,
+                'input--invalid': this.invalid,
+            } }, h("span", { key: '874d1edb40d14490dc100af7c85f618883c9cd63', part: "prefix", class: "input__prefix" }, h("slot", { key: 'eee751e03fe42da62100cc2fb18bcb46cbba76e1', name: "prefix" })), h("input", { key: 'b89a34876aae5f073c73495f79c4b0b47cdf10e3', 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.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 && !this.disabled && (h("button", { key: '248251ba299d52bf44583e7acb9bbe823d51c724', part: "clear-button", class: "input__clear", type: "button", onClick: this.handleClearClick, tabindex: "-1", "data-testid": "input-clear-button" }, h("slot", { key: '2e353a833fd696a55de542d5df69a9cb33957b23', name: "clear-icon" }, h("six-icon", { key: 'ceac32b1b954c75e9b7fe9682a487e72967b4e46', size: ICON_SIZES[this.size] }, "clear")))), this.togglePassword && (h("button", { key: '74e7b5714fc20329a3f18321e552b21bcbd6d77a', 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", { key: 'f179d2cdcbfd319b8cb1291df0219ba5d89c8b4c', part: "suffix", class: "input__suffix" }, h("slot", { key: 'bdea79b0fad36a1b34a70ce0a414a624febe68a5', name: "suffix" })))));
+    }
+    static get is() { return "six-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's type."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'text'"
             },
-            "FocusOptions": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the input.",
-          "tags": []
-        }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus from the input.",
-          "tags": []
-        }
-      },
-      "select": {
-        "complexType": {
-          "signature": "() => Promise<void | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's value attribute."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to draw a pill-style input with rounded edges."
+                },
+                "attribute": "pill",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's help text. Alternatively, you can use the help-text slot."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's placeholder text."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the input."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to make the input readonly."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum length of input that will be considered valid."
+                },
+                "attribute": "minlength",
+                "reflect": true
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum length of input that will be considered valid."
+                },
+                "attribute": "maxlength",
+                "reflect": true
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's minimum value."
+                },
+                "attribute": "min",
+                "reflect": true
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's maximum value."
+                },
+                "attribute": "max",
+                "reflect": true
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's step attribute."
+                },
+                "attribute": "step",
+                "reflect": true
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A pattern to validate input against."
+                },
+                "attribute": "pattern",
+                "reflect": true
+            },
+            "dropdownSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: Styles the input for the dropdown filter search."
+                },
+                "attribute": "dropdown-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autocapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's autocaptialize attribute."
+                },
+                "attribute": "autocapitalize",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autocorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'on' | 'off'",
+                    "resolved": "\"off\" | \"on\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's autocorrect attribute."
+                },
+                "attribute": "autocorrect",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's autocomplete attribute."
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "defaultValue": "'off'"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's autofocus attribute."
+                },
+                "attribute": "autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "spellcheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables spell checking on the input."
+                },
+                "attribute": "spellcheck",
+                "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": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a clear button when the input is populated."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "togglePassword": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a password toggle button for password inputs."
+                },
+                "attribute": "toggle-password",
+                "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\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's inputmode attribute."
+                },
+                "attribute": "inputmode",
+                "reflect": false
+            },
+            "line": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to render as line"
+                },
+                "attribute": "line",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void | undefined>"
-        },
-        "docs": {
-          "text": "Selects all the text in the input.",
-          "tags": []
-        }
-      },
-      "setSelectionRange": {
-        "complexType": {
-          "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void | undefined>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasHelpTextSlot": {},
+            "hasLabelSlot": {},
+            "hasErrorSlot": {},
+            "isPasswordVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixChange",
+                "name": "six-input-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control's value changes. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void | undefined>"
-        },
-        "docs": {
-          "text": "Sets the start and end positions of the text selection (0-based).",
-          "tags": []
-        }
-      },
-      "setRangeText": {
-        "complexType": {
-          "signature": "(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
+                "method": "sixClear",
+                "name": "six-input-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button is activated."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
+                "method": "sixInput",
+                "name": "six-input-input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control receives input. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
+                "method": "sixFocus",
+                "name": "six-input-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control gains focus."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Replaces a range of text with a new string.",
-          "tags": []
-        }
-      },
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "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 | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+                "method": "sixBlur",
+                "name": "six-input-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the control loses focus. Access the new value via event.target.value."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the input.",
+                    "tags": []
+                }
             },
-            "ValidityState": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<ValidityState | undefined>"
-        },
-        "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"
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the input.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "Selects all the text in the input.",
+                    "tags": []
+                }
+            },
+            "setSelectionRange": {
+                "complexType": {
+                    "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: SelectionRangeDirection) => Promise<void | undefined>",
+                    "parameters": [{
+                            "name": "selectionStart",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionEnd",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionDirection",
+                            "type": "\"none\" | \"forward\" | \"backward\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectionRangeDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-input/six-input.tsx",
+                            "id": "src/components/six-input/six-input.tsx::SelectionRangeDirection"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "Sets the start and end positions of the text selection (0-based).",
+                    "tags": []
+                }
+            },
+            "getSelectionRange": {
+                "complexType": {
+                    "signature": "() => Promise<SelectionRange>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectionRange": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-input/six-input.tsx",
+                            "id": "src/components/six-input/six-input.tsx::SelectionRange"
+                        }
+                    },
+                    "return": "Promise<SelectionRange>"
+                },
+                "docs": {
+                    "text": "Returns the start and end positions of the text selection",
+                    "tags": []
+                }
+            },
+            "setRangeText": {
+                "complexType": {
+                    "signature": "(replacement: string, start: number, end: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>",
+                    "parameters": [{
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectMode",
+                            "type": "\"select\" | \"start\" | \"end\" | \"preserve\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replaces a range of text with a new string.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "helpText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "errorText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "label",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "value",
-        "methodName": "handleValueChange"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "helpText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "errorText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-input.js.map