@ukic/web-components 3.0.0 → 3.2.0

package/dist/cjs/ic-text-field.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f982899d.js');
-const types = require('./types-dc22e301.js');
-const helpers = require('./helpers-94b33ab0.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-789082d4.js');
 
-const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{color:var(--ic-color-secondary-text);padding-right:var(--ic-space-xxxs)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal);background:transparent}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const IcTextFieldStyle0 = icTextFieldCss;
 
 let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...helpers.IC_INHERITED_ARIA, "title"];
@@ -21,14 +21,177 @@ const TextField = class {
         this.icKeydown = index.createEvent(this, "icKeydown", 7);
         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");
+            if (this.hideLabel || (el && el.classList.contains("hydrated"))) {
+                this.setFocus();
+                clearInterval(this.interval);
+            }
+        };
+        this.getNumberOfCharacters = (value) => value !== null && value !== undefined ? value.length : 0;
         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);
             }
         };
         this.getMaxCharactersReached = (value) => {
-            this.numChars = value.length;
+            this.numChars = this.getNumberOfCharacters(value);
             this.maxCharactersReached =
                 this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
             if (this.maxCharactersWarning && !this.maxCharactersReached) {
@@ -40,6 +203,8 @@ const TextField = class {
             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 +212,19 @@ const TextField = class {
             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 +233,11 @@ const TextField = class {
         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,51 +248,9 @@ const TextField = class {
                 index.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 = "default";
-        this.spellcheck = false;
-        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() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
     }
     debounceChanged() {
         this.icChange = helpers.debounceEvent(this.icChange, this.debounce);
@@ -123,6 +259,9 @@ const TextField = class {
         let value;
         if (this.maxCharacters > 0) {
             value = newValue.substring(0, this.maxCharacters);
+            if (value.length < newValue.length) {
+                this.maxCharactersWarning = true;
+            }
             this.value = value;
         }
         else {
@@ -170,10 +309,15 @@ const TextField = class {
             attributes: true,
             childList: true,
         });
+        if (this.autofocus && !this.disabled && !this.readonly) {
+            this.interval = setInterval(this.checkChildHydration, 50);
+        }
     }
     handleKeyDown(ev) {
         this.icKeydown.emit({ event: ev });
-        this.maxCharactersWarning = this.maxCharactersReached;
+        if (!ev.ctrlKey && !helpers.IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {
+            this.maxCharactersWarning = this.maxCharactersReached;
+        }
     }
     /**
      * Sets focus on the native `input`.
@@ -183,34 +327,35 @@ const TextField = class {
         (_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, } = this;
-        const disabledMode = readonly ? true : disabled;
+        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 ||
             minCharactersUnattained ||
             maxCharactersWarning
             ? maxCharactersWarning
-                ? types.IcInformationStatus.Warning
-                : types.IcInformationStatus.Error
+                ? helpers.IcInformationStatus.Warning
+                : helpers.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 ||
             maxValueExceeded ||
             minValueUnattained ||
-            currentStatus === types.IcInformationStatus.Error
+            currentStatus === helpers.IcInformationStatus.Error
             ? "assertive"
             : "polite";
         const showStatusText = this.hasStatus(currentStatus) &&
-            !(currentStatus == types.IcInformationStatus.Success && validationInline) &&
+            !(currentStatus == helpers.IcInformationStatus.Success && validationInline) &&
             !validationInlineInternal;
         const multiline = rows > 1;
         const charsRemaining = maxNumChars - numChars;
@@ -219,44 +364,47 @@ const TextField = class {
         const describedBy = `${hiddenCharCountDescId} ${helpers.getInputDescribedByText(inputId, helperText !== "", showStatusText)}`.trim();
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
-        const invalid = `${currentStatus === types.IcInformationStatus.Error}`;
-        if (hiddenInput) {
-            helpers.renderHiddenInput(true, this.el, name, value, disabledMode);
-        }
-        return (index.h(index.Host, { class: { ["ic-text-field-full-width"]: fullWidth } }, index.h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (index.h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), index.h("ic-input-component-container", { size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (index.h("span", { class: {
-                ["readonly"]: readonly,
-                ["has-value"]: value.length > 0,
-            }, slot: "left-icon" }, index.h("slot", { name: "icon" }))), !multiline ? (index.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, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))) : (index.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, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), helpers.isSlotUsed(this.el, "clear-button") && (index.h("slot", { name: "clear-button" })), helpers.isSlotUsed(this.el, "search-submit-button") && (index.h("slot", { name: "search-submit-button" }))), helpers.isSlotUsed(this.el, "menu") && index.h("slot", { name: "menu" }), (!helpers.isEmptyString(validationStatus) ||
+        const invalid = `${currentStatus === helpers.IcInformationStatus.Error}`;
+        hiddenInput
+            ? helpers.renderHiddenInput(true, this.el, name, value, disabledMode)
+            : helpers.removeHiddenInput(this.el);
+        return (index.h(index.Host, { key: '23cb6b387a381e50b3f1854c3870a1f7e3bfa23e', class: {
+                "ic-text-field-full-width": !!fullWidth,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-text-field-disabled": !!disabledMode,
+            } }, index.h("ic-input-container", { key: '87bc697a55a04e7aefdeafd6d37eff3824990034', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (index.h("ic-input-label", { key: 'a289d63c13ed94a8282eab7b16ace632a59c83ed', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), index.h("ic-input-component-container", { key: '51b602029de06b6147c17a01ba427a558410c4df', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (index.h("span", { key: 'c1ac46bc7a8114f4a6dce0126784a7333777b168', class: {
+                readonly: !!readonly,
+                "has-value": this.getNumberOfCharacters(value) > 0,
+            }, slot: "left-icon" }, index.h("slot", { key: '312ac15fb4ccb3873bfddec4c60c4fb234aa0e28', name: "icon" }))), !multiline ? (index.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))) : (index.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))), helpers.isSlotUsed(el, "clear-button") && (index.h("slot", { key: '86e21e2775c078a2322e1fdf6cf3323cba757917', name: "clear-button" })), helpers.isSlotUsed(el, "search-submit-button") && (index.h("slot", { key: '9a1800781608f067e5e6f4a0b097ab4fec148fc2', name: "search-submit-button" }))), helpers.isSlotUsed(el, "menu") && index.h("slot", { key: '1281dfee838c2af0822b8ec2d477c6290cd5b020', name: "menu" }), (!helpers.isEmptyString(validationStatus) ||
             !helpers.isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (index.h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
-                (currentStatus === types.IcInformationStatus.Success &&
+            !validationInlineInternal && (index.h("ic-input-validation", { key: '3adb6e2274e123e2c96985b0008e887b791d8e21', status: this.hasStatus(currentStatus) === false ||
+                (currentStatus === helpers.IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (index.h("div", { slot: "validation-message-adornment" }, !hideCharCount && (index.h("ic-typography", { variant: "caption", class: {
-                ["char-count-text"]: true,
-            } }, index.h("span", { class: "char-count" }, numChars, "/", maxNumChars))), index.h("span", { class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), index.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 && (index.h("div", { key: '0d35ea132f089aa5554d0d4387fc92f0ba256ec4', slot: "validation-message-adornment" }, !hideCharCount && (index.h("ic-typography", { key: '27132c969fa6d92e21c84795341a7eb520307df0', variant: "caption", class: "char-count-text" }, index.h("span", { key: 'db55472d6e4d40e03a5a8442d9e5dc388e77ca14', class: "char-count" }, numChars, "/", maxNumChars))), index.h("span", { key: 'a42b206be46d1df23b01c1688cb430a062c4fbc9', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), index.h("span", { key: 'b5e3a90f0cc7cfb16e3a337d886cf0360748fca2', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "value": ["watchValueHandler"]
     }; }
 };
-TextField.style = icTextFieldCss;
+TextField.style = IcTextFieldStyle0;
 
 exports.ic_text_field = TextField;