@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-select/ic-select.js

@@ -1,7 +1,7 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
-import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
+import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, getOptionsWithoutGroupTitlesCount, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
-import { IcInformationStatus, IcThemeForegroundEnum, } from "../../utils/types";
+import { IcInformationStatus, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
 import Clear from "./assets/Clear.svg";
 let inputIds = 0;
@@ -43,21 +43,26 @@ export class Select {
             this.blurredBecauseButtonPressed = true;
             this.retryButtonClick = true;
             this.hasSetDefaultValue = true;
-            this.icRetryLoad.emit({ value: this.hiddenInputValue });
+            this.icRetryLoad.emit({
+                value: this.searchable
+                    ? this.searchableSelectInputValue
+                    : this.hiddenInputValue,
+            });
         };
         this.emitIcChange = (value) => {
-            if (!this.searchable) {
+            // 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));
+            }
+            else {
                 this.value = value;
             }
-            clearTimeout(this.debounceIcChange);
-            this.debounceIcChange = window.setTimeout(() => {
-                this.icChange.emit({ value: value });
-            }, this.currDebounce);
+            const valueToEmit = this.multiple ? this.value : value;
+            this.icChange.emit({ value: valueToEmit });
         };
-        this.emitImmediateIcChange = (value) => {
-            this.value = value;
-            clearTimeout(this.debounceIcChange);
-            this.icChange.emit({ value: value });
+        this.emitIcInput = (value) => {
+            clearTimeout(this.debounceIcInput);
+            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value }), this.currDebounce);
         };
         /**
          * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
@@ -130,6 +135,10 @@ export class Select {
         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));
+            return selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.join(", ");
+        };
         this.getFilteredChildMenuOptions = (option) => {
             let children = option.children;
             if (this.searchable) {
@@ -142,18 +151,31 @@ export class Select {
             newOption.children = children;
             return newOption;
         };
+        // (For multi-select) get value array, i.e. selected option values, in order they appear in option list
+        this.getValueSortedByOptions = (value) => {
+            const valueArray = value;
+            const valuesFromAllOptions = this.ungroupedOptions.map((option) => option.value);
+            valueArray.sort((a, b) => valuesFromAllOptions.indexOf(a) - valuesFromAllOptions.indexOf(b));
+            return valueArray;
+        };
         this.handleNativeSelectChange = () => {
             this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-            this.emitImmediateIcChange(this.nativeSelectElement.value);
+            this.emitIcChange(this.nativeSelectElement.value);
             this.setTextColor();
         };
+        // Handle option select for when a custom input box and menu is rendered
+        // (rather than native <select> - rendered when viewed on a mobile / tablet screen)
         this.handleCustomSelectChange = (event) => {
-            if (this.searchable && event.detail.label === this.emptyOptionListText) {
-                this.searchableSelectElement.focus();
+            var _a;
+            const value = event.detail.value;
+            if (event.detail.label === this.emptyOptionListText) {
+                if (this.searchable) {
+                    this.searchableSelectElement.focus();
+                }
                 return;
             }
             if (this.searchable) {
-                this.value = event.detail.value;
+                this.value = value;
                 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) {
@@ -162,9 +184,59 @@ export class Select {
                 this.inputValueToFilter = null;
                 this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
             }
+            if (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(value))) {
+                this.icOptionDeselect.emit({ value });
+            }
+            else {
+                this.icOptionSelect.emit({ value });
+            }
             this.ariaActiveDescendant = event.detail.optionId;
-            this.icOptionSelect.emit({ value: event.detail.value });
-            this.emitIcChange(event.detail.value);
+            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);
+                }
+                else {
+                    valueArray.push(value);
+                    valueArray = this.getValueSortedByOptions(valueArray);
+                }
+                this.value = valueArray.length === 0 ? null : valueArray;
+            }
+            else {
+                const valueArray = [];
+                valueArray.push(value);
+                this.value = valueArray;
+            }
+        };
+        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;
+                // 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;
+                }
+                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.handleMenuChange = (event) => {
             this.open = event.detail.open;
@@ -175,10 +247,9 @@ export class Select {
         // to prevent delay in change event, which should only occur when typing in input
         this.handleMenuKeyPress = (ev) => {
             ev.cancelBubble = true;
-            this.handleCharacterKeyDown(ev.detail.key);
-        };
-        this.handleMenuValueChange = (ev) => {
-            this.value = ev.detail.value;
+            if (!this.multiple) {
+                this.handleCharacterKeyDown(ev.detail.key);
+            }
         };
         this.handleFocusIndicatorDisplay = () => {
             const focusIndicator = this.el.shadowRoot.querySelector(".focus-indicator");
@@ -194,7 +265,7 @@ export class Select {
                 event.preventDefault();
             }
         };
-        this.isExternalFiltering = () => this.searchable && this.disableFilter;
+        this.isExternalFiltering = () => this.searchable && this.disableAutoFiltering;
         this.handleClick = (event) => {
             var _a;
             if (!this.open) {
@@ -224,13 +295,10 @@ export class Select {
             event.stopPropagation();
             this.hasTimedOut = false;
             clearTimeout(this.timeoutTimer);
-            this.noOptions = null;
-            this.emitImmediateIcChange(null);
+            this.clearInput();
+            this.emitIcChange(null);
             this.icClear.emit();
             if (this.searchable) {
-                this.searchableSelectElement.value = null;
-                this.searchableSelectInputValue = null;
-                this.filteredOptions = this.uniqueOptions;
                 this.hiddenInputValue = null;
                 this.searchableSelectElement.focus();
             }
@@ -250,10 +318,12 @@ export class Select {
             if (key.length === 1 && !this.searchable) {
                 window.clearTimeout(this.characterKeyPressTimer);
                 this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
-                this.pressedCharacters += key;
-                this.handleFilter();
-                if (!this.noOptions) {
-                    this.emitImmediateIcChange(this.filteredOptions[0].value);
+                if (!(key === " " && !this.pressedCharacters)) {
+                    this.pressedCharacters += key;
+                    this.handleFilter();
+                    if (!this.noOptions) {
+                        this.emitIcChange(this.filteredOptions[0].value);
+                    }
                 }
             }
             else {
@@ -291,7 +361,9 @@ export class Select {
                         // Keyboard events get passed onto ic-menu
                         this.menu.handleKeyboardOpen(event);
                     }
-                    this.handleCharacterKeyDown(event.key);
+                    if (!this.multiple) {
+                        this.handleCharacterKeyDown(event.key);
+                    }
                 }
             }
         };
@@ -395,12 +467,16 @@ export class Select {
         };
         this.handleSearchableSelectInput = (event) => {
             this.searchableSelectInputValue = event.target.value;
-            this.icInput.emit({ value: this.searchableSelectInputValue });
-            this.emitIcChange(this.searchableSelectInputValue);
-            this.hiddenInputValue = this.searchableSelectInputValue;
+            this.emitIcInput(this.searchableSelectInputValue);
+            // De-select previous selection when input is edited
+            // Only emit icChange once when editing input
+            if (this.value != null) {
+                this.emitIcChange(null);
+            }
+            this.hiddenInputValue = null;
             this.inputValueToFilter = this.searchableSelectInputValue;
             this.setMenuChange(true);
-            if (!this.disableFilter) {
+            if (!this.disableAutoFiltering) {
                 this.handleFilter();
                 this.debounceAriaLiveUpdate();
             }
@@ -416,7 +492,24 @@ export class Select {
                 }
             }
         };
+        this.updateMultiSelectedCountAriaLive = () => {
+            var _a;
+            const multiSelectSelectedCountEl = this.el.shadowRoot.querySelector(".multi-select-selected-count");
+            const selectedCount = `${(_a = this.currValue) === null || _a === void 0 ? void 0 : _a.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
+            if (multiSelectSelectedCountEl &&
+                multiSelectSelectedCountEl.innerText !== selectedCount) {
+                multiSelectSelectedCountEl.innerText = selectedCount;
+            }
+        };
         this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
+        this.setDefaultValue = () => {
+            if (!this.hasSetDefaultValue && this.currValue) {
+                this.searchableSelectInputValue =
+                    this.searchable && this.getDefaultValue(this.currValue);
+                this.initialValue = this.currValue;
+                this.hasSetDefaultValue = true;
+            }
+        };
         this.onFocus = () => {
             this.icFocus.emit();
         };
@@ -438,6 +531,10 @@ export class Select {
             if (isSearchableAndNoFocusedInternalElements) {
                 if (!this.retryButtonClick) {
                     this.setMenuChange(false);
+                    // Clear input field on blur when searchable if no option is selected
+                    if (!this.value) {
+                        this.clearInput();
+                    }
                 }
                 this.handleFocusIndicatorDisplay();
             }
@@ -461,24 +558,26 @@ export class Select {
                 this.hiddenInputValue = this.value;
             }
         };
+        this.clearInput = () => {
+            this.noOptions = null;
+            if (this.searchable) {
+                this.searchableSelectElement.value = null;
+                this.searchableSelectInputValue = null;
+                this.filteredOptions = this.uniqueOptions;
+            }
+        };
         this.ariaActiveDescendant = undefined;
         this.clearButtonFocused = false;
-        this.debounceIcChange = undefined;
+        this.debounceIcInput = undefined;
         this.hiddenInputValue = undefined;
         this.noOptions = null;
         this.open = false;
         this.pressedCharacters = "";
         this.searchableSelectInputValue = null;
-        this.charactersUntilSuggestions = 0;
         this.disabled = false;
-        this.disableFilter = false;
+        this.disableAutoFiltering = false;
         this.emptyOptionListText = "No results found";
         this.form = undefined;
-        this.formaction = undefined;
-        this.formenctype = undefined;
-        this.formmethod = undefined;
-        this.formnovalidate = undefined;
-        this.formtarget = undefined;
         this.fullWidth = false;
         this.helperText = "";
         this.hideLabel = false;
@@ -487,6 +586,7 @@ export class Select {
         this.label = undefined;
         this.loadingErrorLabel = "Loading Error";
         this.loadingLabel = "Loading...";
+        this.multiple = false;
         this.name = this.inputId;
         this.placeholder = "Select an option";
         this.readonly = false;
@@ -495,9 +595,9 @@ export class Select {
         this.searchMatchPosition = "anywhere";
         this.selectOnEnter = false;
         this.showClearButton = false;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.timeout = undefined;
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
         this.loading = false;
@@ -519,10 +619,11 @@ export class Select {
     }
     watchOptionsHandler() {
         var _a;
-        if (!this.hasTimedOut) {
+        if (!this.hasTimedOut && this.options !== this.noOptions) {
             this.loading = false;
             clearTimeout(this.timeoutTimer);
             if (this.isExternalFiltering()) {
+                // When searchable select
                 if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                     this.setOptionsValuesFromLabels();
                     this.noOptions = null;
@@ -558,11 +659,19 @@ export class Select {
     }
     valueChangedHandler() {
         if (this.value !== this.currValue) {
-            this.currValue = this.value;
+            if (this.value && this.multiple) {
+                this.currValue = this.getValueSortedByOptions(this.value);
+                this.updateMultiSelectedCountAriaLive();
+            }
+            else {
+                this.currValue = this.value;
+            }
         }
-        if (this.searchable) {
+        if (this.searchable && this.value) {
+            // Only set if value not null - prevents whole input value being cleared when edited
             this.searchableSelectInputValue =
-                this.getLabelFromValue(this.currValue) || this.currValue;
+                this.getLabelFromValue(String(this.currValue)) ||
+                    this.currValue;
         }
     }
     openChangedHandler() {
@@ -632,15 +741,10 @@ export class Select {
             this.updateSearchableSelectResultAriaLive();
         }, 800);
     }
-    setDefaultValue() {
-        if (!this.hasSetDefaultValue && this.currValue) {
-            this.searchableSelectInputValue = this.getDefaultValue(this.currValue);
-            this.initialValue = this.currValue;
-            this.hasSetDefaultValue = true;
-        }
-    }
     render() {
-        const { small, size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, } = 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.searchable ? this.hiddenInputValue : currValue, disabled);
         const invalid = `${validationStatus === IcInformationStatus.Error}`;
         const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
@@ -648,41 +752,48 @@ export class Select {
         if (showLeftIcon && (disabled || (readonly && !this.value))) {
             showLeftIcon = false;
         }
+        const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
         return (h(Host, { class: {
-                disabled,
-                searchable,
-                small,
-                [size]: size !== "default",
-                "full-width": fullWidth,
-            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), 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 && (h("span", { slot: "left-icon", class: {
+                "ic-select-disabled": disabled,
+                "ic-select-searchable": searchable,
+                [`ic-select-${size}`]: size !== "medium",
+                "ic-select-full-width": fullWidth,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
                 ["readonly"]: readonly,
                 ["has-value"]: !!this.value,
-            } }, h("slot", { name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (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) => {
+            } }, h("slot", { name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, multiple
+            ? this.getMultipleOptionsString(currValue)
+            : this.getLabelFromValue(currValue)))) : 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: "select-input", 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, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), this.searchableSelectInputValue &&
+        }))) : 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, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
             (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.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: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-                "expand-icon-filled": !(currValue == null || currValue === ""),
-            }, 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}, ${this.getLabelFromValue(currValue) || 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: {
+            }, 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}, ${this.getMultipleOptionsString(currValue)}`
+                : this.getLabelFromValue(currValue)) ||
+                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: {
                 "value-text": true,
-                placeholder: this.getLabelFromValue(currValue) === undefined,
-            } }, this.getLabelFromValue(currValue) || placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
+                "with-clear-button": currValue && showClearButton,
+                placeholder: !this.value || (multiple && this.value.length < 1),
+            } }, (multiple
+            ? this.getMultipleOptionsString(currValue)
+            : this.getLabelFromValue(currValue)) ||
+            placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-                "expand-icon-filled": !(currValue == null || currValue === ""),
-            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (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", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (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", { class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
@@ -690,7 +801,9 @@ export class Select {
                         this.noOptions[0].label === this.emptyOptionListText),
             }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || this.selectOnEnter ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { 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: 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", { "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
     }
     static get is() { return "ic-select"; }
     static get encapsulation() { return "shadow"; }
@@ -707,27 +820,6 @@ export class Select {
     }
     static get properties() {
         return {
-            "charactersUntilSuggestions": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore."
-                        }],
-                    "text": ""
-                },
-                "attribute": "characters-until-suggestions",
-                "reflect": false,
-                "defaultValue": "0"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -746,7 +838,7 @@ export class Select {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "disableFilter": {
+            "disableAutoFiltering": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -760,7 +852,7 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source."
                 },
-                "attribute": "disable-filter",
+                "attribute": "disable-auto-filtering",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -799,91 +891,6 @@ export class Select {
                 "attribute": "form",
                 "reflect": false
             },
-            "formaction": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formaction",
-                "reflect": false
-            },
-            "formenctype": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formenctype",
-                "reflect": false
-            },
-            "formmethod": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formmethod",
-                "reflect": false
-            },
-            "formnovalidate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formnovalidate",
-                "reflect": false
-            },
-            "formtarget": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
-                },
-                "attribute": "formtarget",
-                "reflect": false
-            },
             "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
@@ -896,7 +903,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true."
+                    "text": "If `true`, the select will fill the width of the container."
                 },
                 "attribute": "full-width",
                 "reflect": false,
@@ -1027,6 +1034,24 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "\"Loading...\""
             },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, multiple options can be selected."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -1111,7 +1136,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options."
+                    "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component."
                 },
                 "attribute": "searchable",
                 "reflect": false,
@@ -1153,7 +1178,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown."
+                    "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select."
                 },
                 "attribute": "select-on-enter",
                 "reflect": false,
@@ -1182,7 +1207,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1195,49 +1220,52 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the select component."
+                    "text": "The size of the select."
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
-                "type": "boolean",
+            "timeout": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "If using external filtering, set a timeout for when loading takes too long."
                 },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "timeout",
+                "reflect": false
             },
-            "timeout": {
-                "type": "number",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If using external filtering, set a timeout for when loading takes too long."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "timeout",
-                "reflect": false
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
             "validationStatus": {
                 "type": "string",
@@ -1333,7 +1361,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+                    "text": "The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke."
                 },
                 "attribute": "debounce",
                 "reflect": false,
@@ -1343,15 +1371,15 @@ export class Select {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "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."
+                    "text": "The value of the select, reflected by the value of the currently selected option.\nFor the searchable variant, the value is also reflected by the user input.\nFor the multi-select variant, the value must be an array of option values."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -1362,7 +1390,7 @@ export class Select {
         return {
             "ariaActiveDescendant": {},
             "clearButtonFocused": {},
-            "debounceIcChange": {},
+            "debounceIcInput": {},
             "hiddenInputValue": {},
             "noOptions": {},
             "open": {},
@@ -1421,7 +1449,7 @@ export class Select {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the clear button is clicked."
+                    "text": "Emitted when the clear or clear all button is clicked."
                 },
                 "complexType": {
                     "original": "void",
@@ -1502,7 +1530,28 @@ export class Select {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when an option is highlighted within the menu.\nHighlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated."
+                    "text": "Emitted when an option is selected.\nSelecting an option will also trigger an `icChange/onIcChange` due to the value being updated."
+                },
+                "complexType": {
+                    "original": "IcOptionSelectEventDetail",
+                    "resolved": "IcOptionSelectEventDetail",
+                    "references": {
+                        "IcOptionSelectEventDetail": {
+                            "location": "import",
+                            "path": "../ic-menu/ic-menu.types",
+                            "id": "src/components/ic-menu/ic-menu.types.ts::IcOptionSelectEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "icOptionDeselect",
+                "name": "icOptionDeselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `multiple` is `true` and an option is deselected."
                 },
                 "complexType": {
                     "original": "IcOptionSelectEventDetail",