@duetds/components 8.0.6 → 8.1.1

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

@@ -8,671 +8,672 @@ import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterK
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
-  return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
+    return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
 }
 export class DuetMultiselect {
-  constructor() {
-    /**
-     * Own Properties
-     */
-    this.errorId = createID("DuetError");
-    this.labelId = createID("DuetLabel");
-    this.topCaptionId = createID("DuetCaptionTop");
-    this.selectedLangObject = {
-      en: "selected",
-      fi: "valittu",
-      sv: "vald",
-    };
-    this.selectAllLabel = {
-      en: "Select all",
-      fi: "Valitse kaikki",
-      sv: "Välj alla",
-    };
-    this.clearAllLabel = {
-      en: "Clear all",
-      fi: "Tyhjennä kaikki",
-      sv: "Rensa alla",
-    };
-    this.placeholderLabel = {
-      en: "Hint",
-      fi: "Vihje",
-      sv: "Tips",
-    };
-    /**
-     * Component event handling.
-     */
-    this.onChange = (ev) => {
-      this.duetChange.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-multiselect",
-      });
-    };
-    this.onBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-multiselect",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.duetFocus.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-multiselect",
-      });
-    };
-    this.onMultiselectKeyDown = (e) => {
-      if (isEscapeKey(e) || isTabKey(e)) {
-        if (this.checkboxesVisible) {
-          this.checkboxesVisible = false;
-          this.multiselectElement.focus();
-          e.preventDefault();
-        }
-      }
-    };
-    this.onMultiselectInputKeyDown = (e) => {
-      if (isEnterKey(e)) {
-        e.preventDefault();
-        this.toggleCheckboxes();
-        setTimeout(() => {
-          if (this.checkboxesVisible) {
-            const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(this.allControls ? -2 : 0)}`);
-            if (firstOption) {
-              firstOption.focus();
+    constructor() {
+        /**
+         * Own Properties
+         */
+        this.errorId = createID("DuetError");
+        this.labelId = createID("DuetLabel");
+        this.topCaptionId = createID("DuetCaptionTop");
+        this.selectedLangObject = {
+            en: "selected",
+            fi: "valittu",
+            sv: "vald",
+        };
+        this.selectAllLabel = {
+            en: "Select all",
+            fi: "Valitse kaikki",
+            sv: "Välj alla",
+        };
+        this.clearAllLabel = {
+            en: "Clear all",
+            fi: "Tyhjennä kaikki",
+            sv: "Rensa alla",
+        };
+        this.placeholderLabel = {
+            en: "Hint",
+            fi: "Vihje",
+            sv: "Tips",
+        };
+        /**
+         * Component event handling.
+         */
+        this.onChange = (ev) => {
+            this.duetChange.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-multiselect",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.duetBlur.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-multiselect",
+            });
+        };
+        this.onFocus = (ev) => {
+            this.duetFocus.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-multiselect",
+            });
+        };
+        this.onMultiselectKeyDown = (e) => {
+            if (isEscapeKey(e) || isTabKey(e)) {
+                if (this.checkboxesVisible) {
+                    this.checkboxesVisible = false;
+                    this.multiselectElement.focus();
+                    e.preventDefault();
+                }
             }
-          }
-        }, 200);
-      }
-    };
-    this.onCheckboxKeyDown = (e, key) => {
-      let nextOption;
-      if (isArrowLeftKey(e) || isArrowUpKey(e)) {
-        nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key - 1)}`);
-      }
-      else if (isArrowRightKey(e) || isArrowDownKey(e)) {
-        nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key + 1)}`);
-      }
-      if (nextOption) {
-        nextOption.focus();
-        e.preventDefault();
-        this.activeDescendant = nextOption.id;
-      }
-    };
-    this.toggleCheckboxes = () => {
-      this.checkboxesVisible = !this.checkboxesVisible;
-    };
-    this.toggleCheckbox = (e, item) => {
-      this.value = toggleInArray(this.value, item);
-      this.onChange(e);
-    };
-    this.handleSelectAllClick = (e) => {
-      this.value = this.processedItems;
-      this.onChange(e);
-    };
-    this.handleClearAllClick = (e) => {
-      this.value = [];
-      this.onChange(e);
-    };
-    this.getOptionIdentifier = (key) => {
-      return `${this.identifier}-option-${key}`;
-    };
-    this.getDescribedBy = () => {
-      const describedBy = [];
-      if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy.push(this.topCaptionId);
-      }
-      if (this.accessibleDescribedBy) {
-        describedBy.push(this.accessibleDescribedBy);
-      }
-      if (this.error) {
-        describedBy.push(this.errorId);
-      }
-      return describedBy.length > 0 ? describedBy.join(" ") : null;
-    };
-    this.processedItems = [];
-    this.checkboxesVisible = false;
-    this.activeDescendant = "";
-    this.language = getLanguage();
-    this.margin = "auto";
-    this.error = "";
-    this.accessibleLiveError = "polite";
-    this.expand = false;
-    this.value = [];
-    this.theme = "";
-    this.labelHidden = false;
-    this.identifier = createID("DuetMultiselect");
-    this.allControls = false;
-    this.placeholder = "";
-    this.caption = undefined;
-    this.items = undefined;
-    this.disabled = false;
-    this.label = "label";
-    this.accessibleDescribedBy = undefined;
-    this.tooltip = "";
-    this.tooltipDirection = "auto";
-  }
-  handleFocus(e) {
-    const isClickOutside = e.composedPath().every(node => node !== this.element);
-    if (isClickOutside) {
-      this.checkboxesVisible = false;
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.isCaptionVisible = !!this.caption;
-    this.refresh();
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
-   * `multiselect.focus()`.
-   */
-  async setFocus(options) {
-    if (this.multiselectElement) {
-      this.multiselectElement.focus(options);
-    }
-  }
-  /**
-   * Local methods.
-   */
-  async refresh() {
-    this.processedItems = parsePossibleJSON(this.items);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { class: {
-        "duet-m-0": this.margin === "none",
-        "duet-expand": this.expand,
-      } }, h("div", { class: {
-        "duet-multiselect-container": true,
-        "duet-label-hidden": this.labelHidden,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-input-top-caption-shown": this.isCaptionVisible,
-        "has-error": !!this.error,
-      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language] }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
-        "duet-multiselect-checkboxes": true,
-        "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-      }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
-      this.processedItems.map((item, key) => {
-        var _a, _b;
-        return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-      }))), h("span", { class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
-  }
-  static get is() { return "duet-multiselect"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-multiselect.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-multiselect.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
+        };
+        this.onMultiselectInputKeyDown = (e) => {
+            if (isEnterKey(e)) {
+                e.preventDefault();
+                this.toggleCheckboxes();
+                setTimeout(() => {
+                    if (this.checkboxesVisible) {
+                        const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(this.allControls ? -2 : 0)}`);
+                        if (firstOption) {
+                            firstOption.focus();
+                        }
+                    }
+                }, 200);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the select in error state along with an error message."
-        },
-        "attribute": "error",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "accessibleLiveError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"off\" | \"polite\" | \"assertive\"",
-          "resolved": "\"assertive\" | \"off\" | \"polite\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
-        },
-        "attribute": "accessible-live-error",
-        "reflect": false,
-        "defaultValue": "\"polite\""
-      },
-      "expand": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Expands the input to fill 100% of the container width."
-        },
-        "attribute": "expand",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetMultiselectItem[]",
-          "resolved": "DuetMultiselectItem[]",
-          "references": {
-            "DuetMultiselectItem": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
-              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
+        };
+        this.onCheckboxKeyDown = (e, key) => {
+            let nextOption;
+            if (isArrowLeftKey(e) || isArrowUpKey(e)) {
+                nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key - 1)}`);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of multiselect"
-        },
-        "defaultValue": "[]"
-      },
-      "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"
+            else if (isArrowRightKey(e) || isArrowDownKey(e)) {
+                nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key + 1)}`);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the select."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the select."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID(\"DuetMultiselect\")"
-      },
-      "allControls": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, the multiselect will display buttons to select or deselect all items.\nThis should be used when there are many items, consider when the number of items is more than 5."
-        },
-        "attribute": "all-controls",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hint text to display."
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "caption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caption (underneath label) that can be set as a way of adding extra information"
-        },
-        "attribute": "caption",
-        "reflect": false
-      },
-      "items": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | DuetMultiselectItem[]",
-          "resolved": "DuetMultiselectItem[] | string",
-          "references": {
-            "DuetMultiselectItem": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
-              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
+            if (nextOption) {
+                nextOption.focus();
+                e.preventDefault();
+                this.activeDescendant = nextOption.id;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of items to choose from"
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for the select."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"label\""
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the input."
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip to display next to the label of the input."
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "tooltipDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTooltipDirection",
-          "resolved": "\"auto\" | \"left\" | \"right\"",
-          "references": {
-            "DuetTooltipDirection": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTooltipDirection"
+        };
+        this.toggleCheckboxes = () => {
+            this.checkboxesVisible = !this.checkboxesVisible;
+        };
+        this.toggleCheckbox = (e, item) => {
+            this.value = toggleInArray(this.value, item);
+            this.onChange(e);
+        };
+        this.handleSelectAllClick = (e) => {
+            this.value = this.processedItems;
+            this.onChange(e);
+        };
+        this.handleClearAllClick = (e) => {
+            this.value = [];
+            this.onChange(e);
+        };
+        this.getOptionIdentifier = (key) => {
+            return `${this.identifier}-option-${key}`;
+        };
+        this.getDescribedBy = () => {
+            const describedBy = [];
+            if (this.isCaptionVisible && this.topCaptionId) {
+                describedBy.push(this.topCaptionId);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-        },
-        "attribute": "tooltip-direction",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "processedItems": {},
-      "checkboxesVisible": {},
-      "activeDescendant": {},
-      "language": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Callback for when the value changed."
-        },
-        "complexType": {
-          "original": "DuetMultiselectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
-          "references": {
-            "DuetMultiselectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
-              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
+            if (this.accessibleDescribedBy) {
+                describedBy.push(this.accessibleDescribedBy);
             }
-          }
-        }
-      }, {
-        "method": "duetFocus",
-        "name": "duetFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select has focus."
-        },
-        "complexType": {
-          "original": "DuetMultiselectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
-          "references": {
-            "DuetMultiselectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
-              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
+            if (this.error) {
+                describedBy.push(this.errorId);
             }
-          }
+            return describedBy.length > 0 ? describedBy.join(" ") : null;
+        };
+        this.processedItems = [];
+        this.checkboxesVisible = false;
+        this.activeDescendant = "";
+        this.language = getLanguage();
+        this.margin = "auto";
+        this.error = "";
+        this.accessibleLiveError = "polite";
+        this.expand = false;
+        this.value = [];
+        this.theme = "";
+        this.labelHidden = false;
+        this.identifier = createID("DuetMultiselect");
+        this.allControls = false;
+        this.placeholder = "";
+        this.caption = undefined;
+        this.items = undefined;
+        this.disabled = false;
+        this.label = "label";
+        this.accessibleDescribedBy = undefined;
+        this.tooltip = "";
+        this.tooltipDirection = "auto";
+    }
+    handleFocus(e) {
+        const isClickOutside = e.composedPath().every(node => node !== this.element);
+        if (isClickOutside) {
+            this.checkboxesVisible = false;
         }
-      }, {
-        "method": "duetBlur",
-        "name": "duetBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select loses focus."
-        },
-        "complexType": {
-          "original": "DuetMultiselectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
-          "references": {
-            "DuetMultiselectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
-              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
-            }
-          }
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.isCaptionVisible = !!this.caption;
+        this.refresh();
+    }
+    connectedCallback() {
+        connectLanguageChangeObserver(this);
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
+    /**
+     * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
+     * `multiselect.focus()`.
+     */
+    async setFocus(options) {
+        if (this.multiselectElement) {
+            this.multiselectElement.focus(options);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    /**
+     * Local methods.
+     */
+    async refresh() {
+        this.processedItems = parsePossibleJSON(this.items);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, { class: {
+                "duet-m-0": this.margin === "none",
+                "duet-expand": this.expand,
+            } }, h("div", { class: {
+                "duet-multiselect-container": true,
+                "duet-label-hidden": this.labelHidden,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-input-top-caption-shown": this.isCaptionVisible,
+                "has-error": !!this.error,
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language] }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+                "duet-multiselect-checkboxes": true,
+                "duet-multiselect-checkboxes-active": this.checkboxesVisible,
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            this.processedItems.map((item, key) => {
+                var _a, _b;
+                return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
+            }))), h("span", { class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+    }
+    static get is() { return "duet-multiselect"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-multiselect.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-multiselect.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the select in error state along with an error message."
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "accessibleLiveError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"off\" | \"polite\" | \"assertive\"",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+                },
+                "attribute": "accessible-live-error",
+                "reflect": false,
+                "defaultValue": "\"polite\""
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the input to fill 100% of the container width."
+                },
+                "attribute": "expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetMultiselectItem[]",
+                    "resolved": "DuetMultiselectItem[]",
+                    "references": {
+                        "DuetMultiselectItem": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of multiselect"
+                },
+                "defaultValue": "[]"
+            },
+            "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 select."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the select."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID(\"DuetMultiselect\")"
+            },
+            "allControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the multiselect will display buttons to select or deselect all items.\nThis should be used when there are many items, consider when the number of items is more than 5."
+                },
+                "attribute": "all-controls",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text to display."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption (underneath label) that can be set as a way of adding extra information"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DuetMultiselectItem[]",
+                    "resolved": "DuetMultiselectItem[] | string",
+                    "references": {
+                        "DuetMultiselectItem": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items to choose from"
+                },
+                "attribute": "items",
+                "reflect": false
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the select."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"label\""
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the input."
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip to display next to the label of the input."
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "tooltipDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTooltipDirection",
+                    "resolved": "\"auto\" | \"left\" | \"right\"",
+                    "references": {
+                        "DuetTooltipDirection": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTooltipDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+                },
+                "attribute": "tooltip-direction",
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-multiselect`. Use this method instead of the global\n`multiselect.focus()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "items",
-        "methodName": "refresh"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleFocus",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "processedItems": {},
+            "checkboxesVisible": {},
+            "activeDescendant": {},
+            "language": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback for when the value changed."
+                },
+                "complexType": {
+                    "original": "DuetMultiselectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+                    "references": {
+                        "DuetMultiselectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetFocus",
+                "name": "duetFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select has focus."
+                },
+                "complexType": {
+                    "original": "DuetMultiselectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+                    "references": {
+                        "DuetMultiselectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetBlur",
+                "name": "duetBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses focus."
+                },
+                "complexType": {
+                    "original": "DuetMultiselectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+                    "references": {
+                        "DuetMultiselectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-multiselect`. Use this method instead of the global\n`multiselect.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "refresh"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleFocus",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }