@duetds/components 10.4.0 → 10.6.0

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

@@ -28,9 +28,11 @@ export class DuetChip {
         /**
          * Variation of the chip.
          * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
-         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
-         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
-         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with
+         * a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of
+         * filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,
+         * and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,
+         * and it should be used with a value and name.
          */
         this.variation = "button";
         /**
@@ -64,6 +66,10 @@ export class DuetChip {
          * Use this property to add an aria-haspopup attribute.
          */
         this.accessiblePopup = "false";
+        /**
+         * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+         */
+        this.accessibleDescribedBy = "";
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -95,6 +101,9 @@ export class DuetChip {
             radioInput.value = this.value;
             radioInput.checked = this.checked;
             radioInput.ariaLabel = this.element.textContent;
+            if (!!this.accessibleDescribedBy) {
+                radioInput.setAttribute("aria-describedby", this.accessibleDescribedBy);
+            }
             if (slotInput) {
                 this.radioInputListenersRemove(radioInput);
             }
@@ -104,13 +113,15 @@ export class DuetChip {
             this.radioInputListenersAdd(radioInput);
             this.focusableElement = radioInput;
         };
+        this.originalFilterChipText = "";
+        this.originalFilterChipValue = "";
         this.popupSetUp = () => {
             const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
             if (popup) {
                 this.popupElement = popup;
                 popup.controller = this.element;
-                const originalText = this.element.textContent;
-                const originalValue = this.value;
+                this.originalFilterChipText = this.element.textContent;
+                this.originalFilterChipValue = this.value;
                 if (!popup.id) {
                     popup.id = "popup-menu";
                 }
@@ -135,8 +146,8 @@ export class DuetChip {
                         }
                         else {
                             clearActive();
-                            this.element.textContent = originalText;
-                            this.value = originalValue;
+                            this.element.textContent = this.originalFilterChipText;
+                            this.value = this.originalFilterChipValue;
                             this.checked = false;
                         }
                         this.emitChange(evt);
@@ -203,16 +214,14 @@ export class DuetChip {
             }
         };
         /**
-         * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+         * Stop prevent default if popup is present, as the popup controls value and checked state.
          */
         this.onFilterClick = (evt) => {
             if (this.disabled) {
-                evt.stopPropagation();
                 evt.preventDefault();
                 return;
             }
             if (this.popupElement) {
-                evt.stopPropagation();
                 evt.preventDefault();
                 this.popupElement.toggle();
             }
@@ -221,7 +230,6 @@ export class DuetChip {
          * Remove input chip
          */
         this.onRemoveClick = (evt) => {
-            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
             evt === null || evt === void 0 ? void 0 : evt.preventDefault();
             this.duetRemove.emit({
                 originalEvent: evt,
@@ -290,6 +298,11 @@ export class DuetChip {
     getAccessibleInputChipLabel() {
         return `${this.element.textContent}${this.selected ? ` (${getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
     }
+    getAccessibleFilterLabel() {
+        return this.value !== this.originalFilterChipValue
+            ? `${this.originalFilterChipText}: ${this.element.textContent}`
+            : undefined;
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -334,7 +347,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'a02dfd14dbc6adb2b4603f1032071f973ed2ccde', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'f6f837561846f06857082a732a01dc00be276bab', class: classes }, h("button", Object.assign({ key: '614901de9dce1a3613e710f2144dd9cd8f3e635a', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'f0bbf7f4631fb86dc23a381c25c03cabe947cc3e', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '6a7c79b76c0fd5d06b4b4d3f6640459cd6d6298d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '397dbf6b64587f75b1fc3f3d3f0bf12a0e4df881' })))), this.variation === "input" && (h("span", { key: '5ee6a9d0856e2879420676696e360c78205041cc', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '4bbbbdece24e710ce9933ff9f91a9c800b3e58fe', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'd1aef801dcf90532b29fc97c01b7456d8487f44a', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'a63f98e142a1a3b23fc95d5fc1da841d377e10ce', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '11f084e182d0c9d6aa3662bcce61235e8ec76fcf' })), h("button", { key: '777701d86d7a3c4dc31e94d11e3e127ed7d2e1fd', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '856fed5273e55797d4824c153cf2cb3278e9a2b4', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '679cda39bb299541877fe34081bc414119d49455', class: classes }, h("input", Object.assign({ key: '7ccb0cad55edef64e3d261416384871b5474908e', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'c0bc9afaac898ec41d39ae2fd4908389b3ac065a', htmlFor: identifier }, this.icon && (h("span", { key: '15038fc3a98b2486a950d1b64d2b54ee6e479393', class: "duet-chip-icon-container" }, h("duet-icon", { key: '592062e0add70bea207fef298935a3c2d0a6fdb4', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'e55ffd29e3d14b71be6c15f59bc36395d5868269', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '5aab1d1c1dfae62c0801d8b726cd78ce24fb8c2d' }), this.popupElement && (h("span", { key: '8ce9e5d7685346af76deb8d9561e149033b723c5', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'a6a23f49aa4b6a182edd3b135b695a42089b8c5a', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '6d61938382d8ff58e4a817cce31928d191cf5abb', class: classes }, h("slot", { key: '72b0c769e2bee8de5fc6f834232aae55555e7835', name: "input" }), h("label", { key: '3ad924385c4d43e905cc42efaa016fd90e3854b5', htmlFor: identifier }, this.icon && (h("span", { key: 'e5d698e18b0bf9e37db7b13fc4a96124736be144', class: "duet-chip-icon-container" }, h("duet-icon", { key: '3101dbabb443a5b23cc7c94ad5bbdb0fbbcc930b', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '0084200969cb3a17c048869ba10fdefd28dbc7ed', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'e43b1bdf08e27bf2dcc164a45bf088451b742e88' }))))));
+        return (h(Host, { key: '84203a4f6d7de284823eb560bfb95b2aec1ac5e4', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '3c735a109cf161c40ff2eb4cdd3ab6ae9ccd07f1', class: classes }, h("button", Object.assign({ key: 'd91978a69db645b988514f9fe147ff6a0e618f06', id: identifier, "aria-label": this.accessibleLabel, "aria-describedby": this.accessibleDescribedBy || undefined, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '00a9bfa1e9b1654a6b1bdbd47298f54ccdc445f5', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '2f8756f5ffb41e04e5842dab15f1b908086c753d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '2e791bd8bab1495608208ad696fe9150ddc28e34' })))), this.variation === "input" && (h("span", { key: 'd6a9ece4abe8ebac562a31e3970255bbe4f8eadd', class: classes }, h("button", Object.assign({ key: 'dbb7a3ee7849bb53b58bae7dcb6373ec685de638', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.getAccessibleInputChipLabel(), "aria-describedby": this.accessibleDescribedBy, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '1e0b295b70924c7bbaf945ba1af950f63668c5a8', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '1d5ec89006c85f4b8a630215a19055d863c67416', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '5f52df5a6d4d675f24a6bd927593e336612997f5' })), h("button", { key: 'f056e733dcc146eed6228a060736690a33c40311', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '6f052eca141e3eea229954f7034c479d14c38d6f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'b573900d3ad93f1e8f49bb1f27e7d1d5e87f1ad3', class: classes }, h("input", Object.assign({ key: 'd558bee064252fff70ef6db2b7292d8e5019bd78', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.getAccessibleFilterLabel(), "aria-describedby": this.accessibleDescribedBy || undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '7f88107a9734bd1142d00dc26ce1ceed694b0904', htmlFor: identifier }, this.icon && (h("span", { key: '35559b51d65f9d609edebe6d641c11f936b43bd2', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a1a51b616e4fb7c9d949bfca74a6cb1a7fa549a5', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '320133b510ed5702a9fd1a30f01deb9b266531f8', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'b1133a5c686b6c8fc8a6f7d16281b25a584f8943' }), this.popupElement && (h("span", { key: 'd6d6785289ba11bfcb83877c45f85e9ad9f43683', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '3c930adbf23abfeee3d2c5fcbbb151878a4b9a39', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'aa5035fea2416069bc01fe07a28b3da134fdd886', class: classes }, h("slot", { key: 'f861682874396c57779c427fb4f89556884f9434', name: "input" }), h("label", { key: '80a7465dae485bf1cdcbee5b10210dc158c6425b', htmlFor: identifier }, this.icon && (h("span", { key: 'dc5ffe43af42a08253de88bdc17a16022cd3a40d', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'c0b3326871d1f440b1196fdef2d6a6961b8b883f', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'f6d6f16565393969a6945d11f00736726e95aef1', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8ba0c81daff6bc6f966afd5f75582a89f932e8b1' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -363,7 +376,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology. With input variation this is not used,\nas the accessible label is automatically generated."
+                    "text": "Adds accessible label for the chip that is used by screen readers and other assistive technology. Has effect only\nwith \"button\" variation as for the other variations the accessible label is automatically generated."
                 },
                 "getter": false,
                 "setter": false,
@@ -379,7 +392,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
                         }
                     }
@@ -388,7 +401,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nRadio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name."
+                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with\na value. Filter can also be used with a popup-menu - then the initial text describes the type of category of\nfiltering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,\nand the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,\nand it should be used with a value and name."
                 },
                 "getter": false,
                 "setter": false,
@@ -405,7 +418,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipSize"
                         }
                     }
@@ -434,7 +447,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Id of the DuetPopupMenu that is controlled by the chip."
+                    "text": "Id of the DuetPopupMenu that is controlled by the chip. Works only with \"filter\" variation."
                 },
                 "getter": false,
                 "setter": false,
@@ -650,6 +663,26 @@ export class DuetChip {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "\"false\""
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "attribute": "accessible-described-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
@@ -679,7 +712,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -700,7 +733,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -721,7 +754,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -742,7 +775,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '9f320db3e8549d7d12de134f013789c1f412b947', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'a8fe605a230fd34d9714bd5194c281b87394bd24', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '91fabdc145a023efc8317ef543296d4e5e2509d9', class: {
+        return (h(Host, { key: '588662850d35631ef6cb3c242d050f4049af0f59', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '301f41ca7f4d90729bffe6940380d56b4d226407', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'b0c88fd8e22781c438ec744fc2b24b6263ecf272', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '9a418c3b3cd7c451f52003eb5efe16e90a4d5841', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '389644f6a51bf281434c674aefc560e35dec4a6e', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -263,13 +263,13 @@ export class DuetChoice {
          * Local methods
          */
         this.toggleChecked = ev => {
+            // As label click by default toggles the input, but we handle
+            // toggling here, prevent default.
             ev.preventDefault();
-            ev.stopPropagation();
             if (this.getDisabled()) {
                 return;
             }
-            // if it's a radio button, and it's already checked
-            // we shouldn't fire an event, so exit early
+            // For a checked radio button do not toggle checkedness nor emit event.
             if (this.type === "radio" && this.checked) {
                 return;
             }
@@ -424,7 +424,7 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c4b3a5c501d38245acc5af3e2b9f544bd0bf7072', class: {
+        return (h(Host, { key: '161ca837a384fd96fde8171eb0ee9a922f348740', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
                 "vertical-stretch": this.groupDirection === "horizontal",
@@ -433,10 +433,10 @@ export class DuetChoice {
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: '795598769dac455ce019fafc78a0da012fab367e', class: {
+            } }, h("div", { key: '9b1f7f73d1e644294e06780f748a5b5c86f3c419', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '7c2d292a71e2c29410fe1b25b23f21d2331a2441', class: {
+            } }, h("div", { key: '5bd120316eff11e496393cc3d41401c7523d1fdc', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -445,16 +445,16 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("slot", { key: '7c8737f5f56691e6d91b1ef6aa88d4d429a91853', name: "choiceinput" }), h("label", { key: '956d1a8a3e617e20822cb45e16510552377c689a', class: {
+            } }, h("slot", { key: '25b753b3d13766c86e7c03e48ecde9ee345151c9', name: "choiceinput" }), h("label", { key: 'd113e5e6012cd5606552b6964c0f792b992483af', class: {
                 "duet-choice-label": true,
                 "has-before-text": this.hasBeforeText,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '8e06e00faf592c2217bcdf4125de0a3fbe688226', name: "before-text" }), this.icon && (h("div", { key: 'a03eb510213a5dacea0ea1a8fba5c59e3f7b5adf', class: "duet-choice-card-icon" }, h("duet-icon", { key: '6f1da454489ebc91e044c73bcaa72e4dc0cbc434', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '7ae5d20c3621b1ea86a08e01752a1501f4c6141f', class: "duet-choice-card-text" }, h("div", { key: '48924d49aa8990d06b898d5e859d3259340424f3' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '159e947250b2e752ede4b9e1cc239a17beb56e4a' }, h("duet-spacer", { key: '841d4ceb579eafb87c381f78c4a62d6943480702', size: "xx-small" }), h("duet-caption", { key: 'da80efff2d5db1ac58bcba1074d2acd8ebe49fc4', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '990e772b8ed9d22a20f5a6718d5884d49135b6b1' }, h("duet-spacer", { key: '691495c8aeb63a55951a36c28f15bcb049c9d36e', size: "xx-small" }), h("slot", { key: 'ba5ca5f8c750aa685ae9560f482401e315e1700b', name: "additional" })))), h("div", { key: 'a5a27faf19b806f0cbe5d78c751acbc05cd70a4e' }, h("div", { key: '5191f1bc54972485f2850139cf7dedb0c66e0f69', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'abe835c0eb8f2917a1e1e87b883d9a43c8883ae6', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '232418bd6f978e77039ebea2bdea0388efeae571', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '1ab6a902a2a1e6ea5ab7e075a2318482cf0a1f75', name: "before-text" }), this.icon && (h("div", { key: '524b6f9260ab2e3bab12f933ad14e744b1401a12', class: "duet-choice-card-icon" }, h("duet-icon", { key: 'b969cf6e06ffaf643aa701c37d4541e36f4e16a8', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '9cc50495673c27a7c6a5f3bdb14c609e6a4601f8', class: "duet-choice-card-text" }, h("div", { key: 'c87f5c7fbfcb824cd962b47f5b245b0d113cb04b' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '8b325a22769d880383b1b3b24e531306b83bc082' }, h("duet-spacer", { key: '7d0b9e0b85d3ed5d5da0bcad6991d17ceb385587', size: "xx-small" }), h("duet-caption", { key: '3a3a799147caa313ca58a101dc47e5149c0c214f', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: 'ebea33b278a48a2d1277df23682aff24ffca5f93' }, h("duet-spacer", { key: 'c06cf1daace2056cfc11c90e2fdbe2e3d5a02281', size: "xx-small" }), h("slot", { key: '952ec73f80beb3dc70550cc7f294f3cc19466109', name: "additional" })))), h("div", { key: 'c011bec512f287c09ac07c7eb27351bdf035d95f' }, h("div", { key: 'df64779e16fd3eb7a476794b11516433f7d9cdce', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: '94314b297dc613c45adaa647eeec06f93b01e325', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: 'dd3fc995ac9ac436708557efc5319b7c081d76e8', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'cd5726ddd6b87acb1c4a8b0661906c4555c8371a', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'd2d3d9bc3e7862c2f01ba3b2ad27dd7662c0a8a4', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'eab4a0209ba1f4fe2bb7a4be8971f843a67b77e6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'a78097639b91f3c310e490e8cfc23040a7dfcb48', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'a4a43850eb0cbbb171ff87b7834e135247d5f4c8', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'd081dffa05b32cd86475b5dcaed06d8d12af4b85', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
             } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
@@ -1221,7 +1221,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1242,7 +1242,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1263,7 +1263,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -75,7 +75,7 @@ export class DuetChoiceGroup {
             if (mutationList.some(r => {
                 var _a;
                 return ((_a = r.removedNodes) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice");
+                    Array.from(r.removedNodes.values()).some(n => n.nodeName.toLowerCase() === "duet-choice" && this.choices.has(n));
             })) {
                 this.updateChoices();
             }
@@ -145,13 +145,11 @@ export class DuetChoiceGroup {
     async updateChoices() {
         var _a;
         const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
+        const allChoices = Array.from(this.element.querySelectorAll("duet-choice"));
+        const ownChoices = allChoices.filter(choice => !allChoices.includes(choice.parentElement.closest("duet-choice")));
         let hasChecked = false;
         this.choices.clear();
-        this.element.querySelectorAll("duet-choice").forEach((choice) => {
-            if (choice.closest("duet-choice-group") === this.element) {
-                this.choices.add(choice);
-            }
-        });
+        ownChoices.forEach(choice => this.choices.add(choice));
         // Walk the DOM in reverse order, since the last selected one wins
         for (const choice of Array.from(this.choices)) {
             choice.name = this.name;
@@ -183,14 +181,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '39267534dcf19f7f942ef44d869d302552ad8463', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: '0d7434c28155b9472c8819d53c34843052a58d0d', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '1e292babf2206d42d58c46f88bed02959e595dc1', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '435735b34c7f437aba23bda2eebd7fa78aa30f3d', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '390312b35af123116ec5919b31f61d9499559813', name: "tooltip", slot: "tooltip" }), h("div", { key: 'fb68426f6c7feac6c767511bcaccfb6585515e3e', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '5b26fd1d7d1239fdcdcb6d736445a6366995c3bc' })))));
+            } }, h("duet-fieldset", { key: 'd0abc308f9f4e0b001efb4923b0e5203ae1d00a6', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'f8e3bbac49fdb91180c3caa1b32e7d6eb1305086', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9ebac012a0024a84eaa3b320a9d1aca91bb48480', name: "tooltip", slot: "tooltip" }), h("div", { key: '9b811428dda8073221eedb0b5a64ddff1662828d', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '22ab1bec355e45e4bd35c68e2d9c86815b99852f' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -356,7 +356,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleWeight": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
                         }
                     }
@@ -382,7 +382,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleHeadingFontSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
                         }
                     }
@@ -489,7 +489,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
                         }
                     }

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

@@ -545,7 +545,6 @@ export class DuetCombobox {
     // Event handlers
     onListClick(e, item) {
         e.preventDefault();
-        e.stopPropagation();
         // update selected item with id
         if (this.multiple) {
             this.addSelectedItem(item.id, true);
@@ -854,7 +853,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     }
@@ -984,7 +983,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
                         }
                     }
@@ -1008,7 +1007,7 @@ export class DuetCombobox {
                         },
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     },

package/lib/collection/components/duet-contact-card/duet-contact-card.css

@@ -53,6 +53,9 @@
     gap: 20px;
   }
 }
+.duet-contact-card picture {
+  display: block;
+}
 .duet-contact-card .image {
   width: 4rem;
   height: 4rem;

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -4,6 +4,8 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { DuetPicture } from "../../utils/picture-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
 export class DuetContactCard {
     constructor() {
         /**
@@ -47,10 +49,19 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', class: {
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.name || "",
+                loading: "lazy",
+                class: "image",
+            },
+            sources: parsePossibleJSON(this.sources),
+        };
+        return (h(Host, { key: 'f64dabbe00a4d4f03132a6adc7bc3b95bdd6042a', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0f5bf8d1828462b3f5e6aa9f5d7e11b338a2b61c', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: 'c7f1a34d6324e755b84db0dc4da6ccfe23c2caea' }, this.name && (h("duet-heading", { key: 'b5e344e3a442dd32b215a64c5ac5050004205cd2', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'c0691195632640e79ff0138fd59b974764f4e653', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '69b2e8b159c01ac6a10b0e9f5db6484e24d7ba88', class: "email" }, h("duet-icon", { key: '610229dce2bd62cdd469f1507a3d7ab2fb9bbf2e', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b8de1672468624fb4d187f2284d59057abc6fc02', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'f1f0f4cb51fb389b4af742d8aff457575ba2fea8', class: "phone" }, h("duet-icon", { key: 'bf01da4d50e3c15d6e5e6578e560746cd0290cdc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b13decd3ea2cbe80e5eb96f4214db65bcf318918', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'e9d62c80a434400828e323a802e873df327e9c28', class: "call-to-action" }, h("duet-button", { key: '5603fe9f97b490a96cfb04cb6efbc98093d8e216', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6fd00f636dd39f1ad02f62fa2a63cfe7f00f67b2' }), h("slot", { key: 'f91dc7abe608519b46f5bf421f09258cabdda749' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -137,6 +148,31 @@ export class DuetContactCard {
                 "setter": false,
                 "reflect": false
             },
+            "sources": {
+                "type": "string",
+                "attribute": "sources",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "name": {
                 "type": "string",
                 "attribute": "name",

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -127,7 +127,7 @@ export class DuetCookieConsent {
                     "references": {
                         "DuetCookieConsentEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
                             "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
                         }
                     }

package/lib/collection/components/duet-date-picker/date-picker-month.js

@@ -5,8 +5,9 @@ import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 import { DatePickerDay } from "./date-picker-day";
 import { getViewOfMonth, inRange, isEqual } from "./date-utils";
+import { isDateDisallowed } from "./disallowed-days";
 import { chunk } from "./utils";
-export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
+export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, disallowWeekends, disallowBankHolidays, disallowedDates, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
     const { dayLabels } = i18n[language];
     const today = new Date();
     const days = getViewOfMonth(focusedDate);
@@ -19,7 +20,8 @@ export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme
     }
     return (h("div", { role: "application" }, h("table", { role: "presentation", class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
         // @ts-ignore
-        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max) &&
+            !isDateDisallowed(day, { disallowWeekends, disallowBankHolidays, disallowedDates }), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
             if (el && isEqual(day, focusedDate)) {
                 focusedDayRef(el);
             }

package/lib/collection/components/duet-date-picker/date-utils.js

@@ -140,6 +140,13 @@ export function setYear(date, year) {
     d.setFullYear(year);
     return d;
 }
+/**
+ * Check if date falls on a Saturday or Sunday
+ */
+export function isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+}
 /**
  * Check if date is within a min and max
  */