\n `\n : undefined;\n }\n\n /**\n * Handles `input` event on the `` for filtering.\n */\n protected _handleInput() {\n const items = this.querySelectorAll((this.constructor as typeof BXMultiSelect).selectorItem);\n const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n if (!this.open) this.open = true;\n\n forEach(items, item => {\n const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n if (!itemValue.includes(inputValue)) {\n (item as BXMultiSelectItem).setAttribute('filtered', '');\n (item as BXMultiSelectItem).removeAttribute('highlighted');\n } else {\n (item as BXMultiSelectItem).removeAttribute('filtered');\n }\n });\n\n this.requestUpdate();\n }\n\n /**\n * Navigate through dropdown items.\n * @param direction `-1` to navigate backward, `1` to navigate forward.\n */\n protected _navigate(direction: number) {\n if (!this.filterable) {\n this._triggerNode.focus();\n super._navigate(direction);\n } else {\n // only navigate through remaining item\n const constructor = this.constructor as typeof BXMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemResults);\n const highlightedItem = this.querySelector(constructor.selectorItemHighlighted);\n const highlightedIndex = indexOf(items, highlightedItem!);\n\n let nextIndex = highlightedIndex + direction;\n if (nextIndex < 0) {\n nextIndex = items.length - 1;\n }\n if (nextIndex >= items.length) {\n nextIndex = 0;\n }\n forEach(items, (item, i) => {\n (item as BXMultiSelectItem).highlighted = i === nextIndex;\n });\n }\n }\n\n /**\n * Handles user-initiated clearing the `` for filtering.\n */\n protected _handleUserInitiatedClearInput() {\n const constructor = this.constructor as typeof BXMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemFiltered);\n this._filterInputNode.value = '';\n this.open = true;\n this._filterInputNode.focus();\n forEach(items, item => {\n (item as BXMultiSelectItem).removeAttribute('filtered');\n });\n }\n\n /**\n * The `aria-label` attribute for the icon to clear selection.\n */\n @property({ attribute: 'clear-selection-label' })\n clearSelectionLabel = '';\n\n /**\n * An assistive text for screen reader to announce, telling that an item is unselected.\n */\n @property({ attribute: 'unselected-item-assistive-text' })\n unselectedItemAssistiveText = 'Unselected an item.';\n\n /**\n * An assistive text for screen reader to announce, telling that all items are unselected.\n */\n @property({ attribute: 'unselected-all-assistive-text' })\n unselectedAllAssistiveText = 'Unselected all items.';\n\n shouldUpdate(changedProperties) {\n const { selectorItem } = this.constructor as typeof BXMultiSelect;\n if (changedProperties.has('size')) {\n forEach(this.querySelectorAll(selectorItem), elem => {\n (elem as BXMultiSelectItem).size = this.size;\n });\n }\n if (changedProperties.has('value')) {\n const { value } = this;\n const values = !value ? [] : value.split(',');\n // Updates selection beforehand because our rendering logic for `` looks for selected items via `qSA()`\n const items = this.querySelectorAll(selectorItem);\n forEach(items, elem => {\n (elem as BXMultiSelectItem).selected = values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n });\n this._selectedItemsCount = filter(items, elem => values.indexOf((elem as BXMultiSelectItem).value) >= 0).length;\n }\n return true;\n }\n\n /**\n * A selector to ignore the `click` events from.\n * Primary for the checkbox label where the `click` event will happen from the associated check box.\n */\n private static get selectorIgnoreClickInner() {\n return `.${prefix}--checkbox-label`;\n }\n\n /**\n * A selector that will return highlighted items.\n */\n static get selectorItemHighlighted() {\n return `${prefix}-multi-select-item[highlighted]`;\n }\n\n /**\n * A selector that will return multi select items.\n * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n */\n static get selectorItem() {\n return `${prefix}-multi-select-item`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemFiltered() {\n return `${prefix}-multi-select-item[filtered]`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemResults() {\n return `${prefix}-multi-select-item:not([filtered])`;\n }\n\n /**\n * A selector that will return selected items.\n */\n static get selectorItemSelected() {\n return `${prefix}-multi-select-item[selected]`;\n }\n\n /**\n * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n */\n static get eventBeforeToggle() {\n return `${prefix}-multi-select-beingtoggled`;\n }\n\n /**\n * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-multi-select-toggled`;\n }\n\n /**\n * The name of the custom event fired before a multi select item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n */\n static get eventBeforeSelect() {\n return `${prefix}-multi-select-beingselected`;\n }\n\n /**\n * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n */\n static get eventSelect() {\n return `${prefix}-multi-select-selected`;\n }\n\n static styles = styles;\n}\n\nexport default BXMultiSelect;\n"]}