@duetds/components 8.5.5 → 8.6.0

package/lib/cjs/duet-combobox.cjs.entry.js

@@ -11,14 +11,15 @@ const createId = require('./create-id-1f8c438f.js');
 const jsUtils = require('./js-utils-92e24ba1.js');
 const keyboardUtils = require('./keyboard-utils-681e11ec.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
+const slotUtils = require('./slot-utils-03a40c78.js');
 const stringUtils = require('./string-utils-053749ff.js');
 
 const SelectSingle = ({ item, search = "", selected }) => {
-    const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
+    const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "i") : undefined;
     return (index.h(index.Fragment, null,
         selected && index.h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
         regEx ? (index.h("span", { class: "option-container", "aria-hidden": "true" },
-            index.h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight">$&</span>') }))) : (item.name),
+            index.h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight sc-duet-combobox">$&</span>') }))) : (item.name),
         item.tags && index.h("span", { class: "option-tags" }, item.tags.join(", "))));
 };
 
@@ -37,7 +38,7 @@ const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined,
             index.h(SelectSingle, { item: item, search: search, selected: selected }))));
 };
 
-const duetComboboxCss = ".sc-duet-combobox-h{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(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{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)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;display:none;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{display:block}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
+const duetComboboxCss = ".sc-duet-combobox-h{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(0, 41, 77)}.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(0, 41, 77);transition:none}.duet-theme-turva.sc-duet-combobox-h{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)}.duet-theme-turva.sc-duet-combobox-h a.sc-duet-combobox{color:rgb(23, 28, 58)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(116, 116, 117)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.selected.sc-duet-combobox{background:rgb(244, 207, 214)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-theme-turva.sc-duet-combobox-h .duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);z-index:700;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-combobox-list.open.sc-duet-combobox{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:rgb(205, 229, 241)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:rgb(144, 149, 153)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:rgb(255, 255, 255)}.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.active.sc-duet-combobox a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus a.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .duet-combobox-listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover a.sc-duet-combobox{color:rgb(255, 255, 255)}";
 
 const DuetCombobox = class {
     constructor(hostRef) {
@@ -53,24 +54,63 @@ const DuetCombobox = class {
                 // this.listElement.style.width = `${currentWidth + 1}px`
             }
         }, 100));
-        this.handleInputKeyDownEvent = (e) => {
+        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();
+            }
+            this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        };
+        this.onKeyDown = (e) => {
             //if selection is made, close the list and update internal and external values
+            const listItems = this.returnFilteredOrNonFiltered();
             // 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 (keyboardUtils.isEnterKey(e)) {
                 e.preventDefault();
-                this.selectActiveItem();
-                this.updateInputText(false);
+                if (this.listOpen && this.activeItem !== undefined && listItems[this.activeItem]) {
+                    if (this.multiple) {
+                        this.addSelectedItem(listItems[this.activeItem].id, true);
+                    }
+                    else {
+                        this.updateSelectedItem(listItems[this.activeItem].id, true);
+                    }
+                }
+                this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
-            //tabbing out or escaping, restore initial state
             if (keyboardUtils.isEscapeKey(e) || keyboardUtils.isTabKey(e)) {
                 this.updateInputText(true);
+                this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
+            if (keyboardUtils.isBackspaceKey(e) && this.inputValue === "") {
+                if (this.multiple && this.selectedItems.size > 0) {
+                    const lastItem = Array.from(this.selectedItems).pop();
+                    this.removeSelectedItem(lastItem, true);
+                }
+                return;
+            }
             //handle arrow up/down navigation
             let nextActiveItem = this.activeItem;
             if (keyboardUtils.isArrowUpKey(e)) {
@@ -83,7 +123,6 @@ const DuetCombobox = class {
                 this.listOpen = true;
             }
             if (keyboardUtils.isArrowDownKey(e) || keyboardUtils.isArrowUpKey(e)) {
-                const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
                 if (nextActiveItem < 0 || !nextActiveItem) {
                     nextActiveItem = 0;
                 }
@@ -96,13 +135,10 @@ const DuetCombobox = class {
                 this.activeItem = nextActiveItem;
                 this.scrollToActive();
             }
-            this.announceActive();
             return;
         };
         this.processedItems = null;
-        this.inputWidth = 0;
         this.inputValue = "";
-        this.selectionMsg = "";
         this.listOpen = false;
         this.selectedItems = new Set();
         this.activeItem = undefined;
@@ -124,8 +160,11 @@ const DuetCombobox = class {
             },
         };
         this.accessibleLabels = languageUtils.getLocaleString(this.accessibleLabelDefaults, languageUtils.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;
@@ -141,7 +180,7 @@ const DuetCombobox = class {
         const path = e.composedPath();
         const isClickOutside = path.every(el => el !== this.element);
         if (isClickOutside) {
-            this.updateInputText(true, true);
+            this.updateInputText(true);
             this.listOpen = false;
         }
     }
@@ -152,17 +191,67 @@ const DuetCombobox = class {
     async formatItem(item) {
         return this.formatter(item);
     }
-    async processItems() {
-        this.items = this.processedItems = stringUtils.parsePossibleJSON(this.items);
-        await this.updateInputText();
+    processItems() {
+        const ids = [];
+        this.processedItems = stringUtils.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);
+            }
+        }
     }
-    async processValue() {
-        if (this.value) {
-            const selectedItem = this.items.find(item => item.value === this.value);
-            this.updateSelectedItems(selectedItem.id);
+    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);
         }
     }
-    async processListOpenChange() {
+    processListOpenChange() {
         if (this.openListOnClick) {
             this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
         }
@@ -175,63 +264,51 @@ const DuetCombobox = class {
         themeableComponent.inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.items = this.processedItems = stringUtils.parsePossibleJSON(this.items);
-        this.input = this.element.querySelector("duet-input");
-        this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
-        this.input.addEventListener("click", () => {
-            if (!this.openListOnClick) {
-                this.inputValue.length >= this.minCharacters ? (this.listOpen = true) : (this.listOpen = false);
-            }
-            else {
-                this.listOpen = !this.listOpen;
-            }
-        });
-        this.element.addEventListener("keydown", this.handleInputKeyDownEvent);
-        languageUtils.connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
+        if (this.items) {
+            this.processItems();
+        }
+        const slottedElements = slotUtils.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.element.addEventListener("keydown", this.onKeyDown);
+        languageUtils.connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         this.processListOpenChange();
     }
     disconnectedCallback() {
-        this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
-        this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
-        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent);
-        this.listElement.removeEventListener("click", e => {
-            e.stopPropagation();
-        });
+        this.input.removeEventListener("duetChange", this.onInputChange);
+        this.input.removeEventListener("click", this.onInputClick);
+        this.element.removeEventListener("keydown", this.onKeyDown);
         this.resizeObserver.disconnect();
         languageUtils.disconnectLanguageChangeObserver(this);
     }
     componentDidLoad() {
         // observe resize events to dynamically adjust size of dropdown area
         this.resizeObserver.observe(this.input);
-        this.listElement.addEventListener("click", e => {
-            e.stopPropagation();
-        });
         this.processValue();
     }
-    /**
-     * Updates the input text based on the selected/clicked items.
-     * @param event - event
-     *'param item: DuetComboboxItem - the item that was selected
-     */
-    onListClick(e, item) {
-        e.preventDefault();
-        // update selected item with id
-        this.updateSelectedItems(item.id, true);
-        this.listOpen = false;
-        return this.listOpen;
-    }
     /**
      * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
-     * TODO: this should be disabled in multiple mode
      */
     shouldListBeFiltered() {
-        if (this.selectedItems.size && this.input.value === this.inputValue) {
-            const item = this.items.filter(item => this.selectedItems.has(item.id));
+        if (!this.multiple && this.selectedItems.size && this.input.value === this.inputValue) {
+            const item = this.processedItems.find(item => this.selectedItems.has(item.id));
             return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
         }
         return true;
@@ -246,91 +323,135 @@ const DuetCombobox = class {
                 : 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 selected items based on the item id.
-     * @param id
-     * @private
+     * Updates the value after selected items have changed for multiple selection.
      */
-    async updateSelectedItems(id, emitEvent) {
-        // for a multiple scenario wrap this in an if/else and just don't clear here
-        this.selectedItems.clear();
-        if (this.selectedItems) {
-            if (this.selectedItems.has(id)) {
-                this.selectedItems.delete(id);
-            }
-            else {
-                this.selectedItems.add(id);
-            }
+    updateMultipleValue() {
+        this.value = this.processedItems.filter(item => this.selectedItems.has(item.id)).map(item => item.value);
+        this.input.value = "";
+        this.updateChips();
+    }
+    /**
+     * 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) {
-            const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
-            this.duetChange.emit({
-                value: item[0].value,
-                item: item[0],
-                component: "duet-combobox",
-            });
+            this.emitChangeEvent(id);
         }
-        await this.updateInputText();
     }
     /**
-     * Updates the input text based on the selected/clicked items.
-     * @param bool -override to clear if invoked by "click outside"
+     * Remove item with id from the selectedItems set. Used only when multiple is true.
      */
-    async updateInputText(isBlurred = false, isClickOutside = false) {
-        const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
-        //if items changed and given id no longer exists
-        if (item.length === 0 && this.selectedItems.size > 0) {
-            this.selectedItems.clear();
-            this.input.value = "";
+    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) {
+        if (this.selectedItems.has(id)) {
+            this.selectedItems.delete(id);
             this.value = undefined;
-            this.activeItem = undefined;
         }
-        if (!isClickOutside && this.selectedItems.size === 1) {
-            this.input.value = ""; // set value to empty so that cursor position follows accordingly
-            this.input.value = await this.formatItem(item[0]);
-            this.input.scrollLeft = this.input.scrollWidth;
-            this.activeItem = undefined;
-            this.value = item[0].value;
+        else {
+            this.selectedItems.clear();
+            this.selectedItems.add(id);
+            this.value = this.processedItems.find(item => item.id === id).value;
         }
-        if (isBlurred) {
-            if (this.selectedItems.size === 0) {
-                this.activeItem = undefined;
-                if (this.force) {
-                    this.inputValue = "";
-                    this.input.value = "";
-                }
+        if (emitEvent) {
+            this.emitChangeEvent(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.value = `${id}`;
+                chip.textContent = text;
+                chip.addEventListener("duetRemove", evt => {
+                    const id = evt.detail.value;
+                    this.removeSelectedItem(id, true);
+                });
+                this.input.addChip(chip);
             }
-            else if (this.force) {
-                const selectedValueIndex = [...this.selectedItems][0];
-                const selectedValueLabel = await this.formatItem(this.items[selectedValueIndex]);
-                this.inputValue = selectedValueLabel;
-                this.input.value = selectedValueLabel;
+        });
+        chips.forEach(chip => {
+            if (!ids.includes(chip.value)) {
+                chip.remove();
             }
-        }
-        this.listOpen = false;
+        });
     }
-    updateInputValue(e) {
-        var _a;
-        this.inputValue = e.detail.value;
-        this.listOpen = String(this.inputValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    async getSelectedItemLabel() {
+        const item = this.processedItems.find(item => this.selectedItems.has(item.id));
+        const label = item ? await this.formatItem(item) : "";
+        return label;
     }
-    selectActiveItem() {
-        if (this.activeItem === undefined) {
+    /**
+     * 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;
         }
-        const filteredItem = this.returnFilteredOrNonFiltered();
-        const item = filteredItem[this.activeItem];
-        this.updateSelectedItems(item.id, true);
+        if (isBlurred && this.force) {
+            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;
+        }
     }
-    announceActive(items) {
-        if (!items) {
-            items = this.returnFilteredOrNonFiltered();
+    // Event handlers
+    onListClick(e, item) {
+        e.preventDefault();
+        e.stopPropagation();
+        // update selected item with id
+        if (this.multiple) {
+            this.addSelectedItem(item.id, true);
         }
-        if (this.activeItem === undefined || this.activeItem === -1) {
-            return;
+        else {
+            this.updateSelectedItem(item.id, true);
         }
-        const item = items[this.activeItem];
-        this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
+        this.activeItem = undefined;
+        this.listOpen = false;
+        return this.listOpen;
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
@@ -358,16 +479,27 @@ const DuetCombobox = class {
      */
     getFilteredItems() {
         // filter items based on user inputs
-        const filteredItems = this.processedItems.filter(item => {
-            var _a, _b, _c, _d;
+        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);
     }
@@ -401,9 +533,10 @@ const DuetCombobox = class {
             }, ref: el => (this.listContainer = el) }, index.h("ul", { class: {
                 "duet-combobox-listbox-open": this.listOpen,
                 "duet-combobox-listbox": true,
-            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, selectElements.map((item, index$1) => {
-            return (index.h(DuetComboBoxSelect, { item: item, active: index$1 === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, selectElements.length, this.items.length) }));
-        })))));
+            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, this.listOpen &&
+            selectElements.map((item, index$1) => {
+                return (index.h(DuetComboBoxSelect, { item: item, active: index$1 === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, selectElements.length, this.processedItems.length) }));
+            })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-date-picker.cjs.entry.js

@@ -10,7 +10,7 @@ const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const createId = require('./create-id-1f8c438f.js');
 const focusUtils = require('./focus-utils-56f2d983.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
-const slotUtils = require('./slot-utils-f5073417.js');
+const slotUtils = require('./slot-utils-03a40c78.js');
 require('./string-utils-053749ff.js');
 
 const formatOptionsShort = { day: "numeric", month: "long" };

package/lib/cjs/duet-fieldset.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b77ebc31.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const createId = require('./create-id-1f8c438f.js');
-const slotUtils = require('./slot-utils-f5073417.js');
+const slotUtils = require('./slot-utils-03a40c78.js');
 
 const duetFieldsetCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display: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\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-theme-turva .duet-legend-wrapper{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)}.duet-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(222, 35, 98);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{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(224, 42, 13)}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";