@leavittsoftware/web 11.0.1 → 11.1.1

package/titanium/multi-select-base/multi-select-base.js

@@ -0,0 +1,991 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import '@material/web/menu/menu';
+import '@material/web/menu/menu-item';
+import '@material/web/progress/circular-progress';
+import '../chip/chip';
+import '../input-validator/filled-input-validator';
+import Fuse from 'fuse.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { Debouncer } from '../helpers/debouncer';
+import { ellipsis } from '../styles/ellipsis';
+import { promiseTracking } from '../helpers/promise-tracking';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event';
+/**
+ *  Generic multi select combobox. Selected items are displayed as chips inside the field
+ *  and the search input lives in the popover above the selectable items.
+ *
+ *  Use directly for locally searchable lists or extend it to supply remote search results.
+ *
+ *  @element titanium-multi-select-base
+ *
+ *  @fires selected-changed - Fired when the user adds or removes an item. Read the new value from `event.target.selected`.
+ *
+ *  @slot leading-icon - Icon displayed at the start of the field. Requires `has-leading-icon`.
+ *
+ *  @cssprop --titanium-multi-select-menu-max-height - Max height of the popover. Defaults to 460px.
+ *  @cssprop --titanium-multi-select-search-height - Height of the sticky search row. Defaults to 52px.
+ */
+let TitaniumMultiSelectBase = class TitaniumMultiSelectBase extends LitElement {
+    #isLoading_accessor_storage = false;
+    get isLoading() { return this.#isLoading_accessor_storage; }
+    set isLoading(value) { this.#isLoading_accessor_storage = value; }
+    #label_accessor_storage = 'Multi select';
+    /**
+     *  Sets floating label value.
+     */
+    get label() { return this.#label_accessor_storage; }
+    set label(value) { this.#label_accessor_storage = value; }
+    #placeholder_accessor_storage = 'Select items';
+    /**
+     *  Text displayed in the field when nothing is selected.
+     */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #searchPlaceholder_accessor_storage = 'Search';
+    /**
+     *  Placeholder text of the search input inside the popover.
+     */
+    get searchPlaceholder() { return this.#searchPlaceholder_accessor_storage; }
+    set searchPlaceholder(value) { this.#searchPlaceholder_accessor_storage = value; }
+    #selected_accessor_storage = [];
+    /**
+     *  The items selected by the user.
+     */
+    get selected() { return this.#selected_accessor_storage; }
+    set selected(value) { this.#selected_accessor_storage = value; }
+    #items_accessor_storage = [];
+    /**
+     *  Every selectable item. Searched locally with fuse.js and rendered when `sections` is empty.
+     */
+    get items() { return this.#items_accessor_storage; }
+    set items(value) { this.#items_accessor_storage = value; }
+    #sections_accessor_storage = [];
+    /**
+     *  Optional grouping of items rendered when no search term is entered. Search results are always
+     *  rendered as a flat list.
+     */
+    get sections() { return this.#sections_accessor_storage; }
+    set sections(value) { this.#sections_accessor_storage = value; }
+    #pathToSelectedText_accessor_storage = 'Name';
+    /**
+     *  Key on an item holding the text to display in chips and menu items.
+     */
+    get pathToSelectedText() { return this.#pathToSelectedText_accessor_storage; }
+    set pathToSelectedText(value) { this.#pathToSelectedText_accessor_storage = value; }
+    #pathToIcon_accessor_storage = '';
+    /**
+     *  Optional key on an item holding a Material Symbols icon name.
+     */
+    get pathToIcon() { return this.#pathToIcon_accessor_storage; }
+    set pathToIcon(value) { this.#pathToIcon_accessor_storage = value; }
+    #searchKeys_accessor_storage = [];
+    /**
+     *  Keys searched by the local fuse.js search. Defaults to `[pathToSelectedText]`.
+     */
+    get searchKeys() { return this.#searchKeys_accessor_storage; }
+    set searchKeys(value) { this.#searchKeys_accessor_storage = value; }
+    #maxSelected_accessor_storage = 0;
+    /**
+     *  Maximum number of items the user is allowed to select. Zero allows an unlimited number.
+     */
+    get maxSelected() { return this.#maxSelected_accessor_storage; }
+    set maxSelected(value) { this.#maxSelected_accessor_storage = value; }
+    #required_accessor_storage = false;
+    /**
+     *  Displays error state when nothing is selected.
+     */
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /**
+     *  Whether or not the input should be disabled.
+     */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #error_accessor_storage = false;
+    /**
+     *  Gets or sets whether or not the field is in a visually invalid state.
+     */
+    get error() { return this.#error_accessor_storage; }
+    set error(value) { this.#error_accessor_storage = value; }
+    #errorText_accessor_storage = 'Please select at least one item';
+    /**
+     *  Error message displayed below the field when it is in an invalid state.
+     */
+    get errorText() { return this.#errorText_accessor_storage; }
+    set errorText(value) { this.#errorText_accessor_storage = value; }
+    #supportingText_accessor_storage = '';
+    /**
+     *  Conveys additional information below the field, such as how it should be used.
+     */
+    get supportingText() { return this.#supportingText_accessor_storage; }
+    set supportingText(value) { this.#supportingText_accessor_storage = value; }
+    #noAsterisk_accessor_storage = false;
+    /**
+     *  Disables the asterisk on the floating label when the field is required.
+     */
+    get noAsterisk() { return this.#noAsterisk_accessor_storage; }
+    set noAsterisk(value) { this.#noAsterisk_accessor_storage = value; }
+    #hasLeadingIcon_accessor_storage = false;
+    /**
+     *  Renders the `leading-icon` slot at the start of the field.
+     */
+    get hasLeadingIcon() { return this.#hasLeadingIcon_accessor_storage; }
+    set hasLeadingIcon(value) { this.#hasLeadingIcon_accessor_storage = value; }
+    #noItemsText_accessor_storage = 'No items';
+    /**
+     *  Text displayed in the popover when there is nothing to select.
+     */
+    get noItemsText() { return this.#noItemsText_accessor_storage; }
+    set noItemsText(value) { this.#noItemsText_accessor_storage = value; }
+    #noResultsText_accessor_storage = 'No matches found';
+    /**
+     *  Text displayed in the popover when a search returns no results.
+     */
+    get noResultsText() { return this.#noResultsText_accessor_storage; }
+    set noResultsText(value) { this.#noResultsText_accessor_storage = value; }
+    #disableClearAll_accessor_storage = false;
+    /**
+     *  Hides the clear all button that appears in the field once something is selected.
+     */
+    get disableClearAll() { return this.#disableClearAll_accessor_storage; }
+    set disableClearAll(value) { this.#disableClearAll_accessor_storage = value; }
+    #positioning_accessor_storage = 'popover';
+    /**
+     *  Positioning strategy of the popover. `popover` falls back to `fixed` in browsers without popover support.
+     */
+    get positioning() { return this.#positioning_accessor_storage; }
+    set positioning(value) { this.#positioning_accessor_storage = value; }
+    #matchInputWidth_accessor_storage = false;
+    /**
+     *  When enabled, uses a ResizeObserver to keep the popover width in sync with the field width.
+     */
+    get matchInputWidth() { return this.#matchInputWidth_accessor_storage; }
+    set matchInputWidth(value) { this.#matchInputWidth_accessor_storage = value; }
+    #menuOpen_accessor_storage = false;
+    get menuOpen() { return this.#menuOpen_accessor_storage; }
+    set menuOpen(value) { this.#menuOpen_accessor_storage = value; }
+    #searchTerm_accessor_storage = '';
+    get searchTerm() { return this.#searchTerm_accessor_storage; }
+    set searchTerm(value) { this.#searchTerm_accessor_storage = value; }
+    #suggestions_accessor_storage = [];
+    /**
+     *  Results of the last search. Rendered instead of `items` / `sections` while a search term is entered.
+     */
+    get suggestions() { return this.#suggestions_accessor_storage; }
+    set suggestions(value) { this.#suggestions_accessor_storage = value; }
+    #count_accessor_storage = 0;
+    get count() { return this.#count_accessor_storage; }
+    set count(value) { this.#count_accessor_storage = value; }
+    #menuWidth_accessor_storage;
+    get menuWidth() { return this.#menuWidth_accessor_storage; }
+    set menuWidth(value) { this.#menuWidth_accessor_storage = value; }
+    #menu_accessor_storage;
+    get menu() { return this.#menu_accessor_storage; }
+    set menu(value) { this.#menu_accessor_storage = value; }
+    #field_accessor_storage;
+    get field() { return this.#field_accessor_storage; }
+    set field(value) { this.#field_accessor_storage = value; }
+    #searchInput_accessor_storage;
+    get searchInput() { return this.#searchInput_accessor_storage; }
+    set searchInput(value) { this.#searchInput_accessor_storage = value; }
+    #resizeObserver = null;
+    #doSearchDebouncer = new Debouncer((searchTerm) => this.#doSearch(searchTerm));
+    /**
+     *  Whether or not the popover is open.
+     */
+    get isOpen() {
+        return this.menuOpen;
+    }
+    /**
+     *  Whether or not `maxSelected` has been reached.
+     */
+    get isAtMaxSelected() {
+        return this.maxSelected > 0 && this.selected.length >= this.maxSelected;
+    }
+    /**
+     *  Items currently rendered in the popover, flattened across sections.
+     */
+    get visibleItems() {
+        if (this.searchTerm) {
+            return this.suggestions;
+        }
+        return this.sections.length ? this.sections.flatMap((section) => section.items) : this.items;
+    }
+    /**
+     *  Items searched by the local search. Falls back to the items of every section when `items` is empty.
+     */
+    get searchPool() {
+        if (this.items.length) {
+            return this.items;
+        }
+        const seen = new Set();
+        return this.sections
+            .flatMap((section) => section.items)
+            .filter((item) => {
+            const key = this.getItemKey(item);
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.matchInputWidth) {
+            this.#observeInputWidth();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#stopObservingInputWidth();
+    }
+    update(changed) {
+        // Firefox does not support popover. Fall-back to using fixed.
+        if (changed.has('positioning') && this.positioning === 'popover' && !this.showPopover) {
+            this.positioning = 'fixed';
+        }
+        if (changed.has('matchInputWidth')) {
+            if (this.matchInputWidth) {
+                this.#observeInputWidth();
+            }
+            else {
+                this.#stopObservingInputWidth();
+            }
+        }
+        super.update(changed);
+    }
+    updated(changed) {
+        // md-menu measures its surface once when it opens. Filtering the list or adding a chip
+        // (which grows the anchor) changes those measurements, so ask it to measure again.
+        const affectsLayout = ['suggestions', 'searchTerm', 'items', 'sections', 'selected', 'isLoading'];
+        const changedProperties = changed;
+        if (this.menuOpen && affectsLayout.some((property) => changedProperties.has(property))) {
+            this.menu?.reposition();
+        }
+    }
+    #observeInputWidth() {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                this.menuWidth = entry.contentRect.width;
+            }
+        });
+        this.#resizeObserver.observe(this);
+    }
+    #stopObservingInputWidth() {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+        this.menuWidth = undefined;
+    }
+    /**
+     *  Opens the popover and focuses the search input.
+     */
+    open() {
+        if (this.disabled) {
+            return;
+        }
+        this.menu?.show();
+    }
+    /**
+     *  Closes the popover.
+     */
+    close() {
+        this.menu?.close();
+    }
+    /**
+     *  Opens the popover when closed, closes it when open.
+     */
+    toggleMenu() {
+        if (this.menuOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     *  Sets focus on the field.
+     */
+    async focus() {
+        this.field?.focus();
+    }
+    /**
+     *  Returns true when the given item is selected.
+     */
+    isSelected(item) {
+        const key = this.getItemKey(item);
+        return this.selected.some((selected) => this.getItemKey(selected) === key);
+    }
+    /**
+     *  Adds an item to the selection. Does nothing when it is already selected or `maxSelected` is reached.
+     */
+    selectItem(item) {
+        if (this.isSelected(item) || this.isAtMaxSelected) {
+            return;
+        }
+        this.selected = [...this.selected, item];
+        this.#notifySelectedChanged();
+    }
+    /**
+     *  Removes an item from the selection.
+     */
+    deselectItem(item) {
+        const key = this.getItemKey(item);
+        if (!this.isSelected(item)) {
+            return;
+        }
+        this.selected = this.selected.filter((selected) => this.getItemKey(selected) !== key);
+        this.#notifySelectedChanged();
+    }
+    /**
+     *  Adds the item when it is not selected, removes it when it is.
+     */
+    toggleItem(item) {
+        if (this.isSelected(item)) {
+            this.deselectItem(item);
+        }
+        else {
+            this.selectItem(item);
+        }
+    }
+    /**
+     *  Removes every selected item.
+     */
+    clear() {
+        if (!this.selected.length) {
+            return;
+        }
+        this.selected = [];
+        this.#notifySelectedChanged();
+    }
+    /**
+     *  Clears the selection, the search term and the validity state.
+     */
+    reset() {
+        this.selected = [];
+        this.softReset();
+        this.error = false;
+        this.field?.reset();
+    }
+    /**
+     *  Clears the search term and its results.
+     */
+    softReset() {
+        this.searchTerm = '';
+        this.suggestions = [];
+        this.count = 0;
+    }
+    /**
+     *  Returns true if the field passes validity checks.
+     */
+    checkValidity() {
+        return this.field?.checkValidity() ?? true;
+    }
+    /**
+     *  Runs checkValidity() method, and if it returns false, then it reports to the user that the field is invalid.
+     */
+    reportValidity() {
+        return this.field?.reportValidity() ?? true;
+    }
+    #notifySelectedChanged() {
+        // Only re-run validation once the field is already complaining so a required
+        // field does not error before the user has interacted with it.
+        if (this.field?.error) {
+            this.reportValidity();
+        }
+        this.dispatchEvent(new Event('selected-changed', { composed: true }));
+    }
+    /**
+     *  Called with the current search term after every keystroke. Override to supply remote results
+     *  and call `showSuggestions()` when they arrive.
+     */
+    onInputChanged(searchTerm) {
+        this.#doSearchDebouncer.debounce(searchTerm);
+    }
+    /**
+     *  Renders the given search results in the popover.
+     */
+    async showSuggestions(suggestions, totalSuggestionCount) {
+        this.suggestions = suggestions;
+        this.count = totalSuggestionCount;
+        await this.updateComplete;
+        // Results replace the list in place, so bring the top of it back into view.
+        this.shadowRoot?.querySelector('md-menu-item')?.scrollIntoView({ block: 'nearest' });
+    }
+    async #doSearch(searchTerm) {
+        // The base may have been cleared while the search was debouncing.
+        if (!this.searchTerm || !searchTerm) {
+            return;
+        }
+        const keys = this.searchKeys.length ? this.searchKeys : [this.pathToSelectedText];
+        const fuse = new Fuse(this.searchPool, { includeScore: true, keys, shouldSort: true, ignoreLocation: true, threshold: 0.3 });
+        const results = fuse.search(searchTerm).map((result) => result.item);
+        this.showSuggestions(results, results.length);
+    }
+    async #onSearchInput(searchTerm) {
+        this.searchTerm = searchTerm;
+        this.suggestions = [];
+        this.count = 0;
+        await this.updateComplete;
+        this.onInputChanged(searchTerm);
+    }
+    /**
+     *  Unique key of an item. Used for list diffing and selection comparisons.
+     */
+    getItemKey(item) {
+        return String(item?.Id ?? this.getItemText(item));
+    }
+    /**
+     *  Text of an item shown in its chip and menu item.
+     */
+    getItemText(item) {
+        return String(item?.[this.pathToSelectedText] ?? '');
+    }
+    /**
+     *  Material Symbols icon name of an item, or an empty string when it has none.
+     */
+    getItemIcon(item) {
+        return this.pathToIcon ? String(item?.[this.pathToIcon] ?? '').trim() : '';
+    }
+    #menuItemFromEvent(event) {
+        for (const target of event.composedPath()) {
+            if (target instanceof HTMLElement && target.hasAttribute('md-menu-item')) {
+                return target.hasAttribute('disabled') ? null : target;
+            }
+        }
+        return null;
+    }
+    #onFieldKeydown(event) {
+        // Chips and the clear button live inside the field. Let them handle their own keys.
+        if (this.disabled || event.target !== this.field) {
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open();
+            return;
+        }
+        if (event.key === 'Backspace') {
+            const last = this.selected.at(-1);
+            if (last) {
+                event.preventDefault();
+                this.deselectItem(last);
+            }
+        }
+    }
+    #onSearchKeydown(event) {
+        // md-menu listens for keydown on itself to drive list navigation. Stop text
+        // editing keys from moving focus out of the search input.
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.menu?.activateNextItem();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.menu?.activatePreviousItem();
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const first = this.visibleItems.at(0);
+                if (first) {
+                    this.toggleItem(first);
+                }
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this.focus();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            case 'Backspace': {
+                if (this.searchTerm) {
+                    break;
+                }
+                const last = this.selected.at(-1);
+                if (last) {
+                    this.deselectItem(last);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    #onMenuClick(event) {
+        const menuItem = this.#menuItemFromEvent(event);
+        if (!menuItem?.item) {
+            return;
+        }
+        this.toggleItem(menuItem.item);
+        this.searchInput?.focus();
+    }
+    #onMenuKeydown(event) {
+        const menuItem = this.#menuItemFromEvent(event);
+        if (!menuItem) {
+            return;
+        }
+        // Menu items are rendered with `keep-open` so md-menu-item swallows the selection
+        // keys instead of closing the menu. Toggle from here so subclasses only render markup.
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (menuItem.item) {
+                this.toggleItem(menuItem.item);
+            }
+            return;
+        }
+        if (event.key === 'ArrowUp' && this.menu?.items[0] === menuItem) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.searchInput?.focus();
+        }
+    }
+    static { this.styles = [
+        ellipsis,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+
+        --md-filled-field-container-shape: 16px;
+
+        --md-filled-field-active-indicator-height: 0;
+        --md-filled-field-error-active-indicator-height: 0;
+        --md-filled-field-hover-active-indicator-height: 0;
+        --md-filled-field-focus-active-indicator-height: 0;
+        --md-filled-field-disabled-active-indicator-height: 0;
+
+        --md-menu-container-shape: 16px;
+        --md-menu-top-space: 0;
+      }
+
+      titanium-filled-input-validator {
+        display: block;
+        width: 100%;
+        cursor: pointer;
+        outline: none;
+        --md-filled-field-with-label-bottom-space: 12px;
+      }
+
+      :host([disabled]) titanium-filled-input-validator {
+        cursor: default;
+      }
+
+      chips-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+        margin-top: 6px;
+        min-height: 32px;
+      }
+
+      span[placeholder] {
+        font-size: 14px;
+        line-height: 32px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      div[trailing] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      md-circular-progress {
+        --md-circular-progress-size: 24px;
+      }
+
+      md-icon-button {
+        --md-icon-button-icon-size: 20px;
+        --md-icon-button-state-layer-height: 32px;
+        --md-icon-button-state-layer-width: 32px;
+      }
+
+      md-menu {
+        min-width: 280px;
+        max-height: var(--titanium-multi-select-menu-max-height, 460px);
+      }
+
+      md-menu-item,
+      div[section-header] {
+        /* Keyboard navigation scrolls items into view — leave room for the sticky search row. */
+        scroll-margin-top: var(--titanium-multi-select-search-height, 52px);
+      }
+
+      md-menu-item {
+        min-width: 280px;
+      }
+
+      search-container {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        box-sizing: border-box;
+        height: var(--titanium-multi-select-search-height, 52px);
+        padding: 0 16px;
+
+        position: sticky;
+        top: 0;
+        z-index: 2;
+
+        background-color: var(--md-menu-container-color, var(--md-sys-color-surface-container));
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      search-container md-icon {
+        --md-icon-size: 20px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[search] {
+        flex: 1 1 auto;
+        min-width: 0;
+        appearance: none;
+        border: none;
+        outline: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+
+        /* md-menu sets user-select: none on its surface. */
+        user-select: text;
+
+        font-family: var(--titanium-styles-p-font-family, Roboto, Noto, sans-serif);
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      input[search]::placeholder {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[search]::-webkit-search-cancel-button {
+        display: none;
+      }
+
+      div[section-header] {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 16px;
+
+        position: sticky;
+        top: var(--titanium-multi-select-search-height, 52px);
+        z-index: 1;
+
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      div[section-header] md-icon {
+        --md-icon-size: 18px;
+      }
+
+      div[section-header] [headline] {
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 18px;
+      }
+
+      div[section-header] [supporting-text] {
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      div[summary],
+      div[empty] {
+        font-family: var(--titanium-styles-p-font-family, Roboto, Noto, sans-serif);
+        font-size: 13px;
+        line-height: 18px;
+        padding: 12px 16px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `,
+    ]; }
+    /**
+     *  Renders the chip of a selected item. Override to customize.
+     */
+    renderChip(item) {
+        const icon = this.getItemIcon(item);
+        return html `<titanium-chip input-chip ?disabled=${this.disabled} label=${this.getItemText(item)} @remove=${() => this.deselectItem(item)}>
+      ${icon ? html `<md-icon slot="icon">${icon}</md-icon>` : nothing}
+    </titanium-chip>`;
+    }
+    /**
+     *  Renders a selectable item. Override to customize. Bind the item to the `item` property of the
+     *  `md-menu-item` and keep `keep-open` so the popover stays open on selection.
+     */
+    renderSuggestion(item) {
+        const isSelected = this.isSelected(item);
+        const icon = this.getItemIcon(item);
+        return html `<md-menu-item keep-open .item=${item} ?selected=${isSelected} ?disabled=${!isSelected && this.isAtMaxSelected}>
+      ${icon ? html `<md-icon slot="start">${icon}</md-icon>` : nothing}
+      <span slot="headline" ellipsis>${this.getItemText(item)}</span>
+      ${isSelected ? html `<md-icon slot="end">check</md-icon>` : nothing}
+    </md-menu-item>`;
+    }
+    /**
+     *  Renders the header of a section. Override to customize.
+     */
+    renderSectionHeader(section) {
+        return html `<div section-header>
+      ${section.icon ? html `<md-icon>${section.icon}</md-icon>` : nothing}
+      <div>
+        <div headline>${section.headline}</div>
+        ${section.supportingText ? html `<div supporting-text>${section.supportingText}</div>` : nothing}
+      </div>
+    </div>`;
+    }
+    /**
+     *  Renders content at the bottom of the popover, below the selectable items.
+     */
+    renderTrailingMenuSlot() {
+        return nothing;
+    }
+    #renderSuggestions() {
+        if (this.searchTerm) {
+            return html `${this.isLoading || this.suggestions.length
+                ? html `<div summary>Showing ${this.suggestions.length} of ${this.count} result${this.count === 1 ? '' : 's'} for '${this.searchTerm}'</div>`
+                : html `<div empty>${this.noResultsText}</div>`}
+      ${repeat(this.suggestions, (item) => this.getItemKey(item), (item) => this.renderSuggestion(item))}`;
+        }
+        if (this.sections.length) {
+            return repeat(this.sections, (section) => section.key, (section) => html `${this.renderSectionHeader(section)}
+          ${repeat(section.items, (item) => this.getItemKey(item), (item) => this.renderSuggestion(item))}`);
+        }
+        if (!this.items.length) {
+            return html `<div empty>${this.noItemsText}</div>`;
+        }
+        return repeat(this.items, (item) => this.getItemKey(item), (item) => this.renderSuggestion(item));
+    }
+    render() {
+        return html `
+      <titanium-filled-input-validator
+        id="field"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls="menu"
+        aria-expanded=${this.menuOpen ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        populated
+        ?has-start=${this.hasLeadingIcon}
+        has-end
+        ?disabled=${this.disabled}
+        ?error=${this.error}
+        ?required=${this.required}
+        ?no-asterisk=${this.noAsterisk}
+        .label=${this.label}
+        .errorText=${this.errorText}
+        .supportingText=${this.supportingText}
+        .evaluator=${() => !this.required || this.selected.length > 0}
+        @click=${() => this.toggleMenu()}
+        @keydown=${this.#onFieldKeydown}
+      >
+        ${this.hasLeadingIcon ? html `<slot name="leading-icon" slot="start"></slot>` : nothing}
+        <chips-container>
+          ${this.selected.length
+            ? repeat(this.selected, (item) => this.getItemKey(item), (item) => this.renderChip(item))
+            : html `<span placeholder>${this.placeholder}</span>`}
+        </chips-container>
+        <div slot="end" trailing>
+          ${this.isLoading ? html `<md-circular-progress indeterminate></md-circular-progress>` : nothing}
+          ${this.selected.length && !this.disableClearAll && !this.disabled
+            ? html `<md-icon-button
+                title="Clear selection"
+                @click=${(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clear();
+                this.focus();
+            }}
+              >
+                <md-icon>close</md-icon>
+              </md-icon-button>`
+            : nothing}
+          <md-icon>${this.menuOpen ? 'arrow_drop_up' : 'arrow_drop_down'}</md-icon>
+        </div>
+      </titanium-filled-input-validator>
+
+      <md-menu
+        part="menu"
+        id="menu"
+        anchor="field"
+        anchor-corner="end-start"
+        default-focus="none"
+        no-navigation-wrap
+        stay-open-on-focusout
+        .positioning=${this.positioning}
+        style=${this.matchInputWidth && this.menuWidth ? `min-width: ${this.menuWidth}px; max-width: ${this.menuWidth}px` : ''}
+        @click=${this.#onMenuClick}
+        @keydown=${this.#onMenuKeydown}
+        @opening=${async (e) => {
+            this.menuOpen = true;
+            redispatchEvent(this, e);
+            await this.updateComplete;
+            // md-menu drives typeahead from its own keydown listener which would steal
+            // keystrokes meant for the search input.
+            this.searchInput?.dispatchEvent(new Event('deactivate-typeahead', { bubbles: true, composed: true }));
+            // The menu surface is still growing into place; scrolling the sticky search
+            // row into view here would leave the list scrolled under it.
+            this.searchInput?.focus({ preventScroll: true });
+        }}
+        @opened=${(e) => redispatchEvent(this, e)}
+        @closing=${(e) => {
+            this.menuOpen = false;
+            this.softReset();
+            redispatchEvent(this, e);
+        }}
+        @closed=${(e) => {
+            this.reportValidity();
+            redispatchEvent(this, e);
+        }}
+      >
+        <search-container>
+          <md-icon>search</md-icon>
+          <input
+            search
+            id="search"
+            type="search"
+            autocomplete="off"
+            spellcheck="false"
+            aria-label=${this.searchPlaceholder}
+            placeholder=${this.searchPlaceholder}
+            .value=${this.searchTerm}
+            @input=${(e) => this.#onSearchInput(e.target.value)}
+            @keydown=${this.#onSearchKeydown}
+          />
+          ${this.isLoading ? html `<md-circular-progress indeterminate></md-circular-progress>` : nothing}
+          ${this.searchTerm && !this.isLoading
+            ? html `<md-icon-button
+                title="Clear search"
+                @click=${() => {
+                this.#onSearchInput('');
+                this.searchInput?.focus();
+            }}
+              >
+                <md-icon>close</md-icon>
+              </md-icon-button>`
+            : nothing}
+        </search-container>
+        ${this.#renderSuggestions()} ${this.renderTrailingMenuSlot()}
+      </md-menu>
+    `;
+    }
+};
+__decorate([
+    promiseTracking('trackLoadingPromise'),
+    state()
+], TitaniumMultiSelectBase.prototype, "isLoading", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "placeholder", null);
+__decorate([
+    property({ type: String, attribute: 'search-placeholder' })
+], TitaniumMultiSelectBase.prototype, "searchPlaceholder", null);
+__decorate([
+    property({ type: Array })
+], TitaniumMultiSelectBase.prototype, "selected", null);
+__decorate([
+    property({ type: Array })
+], TitaniumMultiSelectBase.prototype, "items", null);
+__decorate([
+    property({ type: Array })
+], TitaniumMultiSelectBase.prototype, "sections", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "pathToSelectedText", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "pathToIcon", null);
+__decorate([
+    property({ type: Array })
+], TitaniumMultiSelectBase.prototype, "searchKeys", null);
+__decorate([
+    property({ type: Number, attribute: 'max-selected' })
+], TitaniumMultiSelectBase.prototype, "maxSelected", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumMultiSelectBase.prototype, "required", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumMultiSelectBase.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumMultiSelectBase.prototype, "error", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "errorText", null);
+__decorate([
+    property({ type: String })
+], TitaniumMultiSelectBase.prototype, "supportingText", null);
+__decorate([
+    property({ type: Boolean, attribute: 'no-asterisk' })
+], TitaniumMultiSelectBase.prototype, "noAsterisk", null);
+__decorate([
+    property({ type: Boolean, attribute: 'has-leading-icon' })
+], TitaniumMultiSelectBase.prototype, "hasLeadingIcon", null);
+__decorate([
+    property({ type: String, attribute: 'no-items-text' })
+], TitaniumMultiSelectBase.prototype, "noItemsText", null);
+__decorate([
+    property({ type: String, attribute: 'no-results-text' })
+], TitaniumMultiSelectBase.prototype, "noResultsText", null);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-clear-all' })
+], TitaniumMultiSelectBase.prototype, "disableClearAll", null);
+__decorate([
+    property()
+], TitaniumMultiSelectBase.prototype, "positioning", null);
+__decorate([
+    property({ type: Boolean, attribute: 'match-input-width' })
+], TitaniumMultiSelectBase.prototype, "matchInputWidth", null);
+__decorate([
+    property({ type: Boolean, attribute: 'menu-open', reflect: true })
+], TitaniumMultiSelectBase.prototype, "menuOpen", null);
+__decorate([
+    state()
+], TitaniumMultiSelectBase.prototype, "searchTerm", null);
+__decorate([
+    state()
+], TitaniumMultiSelectBase.prototype, "suggestions", null);
+__decorate([
+    state()
+], TitaniumMultiSelectBase.prototype, "count", null);
+__decorate([
+    state()
+], TitaniumMultiSelectBase.prototype, "menuWidth", null);
+__decorate([
+    query('md-menu')
+], TitaniumMultiSelectBase.prototype, "menu", null);
+__decorate([
+    query('titanium-filled-input-validator')
+], TitaniumMultiSelectBase.prototype, "field", null);
+__decorate([
+    query('input[search]')
+], TitaniumMultiSelectBase.prototype, "searchInput", null);
+TitaniumMultiSelectBase = __decorate([
+    customElement('titanium-multi-select-base')
+], TitaniumMultiSelectBase);
+export { TitaniumMultiSelectBase };
+//# sourceMappingURL=multi-select-base.js.map