@duetds/components 8.0.6 → 8.1.0

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -9,682 +9,683 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLan
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
-  constructor() {
-    this.resizeObserver = new ResizeObserver(debounce(entries => {
-      var _a, _b;
-      // 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;
-        this.listContainer.style.width = `${currentWidth + 1}px`;
-        // this.listElement.style.width = `${currentWidth + 1}px`
-      }
-    }, 100));
-    this.processedItems = null;
-    this.inputWidth = 0;
-    this.inputValue = "";
-    this.selectionMsg = "";
-    this.listOpen = false;
-    this.selectedItems = new Set();
-    this.activeItem = undefined;
-    this.accessibleLabelDefaults = {
-      en: {
-        heading: "Select:",
-        item: "{name}, ({current} of {total})",
-        itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
-      },
-      fi: {
-        heading: "Valitse:",
-        item: "{name}, ({current}/{total})",
-        itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
-      },
-      sv: {
-        heading: "Välj:",
-        item: "{name}, ({current} av {total})",
-        itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
-      },
-    };
-    this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
-    this.theme = "";
-    this.force = false;
-    this.items = undefined;
-    this.formatter = (item) => item && item.name ? item.name : "";
-    this.value = undefined;
-    this.minCharacters = 1;
-    this.openListOnClick = false;
-    this.filterType = "startsWith";
-  }
-  activeItemHandler(state) {
-    this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
-  }
-  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, 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);
-  }
-  async processItems() {
-    this.items = this.processedItems = parsePossibleJSON(this.items);
-    await this.updateInputText();
-  }
-  async processValue() {
-    if (this.value) {
-      const selectedItem = this.items.find(item => item.value === this.value);
-      this.updateSelectedItems(selectedItem.id);
-    }
-  }
-  async processListOpenChange() {
-    if (this.openListOnClick) {
-      this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  connectedCallback() {
-    if (Build.isServer) {
-      return;
-    }
-    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.bind(this));
-    connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
-    //add correct aria attributes to the input element
-    this.input.accessibleAutocomplete = "list";
-    this.input.accessibleControls = "duet-combobox-list-element";
-    this.processListOpenChange();
-  }
-  disconnectedCallback() {
-    if (Build.isServer) {
-      return;
-    }
-    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.bind(this));
-    this.listElement.removeEventListener("click", e => {
-      e.stopPropagation();
-    });
-    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));
-      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)
-      : [];
-  }
-  /**
-   * Updates the selected items based on the item id.
-   * @param id
-   * @private
-   */
-  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);
-      }
-    }
-    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",
-      });
-    }
-    await this.updateInputText();
-  }
-  /**
-   * Updates the input text based on the selected/clicked items.
-   * @param bool -override to clear if invoked by "click outside"
-   */
-  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 = "";
-      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;
-    }
-    if (isBlurred && this.selectedItems.size === 0) {
-      //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
-      if (this.force) {
+    constructor() {
+        this.resizeObserver = new ResizeObserver(debounce(entries => {
+            var _a, _b;
+            // 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;
+                this.listContainer.style.width = `${currentWidth + 1}px`;
+                // this.listElement.style.width = `${currentWidth + 1}px`
+            }
+        }, 100));
+        this.processedItems = null;
+        this.inputWidth = 0;
         this.inputValue = "";
-        this.input.value = "";
-      }
-      this.activeItem = undefined;
-    }
-    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;
-  }
-  handleInputKeyDownEvent(e) {
-    //if selection is made, close the list and update internal and external values
-    // 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);
-      this.listOpen = false;
-      return;
-    }
-    //tabbing out or escaping, restore initial state
-    if (isEscapeKey(e) || isTabKey(e)) {
-      this.updateInputText(true);
-      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)) {
-      e.preventDefault();
-      nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-      this.listOpen = true;
-    }
-    if (isArrowDownKey(e) || isArrowUpKey(e)) {
-      const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
-      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 = "active_item";
-      this.activeItem = nextActiveItem;
-      this.scrollToActive();
-    }
-    this.announceActive();
-    return;
-  }
-  selectActiveItem() {
-    if (this.activeItem === undefined) {
-      return;
-    }
-    const filteredItem = this.returnFilteredOrNonFiltered();
-    const item = filteredItem[this.activeItem];
-    this.updateSelectedItems(item.id, true);
-  }
-  announceActive(items) {
-    if (!items) {
-      items = this.returnFilteredOrNonFiltered();
-    }
-    if (this.activeItem === undefined || this.activeItem === -1) {
-      return;
-    }
-    const item = items[this.activeItem];
-    this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
-  }
-  //function that scrolls to the li element with the class "active"
-  scrollToActive() {
-    const activeElement = this.listElement.querySelector(".active");
-    if (activeElement) {
-      activeElement.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    }
-  }
-  formatLabel(item, 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(this.activeItem + 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;
-      // 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 the item is selected
-        this.selectedItems.has(item.id);
-    });
-    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(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
-        "duet-combobox": true,
-        [`duet-theme-${this.theme}`]: true,
-      } }, h("slot", null), h("div", { class: {
-        "duet-combobox-list": true,
-        open: this.listOpen,
-      }, ref: el => (this.listContainer = el) }, h("ul", { class: {
-        "duet-combobox-listbox-open": this.listOpen,
-        "duet-combobox-listbox": true,
-      }, role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element" }, selectElements.map((item, index) => {
-      return (h(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) }));
-    })))));
-  }
-  static get is() { return "duet-combobox"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-combobox.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-combobox.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accessibleLabelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
+        this.selectionMsg = "";
+        this.listOpen = false;
+        this.selectedItems = new Set();
+        this.activeItem = undefined;
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}, ({current} of {total})",
+                itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}, ({current}/{total})",
+                itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}, ({current} av {total})",
+                itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
+            },
+        };
+        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
+        this.theme = "";
+        this.force = false;
+        this.items = undefined;
+        this.formatter = (item) => item && item.name ? item.name : "";
+        this.value = undefined;
+        this.minCharacters = 1;
+        this.openListOnClick = false;
+        this.filterType = "startsWith";
+    }
+    activeItemHandler(state) {
+        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+    }
+    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, 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);
+    }
+    async processItems() {
+        this.items = this.processedItems = parsePossibleJSON(this.items);
+        await this.updateInputText();
+    }
+    async processValue() {
+        if (this.value) {
+            const selectedItem = this.items.find(item => item.value === this.value);
+            this.updateSelectedItems(selectedItem.id);
+        }
+    }
+    async processListOpenChange() {
+        if (this.openListOnClick) {
+            this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
+        }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        if (Build.isServer) {
+            return;
+        }
+        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);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
-            }],
-          "text": "Placeholder defaults"
-        },
-        "attribute": "accessible-label-defaults",
-        "reflect": false,
-        "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}, ({current} of {total})\",\n      itemFiltered: \"{name}, ({current} of {total}, {hiddenItems} filtered)\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}, ({current}/{total})\",\n      itemFiltered: \"{name}, ({current}/{total}, {hiddenItems} suodatettu)\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}, ({current} av {total})\",\n      itemFiltered: \"{name}, ({current} av {total}, {hiddenItems} filtrerade)\",\n    },\n  }"
-      },
-      "accessibleLabels": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Record<string, string>",
-          "resolved": "{ [x: string]: string; }",
-          "references": {
-            "Record": {
-              "location": "global",
-              "id": "global::Record"
+            else {
+                this.listOpen = !this.listOpen;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
-            }],
-          "text": "Hint text to display before the user types into the date picker input."
-        },
-        "defaultValue": "getLocaleString(\n    this.accessibleLabelDefaults,\n    getLanguage()\n  )"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
+        });
+        this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
+        //add correct aria attributes to the input element
+        this.input.accessibleAutocomplete = "list";
+        this.input.accessibleControls = "duet-combobox-list-element";
+        this.processListOpenChange();
+    }
+    disconnectedCallback() {
+        if (Build.isServer) {
+            return;
+        }
+        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.bind(this));
+        this.listElement.removeEventListener("click", e => {
+            e.stopPropagation();
+        });
+        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));
+            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)
+            : [];
+    }
+    /**
+     * Updates the selected items based on the item id.
+     * @param id
+     * @private
+     */
+    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);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the combobox."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "force": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
-        },
-        "attribute": "force",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "items": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of item objects."
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "formatter": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(item: DuetComboboxItem) => string",
-          "resolved": "(item: DuetComboboxItem) => string",
-          "references": {
-            "DuetComboboxItem": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
-              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
+            else {
+                this.selectedItems.add(id);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "example",
-              "text": "(item) => `${item.name} (${item.value})`"
-            }, {
-              "name": "default",
-              "text": "undefined"
-            }],
-          "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
-        },
-        "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of selected item/s"
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "minCharacters": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines minimum number of characters that must be given to show search results"
-        },
-        "attribute": "min-characters",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "openListOnClick": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines if items list should always open after clicking on input"
-        },
-        "attribute": "open-list-on-click",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "filterType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"includes\" | \"startsWith\"",
-          "resolved": "\"includes\" | \"startsWith\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines if filtering of items should be done by includes or startsWith"
-        },
-        "attribute": "filter-type",
-        "reflect": false,
-        "defaultValue": "\"startsWith\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "processedItems": {},
-      "inputWidth": {},
-      "inputValue": {},
-      "selectionMsg": {},
-      "listOpen": {},
-      "selectedItems": {},
-      "activeItem": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when selected item changed."
-        },
-        "complexType": {
-          "original": "DuetComboboxEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
-          "references": {
-            "DuetComboboxEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
-              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
+        }
+        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",
+            });
+        }
+        await this.updateInputText();
+    }
+    /**
+     * Updates the input text based on the selected/clicked items.
+     * @param bool -override to clear if invoked by "click outside"
+     */
+    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 = "";
+            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;
+        }
+        if (isBlurred && this.selectedItems.size === 0) {
+            //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
+            if (this.force) {
+                this.inputValue = "";
+                this.input.value = "";
             }
-          }
+            this.activeItem = undefined;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "formatItem": {
-        "complexType": {
-          "signature": "(item: DuetComboboxItem) => Promise<string>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "item : DuetComboboxItem"
-                }],
-              "text": ": DuetComboboxItem"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "DuetComboboxItem": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
-              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
+        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;
+    }
+    handleInputKeyDownEvent(e) {
+        //if selection is made, close the list and update internal and external values
+        // 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);
+            this.listOpen = false;
+            return;
+        }
+        //tabbing out or escaping, restore initial state
+        if (isEscapeKey(e) || isTabKey(e)) {
+            this.updateInputText(true);
+            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)) {
+            e.preventDefault();
+            nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+            this.listOpen = true;
+        }
+        if (isArrowDownKey(e) || isArrowUpKey(e)) {
+            const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+            if (nextActiveItem < 0 || !nextActiveItem) {
+                nextActiveItem = 0;
+            }
+            if (nextActiveItem >= listItems.length) {
+                nextActiveItem = listItems.length - 1;
             }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "Exposes a formatter function to format the item value displayed after a user selects an item",
-          "tags": [{
-              "name": "param",
-              "text": "item : DuetComboboxItem"
-            }]
+            // 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 = "active_item";
+            this.activeItem = nextActiveItem;
+            this.scrollToActive();
         }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "activeItem",
