@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcInformationStatus } from "../../utils/types";
-import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, } from "../../utils/helpers";
+import { IcInformationStatus, } from "../../utils/types";
+import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 let inputIds = 0;
 /**
@@ -39,46 +39,46 @@ export class TextField {
     this.handleFormReset = () => {
       this.value = this.initialValue;
     };
-    this.inputId = `ic-text-field-input-${inputIds++}`;
-    this.label = undefined;
-    this.required = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.placeholder = "";
-    this.fullWidth = false;
-    this.hideLabel = false;
-    this.helperText = "";
-    this.rows = 1;
-    this.resize = false;
-    this.small = false;
-    this.value = "";
-    this.min = undefined;
-    this.max = undefined;
-    this.maxLength = 0;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.validationInline = false;
-    this.validationInlineInternal = false;
+    this.numChars = 0;
+    this.maxLengthExceeded = false;
+    this.maxValueExceeded = false;
+    this.minValueUnattained = false;
+    this.ariaActiveDescendant = undefined;
+    this.ariaAutocomplete = undefined;
+    this.ariaExpanded = undefined;
+    this.ariaOwns = undefined;
     this.autocapitalize = "off";
     this.autocomplete = "off";
     this.autocorrect = "off";
     this.autoFocus = false;
-    this.debounce = 0;
-    this.type = "text";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.helperText = "";
+    this.hideLabel = false;
+    this.hiddenInput = true;
+    this.inputId = `ic-text-field-input-${inputIds++}`;
     this.inputmode = "text";
+    this.label = undefined;
+    this.max = undefined;
+    this.maxLength = 0;
+    this.min = undefined;
     this.name = this.inputId;
+    this.placeholder = "";
+    this.readonly = false;
+    this.required = false;
+    this.resize = false;
+    this.role = undefined;
+    this.rows = 1;
+    this.small = false;
     this.spellcheck = false;
-    this.ariaActiveDescendant = undefined;
     this.truncateValue = undefined;
-    this.ariaExpanded = undefined;
-    this.ariaOwns = undefined;
-    this.ariaAutocomplete = undefined;
-    this.role = undefined;
-    this.hiddenInput = true;
-    this.numChars = 0;
-    this.maxLengthExceeded = false;
-    this.minValueUnattained = false;
-    this.maxValueExceeded = false;
+    this.type = "text";
+    this.validationInline = false;
+    this.validationInlineInternal = false;
+    this.validationStatus = "";
+    this.validationText = "";
+    this.debounce = 0;
+    this.value = "";
     this.initialValue = this.value;
   }
   debounceChanged() {
@@ -113,26 +113,12 @@ export class TextField {
     }
     this.icChange.emit({ value: newValue });
   }
-  /**
-   * Sets focus on the native `input`.
-   */
-  async setFocus() {
-    if (this.inputEl) {
-      this.inputEl.focus();
-    }
-  }
-  //stop keydown event bubbling up to storybook
-  handleKeyDown(ev) {
-    this.icKeydown.emit({ event: ev });
-    ev.cancelBubble = true;
-  }
-  hasLeftIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="icon"]`);
-    return iconEl !== null;
-  }
   connectedCallback() {
     this.debounceChanged();
   }
+  disconnectedCallback() {
+    removeFormResetListener(this.el, this.handleFormReset);
+  }
   componentWillLoad() {
     this.watchValueHandler(this.value);
     this.inheritedAttributes = inheritAttributes(this.el, [
@@ -147,6 +133,7 @@ export class TextField {
       this.minValueUnattained = false;
     }
     addFormResetListener(this.el, this.handleFormReset);
+    removeDisabledFalse(this.disabled, this.el);
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
@@ -154,8 +141,20 @@ export class TextField {
       this.getInlineValidationText();
     }
   }
-  disconnectedCallback() {
-    removeFormResetListener(this.el, this.handleFormReset);
+  handleKeyDown(ev) {
+    this.icKeydown.emit({ event: ev });
+  }
+  /**
+   * Sets focus on the native `input`.
+   */
+  async setFocus() {
+    if (this.inputEl) {
+      this.inputEl.focus();
+    }
+  }
+  hasLeftIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="icon"]`);
+    return iconEl !== null;
   }
   render() {
     const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
@@ -233,7 +232,7 @@ export class TextField {
   }
   static get properties() {
     return {
-      "inputId": {
+      "ariaActiveDescendant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -244,14 +243,42 @@ export class TextField {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The ID for the input."
+          "tags": [{
+              "name": "internal",
+              "text": "The active element when focus is on the ic-menu items."
+            }],
+          "text": ""
         },
-        "attribute": "input-id",
+        "attribute": "aria-active-descendant",
+        "reflect": false
+      },
+      "ariaAutocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcAriaAutocompleteTypes",
+          "resolved": "\"inline\" | \"list\"",
+          "references": {
+            "IcAriaAutocompleteTypes": {
+              "location": "import",
+              "path": "./ic-text-field.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Used to identify whether inputting any text triggers more predictions"
+            }],
+          "text": ""
+        },
+        "attribute": "aria-autocomplete",
         "reflect": false,
-        "defaultValue": "`ic-text-field-input-${inputIds++}`"
+        "defaultValue": "undefined"
       },
