@ukic/canary-web-components 3.0.0-canary.17 → 3.0.0-canary.19

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-a7a720e7.js';
-import { r as removeDisabledFalse, b as onComponentRequiredPropUndefined, N as capitalize, O as checkSlotInChildMutations, C as getLabelFromValue, z as getFilteredMenuOptions, P as getOptionsWithoutGroupTitlesCount, x as removeFormResetListener, t as inheritAttributes, y as addFormResetListener, E as renderHiddenInput, j as getInputDescribedByText, k as hasValidationStatus, Q as isMobileOrTablet, u as IC_INHERITED_ARIA, R as IcInformationStatus, B as debounceEvent, S as IGNORED_KEYBOARD_CHARACTERS, L as removeHiddenInput, i as isSlotUsed, F as isEmptyString } from './helpers-fb59efa8.js';
+import { r as removeDisabledFalse, b as onComponentRequiredPropUndefined, N as capitalize, O as checkSlotInChildMutations, A as getLabelFromValue, z as getFilteredMenuOptions, P as getOptionsWithoutGroupTitlesCount, x as removeFormResetListener, t as inheritAttributes, y as addFormResetListener, E as renderHiddenInput, j as getInputDescribedByText, k as hasValidationStatus, i as isSlotUsed, Q as isMobileOrTablet, u as IC_INHERITED_ARIA, R as IcInformationStatus, C as debounceEvent, S as IGNORED_KEYBOARD_CHARACTERS, L as removeHiddenInput, F as isEmptyString } from './helpers-fc03923c.js';
 
 const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
