@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,170 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.js';
+import { a as actionArrowDownSmall } from './p-115c79b6.js';
+import { f as font_size_medium, t as tokens } from './p-02305a1e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { s as sanitizeString } from './p-5a9d75e1.js';
+import { d as defineCustomElement$2 } from './p-7739604d.js';
+
+const duetCollapsibleCss = "*.sc-duet-collapsible,*.sc-duet-collapsible::after,*.sc-duet-collapsible::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-collapsible-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d}.duet-theme-turva.sc-duet-collapsible-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:#171c3a}.duet-m-0.sc-duet-collapsible-h{margin:0 !important}.duet-collapsible-content.sc-duet-collapsible{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}@media (max-width: 35.9375em){.duet-collapsible-content.sc-duet-collapsible{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva.sc-duet-collapsible{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}[open].sc-duet-collapsible-h .duet-collapsible-content.sc-duet-collapsible{display:block}.duet-collapsible-heading.sc-duet-collapsible{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-normal-weight.sc-duet-collapsible{font-weight:400}.duet-collapsible-heading.duet-theme-turva.sc-duet-collapsible{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-collapsible-heading.sc-duet-collapsible .duet-collapsible-heading-content.sc-duet-collapsible{flex:1}.duet-collapsible-heading.sc-duet-collapsible:focus{outline:0}.user-is-tabbing.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon.sc-duet-collapsible{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:#00294d;transition:transform 300ms ease}.duet-collapsible-heading-icon.sc-duet-collapsible:last-child,.duet-collapsible-heading-icon.sc-duet-collapsible:last-of-type{margin-right:0 !important}[aria-expanded=true].sc-duet-collapsible .duet-collapsible-heading-icon.sc-duet-collapsible{transform:rotate(180deg)}";
+
+const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetToggle = createEvent(this, "duetToggle", 7);
+    this.id = createID("DuetCollapsible");
+    /**
+     * Theme of the collapsible.
+     */
+    this.theme = "";
+    /**
+     * The content for the collapsible heading.
+     */
+    this.heading = "";
+    /**
+     * The font weight of the heading
+     */
+    this.headingWeight = "semibold";
+    /**
+     * Custom headingSize to be used for font size of heading, as a design token entered
+     * in kebab-case x-small -> font-size-x-small.
+     * Example:
+     * # 12px (0.75rem)  ------  +2px   (x-small)
+     * # 14px (0.875rem) ------  +2px   (small)
+     * # 16px (1rem)     ------  +2px   (medium)
+     * # 20px (1.25rem)  ------  +4px   (large)
+     * # 24px (1.5rem)   ------  +4px   (x-large)
+     * # 36px (2.25rem)  ------  +12px  (xx-large)
+     * # 48px (3rem)     ------  +12px  (xxx-large)
+     * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+     */
+    this.headingSize = undefined;
+    /**
+     * The actual heading level used for the heading in html markup. This setting
+     * exists for accessibility reasons. It doesn’t change the style visually.
+     * only variations of h1-h6 area accepted
+     */
+    this.headingLevel = undefined;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Is the component expanded or collapsed.
+     */
+    this.open = false;
+    this.handleKeyDown = (e) => {
+      if (isKeyboardClick(e)) {
+        this.handleClick(e);
+      }
+    };
+    this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
+      if (!fontSize) {
+        return font_size_medium;
+      }
+      else {
+        const searchRegExp = /-/g;
+        const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
+        return tokens[`font_size_${fontSizeReplaced}`];
+      }
+    };
+    this.getEquivalentIconSize = (fontSize = this.headingSize) => {
+      switch (fontSize) {
+        case "x-small":
+          return "xx-small";
+        case "small":
+          return "xx-small";
+        case "medium":
+          return "xx-small";
+        case "large":
+          return "x-small";
+        case "x-large":
+          return "small";
+        case "xx-large":
+          return "medium";
+        case "xxx-large":
+          return "x-large";
+        case "xxxx-large":
+          return "xxx-large";
+        default:
+          // default size
+          return "xx-small";
+      }
+    };
+    this.handleClick = (e) => {
+      e.preventDefault();
+      this.open = !this.open;
+      this.duetToggle.emit({
+        component: "duet-collapsible",
+        originalEvent: e,
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
+   * `collapsible.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeButton) {
+      this.element.classList.add("user-is-tabbing");
+      this.nativeButton.focus(options);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, { class: {
+        "duet-collapsible-heading": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-collapsible-normal-weight": this.headingWeight === "normal",
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get style() { return duetCollapsibleCss; }
+}, [6, "duet-collapsible", {
+    "theme": [1025],
+    "heading": [1],
+    "headingWeight": [1, "heading-weight"],
+    "headingSize": [1, "heading-size"],
+    "headingLevel": [1, "heading-level"],
+    "margin": [1],
+    "open": [1540],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-collapsible", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-collapsible":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCollapsible$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCollapsible = DuetCollapsible$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCollapsible, defineCustomElement };

package/lib/dist-custom-elements/duet-combobox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetCombobox extends Components.DuetCombobox, HTMLElement {}
+export const DuetCombobox: {
+  prototype: DuetCombobox;
+  new (): DuetCombobox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,432 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as debounce } from './p-0b3f675e.js';
+import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isArrowDownKey } from './p-d8549efe.js';
+import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { h, F as Fragment } from './p-b9058029.js';
+import { d as defineCustomElement$3 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const SelectSingle = ({ item, search = "", selected }) => {
+  const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : 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),
+    item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+};
+
+const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined, clickHandler = e => {
+  e.preventDefault();
+}, keyHandler = e => {
+  e.preventDefault();
+}, search, }) => {
+  return (h("li", { class: {
+      "list-item": true,
+      option: true,
+      active: active,
+      selected: selected,
+    }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})` },
+    h("a", { tabindex: "-1", onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), class: "option-link", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})`, "aria-hidden": "true" },
+      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;width:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#00294d}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);display:none;overflow:hidden;background:white;border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block}.duet-combobox-list.sc-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 .listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-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 .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 .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:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:#cde5f1}.duet-combobox-list.sc-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 .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#0077b3}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:#e1e3e6}";
+
+const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    // Safari doesnt properly support aria-activedecendatn, the code associated with this bool is a workaround for that,
+    // this should be removed when Safari fixes the issue
+    // see: https://a11ysupport.io/tests/apg__aria-1-2-combobox-with-list-autocomplete-example#assertion-aria-aria-activedescendant_attribute-convey_value-aria-combobox_role-vo_macos-safari
+    this.isSafari = false;
+    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;
+    // the selected item is based upon the DuetComboboxItem.id value
+    this.selectedItems = new Set();
+    // the activeItem number is based upon the array.index of the array stored in processedItems
+    this.activeItem = undefined;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    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)",
+      },
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default   {
+     * heading: "Valitse:",
+     * item: "{0}, ({1}/{2})",
+     * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
+     * }
+     */
+    this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
+    /**
+     * Theme of the combobox.
+     */
+    this.theme = "";
+    /**
+     * Force the user to make a selection (typing things in the input field will only be used for list search)
+     */
+    this.force = false;
+    /**
+     * A hook to overwrite how the values are displayed in the input field after a User select an item
+     * @example (item) => `${item.name} (${item.value})`
+     * @default undefined
+     */
+    this.formatter = (item) => item && item.name ? item.name : "";
+  }
+  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);
+      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);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      this.isSafari = true;
+    }
+    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", () => {
+      this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false);
+    });
+    this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    //add correct aria attributes to the input element
+    this.input.accessibleAutocomplete = "list";
+    this.input.accessibleControls = "duet-combobox-list-element";
+  }
+  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.bind(this));
+    this.listElement.removeEventListener("click", e => {
+      e.stopPropagation();
+    });
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    // observe resize events to dynamically adjust size of dropdown area
+    this.resizeObserver.observe(this.input);
+    this.listElement.addEventListener("click", e => {
+      e.stopPropagation();
+    });
+  }
+  /**
+   * 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);
+    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) {
+    // 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);
+      }
+    }
+    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) {
+    const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
+    if (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 = await this.formatItem(item[0]);
+      this.duetChange.emit({
+        value: item[0].value,
+        item: item[0],
+        component: "duet-combobox",
+      });
+    }
+    else 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;
+    }
+    this.listOpen = false;
+  }
+  updateInputValue(e) {
+    var _a;
+    this.inputValue = e.detail.value;
+    this.listOpen = String(this.inputValue).length > 0 && ((_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.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);
+  }
+  announceActive(items) {
+    if (!items) {
+      items = this.returnFilteredOrNonFiltered();
+    }
+    if (this.activeItem === undefined || this.activeItem === -1) {
+      return;
+    }
+    const item = items[this.activeItem];
+    this.selectionMsg = 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 => 
+    // filter by name and value
+    // if value contains inputvalue
+    String(item.value).toLowerCase().includes(this.inputValue.toLowerCase()) ||
+      // if name contains input value
+      String(item.name).toLowerCase().includes(this.inputValue.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$1(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+        "duet-combobox": true,
+        [`duet-theme-${this.theme}`]: true,
+      } }, h$1("slot", null), this.isSafari && (h$1("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), h$1("div", { role: "list", class: {
+        "duet-combobox-list": true,
+        open: this.listOpen,
+      }, ref: el => (this.listContainer = el) }, h$1("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
+      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, this.returnFilteredOrNonFiltered().length, this.items.length) }));
+      })))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "activeItem": ["activeItemHandler"]
+  }; }
+  static get style() { return duetComboboxCss; }
+}, [6, "duet-combobox", {
+    "accessibleLabelDefaults": [1, "accessible-label-defaults"],
+    "accessibleLabels": [16],
+    "theme": [1025],
+    "force": [4],
+    "items": [1032],
+    "formatter": [16],
+    "value": [1537],
+    "processedItems": [32],
+    "inputWidth": [32],
+    "inputValue": [32],
+    "selectionMsg": [32],
+    "listOpen": [32],
+    "selectedItems": [32],
+    "activeItem": [32],
+    "formatItem": [64]
+  }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-combobox", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-combobox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCombobox$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCombobox = DuetCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCombobox, defineCustomElement };

package/lib/dist-custom-elements/duet-cookie-consent.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DuetCookieConsent extends Components.DuetCookieConsent, HTMLElement {}
+export const DuetCookieConsent: {
+  prototype: DuetCookieConsent;
+  new (): DuetCookieConsent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;