-      "label": {
+      "ariaExpanded": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -259,88 +286,121 @@ export class TextField {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "The label for the input."
+          "tags": [{
+              "name": "internal",
+              "text": "Used to identify if the slotted menu is rendered"
+            }],
+          "text": ""
         },
-        "attribute": "label",
+        "attribute": "aria-expanded",
         "reflect": false
       },
-      "required": {
-        "type": "boolean",
+      "ariaOwns": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the input will require a value."
+          "tags": [{
+              "name": "internal",
+              "text": "Used to identify any related child component"
+            }],
+          "text": ""
         },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "aria-owns",
+        "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "autocapitalize": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the disabled state will be set."
+          "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
         },
-        "attribute": "disabled",
+        "attribute": "autocapitalize",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"off\""
       },
-      "readonly": {
-        "type": "boolean",
+      "autocomplete": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcAutocompleteTypes",
+          "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+          "references": {
+            "IcAutocompleteTypes": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the read only state will be set."
+          "text": "The state of autocompletion the browser can apply on the text value."
         },
-        "attribute": "readonly",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "autocomplete",
+        "reflect": false,
+        "defaultValue": "\"off\""
       },
-      "placeholder": {
+      "autocorrect": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "IcAutocorrectStates",
+          "resolved": "\"off\" | \"on\"",
+          "references": {
+            "IcAutocorrectStates": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
+        },
+        "attribute": "autocorrect",
+        "reflect": false,
+        "defaultValue": "\"off\""
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The placeholder value to be displayed."
+          "text": "If `true`, the form control will have input focus when the page loads."
         },
-        "attribute": "placeholder",
+        "attribute": "auto-focus",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "fullWidth": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -352,13 +412,13 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify whether the text field fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
+          "text": "If `true`, the disabled state will be set."
         },
-        "attribute": "full-width",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hideLabel": {
+      "fullWidth": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -370,9 +430,9 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+          "text": "Specify whether the text field fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
         },
-        "attribute": "hide-label",
+        "attribute": "full-width",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -394,25 +454,25 @@ export class TextField {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "rows": {
-        "type": "number",
+      "hideLabel": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The number of rows to transform the text field into a text area with a specific height."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "rows",
+        "attribute": "hide-label",
         "reflect": false,
-        "defaultValue": "1"
+        "defaultValue": "false"
       },
-      "resize": {
+      "hiddenInput": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -423,66 +483,73 @@ export class TextField {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the multiline text area will be resizeable."
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, the hidden form input will stop rendering for form submission."
+            }],
+          "text": ""
         },
-        "attribute": "resize",
+        "attribute": "hidden-input",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
-      "small": {
-        "type": "boolean",
+      "inputId": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the text field."
+          "text": "The ID for the input."
         },
-        "attribute": "small",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "input-id",
+        "reflect": false,
+        "defaultValue": "`ic-text-field-input-${inputIds++}`"
       },
