@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

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

@@ -11,6 +11,141 @@ 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 minimum number of characters that can be entered in the field.
+         */
+        this.minCharacters = 0;
+        /**
+         * 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 validation state - e.g. 'error' | 'warning' | 'success'.
+         */
+        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 +158,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 +175,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 +184,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 +205,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 +220,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);
@@ -191,6 +295,7 @@ export class TextField {
     }
     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 el = this.el;
         const disabledMode = readonly || disabled;
         const currentStatus = maxValueExceeded ||
             minValueUnattained ||
@@ -230,34 +335,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: '9175054afc7f5ab0f44c2c02d73a209676690f26', 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: '2cf32636f95f8ec80f25424483fcdf2afe262534', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { key: '3ee4d01a7e1705d1bdd1e88dc734a16f990c35c9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: 'd6300116fc334d565681cedb6c2e4b637dd8fe5f', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '2dae55d8265539a3c1b1975ebb63015fb2b66ceb', 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: 'c363bc9c876a3be7db91dd1afd8eac8013f176a2', 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: 'f08406702167a6155246e26df7fe64ef06b82976', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '58c8ed7ed396953f0d4dff0aba462b10e58bd78b', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '15496f93b502c8b0d55b0a2da6622e8ab425ef49', 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: '675805dbde2426192861938a009728af5d0ea56f', 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: '92b805a2b9b4d87347f767c750c7d9ce8be6c909', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '2a24743dc253ab95c360c2ae78e559c0437202dc', variant: "caption", class: "char-count-text" }, h("span", { key: 'a71f41c5313d828123d275a41ae694ec2c0b2f5e', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '9c6d7a87b3d4a0f2baf9b1f732f0940d5e0fbe7b', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { key: '3aba077c149ce80fa5732245829e6e02c4bf52c8', 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 +383,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -290,6 +395,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-active-descendant",
                 "reflect": false
             },
@@ -298,7 +405,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAriaAutocompleteTypes",
-                    "resolved": "\"inline\" | \"list\"",
+                    "resolved": "\"inline\" | \"list\" | undefined",
                     "references": {
                         "IcAriaAutocompleteTypes": {
                             "location": "import",
@@ -308,7 +415,7 @@ export class TextField {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -316,6 +423,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-autocomplete",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -324,8 +433,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -337,6 +446,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-expanded",
                 "reflect": false
             },
@@ -345,11 +456,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 +468,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-owns",
                 "reflect": false
             },
@@ -364,8 +477,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -374,6 +487,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 +498,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 +508,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 +524,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocorrectStates",
-                    "resolved": "\"off\" | \"on\"",
+                    "resolved": "\"off\" | \"on\" | undefined",
                     "references": {
                         "IcAutocorrectStates": {
                             "location": "import",
@@ -417,11 +534,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 +549,8 @@ export class TextField {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -440,6 +559,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 +570,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 +590,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 +610,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 +630,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 +650,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 +670,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 +682,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden-input",
                 "reflect": false,
                 "defaultValue": "true"
@@ -560,7 +693,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -569,6 +702,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 +713,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 +723,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 +748,8 @@ export class TextField {
                     "tags": [],
                     "text": "The label for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -619,33 +758,36 @@ 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"
@@ -655,33 +797,36 @@ 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 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"
@@ -691,15 +836,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 name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -709,15 +856,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 +876,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 +896,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 +916,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 +935,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -793,6 +948,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false
             },
@@ -801,15 +958,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 +978,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -834,6 +993,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 +1003,8 @@ export class TextField {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -852,6 +1013,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 +1024,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -871,11 +1034,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 +1050,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -897,6 +1062,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "truncate-value",
                 "reflect": false
             },
@@ -905,7 +1072,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 +1082,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 +1098,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 +1118,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 +1130,8 @@ export class TextField {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-inline-internal",
                 "reflect": false,
                 "defaultValue": "false"
@@ -968,7 +1141,7 @@ export class TextField {
                 "mutable": false,
                 "complexType": {
                     "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcInformationStatusOrEmpty": {
                             "location": "import",
@@ -978,11 +1151,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 +1167,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'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -1010,15 +1187,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 +1216,8 @@ export class TextField {
                     "tags": [],
                     "text": "The value of the text field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""