@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/dist-custom-elements/duet-combobox.js

@@ -1,706 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-f2c2f3d2.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { d as debounce } from './p-9e371678.js';
-import { c as isEnterKey, b as isEscapeKey, d as isTabKey, f as isArrowUpKey, g as isArrowDownKey } from './p-8db11326.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { b as getElementsFromDefaultSlot } from './p-ad615991.js';
-import { r as regexEscape, p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { h } from './p-993aea39.js';
-import { d as defineCustomElement$e } from './p-42c1fc90.js';
-import { d as defineCustomElement$d } from './p-ef48f2c7.js';
-import { d as defineCustomElement$c } from './p-44ae5535.js';
-import { d as defineCustomElement$b } from './p-7b6a89e9.js';
-import { d as defineCustomElement$a } from './p-3695c0cf.js';
-import { d as defineCustomElement$9 } from './p-a95a6fb7.js';
-import { d as defineCustomElement$8 } from './p-d5644004.js';
-import { d as defineCustomElement$7 } from './p-a1b0454c.js';
-import { d as defineCustomElement$6 } from './p-f8ba399b.js';
-import { d as defineCustomElement$5 } from './p-821de204.js';
-import { d as defineCustomElement$4 } from './p-91688dd8.js';
-import { d as defineCustomElement$3 } from './p-0cd28b7b.js';
-import { d as defineCustomElement$2 } from './p-4f6ac36d.js';
-
-const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
-    e.preventDefault();
-}, keyHandler = e => {
-    e.preventDefault();
-}, search, isAndroidDevice, id, }) => {
-    const searchTerms = search
-        .split(" ")
-        .filter(term => !!term.trim())
-        .map(term => regexEscape(term));
-    const regEx = search !== "" ? new RegExp(`(${searchTerms.join("|")})`, "i") : undefined;
-    const highlightStyle = "text-decoration: underline";
-    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": activeDescendant ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant },
-        regEx ? (h("span", { class: "option-container", "aria-hidden": "true" },
-            h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name),
-        item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
-};
-
-const duetComboboxCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(8, 42, 77)}:host a{color:rgb(8, 42, 77);transition:none}:host.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host.duet-theme-turva a{color:rgb(23, 28, 58)}.combobox-menu-container{width:var(--popup-width);max-height:200px}";
-const DuetComboboxStyle0 = duetComboboxCss;
-
-const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 3);
-        var _a, _b;
-        this.listBoxId = createID("duet-combobox-list-element");
-        this.inputId = createID("duet-combobox-input-id");
-        this.activeDescendantId = createID("duet-combobox-active-descendant");
-        this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
-        this.isInsideModal = false;
-        this.resizeObserver = new ResizeObserver(debounce(entries => {
-            var _a, _b, _c;
-            // otherwise, something is wrong, expecting 1 element only
-            if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                const popupMenuPadding = parseInt((_c = getComputedStyle(this.listContainer.shadowRoot.querySelector(".duet-popup-menu-list"))) === null || _c === void 0 ? void 0 : _c.padding);
-                this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
-            }
-        }, 100));
-        this.onInputChange = async (e) => {
-            const newValue = e.detail.value;
-            this.inputValue = newValue;
-        };
-        this.onInputClick = () => {
-            var _a, _b;
-            if (this.openListOnClick) {
-                this.listOpen = !this.listOpen;
-            }
-            else {
-                this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
-            }
-            if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.listOpen = false;
-            }
-        };
-        this.onInputTyping = async (e) => {
-            var _a;
-            const newValue = e.detail.value;
-            if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
-                this.selectedItems.clear();
-            }
-            if (!this.force && !this.multiple && newValue === "") {
-                this.value = undefined;
-            }
-            this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        };
-        this.onKeyDown = (e) => {
-            var _a, _b, _c;
-            //if selection is made, close the list and update internal and external values
-            const listItems = this.returnFilteredOrNonFiltered();
-            const listItemsSuggestions = listItems.filter(i => !this.selectedItems.has(i.id));
-            // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-            // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-            this.input.accessibleActiveDescendant = undefined;
-            if (isEnterKey(e)) {
-                e.preventDefault();
-                if (this.listOpen &&
-                    this.activeItem !== undefined &&
-                    listItems[this.activeItem] &&
-                    !this.selectedItems.has(listItems[this.activeItem].id)) {
-                    if (this.multiple) {
-                        this.addSelectedItem(listItems[this.activeItem].id, true);
-                    }
-                    else {
-                        this.updateSelectedItem(listItems[this.activeItem].id, true);
-                    }
-                }
-                else if (!this.multiple &&
-                    this.listOpen &&
-                    listItemsSuggestions.length === 1 &&
-                    listItemsSuggestions[0].name.toLowerCase() === this.input.value.toLowerCase()) {
-                    this.updateSelectedItem(listItemsSuggestions[0].id, true);
-                }
-                this.activeItem = undefined;
-                this.listOpen = false;
-                return;
-            }
-            if (isEscapeKey(e) || isTabKey(e)) {
-                if (this.listOpen) {
-                    e.preventDefault();
-                }
-                this.updateInputText(true);
-                this.activeItem = undefined;
-                this.listOpen = false;
-                return;
-            }
-            //handle arrow up/down navigation
-            let nextActiveItem = this.activeItem;
-            if (isArrowUpKey(e)) {
-                e.preventDefault();
-                nextActiveItem = this.activeItem - 1;
-            }
-            else if (isArrowDownKey(e)) {
-                if (((_c = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < this.minCharacters) {
-                    return;
-                }
-                e.preventDefault();
-                nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-                this.listOpen = true;
-            }
-            if (isArrowDownKey(e) || isArrowUpKey(e)) {
-                if (nextActiveItem < 0 || !nextActiveItem) {
-                    nextActiveItem = 0;
-                }
-                if (nextActiveItem >= listItems.length) {
-                    nextActiveItem = listItems.length - 1;
-                }
-                // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-                // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-                this.input.accessibleActiveDescendant = this.activeDescendantId;
-                this.activeItem = nextActiveItem;
-                this.scrollToActive();
-            }
-            return;
-        };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
-    }
-    popupMenuOpenHandler() {
-        if (this.listOpen) {
-            this.listContainer.show();
-        }
-        else {
-            this.listContainer.hide();
-        }
-    }
-    activeItemHandler(state) {
-        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? this.activeDescendantId : "";
-    }
-    inputValueHandler() {
-        setTimeout(async () => {
-            const label = await this.getSelectedItemLabel();
-            if (this.input.value == "" && label) {
-                this.input.value = "";
-                this.value = undefined;
-            }
-        }, 200);
-    }
-    handleDocumentClick(e) {
-        //we want to remove all user text if they have NOT selected from the dropdown
-        const path = e.composedPath();
-        const isClickOutside = path.every(el => el !== this.element);
-        if (isClickOutside) {
-            this.updateInputText(true);
-            this.listOpen = false;
-        }
-    }
-    /**
-     * Exposes a formatter function to format the item value displayed after a user selects an item
-     * @param item: DuetComboboxItem
-     */
-    async formatItem(item) {
-        return this.formatter(item);
-    }
-    processItems() {
-        const ids = [];
-        this.processedItems = parsePossibleJSON(this.items);
-        if (!Array.isArray(this.processedItems)) {
-            console.error("DuetCombobox: Items should be an array");
-            return;
-        }
-        if (this.processedItems.length !== new Set([...this.processedItems]).size) {
-            console.warn("DuetCombobox: Duplicate item values found in the list");
-        }
-        this.processedItems = this.processedItems.map((item, index) => {
-            if (typeof item === "string") {
-                item = { name: item, value: item };
-            }
-            if (item.id !== undefined) {
-                item.id = String(item.id);
-            }
-            else {
-                item.id = `${JSON.stringify(item.value)}-${item.name}`;
-            }
-            if (ids.includes(item.id)) {
-                console.warn("DuetCombobox: Duplicate item id found in the list, postfixed with index");
-                item.id = `${item.id}-${index}`;
-            }
-            ids.push(item.id);
-            return item;
-        });
-        // remove any item selections that are no longer in the items list
-        const selectionsMissing = Array.from(this.selectedItems).filter(id => !this.processedItems.find(item => item.id === id));
-        if (selectionsMissing.length) {
-            if (this.multiple) {
-                selectionsMissing.forEach(id => this.removeSelectedItem(id));
-            }
-            else {
-                this.updateSelectedItem(selectionsMissing[0], true);
-            }
-        }
-    }
-    processValue() {
-        // empty string may be valid item value
-        if (this.value !== "" && !this.value) {
-            this.selectedItems.clear();
-            return;
-        }
-        const values = Array.isArray(this.value) ? this.value : [this.value];
-        const ids = this.processedItems.filter(item => values.includes(item.value)).map(item => item.id);
-        // if value corresponds to the selectedItems, do nothing
-        if (ids.length === this.selectedItems.size && ids.every(id => this.selectedItems.has(id))) {
-            return;
-        }
-        if (this.multiple) {
-            this.selectedItems.clear();
-            this.input.clearChips();
-            ids.forEach(id => this.addSelectedItem(id));
-        }
-        else {
-            const selectedItem = this.processedItems.find(item => item.value === this.value);
-            this.updateSelectedItem(selectedItem.id);
-        }
-    }
-    processListOpenChange() {
-        if (this.openListOnClick) {
-            this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
-        }
-        this.input.accessibleExpanded = this.listOpen ? "true" : "false";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        if (this.element.closest("duet-modal")) {
-            this.isInsideModal = true;
-        }
-        inheritGlobalTheme(this);
-    }
-    connectedCallback() {
-        if (this.items) {
-            this.processItems();
-        }
-        const slottedElements = getElementsFromDefaultSlot(this.element);
-        if (slottedElements.length) {
-            this.input = slottedElements[0];
-        }
-        else {
-            this.input = document.createElement("duet-input");
-            this.input.label = this.label;
-            this.input.caption = this.caption;
-            this.input.expand = true;
-            this.element.prepend(this.input);
-        }
-        this.input.chips = this.multiple;
-        this.input.addEventListener("duetChange", this.onInputChange);
-        this.input.addEventListener("duetInput", this.onInputTyping);
-        this.input.addEventListener("click", this.onInputClick);
-        //add correct aria attributes to the input element
-        this.input.role = "combobox";
-        this.input.accessibleExpanded = this.listOpen ? "true" : "false";
-        this.input.accessibleAutocomplete = "list";
-        this.input.accessibleControls = this.listBoxId;
-        this.input.id = this.inputId;
-        this.element.addEventListener("keydown", this.onKeyDown);
-        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
-        this.processListOpenChange();
-    }
-    disconnectedCallback() {
-        this.input.removeEventListener("duetChange", this.onInputChange);
-        this.input.removeEventListener("click", this.onInputClick);
-        this.element.removeEventListener("keydown", this.onKeyDown);
-        this.resizeObserver.disconnect();
-        disconnectLanguageChangeObserver(this);
-    }
-    componentDidLoad() {
-        // observe resize events to dynamically adjust size of dropdown area
-        this.resizeObserver.observe(this.input);
-        this.processValue();
-    }
-    /**
-     * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
-     */
-    shouldListBeFiltered() {
-        var _a;
-        if (!this.multiple &&
-            this.selectedItems.size &&
-            this.input.value === this.inputValue &&
-            ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) < this.minCharacters) {
-            const item = this.processedItems.find(item => this.selectedItems.has(item.id));
-            return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
-        }
-        return true;
-    }
-    /**
-     * Helper function that return correct collection depending on filter status returend by shouldListBeFiltered
-     */
-    returnFilteredOrNonFiltered() {
-        return this.processedItems
-            ? this.shouldListBeFiltered()
-                ? this.getFilteredItems()
-                : this.sortFilteredItems(this.processedItems)
-            : [];
-    }
-    emitChangeEvent(id) {
-        const item = this.processedItems.find(item => item.id === id);
-        this.duetChange.emit({
-            item,
-            value: this.value,
-            component: "duet-combobox",
-        });
-    }
-    /**
-     * Updates the value after selected items have changed for multiple selection.
-     */
-    updateMultipleValue() {
-        this.value = this.processedItems.filter(item => this.selectedItems.has(item.id)).map(item => item.value);
-        this.input.value = "";
-        this.updateChips();
-        this.input.setFocus();
-    }
-    /**
-     * Add item with id to the selectedItems set. Used only when multiple is true.
-     */
-    addSelectedItem(id, emitEvent) {
-        if (this.selectedItems.has(id)) {
-            return;
-        }
-        this.selectedItems.add(id);
-        this.updateMultipleValue();
-        if (emitEvent) {
-            this.emitChangeEvent(id);
-        }
-    }
-    /**
-     * Remove item with id from the selectedItems set. Used only when multiple is true.
-     */
-    removeSelectedItem(id, emitEvent) {
-        if (!this.selectedItems.has(id)) {
-            return;
-        }
-        this.selectedItems.delete(id);
-        this.updateMultipleValue();
-        if (emitEvent) {
-            this.emitChangeEvent(id);
-        }
-    }
-    /**
-     * Updates the selected item based on the item id. Used only when multiple is false.
-     */
-    async updateSelectedItem(id, emitEvent) {
-        this.selectedItems.clear();
-        this.selectedItems.add(id);
-        this.value = this.processedItems.find(item => item.id === id).value;
-        if (emitEvent) {
-            this.emitChangeEvent(this.value && id);
-        }
-        await this.updateInputText();
-    }
-    /**
-     * Add or remove chips of the input based on the selectedItems Set.
-     */
-    async updateChips() {
-        const ids = Array.from(this.selectedItems);
-        const chips = await this.input.getChips();
-        ids.forEach(async (id) => {
-            const item = this.processedItems.find(i => i.id === id);
-            const text = await this.formatItem(item);
-            const chipExists = await this.input.hasChip({ value: `${id}`, text });
-            if (!chipExists) {
-                const chip = document.createElement("duet-chip");
-                chip.variation = "input";
-                chip.role = "option";
-                chip.value = `${id}`;
-                chip.textContent = text;
-                chip.addEventListener("duetRemove", evt => {
-                    const id = evt.detail.value;
-                    this.removeSelectedItem(id, true);
-                });
-                this.input.addChip(chip);
-            }
-        });
-        chips.forEach(chip => {
-            if (!ids.includes(chip.value)) {
-                chip.remove();
-            }
-        });
-    }
-    async getSelectedItemLabel() {
-        const item = this.processedItems.find(item => this.selectedItems.has(item.id));
-        const label = item ? await this.formatItem(item) : "";
-        return label;
-    }
-    /**
-     * Updates the input text when the combobox loses focus or when a selection is made.
-     */
-    async updateInputText(isBlurred = false) {
-        if (isBlurred && this.multiple) {
-            this.input.value = "";
-            return;
-        }
-        if (isBlurred && this.force) {
-            const listItems = this.returnFilteredOrNonFiltered();
-            if (!this.multiple &&
-                this.listOpen &&
-                listItems.length === 1 &&
-                listItems[0].name.toLowerCase() === this.input.value.toLowerCase()) {
-                this.updateSelectedItem(listItems[0].id, true);
-            }
-            if (this.selectedItems.size === 0) {
-                this.input.value = "";
-            }
-            else {
-                this.input.value = await this.getSelectedItemLabel();
-            }
-        }
-        if (!isBlurred && this.selectedItems.size > 0) {
-            this.input.value = ""; // set value to empty so that cursor position follows accordingly
-            this.input.value = await this.getSelectedItemLabel();
-            this.input.scrollLeft = this.input.scrollWidth;
-            await this.input.setFocus();
-        }
-    }
-    // Event handlers
-    onListClick(e, item) {
-        e.preventDefault();
-        e.stopPropagation();
-        // update selected item with id
-        if (this.multiple) {
-            this.addSelectedItem(item.id, true);
-        }
-        else {
-            this.updateSelectedItem(item.id, true);
-        }
-        this.activeItem = undefined;
-        this.listOpen = false;
-        return this.listOpen;
-    }
-    //function that scrolls to the li element with the class "active"
-    scrollToActive() {
-        const activeElement = document.getElementById(`${this.activeDescendantId}`);
-        if (activeElement) {
-            activeElement.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-            });
-        }
-    }
-    formatLabel(item, itemIndex, length, itemsLength) {
-        if (!item || itemsLength === undefined) {
-            return "";
-        }
-        const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
-        return labelString
-            .replace("{name}", String(item.name))
-            .replace("{current}", String(itemIndex + 1))
-            .replace("{total}", String(length))
-            .replace("{hiddenItems}", String(itemsLength - length));
-    }
-    /**
-     * Filter the items based on the input value
-     */
-    getFilteredItems() {
-        // filter items based on user inputs
-        const filteredItems = this.processedItems
-            .filter(item => {
-            var _a, _b, _c, _d, _e;
-            // filter by name and value
-            // if value contains inputvalue
-            return ((_a = String(item.value)) === null || _a === void 0 ? void 0 : _a.toLowerCase()[this.filterType]((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase())) ||
-                (
-                // if name contains input value
-                (_c = String(item.name)) === null || _c === void 0 ? void 0 : _c.toLowerCase()[this.filterType]((_d = this.inputValue) === null || _d === void 0 ? void 0 : _d.toLowerCase())) ||
-                // if name contains input value
-                this.formatter(item).toLowerCase()[this.filterType]((_e = this.inputValue) === null || _e === void 0 ? void 0 : _e.toLowerCase()) ||
-                // if the item is selected
-                this.selectedItems.has(item.id);
-        })
-            // if multiple, filter out the selected items
-            .filter(item => {
-            let include = true;
-            if (this.multiple && this.selectedItems.has(item.id)) {
-                include = false;
-            }
-            return include;
-        });
-        return this.sortFilteredItems(filteredItems);
-    }
-    /**
-     * Sort the return from getFilteredItems so that any item with and item.id that matches this.selectedItems is placed first
-     */
-    sortFilteredItems(items) {
-        if (items.length > 0) {
-            items
-                .filter(item => this.selectedItems.has(item.id))
-                .forEach(item => {
-                const index = items.indexOf(item);
-                items.splice(index, 1);
-                items.unshift(item);
-            });
-        }
-        return items;
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const selectElements = this.returnFilteredOrNonFiltered();
-        return (h$1(Host, { class: {
-                "duet-combobox": true,
-                [`duet-theme-${this.theme}`]: true,
-            } }, h$1("slot", null), h$1("div", null, h$1("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h$1("div", { class: "combobox-menu-container" }, this.listOpen &&
-            selectElements.map((item, index) => {
-                return (h$1(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
-            }), h$1("duet-spacer", { size: "x-small" }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
-        "activeItem": ["activeItemHandler"],
-        "inputValue": ["inputValueHandler"],
-        "items": ["processItems"],
-        "value": ["processValue"]
-    }; }
-    static get style() { return DuetComboboxStyle0; }
-}, [1, "duet-combobox", {
-        "accessibleLabelDefaults": [1, "accessible-label-defaults"],
-        "accessibleLabels": [1040],
-        "label": [1],
-        "caption": [1],
-        "theme": [1025],
-        "force": [4],
-        "multiple": [4],
-        "items": [1032],
-        "formatter": [16],
-        "value": [1025],
-        "minCharacters": [2, "min-characters"],
-        "openListOnClick": [4, "open-list-on-click"],
-        "filterType": [1, "filter-type"],
-        "processedItems": [32],
-        "inputValue": [32],
-        "listOpen": [32],
-        "selectedItems": [32],
-        "activeItem": [32],
-        "formatItem": [64]
-    }, [[4, "click", "handleDocumentClick"]], {
-        "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
-        "activeItem": ["activeItemHandler"],
-        "inputValue": ["inputValueHandler"],
-        "items": ["processItems"],
-        "value": ["processValue"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-combobox", "duet-button", "duet-caption", "duet-chip", "duet-icon", "duet-input", "duet-popup-menu", "duet-popup-menu-item", "duet-spacer", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-combobox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCombobox$1);
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "duet-chip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "duet-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "duet-popup-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "duet-popup-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetCombobox = DuetCombobox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetCombobox, defineCustomElement };