-        "methodName": "activeItemHandler"
-      }, {
-        "propName": "items",
-        "methodName": "processItems"
-      }, {
-        "propName": "value",
-        "methodName": "processValue"
-      }, {
-        "propName": "listOpen",
-        "methodName": "processListOpenChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        this.announceActive();
+        return;
+    }
+    selectActiveItem() {
+        if (this.activeItem === undefined) {
+            return;
+        }
+        const filteredItem = this.returnFilteredOrNonFiltered();
+        const item = filteredItem[this.activeItem];
+        this.updateSelectedItems(item.id, true);
+    }
+    announceActive(items) {
+        if (!items) {
+            items = this.returnFilteredOrNonFiltered();
+        }
+        if (this.activeItem === undefined || this.activeItem === -1) {
+            return;
+        }
+        const item = items[this.activeItem];
+        this.selectionMsg = structuredClone(this.formatLabel(item, items.length, this.items.length));
+    }
+    //function that scrolls to the li element with the class "active"
+    scrollToActive() {
+        const activeElement = this.listElement.querySelector(".active");
+        if (activeElement) {
+            activeElement.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+            });
+        }
+    }
+    formatLabel(item, 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(this.activeItem + 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;
+            // 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 the item is selected
+                this.selectedItems.has(item.id);
+        });
+        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() {
+        if (Build.isServer) {
+            return;
+        }
+        const selectElements = this.returnFilteredOrNonFiltered();
+        return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
+                "duet-combobox": true,
+                [`duet-theme-${this.theme}`]: true,
+            } }, h("slot", null), h("div", { class: {
+                "duet-combobox-list": true,
+                open: this.listOpen,
+            }, ref: el => (this.listContainer = el) }, h("ul", { class: {
+                "duet-combobox-listbox-open": this.listOpen,
+                "duet-combobox-listbox": true,
+            }, role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element" }, selectElements.map((item, index) => {
+            return (h(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) }));
+        })))));
+    }
+    static get is() { return "duet-combobox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-combobox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+                        }],
+                    "text": "Placeholder defaults"
+                },
+                "attribute": "accessible-label-defaults",
+                "reflect": false,
+                "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}, ({current} of {total})\",\n      itemFiltered: \"{name}, ({current} of {total}, {hiddenItems} filtered)\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}, ({current}/{total})\",\n      itemFiltered: \"{name}, ({current}/{total}, {hiddenItems} suodatettu)\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}, ({current} av {total})\",\n      itemFiltered: \"{name}, ({current} av {total}, {hiddenItems} filtrerade)\",\n    },\n  }"
+            },
+            "accessibleLabels": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
+                        }],
+                    "text": "Hint text to display before the user types into the date picker input."
+                },
+                "defaultValue": "getLocaleString(\n    this.accessibleLabelDefaults,\n    getLanguage()\n  )"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the combobox."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "force": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+                },
+                "attribute": "force",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of item objects."
+                },
+                "attribute": "items",
+                "reflect": false
+            },
+            "formatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: DuetComboboxItem) => string",
+                    "resolved": "(item: DuetComboboxItem) => string",
+                    "references": {
+                        "DuetComboboxItem": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "(item) => `${item.name} (${item.value})`"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
+                },
+                "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of selected item/s"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "minCharacters": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines minimum number of characters that must be given to show search results"
+                },
+                "attribute": "min-characters",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "openListOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if items list should always open after clicking on input"
+                },
+                "attribute": "open-list-on-click",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "filterType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"includes\" | \"startsWith\"",
+                    "resolved": "\"includes\" | \"startsWith\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if filtering of items should be done by includes or startsWith"
+                },
+                "attribute": "filter-type",
+                "reflect": false,
+                "defaultValue": "\"startsWith\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "processedItems": {},
+            "inputWidth": {},
+            "inputValue": {},
+            "selectionMsg": {},
+            "listOpen": {},
+            "selectedItems": {},
+            "activeItem": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selected item changed."
+                },
+                "complexType": {
+                    "original": "DuetComboboxEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
+                    "references": {
+                        "DuetComboboxEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "formatItem": {
+                "complexType": {
+                    "signature": "(item: DuetComboboxItem) => Promise<string>",
+                    "parameters": [{
+                            "name": "item",
+                            "type": "{ id?: number; value: any; name: string; html?: string; tags?: string[]; }",
+                            "docs": ": DuetComboboxItem"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DuetComboboxItem": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Exposes a formatter function to format the item value displayed after a user selects an item",
+                    "tags": [{
+                            "name": "param",
+                            "text": "item : DuetComboboxItem"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "activeItem",
+                "methodName": "activeItemHandler"
+            }, {
+                "propName": "items",
+                "methodName": "processItems"
+            }, {
+                "propName": "value",
+                "methodName": "processValue"
+            }, {
+                "propName": "listOpen",
+                "methodName": "processListOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }