@duetds/components 8.5.4 → 8.6.0

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

@@ -1,22 +1,33 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-37349749.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-e98f9bb0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.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, e as isArrowUpKey, f as isArrowDownKey } from './p-e44c0eff.js';
+import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isBackspaceKey, f as isArrowUpKey, g as isArrowDownKey } from './p-785686e3.js';
 import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
+import { g as getElementsFromDefaultSlot } from './p-06e608ae.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { h, F as Fragment } from './p-33937fd7.js';
-import { d as defineCustomElement$2 } from './p-b189e243.js';
+import { d as defineCustomElement$c } from './p-83231ea8.js';
+import { d as defineCustomElement$b } from './p-b6322d8d.js';
+import { d as defineCustomElement$a } from './p-755dd68f.js';
+import { d as defineCustomElement$9 } from './p-667579b0.js';
+import { d as defineCustomElement$8 } from './p-014c1177.js';
+import { d as defineCustomElement$7 } from './p-e3d597b6.js';
+import { d as defineCustomElement$6 } from './p-63954651.js';
+import { d as defineCustomElement$5 } from './p-a02e62f3.js';
+import { d as defineCustomElement$4 } from './p-c8415e2f.js';
+import { d as defineCustomElement$3 } from './p-0cee8a12.js';
+import { d as defineCustomElement$2 } from './p-d1815d2a.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 (h(Fragment, null,
         selected && h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
         regEx ? (h("span", { class: "option-container", "aria-hidden": "true" },
-            h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight">$&</span>') }))) : (item.name),
+            h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight sc-duet-combobox">$&</span>') }))) : (item.name),
         item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
 };
 
@@ -35,7 +46,7 @@ const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined,
             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$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox extends H {
     constructor() {
@@ -52,24 +63,63 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
                 // 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 (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 (isEscapeKey(e) || isTabKey(e)) {
                 this.updateInputText(true);
+                this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
+            if (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 (isArrowUpKey(e)) {
@@ -82,7 +132,6 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
                 this.listOpen = true;
             }
             if (isArrowDownKey(e) || isArrowUpKey(e)) {
-                const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
                 if (nextActiveItem < 0 || !nextActiveItem) {
                     nextActiveItem = 0;
                 }
@@ -95,13 +144,10 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
                 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;
@@ -123,8 +169,11 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
             },
         };
         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;
@@ -140,7 +189,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
         const path = e.composedPath();
         const isClickOutside = path.every(el => el !== this.element);
         if (isClickOutside) {
-            this.updateInputText(true, true);
+            this.updateInputText(true);
             this.listOpen = false;
         }
     }
@@ -151,17 +200,67 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     async formatItem(item) {
         return this.formatter(item);
     }
-    async processItems() {
-        this.items = this.processedItems = parsePossibleJSON(this.items);
-        await this.updateInputText();
+    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);
+            }
+        }
     }
-    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";
         }
@@ -174,63 +273,51 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.items = this.processedItems = 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);
-        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
+        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.element.addEventListener("keydown", this.onKeyDown);
+        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();
         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;
@@ -245,91 +332,135 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
                 : 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() {
@@ -357,16 +488,27 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
      */
     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);
     }
@@ -400,9 +542,10 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
             }, ref: el => (this.listContainer = el) }, h$1("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) => {
-            return (h$1(DuetComboBoxSelect, { item: item, active: index === 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) => {
+                return (h$1(DuetComboBoxSelect, { item: item, active: index === 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 this; }
     static get watchers() { return {
@@ -415,8 +558,11 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
 }, [6, "duet-combobox", {
         "accessibleLabelDefaults": [1, "accessible-label-defaults"],
         "accessibleLabels": [1040],
+        "label": [1],
+        "caption": [1],
         "theme": [1025],
         "force": [4],
+        "multiple": [4],
         "items": [1032],
         "formatter": [16],
         "value": [1537],
@@ -424,9 +570,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
         "openListOnClick": [4, "open-list-on-click"],
         "filterType": [1, "filter-type"],
         "processedItems": [32],
-        "inputWidth": [32],
         "inputValue": [32],
-        "selectionMsg": [32],
         "listOpen": [32],
         "selectedItems": [32],
         "activeItem": [32],
@@ -441,14 +585,64 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["duet-combobox", "duet-icon"];
+    const components = ["duet-combobox", "duet-button", "duet-caption", "duet-chip", "duet-icon", "duet-input", "duet-label", "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$c();
+            }
+            break;
+        case "duet-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "duet-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
         case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "duet-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "duet-label":
+            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();
             }