-      "value": {
+      "inputmode": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcTextFieldInputModes",
+          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "references": {
+            "IcTextFieldInputModes": {
+              "location": "import",
+              "path": "./ic-text-field.types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The value of the text field."
+          "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
         },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
+        "attribute": "inputmode",
+        "reflect": false,
+        "defaultValue": "\"text\""
       },
-      "min": {
-        "type": "any",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
+          "text": "The label for the input."
         },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "undefined"
+        "attribute": "label",
+        "reflect": false
       },
       "max": {
         "type": "any",
@@ -520,30 +587,43 @@ export class TextField {
         "reflect": false,
         "defaultValue": "0"
       },
-      "validationStatus": {
+      "min": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcInformationStatusOrEmpty",
-          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
-          "references": {
-            "IcInformationStatusOrEmpty": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
+          "text": "The name of the control, which is submitted with the form data."
         },
-        "attribute": "validation-status",
+        "attribute": "name",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "this.inputId"
       },
-      "validationText": {
+      "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -555,13 +635,13 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
+          "text": "The placeholder value to be displayed."
         },
-        "attribute": "validation-text",
+        "attribute": "placeholder",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "validationInline": {
+      "readonly": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -573,13 +653,13 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'."
+          "text": "If `true`, the read only state will be set."
         },
-        "attribute": "validation-inline",
-        "reflect": false,
+        "attribute": "readonly",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "validationInlineInternal": {
+      "required": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -590,81 +670,70 @@ export class TextField {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "If `true`, the validation will display inline."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "If `true`, the input will require a value."
         },
-        "attribute": "validation-inline-internal",
+        "attribute": "required",
         "reflect": false,
         "defaultValue": "false"
       },
-      "autocapitalize": {
-        "type": "string",
+      "resize": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
+          "text": "If `true`, the multiline text area will be resizeable."
         },
-        "attribute": "autocapitalize",
+        "attribute": "resize",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "false"
       },
-      "autocomplete": {
+      "role": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAutocompleteTypes",
-          "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
-          "references": {
-            "IcAutocompleteTypes": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "The state of autocompletion the browser can apply on the text value."
+          "tags": [{
+              "name": "internal",
+              "text": "Used to set the role if not default textbox;"
+            }],
+          "text": ""
         },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "\"off\""
+        "attribute": "role",
+        "reflect": false
       },
-      "autocorrect": {
-        "type": "string",
+      "rows": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcAutocorrectStates",
-          "resolved": "\"off\" | \"on\"",
-          "references": {
-            "IcAutocorrectStates": {
-              "location": "import",
-              "path": "../../interface"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
+          "text": "The number of rows to transform the text field into a text area with a specific height."
         },
-        "attribute": "autocorrect",
+        "attribute": "rows",
         "reflect": false,
-        "defaultValue": "\"off\""
+        "defaultValue": "1"
       },
-      "autoFocus": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -676,61 +745,58 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the form control will have input focus when the page loads."
+          "text": "If `true`, the small styling will be applied to the text field."
         },
-        "attribute": "auto-focus",
-        "reflect": false,
+        "attribute": "small",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "debounce": {
-        "type": "number",
+      "spellcheck": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "text": "If `true`, the value of the text field will have its spelling and grammar checked."
         },
-        "attribute": "debounce",
+        "attribute": "spellcheck",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "false"
       },
-      "type": {
-        "type": "string",
+      "truncateValue": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcTextFieldTypes",
-          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {
-            "IcTextFieldTypes": {
-              "location": "import",
-              "path": "./ic-text-field.types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The type of control to display. The default type is text."
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container."
+            }],
+          "text": ""
         },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"text\""
+        "attribute": "truncate-value",
+        "reflect": false
       },
-      "inputmode": {
+      "type": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcTextFieldInputModes",
-          "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "original": "IcTextFieldTypes",
+          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {
-            "IcTextFieldInputModes": {
+            "IcTextFieldTypes": {
               "location": "import",
               "path": "./ic-text-field.types"
             }
@@ -740,31 +806,13 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
+          "text": "The type of control to display. The default type is text."
         },
-        "attribute": "inputmode",
+        "attribute": "type",
         "reflect": false,
         "defaultValue": "\"text\""
       },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the control, which is submitted with the form data."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.inputId"
-      },
-      "spellcheck": {
+      "validationInline": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -776,33 +824,13 @@ export class TextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the value of the text field will have its spelling and grammar checked."
+          "text": "If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'."
         },
-        "attribute": "spellcheck",
+        "attribute": "validation-inline",
         "reflect": false,
         "defaultValue": "false"
       },
-      "ariaActiveDescendant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "The active element when focus is on the ic-menu items."
-            }],
-          "text": ""
-        },
-        "attribute": "aria-active-descendant",
-        "reflect": false
-      },
-      "truncateValue": {
+      "validationInlineInternal": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -811,38 +839,42 @@ export class TextField {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container."
+              "text": "If `true`, the validation will display inline."
             }],
           "text": ""
         },
-        "attribute": "truncate-value",
-        "reflect": false
+        "attribute": "validation-inline-internal",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "ariaExpanded": {
+      "validationStatus": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+          "references": {
+            "IcInformationStatusOrEmpty": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to identify if the slotted menu is rendered"
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "aria-expanded",
-        "reflect": false
+        "attribute": "validation-status",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "ariaOwns": {
+      "validationText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -853,44 +885,34 @@ export class TextField {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to identify any related child component"
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "aria-owns",
-        "reflect": false
+        "attribute": "validation-text",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "ariaAutocomplete": {
-        "type": "string",
+      "debounce": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcAriaAutocompleteTypes",
-          "resolved": "\"inline\" | \"list\"",
-          "references": {
-            "IcAriaAutocompleteTypes": {
-              "location": "import",
-              "path": "./ic-text-field.types"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to identify whether inputting any text triggers more predictions"
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
         },
-        "attribute": "aria-autocomplete",
+        "attribute": "debounce",
         "reflect": false,
-        "defaultValue": "undefined"
+        "defaultValue": "0"
       },
-      "role": {
+      "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -899,35 +921,12 @@ export class TextField {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to set the role if not default textbox;"
-            }],
-          "text": ""
-        },
-        "attribute": "role",
-        "reflect": false
-      },
-      "hiddenInput": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "If `true`, the hidden form input will stop rendering for form submission."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The value of the text field."
         },
-        "attribute": "hidden-input",
-        "reflect": false,
-        "defaultValue": "true"
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
       }
     };
   }
@@ -935,40 +934,44 @@ export class TextField {
     return {
       "numChars": {},
       "maxLengthExceeded": {},
-      "minValueUnattained": {},
       "maxValueExceeded": {},
+      "minValueUnattained": {},
       "initialValue": {}
     };
   }
   static get events() {
     return [{
-        "method": "icKeydown",
-        "name": "icKeydown",
+        "method": "getValidationText",
+        "name": "getValidationText",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when a keydown event occurred."
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when the validationInlineInternal is `true`"
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "{ event: KeyboardEvent }",
-          "resolved": "{ event: KeyboardEvent; }",
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
           "references": {
-            "KeyboardEvent": {
-              "location": "global"
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "icInput",
-        "name": "icInput",
+        "method": "icBlur",
+        "name": "icBlur",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when a keyboard input occurred."
+          "text": "Emitted when input loses focus."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -976,19 +979,19 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "icBlur",
-        "name": "icBlur",
+        "method": "icChange",
+        "name": "icChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when input loses focus."
+          "text": "Emitted when the value has changed."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -996,7 +999,7 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
@@ -1016,19 +1019,19 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "icChange",
-        "name": "icChange",
+        "method": "icInput",
+        "name": "icInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the value has changed."
+          "text": "Emitted when a keyboard input occurred."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -1036,30 +1039,26 @@ export class TextField {
           "references": {
             "IcValueEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../utils/types"
             }
           }
         }
       }, {
-        "method": "getValidationText",
-        "name": "getValidationText",
+        "method": "icKeydown",
+        "name": "icKeydown",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Emitted when the validationInlineInternal is `true`"
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Emitted when a keydown event occurred."
         },
         "complexType": {
-          "original": "IcValueEventDetail",
-          "resolved": "IcValueEventDetail",
+          "original": "{ event: KeyboardEvent }",
+          "resolved": "{ event: KeyboardEvent; }",
           "references": {
-            "IcValueEventDetail": {
-              "location": "import",
-              "path": "../../interface"
+            "KeyboardEvent": {
+              "location": "global"
             }
           }
         }