@six-group/ui-library 3.0.0-beta.1.7

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

@@ -0,0 +1,1141 @@
+import { Component, Element, Event, Method, Prop, State, Watch, h } from '@stencil/core';
+import FormControl from '../../functional-components/form-control/form-control';
+import { hasSlot } from '../../utils/slot';
+import { EventListeners } from '../../utils/event-listeners';
+const ICON_SIZES = {
+  large: 'medium',
+  medium: 'small',
+  small: 'xSmall',
+};
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot prefix - Used to prepend an icon or similar element to the input.
+ * @slot suffix - Used to append an icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @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.
+ * @part label - The input label.
+ * @part input - The input control.
+ * @part prefix - The input prefix container.
+ * @part clear-button - The clear button.
+ * @part password-toggle-button - The password toggle button.
+ * @part suffix - The input suffix container.
+ * @part help-text - The input help 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();
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasLabelSlot = false;
+    this.isPasswordVisible = false;
+    /** The input's type. */
+    this.type = 'text';
+    /** The input's size. */
+    this.size = 'medium';
+    /** The input's name attribute. */
+    this.name = '';
+    /** The input's value attribute. */
+    this.value = '';
+    /** Set to true to draw a pill-style input with rounded edges. */
+    this.pill = false;
+    /** The input's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The input's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** The input's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** Set to true to disable the input. */
+    this.disabled = false;
+    /** Set to true to make the input readonly. */
+    this.readonly = false;
+    /**
+     * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
+     * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
+     */
+    this.invalid = false;
+    /** Set to true to add a clear button when the input is populated. */
+    this.clearable = false;
+    /** Set to true to add a password toggle button for password inputs. */
+    this.togglePassword = false;
+    /** Set to render as line */
+    this.line = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** defaultValue which the input will be reverted to when executing reset */
+    this.defaultValue = '';
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  handleValueChange() {
+    if (!this.input) {
+      return;
+    }
+    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);
+  }
+  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);
+    this.eventListeners.removeAll();
+  }
+  /** Sets focus on the input. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Selects all the text in the input. */
+  async select() {
+    return this.input.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);
+  }
+  /** 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;
+      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);
+  }
+  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: {
+          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': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.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: {
+            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" })))));
+  }
+  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",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's minimum value."
+      },
+      "attribute": "min",
+      "reflect": true
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's maximum value."
+      },
+      "attribute": "max",
+      "reflect": true
+    },
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's step attribute."
+      },
+      "attribute": "step",
+      "reflect": true
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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
+    },
+    "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
+    },
+    "autocorrect": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's autocorrect attribute."
+      },
+      "attribute": "autocorrect",
+      "reflect": false
+    },
+    "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
+    },
+    "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
+    },
+    "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
+    },
+    "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\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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"
+          }
+        }
+      }
+    }, {
+      "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"
+          }
+        }
+      }
+    }, {
+      "method": "sixValueChange",
+      "name": "six-input-value-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted whenever the value changes. Access the new value via event.target.value.\nsix-input-value-change will emit whenever the value changes.\nSo be it on input or when dynamically set. six-input-input will only be emitted when the user enters data,\nbut not when a value is dynamically set. six-input-change will only be emitted when the user either presses enter\nor leaves the input field after entering some data."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "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>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Selects all the text in the input.",
+        "tags": []
+      }
+    },
+    "setSelectionRange": {
+      "complexType": {
+        "signature": "(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "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": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "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>",
+        "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": []
+      }
+    }
+  }; }
+  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"
+    }]; }
+}