@ukic/canary-web-components 2.0.0-canary.18 → 2.0.0-canary.19

package/dist/cjs/ic-pagination_4.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cf27b16.js');
-const helpers = require('./helpers-4f5f087e.js');
+const helpers = require('./helpers-73d277d1.js');
 const types = require('./types-17dba796.js');
 
 const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -299,7 +299,7 @@ const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www
 </svg>
 `;
 
-const icSelectCss = "/*! 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;position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem;align-items:center}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-border-width);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}";
+const icSelectCss = "/*! 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;position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem;align-items:center}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-border-width);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 
 let inputIds$1 = 0;
 const MUTABLE_ATTRIBUTES$1 = [...helpers.IC_INHERITED_ARIA, "tabindex", "title"];
@@ -326,12 +326,15 @@ const Select = class {
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
-            mutationList.forEach(({ attributeName }) => {
+            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
                 if (MUTABLE_ATTRIBUTES$1.includes(attributeName)) {
                     this.inheritedAttributes[attributeName] =
                         this.el.getAttribute(attributeName);
                     forceComponentUpdate = true;
                 }
+                else if (type === "childList") {
+                    forceComponentUpdate = helpers.checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                }
             });
             if (forceComponentUpdate) {
                 index.forceUpdate(this);
@@ -897,6 +900,7 @@ const Select = class {
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, {
             attributes: true,
+            childList: true,
         });
     }
     componentDidRender() {
@@ -941,13 +945,20 @@ const Select = class {
         helpers.renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
         const invalid = validationStatus === types.IcInformationStatus.Error ? "true" : "false";
         const describedBy = helpers.getInputDescribedByText(this.inputId, helperText !== "", helpers.hasValidationStatus(this.validationStatus, this.disabled)).trim();
+        let showLeftIcon = !!this.el.querySelector(`[slot="icon"]`);
+        if (showLeftIcon && (disabled || (readonly && !this.value))) {
+            showLeftIcon = false;
+        }
         return (index.h(index.Host, { class: {
                 disabled: disabled,
                 searchable: searchable,
                 small: small,
                 [size]: size !== "default",
                 "full-width": fullWidth,
-            }, onBlur: this.onBlur }, index.h("ic-input-container", { readonly: readonly }, !hideLabel && (index.h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), index.h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (index.h("ic-typography", null, index.h("p", null, this.getLabelFromValue(currValue)))) : helpers.isMobileOrTablet() ? (index.h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), index.h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+            }, onBlur: this.onBlur }, index.h("ic-input-container", { readonly: readonly }, !hideLabel && (index.h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), index.h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (index.h("span", { slot: "left-icon", class: {
+                ["readonly"]: readonly,
+                ["has-value"]: !!this.value,
+            } }, index.h("slot", { name: "icon" }))), readonly ? (index.h("ic-typography", null, index.h("p", null, this.getLabelFromValue(currValue)))) : helpers.isMobileOrTablet() ? (index.h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), index.h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
             if (option.children) {
                 return (index.h("optgroup", { label: option.label }, option.children.map((option) => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
             }
@@ -1012,27 +1023,19 @@ const TextField = class {
         this.getMaxLengthExceeded = (value) => {
             this.numChars = value.length;
             if (this.type === "number") {
-                this.minValueUnattained =
-                    value && Number(value) < Number(this.min) ? true : false;
-                this.maxValueExceeded = Number(value) > Number(this.max) ? true : false;
+                this.minValueUnattained = value && Number(value) < Number(this.min);
+                this.maxValueExceeded = Number(value) > Number(this.max);
             }
             if (this.maxLength > 0) {
-                this.maxLengthExceeded = value.length > this.maxLength ? true : false;
+                this.maxLengthExceeded = this.numChars > this.maxLength;
             }
         };
         this.getMaxCharactersReached = (value) => {
             this.numChars = value.length;
-            if (this.maxCharacters > 0) {
-                this.maxCharactersReached = this.numChars >= this.maxCharacters;
-                if (this.maxCharactersError && !this.maxCharactersReached) {
-                    this.maxCharactersError = false;
-                }
-            }
-        };
-        this.getMinCharactersUnattained = (value) => {
-            this.numChars = value.length;
-            if (this.minCharacters > 0) {
-                this.minCharactersUnattained = this.numChars < this.minCharacters;
+            this.maxCharactersReached =
+                this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
+            if (this.maxCharactersError && !this.maxCharactersReached) {
+                this.maxCharactersError = false;
             }
         };
         this.onInput = (ev) => {
@@ -1041,39 +1044,30 @@ const TextField = class {
         };
         this.onBlur = (ev) => {
             const value = ev.target.value;
-            this.getMinCharactersUnattained(value);
+            this.numChars = value.length;
+            this.minCharactersUnattained =
+                this.minCharacters > 0 ? this.numChars < this.minCharacters : false;
             this.icBlur.emit({ value: value });
         };
         this.onFocus = (ev) => {
-            const value = ev.target.value;
-            this.icFocus.emit({ value: value });
-        };
-        this.isTextArea = () => {
-            return this.rows > 1;
-        };
-        this.getInlineValidationText = () => {
-            this.getValidationText.emit({ value: this.validationText });
-        };
-        this.hasStatus = (status) => {
-            return status !== "" && !this.disabled;
-        };
-        this.showStatusText = (status) => {
-            return (this.hasStatus(status) &&
-                !(status == types.IcInformationStatus.Success && this.validationInline) &&
-                !this.validationInlineInternal);
+            this.icFocus.emit({ value: ev.target.value });
         };
+        this.hasStatus = (status) => status !== "" && !this.disabled;
         this.handleFormReset = () => {
             this.value = this.initialValue;
         };
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
-            mutationList.forEach(({ attributeName }) => {
+            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
                 if (MUTABLE_ATTRIBUTES.includes(attributeName)) {
                     this.inheritedAttributes[attributeName] =
                         this.el.getAttribute(attributeName);
                     forceComponentUpdate = true;
                 }
+                else if (type === "childList") {
+                    forceComponentUpdate = helpers.checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                }
             });
             if (forceComponentUpdate) {
                 index.forceUpdate(this);
@@ -1164,11 +1158,12 @@ const TextField = class {
     componentDidLoad() {
         helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
         if (this.validationInlineInternal) {
-            this.getInlineValidationText();
+            this.getValidationText.emit({ value: this.validationText });
         }
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, {
             attributes: true,
+            childList: true,
         });
     }
     handleKeyDown(ev) {
@@ -1179,13 +1174,8 @@ const TextField = class {
      * Sets focus on the native `input`.
      */
     async setFocus() {
-        if (this.inputEl) {
-            this.inputEl.focus();
-        }
-    }
-    hasLeftIconSlot() {
-        const iconEl = this.el.querySelector(`[slot="icon"]`);
-        return iconEl !== null;
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
@@ -1219,18 +1209,15 @@ const TextField = class {
             (maxLength === 0 && currentStatus === types.IcInformationStatus.Error)
             ? "assertive"
             : "polite";
-        const showStatusText = this.showStatusText(currentStatus);
-        const multiline = this.isTextArea();
-        const hiddenCharCountDescId = maxLength > 0 ? inputId + "-charcount-desc" : "";
-        const describedBy = (hiddenCharCountDescId +
-            " " +
-            helpers.getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
-        let showLeftIcon = this.hasLeftIconSlot();
-        if (showLeftIcon && !readonly && disabledMode) {
-            showLeftIcon = false;
-        }
-        const invalid = currentStatus === types.IcInformationStatus.Error ? "true" : "false";
+        const showStatusText = this.hasStatus(currentStatus) &&
+            !(currentStatus == types.IcInformationStatus.Success && validationInline) &&
+            !validationInlineInternal;
+        const multiline = rows > 1;
+        const hiddenCharCountDescId = maxLength > 0 ? `${inputId}-charcount-desc` : "";
+        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);
         }