@@ -252,14 +252,14 @@ const Pagination = class {
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (h(Host, { key: '70130b80edbb60548c9f50c2943f05011e56be69', class: {
+        return (h(Host, { key: 'def082d6417770159241eaf69660011a9fa56978', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (h("nav", { key: 'bbe920e2011813cfb8dfe4d6f5bbd9e5f6122ffd', class: {
+            } }, type === "simple" && (h("nav", { key: '7d2a663d826de4c5916d6ece70222bf28157b57b', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: 'd4f502db5763086dbdcb518f819638e944c4c2e4', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: '88cc5fb9aab0dafc34dd1a4d4744ddfcf863cd11', class: {
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '010243beef572daba8a9c1f58978213f02446b2e', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: '7ab291c9e698dfb1ead08c7a59858a4f3f715488', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: '39e0d6b75392af13093c4c5ca5ab94c7da8d8a96', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: '2b7be6cd03fb72ccaf3a2bd08fbf5ef5f52e5050', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -316,7 +316,7 @@ const PaginationItem = class {
     }
     render() {
         const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
-        return (h("a", { key: '1a741926e4af87f661203c00d3eebecfe31fed2e', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
+        return (h("a", { key: '775649dcb0b2df73e18ddbb563cb088f5e4bf394', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: !!disabled,
@@ -369,11 +369,14 @@ const Select = class {
         this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
         this.icOptionDeselect = createEvent(this, "icOptionDeselect", 7);
         this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
+        this.blurredBecauseButtonPressed = false;
         this.hasSetDefaultValue = false;
+        this.hasTimedOut = false;
         this.inheritedAttributes = {};
         this.initialOptionsEmpty = false;
         this.inputId = `ic-select-input-${inputIds$1++}`;
         this.menuId = `${this.inputId}-menu`;
+        this.retryButtonClick = false;
         this.searchableMenuItemSelected = false;
         this.ungroupedOptions = [];
         this.hostMutationObserver = null;
@@ -489,6 +492,12 @@ const Select = class {
          */
         this.debounce = 0;
         this.currDebounce = this.debounce;
+        /**
+         * The value of the select, reflected by the value of the currently selected option.
+         * For the searchable variant, the value is also reflected by the user input.
+         * For the multi-select variant, the value must be an array of option values.
+         */
+        this.value = null;
         this.initialValue = this.value;
         this.inputValueToFilter = this.value;
         // triggered when attributes of host element change
@@ -526,13 +535,27 @@ const Select = class {
         this.emitIcChange = (value) => {
             // If "Select all" button clicked, replace value with new value (array of all option values)
             if (this.multiple && !Array.isArray(value) && value !== null) {
-                this.handleMultipleSelectChange(String(value));
+                // Update selected options - adds / removes them, in order of option list
+                // Create new array if value prop is undefined
+                if (this.value) {
+                    let valueArray = this.value.slice();
+                    if (this.value.includes(value)) {
+                        valueArray.splice(valueArray.indexOf(value), 1);
+                    }
+                    else {
+                        valueArray.push(value);
+                        valueArray = this.getValueSortedByOptions(valueArray);
+                    }
+                    this.value = valueArray.length === 0 ? null : valueArray;
+                }
+                else {
+                    this.value = [value];
+                }
             }
             else {
                 this.value = value;
             }
-            const valueToEmit = this.multiple ? this.value : value;
-            this.icChange.emit({ value: valueToEmit || null });
+            this.icChange.emit({ value: this.multiple ? this.value : value });
         };
         this.emitIcInput = (value) => {
             clearTimeout(this.debounceIcInput);
@@ -545,30 +568,25 @@ const Select = class {
                 if (this.options.length > 0) {
                     this.setOptionsValuesFromLabels();
                     this.uniqueOptions = this.deduplicateOptions(this.options);
-                    this.filteredOptions = this.uniqueOptions;
                 }
                 else {
                     this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
                     this.uniqueOptions = this.noOptions;
-                    this.filteredOptions = this.noOptions;
                 }
+                this.filteredOptions = this.uniqueOptions;
                 if (this.isExternalFiltering()) {
                     // When searchable select
                     this.noOptions = null;
                     this.updateSearchableSelectResultAriaLive();
                     this.setDefaultValue();
                 }
-                else {
-                    if (this.initialOptionsEmpty) {
-                        this.setDefaultValue();
-                        this.initialOptionsEmpty = false;
-                    }
+                else if (this.initialOptionsEmpty) {
+                    this.setDefaultValue();
+                    this.initialOptionsEmpty = false;
                 }
             }
-            else {
-                if (!this.searchable) {
-                    this.options = this.noOptions || [];
-                }
+            else if (!this.searchable) {
+                this.options = this.noOptions || [];
             }
         };
         /**
@@ -579,11 +597,10 @@ const Select = class {
         this.deduplicateOptions = (options) => {
             const uniqueValues = [];
             const dedupedOptions = [];
-            let dedupedChildren;
             options.forEach((option) => {
                 if (option.children) {
                     //If an option has children, we will loop through them
-                    dedupedChildren = [];
+                    const dedupedChildren = [];
                     option.children.forEach((child) => {
                         if (uniqueValues.includes(child.value)) {
                             console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${child.value}) which has been removed.`);
@@ -594,8 +611,7 @@ const Select = class {
                         }
                     });
                     // construct a modified option, inserting the deduplicated children alongside the original information
-                    const modifiedParent = Object.assign(Object.assign({}, option), { children: dedupedChildren });
-                    dedupedOptions.push(modifiedParent);
+                    dedupedOptions.push(Object.assign(Object.assign({}, option), { children: dedupedChildren }));
                 }
                 else {
                     // If an option does not have children, assess to see if it's value has been included already
@@ -627,12 +643,10 @@ const Select = class {
         };
         this.setTextColor = () => {
             if (this.nativeSelectElement) {
-                if (this.nativeSelectElement.selectedIndex === 0) {
-                    this.nativeSelectElement.className = "placeholder";
-                }
-                else {
-                    this.nativeSelectElement.className = "select-option-selected";
-                }
+                this.nativeSelectElement.className =
+                    this.nativeSelectElement.selectedIndex === 0
+                        ? "placeholder"
+                        : "select-option-selected";
             }
         };
         this.setMenuChange = (open) => {
@@ -640,27 +654,12 @@ const Select = class {
                 this.open = open;
             }
         };
-        this.getLabelFromValue = (value) => {
-            return getLabelFromValue(value, this.uniqueOptions);
-        };
-        this.getMultipleOptionsString = (selectedValues) => {
-            const selectedLabels = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value)).filter((label) => !!label);
-            return selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.join(", ");
-        };
-        this.getFilteredChildMenuOptions = (option) => {
-            let children = option.children;
-            if (option.children) {
-                if (this.searchable) {
-                    children = getFilteredMenuOptions(option.children, !!this.includeDescriptionsInSearch, this.searchableSelectInputValue || "", this.searchMatchPosition);
-                }
-                else {
-                    children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
-                }
-            }
-            const newOption = Object.assign({}, option);
-            newOption.children = children;
-            return newOption;
-        };
+        this.getLabelFromValue = (value) => getLabelFromValue(value, this.uniqueOptions);
+        this.getMultipleOptionsString = (selectedValues) => selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value)).filter((label) => !!label).join(", ");
+        this.getFilteredChildMenuOptions = (option) => (Object.assign(Object.assign({}, option), { children: option.children &&
+                getFilteredMenuOptions(option.children, this.searchable && !!this.includeDescriptionsInSearch, this.searchable
+                    ? this.searchableSelectInputValue || ""
+                    : this.pressedCharacters, this.searchable ? this.searchMatchPosition : "start") }));
         // (For multi-select) get value array, i.e. selected option values, in order they appear in option list
         this.getValueSortedByOptions = (value) => {
             const valueArray = value;
@@ -679,13 +678,13 @@ const Select = class {
         // (rather than native <select> - rendered when viewed on a mobile / tablet screen)
         this.handleCustomSelectChange = (event) => {
             var _a, _b;
-            const value = event.detail.value;
-            if (event.detail.label === this.emptyOptionListText) {
+            const { value, label, optionId } = event.detail;
+            if (label === this.emptyOptionListText) {
                 (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
             if (this.searchable) {
-                this.value = value;
+                this.value = value || null;
                 this.searchableMenuItemSelected = true;
                 // After editing the input, if selecting the same option as before, set the input value to label again
                 if (this.value === this.currValue) {
@@ -696,64 +695,39 @@ const Select = class {
                 this.hiddenInputValue =
                     this.getValueFromLabel(this.searchableSelectInputValue) || null;
             }
-            if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
-                this.icOptionDeselect.emit({ value });
-            }
-            else {
-                this.icOptionSelect.emit({ value });
-            }
-            this.ariaActiveDescendant = event.detail.optionId;
-            this.emitIcChange(value);
-        };
-        // Update selected options - adds / removes them, in order of option list
-        // Create new array if value prop is undefined
-        this.handleMultipleSelectChange = (value) => {
-            if (this.value) {
-                let valueArray = this.value.slice();
-                if (this.value.includes(value)) {
-                    const valueIndex = valueArray.indexOf(value);
-                    valueArray.splice(valueIndex, 1);
+            if (value) {
+                if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
+                    this.icOptionDeselect.emit({ value });
                 }
                 else {
-                    valueArray.push(value);
-                    valueArray = this.getValueSortedByOptions(valueArray);
+                    this.icOptionSelect.emit({ value });
                 }
-                this.value = valueArray.length === 0 ? null : valueArray;
-            }
-            else {
-                const valueArray = [];
-                valueArray.push(value);
-                this.value = valueArray;
             }
+            this.ariaActiveDescendant = optionId;
+            this.emitIcChange(value || null);
         };
-        this.handleSelectAllChange = (event) => {
-            const selectAllOptions = event.detail.select;
-            const allEnabledOptions = this.ungroupedOptions.filter((option) => !option.disabled);
-            const allValues = allEnabledOptions.map((option) => option.value);
-            let newValue;
-            if (selectAllOptions) {
-                let unselectedValues;
+        this.handleSelectAllChange = ({ detail, }) => {
+            const allValues = this.ungroupedOptions
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
+            if (detail.select) {
                 // Only emit icOptionSelect for all values that are newly selected
-                if (this.value) {
-                    unselectedValues = allValues.filter((value) => this.value && !this.value.includes(value));
-                }
-                else {
-                    unselectedValues = allValues;
-                }
+                const unselectedValues = this.value
+                    ? allValues.filter((value) => this.value && !this.value.includes(value))
+                    : allValues;
                 unselectedValues.forEach((value) => this.icOptionSelect.emit({ value }));
-                newValue = allValues;
             }
             else {
                 // Only emit icOptionDeselect for values that were selected
                 this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
-                newValue = null;
             }
-            this.emitIcChange(newValue);
+            this.emitIcChange(detail.select ? allValues : null);
         };
         this.handleMenuChange = (event) => {
             this.open = event.detail.open;
             this.pressedCharacters = "";
-            this.searchable && this.handleFocusIndicatorDisplay();
+            if (this.searchable)
+                this.handleFocusIndicatorDisplay();
         };
         // clears the debounce delay when navigating the menu with arrow keys etc
         // to prevent delay in change event, which should only occur when typing in input
@@ -828,19 +802,18 @@ const Select = class {
             if (this.open && key === " " && this.pressedCharacters.length === 0) {
                 this.setMenuChange(false);
             }
-            if (key.length === 1 && !this.searchable) {
-                window.clearTimeout(this.characterKeyPressTimer);
-                this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
-                if (!(key === " " && !this.pressedCharacters)) {
-                    this.pressedCharacters += key;
-                    this.handleFilter();
-                    if (!this.noOptions) {
-                        this.emitIcChange(this.filteredOptions[0].value);
-                    }
-                }
-            }
-            else {
+            if (key.length !== 1 || this.searchable) {
                 this.pressedCharacters = "";
+                return;
+            }
+            window.clearTimeout(this.characterKeyPressTimer);
+            this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
+            if (key !== " " || !!this.pressedCharacters) {
+                this.pressedCharacters += key;
+                this.handleFilter();
+                if (!this.noOptions) {
+                    this.emitIcChange(this.filteredOptions[0].value);
+                }
             }
         };
         this.handleNativeSelectKeyDown = (event) => {
@@ -859,19 +832,17 @@ const Select = class {
                 if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
                     this.menu.options = this.filteredOptions;
                 }
-                else {
-                    if (!this.hasTimedOut) {
-                        this.noOptions = null;
-                        this.menu.options = this.uniqueOptions;
-                    }
+                else if (!this.hasTimedOut) {
+                    this.noOptions = null;
+                    this.menu.options = this.uniqueOptions;
                 }
             }
             if (this.open && event.key === "Enter") {
                 this.setMenuChange(false);
             }
             else {
-                if (!(isArrowKey && this.noOptions !== null)) {
-                    if (!(event.key === " " && this.pressedCharacters.length > 0)) {
+                if (!isArrowKey || this.noOptions === null) {
+                    if (event.key !== " " || this.pressedCharacters.length <= 0) {
                         // Keyboard events get passed onto ic-menu
                         (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleKeyboardOpen(event);
                     }
@@ -887,9 +858,9 @@ const Select = class {
         this.handleClearButtonBlur = (ev) => {
             var _a;
             const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            if (!(this.searchableSelectElement &&
-                ev.relatedTarget === this.searchableSelectElement) &&
-                !(retryButton && ev.relatedTarget === retryButton)) {
+            if ((!this.searchableSelectElement ||
+                ev.relatedTarget !== this.searchableSelectElement) &&
+                (!retryButton || ev.relatedTarget !== retryButton)) {
                 this.setMenuChange(false);
                 this.handleFocusIndicatorDisplay();
             }
@@ -898,12 +869,8 @@ const Select = class {
         this.handleFilter = () => {
             var _a;
             const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
-            let isGrouped = false;
+            const isGrouped = options.some((option) => !!option.children);
             let newFilteredOptions = [];
-            options.map((option) => {
-                if (option.children)
-                    isGrouped = true;
-            });
             let menuOptionsFiltered;
             if (this.searchable) {
                 menuOptionsFiltered = getFilteredMenuOptions(options, !!this.includeDescriptionsInSearch, this.inputValueToFilter || "", this.searchMatchPosition);
@@ -917,30 +884,14 @@ const Select = class {
                 newFilteredOptions = menuOptionsFiltered;
             }
             else if (isGrouped) {
-                options.map((option) => {
-                    if (this.includeGroupTitlesInSearch) {
-                        if (menuOptionsFiltered.indexOf(option) !== -1) {
-                            newFilteredOptions.push(option);
-                        }
-                        else {
-                            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
-                        }
-                    }
-                    else {
-                        newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
-                    }
-                });
-            }
-            let noChildOptionsWhenFiltered = false;
-            if (isGrouped) {
-                noChildOptionsWhenFiltered = true;
-                newFilteredOptions.map((option) => {
-                    if (option.children && option.children.length > 0) {
-                        noChildOptionsWhenFiltered = false;
-                    }
-                });
-            }
-            if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+                newFilteredOptions = options.map((option) => this.includeGroupTitlesInSearch &&
+                    menuOptionsFiltered.indexOf(option) !== -1
+                    ? option
+                    : this.getFilteredChildMenuOptions(option));
+            }
+            if (newFilteredOptions.length > 0 &&
+                (!isGrouped ||
+                    newFilteredOptions.some(({ children }) => children && children.length > 0))) {
                 this.noOptions = null;
                 this.filteredOptions = newFilteredOptions;
             }
@@ -975,11 +926,7 @@ const Select = class {
                 }, this.timeout);
             }
         };
-        this.getValueFromLabel = (label) => {
-            var _a;
-            return (label &&
-                ((_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value));
-        };
+        this.getValueFromLabel = (label) => { var _a; return label && ((_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value); };
         this.handleSearchableSelectInput = (event) => {
             this.searchableSelectInputValue = event.target.value;
             this.emitIcInput(this.searchableSelectInputValue);
@@ -993,19 +940,18 @@ const Select = class {
             this.setMenuChange(true);
             if (!this.disableAutoFiltering) {
                 this.handleFilter();
-                this.debounceAriaLiveUpdate();
+                clearTimeout(this.debounceAria);
+                window.setTimeout(() => {
+                    this.updateSearchableSelectResultAriaLive();
+                }, 800);
             }
         };
         this.updateSearchableSelectResultAriaLive = () => {
             var _a;
             const searchableSelectResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".searchable-select-results-status");
             if (searchableSelectResultsStatusEl) {
-                if (this.noOptions !== null) {
-                    searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
-                }
-                else {
-                    searchableSelectResultsStatusEl.innerText = "";
-                }
+                searchableSelectResultsStatusEl.innerText =
+                    this.noOptions !== null ? this.emptyOptionListText : "";
             }
         };
         this.updateMultiSelectedCountAriaLive = () => {
@@ -1039,13 +985,12 @@ const Select = class {
                 return;
             }
             const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            const isSearchableAndNoFocusedInternalElements = this.searchable &&
+            if (this.searchable &&
                 !!this.menu &&
                 target !== this.menu &&
                 !Array.from(this.menu.querySelectorAll("[role='option']")).includes(target) &&
-                !(this.clearButton && target === this.clearButton) &&
-                !(retryButton && target === retryButton);
-            if (isSearchableAndNoFocusedInternalElements) {
+                (!this.clearButton || target !== this.clearButton) &&
+                (!retryButton || target !== retryButton)) {
                 if (!this.retryButtonClick) {
                     this.setMenuChange(false);
                     // Clear input field on blur when searchable if no option is selected
@@ -1084,6 +1029,7 @@ const Select = class {
                 this.filteredOptions = this.uniqueOptions;
             }
         };
+        this.renderNativeOption = (option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === this.currValue }, option.label));
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -1095,7 +1041,9 @@ const Select = class {
         this.setOptions();
     }
     debounceChangedHandler(newValue) {
-        this.updateOnChangeDebounce(newValue);
+        if (this.currDebounce !== newValue) {
+            this.currDebounce = newValue;
+        }
     }
     valueChangedHandler() {
         if (this.value !== this.currValue) {
@@ -1178,83 +1126,59 @@ const Select = class {
             this.searchableSelectElement.focus();
         }
     }
-    updateOnChangeDebounce(newValue) {
-        if (this.currDebounce !== newValue) {
-            this.currDebounce = newValue;
-        }
-    }
-    debounceAriaLiveUpdate() {
-        clearTimeout(this.debounceAria);
-        window.setTimeout(() => {
-            this.updateSearchableSelectResultAriaLive();
-        }, 800);
-    }
     render() {
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, } = this;
+        var _a;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, hiddenInputValue, open, inputId, searchableSelectInputValue, loading, value, emptyOptionListText, uniqueOptions, selectOnEnter, form, inheritedAttributes, ariaActiveDescendant, hasTimedOut, noOptions, filteredOptions, clearButtonFocused, } = this;
         // HTML inputs only accept 'string' for their value
         // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
-        renderHiddenInput(true, this.el, name || this.inputId, this.searchable ? this.hiddenInputValue : currValue, disabled);
+        renderHiddenInput(this.el, searchable ? hiddenInputValue : currValue, name || inputId, disabled);
         const invalid = `${validationStatus === IcInformationStatus.Error}`;
-        const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, !!this.disabled)).trim();
-        let showLeftIcon = !!this.el.querySelector(`[slot="icon"]`);
-        if (showLeftIcon && (disabled || (readonly && !this.value))) {
-            showLeftIcon = false;
-        }
-        const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
+        const describedBy = getInputDescribedByText(inputId, helperText !== "", hasValidationStatus(validationStatus, !!disabled)).trim();
         const valueLabelString = multiple
             ? this.getMultipleOptionsString(currValue)
             : this.getLabelFromValue(currValue);
         const isClearable = !disabled &&
             (searchable
-                ? this.searchableSelectInputValue
-                : currValue && !this.loading && showClearButton);
-        return (h(Host, { key: '75cf0d014983dd89d440f68080f01333e6c265ee', class: {
-                "ic-select-disabled": !!disabled,
-                "ic-select-searchable": !!searchable,
+                ? !!searchableSelectInputValue
+                : !!currValue && !loading && showClearButton);
+        return (h(Host, { key: 'd128625d13fdd5c5ee1710116f071f42c9f9820f', class: {
+                "ic-select-disabled": disabled,
+                "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
-                "ic-select-full-width": !!fullWidth,
+                "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'eb714cd9445894ca8fd3be546308f19f32d1b54c', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: 'b458a202cdce6dcfad3d92da57714aa44f73d886', for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { key: '4ac767a175604d7e4f86fa46945fc028be835ff2', ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { key: '7ac05ef11cda6c03db0b1b9f4573a704581524e0', slot: "left-icon", class: {
-                ["readonly"]: !!readonly,
-                ["has-value"]: !!this.value,
-            } }, h("slot", { key: 'f09cffc377cfe7eb76d1b8bc4c83ec632a99b2df', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (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), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
-            if (option.children) {
-                return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
-            }
-            else {
-                return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
-            }
-        }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
+            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'd3d0381138d095fb6c2c673d543b9b61710c064b', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '9cc4c487e780d00eed4bc4e4e3c3cbb66aab2a14', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { key: 'cc15c6396b6edcd506e2caa93871ec529f6f25a4', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            !disabled &&
+            (!readonly || !!value) && (h("span", { key: '21933fa4367b40e02fc41692a35f612f0c6c17d5', slot: "left-icon", class: {
+                readonly,
+                "has-value": !!value,
+            } }, h("slot", { key: 'ad5ca4da28e3fb74526668811a042d7efdfad10c', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
                 "select-input": true,
-                "with-clear-button": !!this.searchableSelectInputValue,
-            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), isClearable && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue &&
-                (currValue === null || this.loading)
+                "with-clear-button": !!searchableSelectInputValue,
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: form }), isClearable && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": searchableSelectInputValue &&
+                (currValue === null || loading)
                 ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
-                "expand-icon-open": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${(multiple && currValue
-                ? `${optionsSelectedCount}, ${valueLabelString}`
-                : valueLabelString) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && currValue
+                ? `${currValue.length} of ${getOptionsWithoutGroupTitlesCount(options)} selected, ${valueLabelString}`
+                : valueLabelString) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
                 "value-text": true,
-                "with-clear-button": !!isClearable,
-                placeholder: !this.loading && multiple
-                    ? !this.value || this.value.length < 1
+                "with-clear-button": isClearable,
+                placeholder: !loading && multiple
+                    ? !value || value.length < 1
                     : !this.getLabelFromValue(currValue),
             } }, valueLabelString || placeholder), h("div", { class: "select-input-end" }, isClearable && h("div", { class: "divider" }), h("span", { class: {
                 "expand-icon": true,
-                "expand-icon-open": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: '60dac9f71d9787ae401f439dbcd013365c33b713', class: {
-                "no-results": this.loading ||
-                    this.hasTimedOut ||
-                    (this.noOptions !== null &&
-                        this.noOptions[0] &&
-                        this.noOptions[0].label === this.emptyOptionListText),
-            }, ref: (el) => (this.menu = el), inputEl: (searchable
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: '341d478ae904d5bd2a4c6fa54fb29802d2851f3e', class: {
+                "no-results": loading ||
+                    hasTimedOut ||
+                    ((_a = noOptions === null || noOptions === void 0 ? void 0 : noOptions[0]) === null || _a === void 0 ? void 0 : _a.label) === emptyOptionListText,
+            }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement), inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || multiple || this.selectOnEnter
-                ? "manual"
-                : "automatic", closeOnSelect: !multiple })), this.multiple && (h("div", { key: '876f1da870c48b21130b246afa988c4fccefdfc6', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, !!this.disabled) && (h("ic-input-validation", { key: '657c2433a3ab425432356227e931cafe4268dd8b', class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText || "", for: this.inputId })))));
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple })), multiple && (h("div", { key: '8fb9874132ab430dc90eba61264424fcf200b944', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '872afd5e8f621258c64756d06061a266a4e09745', class: { "menu-open": open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -1283,6 +1207,7 @@ const TextField = class {
         this.icFocus = createEvent(this, "icFocus", 7);
         this.icInput = createEvent(this, "icInput", 7);
         this.icKeydown = createEvent(this, "icKeydown", 7);
+        this.icScroll = createEvent(this, "icScroll", 7);
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
         this.numChars = 0;
@@ -1291,10 +1216,7 @@ const TextField = class {
         this.minCharactersUnattained = false;
         this.maxValueExceeded = false;
         this.minValueUnattained = false;
-        /**
-         * @internal Used to identify whether inputting any text triggers more predictions
-         */
-        this.ariaAutocomplete = undefined;
+        this.isFocussed = false;
         /**
          * The automatic capitalisation of the text value as it is entered/edited by the user.
          * Available options: "off", "none", "on", "sentences", "words", "characters".
@@ -1409,6 +1331,10 @@ const TextField = class {
          * 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";
+        /**
+         * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
+         */
+        this.truncateValue = false;
         /**
          * The type of control to display. The default type is text.
          */
@@ -1439,9 +1365,9 @@ const TextField = class {
         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"))) {
+            var _a, _b;
+            if (this.hideLabel ||
+                ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-typography")) === null || _b === void 0 ? void 0 : _b.classList.contains("hydrated"))) {
                 this.setFocus();
                 clearInterval(this.interval);
             }
@@ -1457,7 +1383,7 @@ const TextField = class {
         this.getMaxCharactersReached = (value) => {
             this.numChars = this.getNumberOfCharacters(value);
             this.maxCharactersReached =
-                this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
+                this.maxCharacters > 0 && this.numChars >= this.maxCharacters;
             if (this.maxCharactersWarning && !this.maxCharactersReached) {
                 this.maxCharactersWarning = false;
             }
@@ -1469,16 +1395,21 @@ const TextField = class {
         this.onBlur = (ev) => {
             const target = ev.target;
             target.removeEventListener("wheel", this.onWheel);
-            const value = ev.target.value;
+            const { value } = target;
             this.numChars = value.length;
             this.minCharactersUnattained =
-                this.minCharacters > 0 ? this.numChars < this.minCharacters : false;
-            this.icBlur.emit({ value: value });
+                this.minCharacters > 0 && this.numChars < this.minCharacters;
+            this.icBlur.emit({ value });
+            this.isFocussed = false;
         };
         this.onFocus = (ev) => {
             const target = ev.target;
             target.addEventListener("wheel", this.onWheel);
-            this.icFocus.emit({ value: ev.target.value });
+            this.icFocus.emit({ value: target.value });
+            this.isFocussed = true;
+        };
+        this.onTextAreaScroll = () => {
+            this.icScroll.emit();
         };
         this.onWheel = (ev) => {
             const target = ev.target;
@@ -1591,7 +1522,7 @@ 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, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, hideLabel, type, autocapitalize, ariaActiveDescendant, inheritedAttributes, ariaExpanded, ariaOwns, autocomplete, role, isFocussed, } = this;
         const el = this.el;
         const disabledMode = readonly || disabled;
         const currentStatus = maxValueExceeded ||
@@ -1622,44 +1553,45 @@ const TextField = class {
             !(currentStatus == IcInformationStatus.Success && validationInline) &&
             !validationInlineInternal;
         const multiline = rows > 1;
-        const charsRemaining = maxNumChars - numChars;
-        const hiddenRemainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
         const hiddenCharCountDescId = maxCharacters > 0 ? `${inputId}-char-count-desc` : "";
-        const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(inputId, helperText !== "", showStatusText)}`.trim();
+        const charsRemaining = maxNumChars - numChars;
+        const remainingCharCountDescId = maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : "";
+        const remainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
+        const describedBy = `${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""} ${getInputDescribedByText(inputId, helperText !== "", showStatusText)}`.trim();
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
         const invalid = `${currentStatus === IcInformationStatus.Error}`;
         hiddenInput
-            ? renderHiddenInput(true, this.el, name, value, disabledMode)
+            ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '23cb6b387a381e50b3f1854c3870a1f7e3bfa23e', class: {
-                "ic-text-field-full-width": !!fullWidth,
+        return (h(Host, { key: 'fe960598716052334b20c15f7e4b05477025783b', class: {
+                "ic-text-field-full-width": fullWidth,
+                "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-                "ic-text-field-disabled": !!disabledMode,
-            } }, h("ic-input-container", { key: '87bc697a55a04e7aefdeafd6d37eff3824990034', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { key: 'a289d63c13ed94a8282eab7b16ace632a59c83ed', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: '51b602029de06b6147c17a01ba427a558410c4df', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'c1ac46bc7a8114f4a6dce0126784a7333777b168', class: {
-                readonly: !!readonly,
+            } }, h("ic-input-container", { key: '1a4e6b2cd9ef8646ed34575b77ce53d82a1dbb1b', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '1b56501853e8a8062a4b02fb85be73c69d4b5b1e', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: '7e104a64fc5ab3a173b814d38287fd843cfb8eb4', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'd3e31bb36c451e33d99b93eb069b6cad1e074de3', class: {
+                readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '312ac15fb4ccb3873bfddec4c60c4fb234aa0e28', 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: {
+            }, slot: "left-icon" }, h("slot", { key: '6b91c9ac3cf054c3e30208712e3404c03c1e7d45', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: 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": ariaActiveDescendant, "aria-expanded": ariaExpanded, "aria-owns": ariaOwns, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: role || undefined, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, 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: '86e21e2775c078a2322e1fdf6cf3323cba757917', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '9a1800781608f067e5e6f4a0b097ab4fec148fc2', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '1281dfee838c2af0822b8ec2d477c6290cd5b020', name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '9b9a1124d52713bf7addfdaa9ad2c8f13538e988', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '3b84112cf83d64ae25bec34bd981a2d53d4cb00c', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f4b614d2451d5c264455536c365ce01510549df3', name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (h("ic-input-validation", { key: '3adb6e2274e123e2c96985b0008e887b791d8e21', status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (h("ic-input-validation", { key: 'a3320c6413c9688905aa7195c07aedaeb5b07aac', 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", { key: '0d35ea132f089aa5554d0d4387fc92f0ba256ec4', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '27132c969fa6d92e21c84795341a7eb520307df0', variant: "caption", class: "char-count-text" }, h("span", { key: 'db55472d6e4d40e03a5a8442d9e5dc388e77ca14', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'a42b206be46d1df23b01c1688cb430a062c4fbc9', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { key: 'b5e3a90f0cc7cfb16e3a337d886cf0360748fca2', 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: '50e3a895feaf7026e41698279e344ec987be3569', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '6918f82e8bc0ab17941bdafa24249f7ac0fbc191', variant: "caption", class: "char-count-text" }, h("span", { key: '59b2ea3ee4a854eff96af2faacb407f926c1b393', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '977bfee3b55bad4412d6943dfc8e75bd0f4ddb41', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '727328e80137330465fcbdc45711f168b5d9d54f', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {