@duetds/components 8.6.4 → 8.6.6

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

@@ -612,7 +612,7 @@ export class DuetHeader {
                         },
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -639,7 +639,7 @@ export class DuetHeader {
                     "references": {
                         "I18nText": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::I18nText"
                         }
                     }
@@ -998,7 +998,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1019,7 +1019,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1040,7 +1040,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1061,7 +1061,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1082,7 +1082,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1103,7 +1103,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1124,7 +1124,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1145,7 +1145,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1166,7 +1166,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1187,7 +1187,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }
@@ -1208,7 +1208,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderAnalyticsEvent"
                         }
                     }
@@ -1229,7 +1229,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderMobileNavToggleEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderMobileNavToggleEvent"
                         }
                     }
@@ -1250,7 +1250,7 @@ export class DuetHeader {
                     "references": {
                         "DuetHeaderChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-header/duet-header.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-header/duet-header.tsx",
                             "id": "src/components/duet-header/duet-header.tsx::DuetHeaderChangeEvent"
                         }
                     }

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

@@ -158,7 +158,7 @@ export class DuetHeading {
                     "references": {
                         "DuetHeadingWeight": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-heading/duet-heading.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-heading/duet-heading.tsx",
                             "id": "src/components/duet-heading/duet-heading.tsx::DuetHeadingWeight"
                         }
                     }

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

@@ -364,7 +364,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroIconSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
                         }
                     }
@@ -586,7 +586,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroButtonData": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
                         }
                     }
@@ -697,7 +697,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
                         }
                     }
@@ -807,7 +807,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroClickEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
                         }
                     }
@@ -828,7 +828,7 @@ export class DuetHero {
                     "references": {
                         "DuetHeroAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
                             "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
                         }
                     }

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

@@ -778,7 +778,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -802,7 +802,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1044,7 +1044,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1223,7 +1223,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1244,7 +1244,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1265,7 +1265,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1286,7 +1286,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1307,7 +1307,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

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

@@ -101,7 +101,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -125,7 +125,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

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

@@ -124,7 +124,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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

@@ -169,7 +169,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
                         }
                     }
@@ -217,7 +217,7 @@ export class DuetList {
                     "references": {
                         "DuetListVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
                         }
                     }
@@ -241,7 +241,7 @@ export class DuetList {
                     "references": {
                         "DuetListLabelWidth": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
                         }
                     }

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

@@ -176,7 +176,7 @@ export class DuetLogo {
                     "references": {
                         "DuetLogoSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx",
                             "id": "src/components/duet-logo/duet-logo.tsx::DuetLogoSize"
                         }
                     }

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -251,7 +251,7 @@ export class DuetMenuBar {
                     "references": {
                         "DuetMenuBarChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
                             "id": "src/components/duet-menu-bar/duet-menu-bar.tsx::DuetMenuBarChangeEvent"
                         }
                     }

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

@@ -377,7 +377,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -488,7 +488,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
                         }
                     }
@@ -512,7 +512,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
                         }
                     }
@@ -769,7 +769,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalCloseEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
                             "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
                         }
                     }

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

@@ -278,6 +278,18 @@
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
   color: rgb(0, 41, 77);
 }
+.duet-multiselect-checkboxes fieldset {
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+.duet-multiselect-checkboxes fieldset + fieldset {
+  margin-top: 28px;
+}
+.duet-multiselect-checkboxes legend {
+  margin-bottom: 12px;
+  font-size: 1rem;
+  font-weight: 600;
+}
 
 .duet-multiselect-help {
   display: block;

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

@@ -93,4 +93,43 @@ describe("duet-multiselect", () => {
         await page.waitForChanges();
         expect(blurEventSpy).toHaveReceivedEvent();
     });
+    it("should provide a method for setting the selected options", async () => {
+        const page = await createPage(`<duet-multiselect items='[{"label": "One", "value": "1"}, {"label": "Two", "value": "2"}, {"label": "Three", "value": "3"}]'></duet-multiselect>`);
+        const multiselect = await page.find("duet-multiselect");
+        expect(await multiselect.getProperty("value")).toHaveLength(0);
+        await multiselect.callMethod("selectWithValues", ["2", "3"]);
+        expect(await multiselect.getProperty("value")).toEqual([
+            { label: "Two", value: "2" },
+            { label: "Three", value: "3" },
+        ]);
+    });
+    it("should provide property to specify labelled groups of items", async () => {
+        const page = await createPage(`<duet-multiselect></duet-multiselect>`);
+        const multiselect = await page.find("duet-multiselect");
+        const items = [
+            {
+                label: "Group one",
+                items: [
+                    { label: "One", value: "1" },
+                    { label: "Two", value: "2" },
+                ],
+            },
+            {
+                label: "Group two",
+                items: [
+                    { label: "Three", value: "3" },
+                    { label: "Four", value: "4" },
+                ],
+            },
+        ];
+        await multiselect.setProperty("items", items);
+        const multiselectBtn = await page.find("duet-multiselect >>> .duet-multiselect");
+        await multiselectBtn.click();
+        const fieldsets = await page.findAll("duet-multiselect >>> fieldset");
+        expect(fieldsets.length).toEqual(items.length);
+        for (let i = 0; i < items.length; i++) {
+            const legend = await fieldsets[i].find("legend");
+            expect(legend.textContent).toEqual(items[i].label);
+        }
+    });
 });

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

@@ -135,6 +135,7 @@ export class DuetMultiselect {
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
         this.processedItems = [];
+        this.processedGroups = [];
         this.checkboxesVisible = false;
         this.activeDescendant = "";
         this.language = getLanguage();
@@ -188,17 +189,43 @@ export class DuetMultiselect {
             this.multiselectElement.focus(options);
         }
     }
+    /**
+     * Sets the value of the multiselect to contain the items matching the given array. Does not clear the previous value.
+     * If multiple items share the same value that is included in the array, they all get selected.
+     */
+    async selectWithValues(values) {
+        this.processedItems.forEach(item => {
+            if (item.value && !this.value.includes(item) && values.includes(item.value)) {
+                this.value.push(item);
+            }
+        });
+    }
     /**
      * Local methods.
      */
     async refresh() {
-        this.processedItems = parsePossibleJSON(this.items);
+        const items = parsePossibleJSON(this.items);
+        this.processedItems = [];
+        this.processedGroups = [];
+        if (!items || items.length === 0) {
+            return;
+        }
+        if (items[0].items !== undefined) {
+            // given as groups
+            this.processedGroups = items;
+        }
+        else {
+            // gives as items, add them in a single unlabelled group
+            this.processedGroups = [{ label: "", items }];
+        }
+        this.processedGroups.forEach(group => group.items.forEach(item => this.processedItems.push(item)));
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
+        var _a;
         return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
@@ -211,11 +238,11 @@ export class DuetMultiselect {
             }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, 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)), h("slot", { name: "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], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", 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) => {
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && 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.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.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)))));
+            })))))), 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"; }
@@ -318,7 +345,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -448,13 +475,18 @@ export class DuetMultiselect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | DuetMultiselectItem[]",
-                    "resolved": "DuetMultiselectItem[] | string",
+                    "original": "string | DuetMultiselectItem[] | DuetMultiselectItemGroup[]",
+                    "resolved": "DuetMultiselectItemGroup[] | DuetMultiselectItem[] | string",
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
+                        },
+                        "DuetMultiselectItemGroup": {
+                            "location": "local",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItemGroup"
                         }
                     }
                 },
@@ -607,6 +639,7 @@ export class DuetMultiselect {
     static get states() {
         return {
             "processedItems": {},
+            "processedGroups": {},
             "checkboxesVisible": {},
             "activeDescendant": {},
             "language": {}
@@ -629,7 +662,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -650,7 +683,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -671,7 +704,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -704,6 +737,27 @@ export class DuetMultiselect {
                     "text": "Sets focus on the specified `duet-multiselect`. Use this method instead of the global\n`multiselect.focus()`.",
                     "tags": []
                 }
+            },
+            "selectWithValues": {
+                "complexType": {
+                    "signature": "(values: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of the multiselect to contain the items matching the given array. Does not clear the previous value.\nIf multiple items share the same value that is included in the array, they all get selected.",
+                    "tags": []
+                }
             }
         };
     }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -285,7 +285,7 @@ export class DuetNotificationDrawer {
                     "references": {
                         "DuetNotificationDrawerDirection": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
                             "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
                         }
                     }