npm - @duetds/components - Versions diffs - 8.6.6 → 8.6.7 - Mend

@duetds/components 8.6.6 → 8.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (635) hide show

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

@@ -281,7 +281,7 @@ export class DuetInput {
      */
     async addChip(chip) {
         const container = this.element.querySelector(".duet-input-relative");
-        const input = container.querySelector("input");
+        const input = container.querySelector("input:not(duet-chip input)");
         container.insertBefore(chip, input);
     }
     /**
@@ -778,7 +778,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -101,7 +101,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -124,7 +124,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -169,7 +169,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -176,7 +176,7 @@ export class DuetLogo {
                     "references": {
                         "DuetLogoSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -251,7 +251,7 @@ export class DuetMenuBar {
                     "references": {
                         "DuetMenuBarChangeEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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 CHANGED Viewed

@@ -377,7 +377,7 @@ export class DuetModal {
                     "references": {
                         "DuetModalSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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.e2e.js CHANGED Viewed

@@ -132,4 +132,26 @@ describe("duet-multiselect", () => {
             expect(legend.textContent).toEqual(items[i].label);
         }
     });
+    it("should render a badge with number of selected items", async () => {
+        const page = await createPage(`<duet-multiselect></duet-multiselect>`);
+        const multiselect = await page.find("duet-multiselect");
+        const multiselectTrigger = await page.find("duet-multiselect >>> .duet-multiselect");
+        const badgeSelector = "duet-multiselect >>> .duet-multiselect-badge";
+        const items = [
+            { label: "One", value: "1" },
+            { label: "Two", value: "2" },
+            { label: "Three", value: "3" },
+            { label: "Four", value: "4" },
+        ];
+        await multiselect.setProperty("items", items);
+        expect(await page.find(badgeSelector)).toBeNull();
+        await multiselectTrigger.click();
+        const checkbox = await page.find("duet-multiselect >>> duet-checkbox");
+        await checkbox.click();
+        // note: checking match to starting with number as textContent also has <duet-visually-hidden> text
+        expect((await page.find(badgeSelector)).innerText).toMatch(/^1/);
+        await multiselectTrigger.click();
+        await multiselect.callMethod("selectWithValues", ["2", "3"]);
+        expect((await page.find(badgeSelector)).innerText).toMatch(/^3/);
+    });
 });

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

@@ -194,11 +194,8 @@ export class DuetMultiselect {
      * 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);
-            }
-        });
+        const itemsMatchingValues = this.processedItems.filter(item => values.includes(item.value));
+        this.value = [...new Set([...this.value, ...itemsMatchingValues])];
     }
     /**
      * Local methods.
@@ -345,7 +342,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -480,12 +477,12 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItemGroup"
                         }
                     }
@@ -662,7 +659,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -683,7 +680,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -704,7 +701,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }

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

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

package/lib/collection/components/duet-number-input/duet-number-input.js CHANGED Viewed

@@ -1032,7 +1032,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1053,7 +1053,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1074,7 +1074,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1095,7 +1095,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }

package/lib/collection/components/duet-overlay/duet-overlay.js CHANGED Viewed

@@ -150,7 +150,7 @@ export class DuetOverlay {
                     "references": {
                         "OverlayDisplayDevice": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-overlay/duet-overlay.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-overlay/duet-overlay.tsx",
                             "id": "src/components/duet-overlay/duet-overlay.tsx::OverlayDisplayDevice"
                         }
                     }

package/lib/collection/components/duet-pagination/duet-pagination.js CHANGED Viewed

@@ -436,7 +436,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationVariation": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
                         }
                     }
@@ -725,7 +725,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationPageEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
                         }
                     }

package/lib/collection/components/duet-paragraph/duet-paragraph.js CHANGED Viewed

@@ -109,7 +109,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphSize": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
                         }
                     }
@@ -133,7 +133,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphWeight": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
                         }
                     }
@@ -157,7 +157,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphVariation": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphVariation"
                         }
                     }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js CHANGED Viewed

@@ -473,7 +473,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
                             "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
                         }
                     }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js CHANGED Viewed

@@ -341,7 +341,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -362,7 +362,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

package/lib/collection/components/duet-radio/duet-radio.js CHANGED Viewed

@@ -546,7 +546,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

package/lib/collection/components/duet-range-slider/duet-range-slider.js CHANGED Viewed

@@ -567,7 +567,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js CHANGED Viewed

@@ -371,7 +371,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

package/lib/collection/components/duet-scrollable/duet-scrollable.js CHANGED Viewed

@@ -59,19 +59,30 @@ export class DuetScrollable {
     /**
      * Private methods.
      */
-    getScrollPaneElemnets() {
+    getScrollPaneElements() {
         return getElementsFromDefaultSlot(this.element);
     }
     getLastVisibleElement() {
-        const clientWidth = this.scrollPaneElement.clientWidth;
-        const elementIndex = this.getScrollPaneElemnets().findIndex(el => el.getBoundingClientRect().x > clientWidth);
-        return elementIndex;
+        const element = this.getScrollPaneElements().find(el => el.getBoundingClientRect().x +
+            el.getBoundingClientRect().width -
+            this.scrollPaneElement.getBoundingClientRect().x >
+            this.scrollPaneElement.clientWidth);
+        const elementIndex = this.getScrollPaneElements().indexOf(element);
+        //if panel width is less than element width we still want to scroll to next element
+        if (element.clientWidth > this.scrollPaneElement.clientWidth) {
+            return elementIndex;
+        }
+        return elementIndex - 1;
     }
     getFirstVisibleElement() {
-        const arrayOfXValues = this.getScrollPaneElemnets().map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
-        const elementIndex = arrayOfXValues.findIndex(xValue => {
-            return xValue > 0;
-        });
+        const scrollPaneElements = this.getScrollPaneElements();
+        const element = scrollPaneElements.find(el => el.getBoundingClientRect().x > this.scrollPaneElement.getBoundingClientRect().x);
+        const elementIndex = !element ? scrollPaneElements.length : scrollPaneElements.indexOf(element);
+        // if panel width is less than element width we still want to scroll to previous element
+        var currentElIndex = Math.max(elementIndex - 1, 0);
+        if (scrollPaneElements[currentElIndex].clientWidth > this.scrollPaneElement.clientWidth) {
+            return currentElIndex;
+        }
         return elementIndex;
     }
     updateScrollButtons(container = this.scrollPaneElement) {
@@ -92,7 +103,7 @@ export class DuetScrollable {
         }
     }
     scrollToElement(index = this.currentIndex, inline) {
-        const elements = this.getScrollPaneElemnets();
+        const elements = this.getScrollPaneElements();
         if (!elements || elements.length === 0) {
             return;
         }
@@ -127,19 +138,21 @@ export class DuetScrollable {
     }
     scrollLeft() {
         this.scrollPaneAtEnd = false;
-        const first = this.getFirstVisibleElement() - 1;
-        this.scrollToElement(first, "center");
+        const first = this.getFirstVisibleElement();
+        this.scrollToElement(first - 1, "center");
     }
     scrollRight() {
         this.scrollPaneAtStart = false;
-        const last = this.getLastVisibleElement() + 1;
-        this.scrollToElement(last, "center");
+        const last = this.getLastVisibleElement();
+        this.scrollToElement(last + 1, "center");
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
+        const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
+        const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
         return (h(Host, { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -155,7 +168,7 @@ export class DuetScrollable {
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
                 "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
             }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
@@ -163,7 +176,7 @@ export class DuetScrollable {
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
                 "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right-small", size: "small", margin: "none" })))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }