@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -1,7 +1,7 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
 import { IcInformationStatus, } from "../../utils/types";
 import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, removeDisabledFalse, checkSlotInChildMutations, removeHiddenInput, } from "../../utils/helpers";
-import { IC_INHERITED_ARIA } from "../../utils/constants";
+import { IC_INHERITED_ARIA, IGNORED_KEYBOARD_CHARACTERS, } from "../../utils/constants";
 let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
 /**
@@ -11,6 +11,159 @@ export class TextField {
     constructor() {
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
+        this.numChars = 0;
+        this.maxCharactersReached = false;
+        this.maxCharactersWarning = false;
+        this.minCharactersUnattained = false;
+        this.maxValueExceeded = false;
+        this.minValueUnattained = false;
+        /**
+         * @internal Used to identify whether inputting any text triggers more predictions
+         */
+        this.ariaAutocomplete = undefined;
+        /**
+         * The automatic capitalisation of the text value as it is entered/edited by the user.
+         * Available options: "off", "none", "on", "sentences", "words", "characters".
+         */
+        this.autocapitalize = "off";
+        /**
+         * The state of autocompletion the browser can apply on the text value.
+         */
+        this.autocomplete = "off";
+        /**
+         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+         */
+        this.autocorrect = "off";
+        /**
+         * If `true`, the form control will have input focus when the page loads.
+         */
+        this.autofocus = false;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * Specify whether the text field fills the full width of the container.
+         * If `true`, this overrides the --input-width CSS variable.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
+         */
+        this.hideCharCount = false;
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * @internal If `true`, the hidden form input will stop rendering for form submission.
+         */
+        this.hiddenInput = true;
+        /**
+         * The ID for the input.
+         */
+        this.inputId = `ic-text-field-input-${inputIds++}`;
+        /**
+         * A hint to the browser for which keyboard to display.
+         * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+         * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        this.inputmode = "text";
+        /**
+         * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
+         */
+        this.maxCharacters = 0;
+        /**
+         * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+         */
+        // prettier-ignore
+        this.maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;
+        /**
+         * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+         */
+        this.maxMessage = `Maximum value of ${this.max} exceeded`;
+        /**
+         * The minimum number of characters that can be entered in the field.
+         */
+        this.minCharacters = 0;
+        /**
+         * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+         */
+        // prettier-ignore
+        this.minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;
+        /**
+         * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+         */
+        this.minMessage = `Minimum value of ${this.min} not met`;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to be displayed.
+         */
+        this.placeholder = "";
+        /**
+         * If `true`, the read only state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the input will require a value.
+         */
+        this.required = false;
+        /**
+         * If `true`, the multiline text area will be resizeable.
+         */
+        this.resize = false;
+        /**
+         * The number of rows to transform the text field into a text area with a specific height.
+         */
+        this.rows = 1;
+        /**
+         * The size of the text field component.
+         */
+        this.size = "medium";
+        /**
+         * If `true`, the value of the text field will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The type of control to display. The default type is text.
+         */
+        this.type = "text";
+        /**
+         * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
+         */
+        this.validationInline = false;
+        /**
+         *  @internal If `true`, the validation will display inline.
+         */
+        this.validationInlineInternal = false;
+        /**
+         * The validation state - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message.
+         */
+        this.validationText = "";
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the text field.
+         */
+        this.value = "";
+        this.initialValue = this.value;
         this.checkChildHydration = () => {
             var _a;
             const el = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-typography");
@@ -23,7 +176,7 @@ export class TextField {
         this.getMaxValueExceeded = (value) => {
             this.numChars = this.getNumberOfCharacters(value);
             if (this.type === "number") {
-                this.minValueUnattained = value && Number(value) < Number(this.min);
+                this.minValueUnattained = !!value && Number(value) < Number(this.min);
                 this.maxValueExceeded = Number(value) > Number(this.max);
             }
         };
@@ -40,6 +193,8 @@ export class TextField {
             this.icInput.emit({ value: this.value });
         };
         this.onBlur = (ev) => {
+            const target = ev.target;
+            target.removeEventListener("wheel", this.onWheel);
             const value = ev.target.value;
             this.numChars = value.length;
             this.minCharactersUnattained =
@@ -47,8 +202,19 @@ export class TextField {
             this.icBlur.emit({ value: value });
         };
         this.onFocus = (ev) => {
+            const target = ev.target;
+            target.addEventListener("wheel", this.onWheel);
             this.icFocus.emit({ value: ev.target.value });
         };
+        this.onWheel = (ev) => {
+            const target = ev.target;
+            if (target.type === "number") {
+                target.blur();
+                setTimeout(() => {
+                    target.focus();
+                }, 0);
+            }
+        };
         this.hasStatus = (status) => status !== "" && !this.disabled;
         this.handleFormReset = () => {
             this.value = this.initialValue;
@@ -57,9 +223,11 @@ export class TextField {
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
             mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
-                if (MUTABLE_ATTRIBUTES.includes(attributeName)) {
-                    this.inheritedAttributes[attributeName] =
-                        this.el.getAttribute(attributeName);
+                if (attributeName && MUTABLE_ATTRIBUTES.includes(attributeName)) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                    }
                     forceComponentUpdate = true;
                 }
                 else if (type === "childList") {
@@ -70,52 +238,6 @@ export class TextField {
                 forceUpdate(this);
             }
         };
-        this.numChars = 0;
-        this.maxCharactersReached = false;
-        this.maxCharactersWarning = false;
-        this.minCharactersUnattained = 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.disabled = false;
-        this.fullWidth = false;
-        this.helperText = "";
-        this.hideCharCount = false;
-        this.hideLabel = false;
-        this.hiddenInput = true;
-        this.inputId = `ic-text-field-input-${inputIds++}`;
-        this.inputmode = "text";
-        this.label = undefined;
-        this.max = undefined;
-        this.maxCharacters = 0;
-        this.min = undefined;
-        this.minCharacters = 0;
-        this.name = this.inputId;
-        this.placeholder = "";
-        this.readonly = false;
-        this.required = false;
-        this.resize = false;
-        this.role = undefined;
-        this.rows = 1;
-        this.size = "medium";
-        this.spellcheck = false;
-        this.theme = "inherit";
-        this.truncateValue = undefined;
-        this.type = "text";
-        this.validationInline = false;
-        this.validationInlineInternal = false;
-        this.validationStatus = "";
-        this.validationText = "";
-        this.debounce = 0;
-        this.value = "";
-        this.initialValue = this.value;
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -127,6 +249,9 @@ export class TextField {
         let value;
         if (this.maxCharacters > 0) {
             value = newValue.substring(0, this.maxCharacters);
+            if (value.length < newValue.length) {
+                this.maxCharactersWarning = true;
+            }
             this.value = value;
         }
         else {
@@ -180,7 +305,9 @@ export class TextField {
     }
     handleKeyDown(ev) {
         this.icKeydown.emit({ event: ev });
-        this.maxCharactersWarning = this.maxCharactersReached;
+        if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {
+            this.maxCharactersWarning = this.maxCharactersReached;
+        }
     }
     /**
      * Sets focus on the native `input`.
@@ -190,7 +317,8 @@ export class TextField {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersWarning, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, } = this;
+        const el = this.el;
         const disabledMode = readonly || disabled;
         const currentStatus = maxValueExceeded ||
             minValueUnattained ||
@@ -201,13 +329,13 @@ export class TextField {
                 : IcInformationStatus.Error
             : validationStatus;
         const currentValidationText = maxCharactersWarning
-            ? `Maximum input is ${maxCharacters} characters`
+            ? maxCharactersMessage
             : maxValueExceeded
-                ? `Maximum value of ${max} exceeded`
+                ? maxMessage
                 : minValueUnattained
-                    ? `Minimum value of ${min} not met`
+                    ? minMessage
                     : minCharactersUnattained
-                        ? `Minimum input is ${minCharacters} characters`
+                        ? minCharactersMessage
                         : validationText;
         const maxNumChars = readonly ? 0 : maxCharacters;
         const messageAriaLive = maxCharactersWarning ||
@@ -230,34 +358,34 @@ export class TextField {
         hiddenInput
             ? renderHiddenInput(true, this.el, name, value, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { class: {
-                "ic-text-field-full-width": fullWidth,
+        return (h(Host, { key: 'a16e8b0c4d27b90cba5a803030c4932f3d249009', class: {
+                "ic-text-field-full-width": !!fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-                "ic-text-field-disabled": disabledMode,
-            } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { class: {
-                readonly,
+                "ic-text-field-disabled": !!disabledMode,
+            } }, h("ic-input-container", { key: '2ee3748b5fa24de95435f7064c589e18472727f4', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { key: '090bf27c1c5a0d357f6e2c03951ae51439fe5061', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: '4322dbcb83430ff93a958f1cdfd68fb8f919b541', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'e1cb91443a86bd3499ba3637f462b763217156e1', class: {
+                readonly: !!readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
-                "no-left-pad": !showLeftIcon && readonly,
-                readonly,
-                "truncate-value": truncateValue,
-            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: this.role, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
-                "no-resize": resize === false || readonly,
-                "no-left-pad": !showLeftIcon && readonly,
-                readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, slot: "left-icon" }, h("slot", { key: 'd7a7432973ab5ac4d1f9f99307810239bc1e5bb8', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
+                "no-left-pad": !showLeftIcon && !!readonly,
+                readonly: !!readonly,
+                "truncate-value": !!truncateValue,
+            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: this.role, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, this.inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
+                "no-resize": resize === false || !!readonly,
+                "no-left-pad": !showLeftIcon && !!readonly,
+                readonly: !!readonly,
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, this.inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '606b2c481ed91fa410073510d8b08ecefa141fd1', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '63e74e7017fe754d8b223d4583e66edf44c5b174', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'fdc9f4ece2151b4907c5d64b45a8d3ee1c8da3de', name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (h("ic-input-validation", { key: '7c8469ca2b9b3d8aa0c629ff50ef25f6dc069215', status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { variant: "caption", class: "char-count-text" }, h("span", { class: "char-count" }, numChars, "/", maxNumChars))), h("span", { class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '68f3bdd2d91bb1d782671f67ff8fa54480b18933', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '7e6e2cc156a86ff7e5dd26cc11c7107d9058a87f', variant: "caption", class: "char-count-text" }, h("span", { key: '163ab75acf24098bc8543b4dae1feb202ef0eb4e', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '547ba76763a57afc09cadab6074885e94d44c32d', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { key: '49b425896e53566c693604cbdc54782d2fbed6b2', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -278,7 +406,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -290,6 +418,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-active-descendant",
                 "reflect": false
             },
@@ -298,7 +428,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAriaAutocompleteTypes",
-                    "resolved": "\"inline\" | \"list\"",
+                    "resolved": "\"inline\" | \"list\" | undefined",
                     "references": {
                         "IcAriaAutocompleteTypes": {
                             "location": "import",
@@ -308,7 +438,7 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -316,6 +446,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-autocomplete",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -324,8 +456,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -337,6 +469,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-expanded",
                 "reflect": false
             },
@@ -345,11 +479,11 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -357,6 +491,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-owns",
                 "reflect": false
             },
@@ -364,8 +500,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -374,6 +510,8 @@ export class TextField {
                     "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\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -383,7 +521,7 @@ export class TextField {
                 "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\"",
+                    "resolved": "IcAutocompleteTypes | undefined",
                     "references": {
                         "IcAutocompleteTypes": {
                             "location": "import",
@@ -393,11 +531,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The state of autocompletion the browser can apply on the text value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -407,7 +547,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocorrectStates",
-                    "resolved": "\"off\" | \"on\"",
+                    "resolved": "\"off\" | \"on\" | undefined",
                     "references": {
                         "IcAutocorrectStates": {
                             "location": "import",
@@ -417,11 +557,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocorrect",
                 "reflect": false,
                 "defaultValue": "\"off\""
@@ -430,8 +572,8 @@ export class TextField {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -440,6 +582,8 @@ export class TextField {
                     "tags": [],
                     "text": "If `true`, the form control will have input focus when the page loads."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -449,15 +593,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -467,15 +613,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Specify whether the text field fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -485,15 +633,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The helper text that will be displayed for additional field guidance."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "helper-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -503,15 +653,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-char-count",
                 "reflect": false,
                 "defaultValue": "false"
@@ -521,15 +673,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
@@ -539,11 +693,11 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -551,6 +705,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden-input",
                 "reflect": false,
                 "defaultValue": "true"
@@ -560,7 +716,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -569,6 +725,8 @@ export class TextField {
                     "tags": [],
                     "text": "The ID for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-id",
                 "reflect": false,
                 "defaultValue": "`ic-text-field-input-${inputIds++}`"
@@ -578,7 +736,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcTextFieldInputModes",
-                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
                     "references": {
                         "IcTextFieldInputModes": {
                             "location": "import",
@@ -588,11 +746,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inputmode",
                 "reflect": false,
                 "defaultValue": "\"text\""
@@ -611,6 +771,8 @@ export class TextField {
                     "tags": [],
                     "text": "The label for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -619,87 +781,175 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
-                "reflect": false,
-                "defaultValue": "undefined"
+                "reflect": false
             },
             "maxCharacters": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max-characters",
                 "reflect": false,
                 "defaultValue": "0"
             },
+            "maxCharactersMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-characters-message",
+                "reflect": false,
+                "defaultValue": "`Maximum input is ${this.maxCharacters} characters`"
+            },
+            "maxMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-message",
+                "reflect": false,
+                "defaultValue": "`Maximum value of ${this.max} exceeded`"
+            },
             "min": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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`)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
-                "reflect": false,
-                "defaultValue": "undefined"
+                "reflect": false
             },
             "minCharacters": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The minimum number of characters that can be entered in the field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "0"
             },
+            "minCharactersMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-characters-message",
+                "reflect": false,
+                "defaultValue": "`Minimum input is ${this.minCharacters} characters`"
+            },
+            "minMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the minimum value (the `min` prop value) has not been met."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-message",
+                "reflect": false,
+                "defaultValue": "`Minimum value of ${this.min} not met`"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -709,15 +959,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The placeholder value to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -727,15 +979,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the read only state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": true,
                 "defaultValue": "false"
@@ -745,15 +999,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the input will require a value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -763,15 +1019,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the multiline text area will be resizeable."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "resize",
                 "reflect": false,
                 "defaultValue": "false"
@@ -780,8 +1038,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -793,6 +1051,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false
             },
@@ -801,15 +1061,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The number of rows to transform the text field into a text area with a specific height."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rows",
                 "reflect": false,
                 "defaultValue": "1"
@@ -819,7 +1081,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -834,6 +1096,8 @@ export class TextField {
                     "tags": [],
                     "text": "The size of the text field component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -842,8 +1106,8 @@ export class TextField {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -852,6 +1116,8 @@ export class TextField {
                     "tags": [],
                     "text": "If `true`, the value of the text field will have its spelling and grammar checked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
@@ -861,7 +1127,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -871,11 +1137,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -885,7 +1153,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -897,6 +1165,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "truncate-value",
                 "reflect": false
             },
@@ -905,7 +1175,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcTextFieldTypes",
-                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\" | undefined",
                     "references": {
                         "IcTextFieldTypes": {
                             "location": "import",
@@ -915,11 +1185,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The type of control to display. The default type is text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"text\""
@@ -929,15 +1201,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-inline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -947,11 +1221,11 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -959,6 +1233,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-inline-internal",
                 "reflect": false,
                 "defaultValue": "false"
@@ -968,7 +1244,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcInformationStatusOrEmpty": {
                             "location": "import",
@@ -978,11 +1254,13 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-status",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -992,15 +1270,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
+                    "text": "The text to display as the validation message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -1010,15 +1290,17 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -1037,6 +1319,8 @@ export class TextField {
                     "tags": [],
                     "text": "The value of the text field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""