@duetds/components 10.5.0 → 10.7.0

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

@@ -12,6 +12,7 @@ import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
 import { DatePickerMonth } from "./date-picker-month";
 import { addDays, clamp, endOfMonth, endOfWeek, inRange, isEqual, parseDate, parseISODate, printDate, printISODate, setMonth, setYear, startOfMonth, startOfWeek, } from "./date-utils";
+import { isDateDisallowed } from "./disallowed-days";
 import { createShortcuts, range } from "./utils";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -46,6 +47,11 @@ export class DuetDatePicker {
                 fi: "Päivämäärä vaaditaan",
                 sv: "Datum krävs",
             },
+            customError: {
+                en: "Date not allowed",
+                fi: "Päivämäärä ei sallittu",
+                sv: "Datum inte tillåtet",
+            },
         };
         this.open = false;
         this.focusedDay = new Date();
@@ -154,6 +160,19 @@ export class DuetDatePicker {
          * This setting can be used alone or together with the min property.
          */
         this.max = "";
+        /**
+         * Disallow selecting Saturdays and Sundays.
+         */
+        this.disallowWeekends = false;
+        /**
+         * Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve.
+         */
+        this.disallowBankHolidays = false;
+        /**
+         * Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates,
+         * or a comma-separated string of the same when set as an HTML attribute.
+         */
+        this.disallowedDates = [];
         /**
          * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
          */
@@ -256,7 +275,7 @@ export class DuetDatePicker {
         this.handleDaySelect = (_event, day) => {
             const min = parseISODate(this.min);
             const max = parseISODate(this.max);
-            if (inRange(day, min, max)) {
+            if (inRange(day, min, max) && !isDateDisallowed(day, this)) {
                 this.setValue(day);
                 this.hide();
             }
@@ -277,6 +296,7 @@ export class DuetDatePicker {
      * This offers information relating to the current validity of the component.
      * It follow as closely as possible the behaviour of the native date input.
      * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
+     * For disallowed dates property customError is set true.
      */
     get validity() {
         this.determineValidity();
@@ -401,9 +421,10 @@ export class DuetDatePicker {
         const valueMissing = !valueAsDate && this.required;
         const rangeOverflow = valueAsDate ? !inRange(valueAsDate, null, parseISODate(this.max)) : false;
         const rangeUnderflow = valueAsDate ? !inRange(valueAsDate, parseISODate(this.min)) : false;
+        const customError = valueAsDate ? isDateDisallowed(valueAsDate, this) : false;
         this._validity = {
             patternMismatch: false,
-            customError: false,
+            customError,
             stepMismatch: false,
             tooLong: false,
             tooShort: false,
@@ -412,7 +433,7 @@ export class DuetDatePicker {
             rangeUnderflow,
             rangeOverflow,
             valueMissing,
-            valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
+            valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow || customError),
         };
         if (this._validity.valid) {
             this.error = "";
@@ -475,13 +496,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: 'bc53156f31fd151a978be4cb494d89811177d2de', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: 'bd85feeae1d997447181347f131cf0eaa309af93', class: "duet-date" }, h(DatePickerInput, { key: '0e22a10646a9df5c2dee41047df08e8df6b63872', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'c4575f4c809d00307b254756d1c00e5d65520b03', class: {
+        return (h(Host, { key: '574a2e443eb79af37f178f46845a206f561cba2e', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '62fa53292d9b464c3bfce84805c61abbc729b32c', class: "duet-date" }, h(DatePickerInput, { key: 'fd44ced264f1b867ffa5642a110d118cfd8a7977', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: '7db19721a17bc48c0f232de5a91e9aee49435f6b', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: '73718663a16c1f4f18625a0e9b5e12c4d84e2862', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '55795dff1697ed625725a441813c2837b9180ca4', moveFocusTo: this.focusedDayNode }), h("div", { key: '4575c14cab6890c2ed93f14cc269495f4e6112c6', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '64ec3d2f1809490ebfe3dd1e04bd332fd603010a', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: 'b5545e0104ad9a0bc9f99ff3a725752595a0ffa6', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '73d2c0aa481b994ce191816304e1867f461aa7d7', margin: "none" }, this.label), h("button", { key: 'c7483c8e743830ff8a21c2127897b43e45b57d8b', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'b2b8fd08895e8a5b0de42af39fb3e8b4810314e7', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '9238a95c2b5266055844e593ba8ab6349d9d033f' }, text.closeLabel))), h("div", { key: '3f68135c40899e3de9f9546ebdace84fbe831141', class: "duet-date-dialog-header" }, h("div", { key: '5cc6d3e6a2665e29091147f86fe44339af33327c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '5bf35b2c9736d2d110344b92942f13be850d644b' }, h("h2", { key: '95391f17e2c907733fe1c3d567678d236e369fdc', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'a356aafd4ce51cf91cbc363297645efa79da42e3' }, h("label", { key: 'd806131d0e348f3743726e47daeb580baaec91a2', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '5e4a84de81c95b6c62dc03de1c805f472377805c', class: "duet-date-dialog-select" }, h("select", { key: 'aa66520799ef32c4dfe30506cdbeb4f01000055e', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '8bf72353d282a2c82f0e64e1a752a17dbcd6423b', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '1b9a7f95c0007b30117782c962311c54244228a3' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'a234a84604cb1f87ee8c382b7d886e00a13cd913', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'f41e59ff6c32248ea057f4547ef6bf24688423e1' }, h("label", { key: '10ea1d3b43b673950054ad36abe59688971843d0', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'b7cd16b90fb5126189de4648b99c6634c15bc5a2', class: "duet-date-dialog-select" }, h("select", { key: '852475517a751519016dcc2c14023b9f1850b0d9', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '426ab30bd0268b659253d8b9dcd375b7da1952dd', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '55b9cc0f5e60cd6ad666e58c2724865216d1c635' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'b28ab73ebb1ca7fac93ee3c52d696fa65f2bef29', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'eee0f191f6b409674d0ef2b7383d6ab45c316d7c', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '5a4c05b83e76b2740f71fe7e2d94602e16aa0219', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '0d4117fdd8511135bede66b13c8177d7105b567f', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'ac47f9d6b83fa994e5137a45c300db313dd70701', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '9727a0dab133694bd4b2ef008adec00439040b8b', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: 'b762f7971ef0f3cfdba4338da8b66ddd932d739c', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '116f8a028515e1cabbdfe6c7c4fbe46a366e8417', moveFocusTo: this.focusedDayNode }), h("div", { key: '46df5dc4188ca94f1e9288cc94b369a56a951ee1', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '1de44e1f4c44b9c97adb419fa7abf60f937b0fa2', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '4a36684eab5f83211dcd9f04f240ad535f781376', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'ef9877f7fc10b63428437a0ddbc07a787792617b', margin: "none" }, this.label), h("button", { key: '52b087991727aa7c32178aef85a7ff6a88b33f6e', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '9434a8ab91835101fca28fb28d3ba3b5fc768583', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'eaa01ae0b3e0270af1ee5b7777c4bf1c823ed55d' }, text.closeLabel))), h("div", { key: '8f59e259985eb3628f23dd8aa4edd90eab33ce45', class: "duet-date-dialog-header" }, h("div", { key: 'fd9e2ffede5b19a2008684f5587663372a769b0f', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '9bfda8777868d3a1a0b5dfb1146d4bd22ece9b9d' }, h("h2", { key: '4f8171f8b0bfabeb8ef0d44f604c668810572ba8', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'f55f26894bef3e11233e3d72b62d70ff5f4f30fc' }, h("label", { key: '01d6cda898862ee9c82f018e4a875a54c8a4454c', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '758b166665674a916ab6d6b2c9fd78b6f51f27fd', class: "duet-date-dialog-select" }, h("select", { key: '548b2e7615f581454c64c30fe8e8c8d6dfe0d969', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '34d1e610de1d9f1c1436fdf1ffb2294742269696', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '84d57f82660038e7fb7d631e6eb03be0ef9c4315' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'f706752d81c80ae05bf13a19ed6cfa3b2d7262cc', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'fb67730ced2246377442fb2fd2ebf5086db34fbd' }, h("label", { key: '0d3d28925711a15b919004ad2384c719b9832f7d', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '371bb8461b655460da25e9982e17c0385fab8f71', class: "duet-date-dialog-select" }, h("select", { key: 'c466eed369426ad7cc78fbed3278a0523529920c', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '78db254ed00d0d7b5104f4932415d970ff17e1f4', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9a66b0dad5bf39fd769cd851cb529b4568310d9d' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'a68a8da9385f631020ba28389caf1b611def6676', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'd1dd09f7da7f1e9d50cdd79ae97d13ba4d89be25', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e7b3c41d7d56f2c24b4e69db80e4c8fc2e0395a2', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '980a6a1316a3f0b64a0ae62dd80d3494ea855ae8', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: '8524700a8665fe9b8edc04bd6b90b4aacc1eeea0', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, disallowWeekends: this.disallowWeekends, disallowBankHolidays: this.disallowBankHolidays, disallowedDates: this.disallowedDates, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '8b92a3d7d025848e2e3c976e9c091364b52b7f96', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -957,7 +978,7 @@ export class DuetDatePicker {
                     "references": {
                         "DuetDatePickerDirection": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
                             "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerDirection"
                         }
                     }
@@ -1079,6 +1100,66 @@ export class DuetDatePicker {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "disallowWeekends": {
+                "type": "boolean",
+                "attribute": "disallow-weekends",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disallow selecting Saturdays and Sundays."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disallowBankHolidays": {
+                "type": "boolean",
+                "attribute": "disallow-bank-holidays",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disallowedDates": {
+                "type": "string",
+                "attribute": "disallowed-dates",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates,\nor a comma-separated string of the same when set as an HTML attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
             "incrementYears": {
                 "type": "number",
                 "attribute": "increment",
@@ -1117,7 +1198,7 @@ export class DuetDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This offers information relating to the current validity of the component.\nIt follow as closely as possible the behaviour of the native date input.\nUseful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow."
+                    "text": "This offers information relating to the current validity of the component.\nIt follow as closely as possible the behaviour of the native date input.\nUseful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.\nFor disallowed dates property customError is set true."
                 },
                 "getter": true,
                 "setter": false
@@ -1169,7 +1250,7 @@ export class DuetDatePicker {
                     "references": {
                         "DuetDatePickerChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
                             "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerChangeEvent"
                         }
                     }
@@ -1190,7 +1271,7 @@ export class DuetDatePicker {
                     "references": {
                         "DuetDatePickerFocusEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
                             "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
                         }
                     }
@@ -1211,7 +1292,7 @@ export class DuetDatePicker {
                     "references": {
                         "DuetDatePickerFocusEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
                             "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
                         }
                     }
@@ -1302,6 +1383,15 @@ export class DuetDatePicker {
             }, {
                 "propName": "inputValue",
                 "methodName": "updateValidity"
+            }, {
+                "propName": "disallowWeekends",
+                "methodName": "updateValidity"
+            }, {
+                "propName": "disallowBankHolidays",
+                "methodName": "updateValidity"
+            }, {
+                "propName": "disallowedDates",
+                "methodName": "updateValidity"
             }, {
                 "propName": "value",
                 "methodName": "updateInternalValue"

package/lib/collection/components/duet-date-picker/finnish-bank-holidays.js

@@ -0,0 +1,66 @@
+/*!
+ * Built with Duet Design System
+ */
+import { addDays, isEqual } from "./date-utils";
+const holidaysByYear = new Map();
+/**
+ * Calculate the date of Easter Sunday for a given year using the
+ * Meeus/Jones/Butcher Gregorian algorithm.
+ */
+export function getEasterSunday(year) {
+    const a = year % 19;
+    const b = Math.floor(year / 100);
+    const c = year % 100;
+    const d = Math.floor(b / 4);
+    const e = b % 4;
+    const f = Math.floor((b + 8) / 25);
+    const g = Math.floor((b - f + 1) / 3);
+    const h = (19 * a + b - d - g + 15) % 30;
+    const i = Math.floor(c / 4);
+    const k = c % 4;
+    const l = (32 + 2 * e + 2 * i - h - k) % 7;
+    const m = Math.floor((a + 11 * h + 22 * l) / 451);
+    const monthAndDay = h + l - 7 * m + 114;
+    const month = Math.floor(monthAndDay / 31);
+    const day = (monthAndDay % 31) + 1;
+    return new Date(year, month - 1, day);
+}
+/**
+ * Midsummer Eve is the Friday falling between 19 and 25 June (inclusive).
+ */
+function getMidsummerEve(year) {
+    for (let day = 19; day <= 25; day++) {
+        const date = new Date(year, 5, day);
+        if (date.getDay() === 5) {
+            return date;
+        }
+    }
+}
+/**
+ * Finnish bank holidays for a given year, as published by the Bank of Finland:
+ * https://www.suomenpankki.fi/en/money-and-payments/bank-holidays/
+ */
+export function getFinnishBankHolidays(year) {
+    if (holidaysByYear.has(year)) {
+        return holidaysByYear.get(year);
+    }
+    const easterSunday = getEasterSunday(year);
+    const holidays = [
+        new Date(year, 0, 1), // New Year's Day
+        new Date(year, 0, 6), // Epiphany
+        addDays(easterSunday, -2), // Good Friday
+        addDays(easterSunday, 1), // Easter Monday
+        new Date(year, 4, 1), // May Day
+        addDays(easterSunday, 39), // Ascension Day
+        getMidsummerEve(year), // Midsummer Eve
+        new Date(year, 11, 6), // Independence Day
+        new Date(year, 11, 24), // Christmas Eve
+        new Date(year, 11, 25), // Christmas Day
+        new Date(year, 11, 26), // Boxing Day
+    ];
+    holidaysByYear.set(year, holidays);
+    return holidays;
+}
+export function isFinnishBankHoliday(date) {
+    return getFinnishBankHolidays(date.getFullYear()).some(holiday => isEqual(holiday, date));
+}

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

@@ -89,7 +89,7 @@ export class DuetDivider {
                     "references": {
                         "DuetDividerMargin": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-divider/duet-divider.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-divider/duet-divider.tsx",
                             "id": "src/components/duet-divider/duet-divider.tsx::DuetDividerMargin"
                         }
                     }

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -366,7 +366,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableActions": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
                         }
                     }
@@ -394,7 +394,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableColumns": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableColumns"
                         }
                     }
@@ -422,7 +422,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableRows": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableRows"
                         }
                     }
@@ -570,7 +570,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetTableToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableToggleEvent"
                         }
                     }
@@ -591,7 +591,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetTableMenuEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableMenuEvent"
                         }
                     }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -111,7 +111,7 @@ export class DuetEmptyState {
                     "references": {
                         "DuetEmptyStateStatus": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
                             "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateStatus"
                         }
                     }
@@ -203,7 +203,7 @@ export class DuetEmptyState {
                     "references": {
                         "DuetEmptyStatePadding": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
                             "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStatePadding"
                         }
                     }
@@ -229,7 +229,7 @@ export class DuetEmptyState {
                     "references": {
                         "DuetEmptyStateSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
                             "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateSize"
                         }
                     }

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ac0f503ac6d41953e774ad46b418c8ea39ff4708', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b564273ca16fac8fbb500ab8bfc9dff72e579770', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '6b5e616dee35539f33f740844d8cb031480e7034', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b9847559a5f6d043d40cf13941b02abcafcd4826', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '607df92d8f78aaad01e4c80e33c17da55a52e20f', id: this.labelId }, h(this.labelHeadingLevel, { key: '33cee42411e380076885a046790cb8006088c5ed' }, this.label), this.caption && h("span", { key: '52c809bbe842c11a84e7d1a5c3083bfe92472d36' }, this.caption)), h("div", { key: 'aa297b27900d3a28a48bf8102b75e900896393ff', class: {
+            } }, h("legend", { key: '00db725af6a81cc39f9812b6ad907e14099e640b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'e790c1bb2136af773035d687afa1af037f965174' }, this.label), this.caption && h("span", { key: '94cfa68d4e1bc683b16749e06667ad9fa13a84c6' }, this.caption)), h("div", { key: 'f7fbe98556ff25593ef84788b28a95a684a923e6', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '3af22b271c143a074adee18554408291e3faa660', class: "duet-fieldset-label" }, h("span", { key: '939a883743e233ba83e8ff3328b18842b0c4eae4', "aria-hidden": "true" }, this.label), h("slot", { key: '822892f650b6c0f733cc58a1aee1654e21d1f1f6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'bc40348b978fc775d1007cdf3949e95d4d3b54e0', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3119b1a7963015c24d6324d5de47fc53cdfd748e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'fa922540a117205680098064372a70aefc0953ae' }), h("span", { key: 'ad8d4d59379d7a9f89e618754d46404eb5c3c664', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c36abae3849393120d72e3781305cb2ce88b384c', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '1ed3c1d5c1e394cc84c6b38d05d6dae5c81025de', class: "duet-fieldset-label" }, h("span", { key: '0a004664043ce7eecc9a0a12383342f4d6bd7b46', "aria-hidden": "true" }, this.label), h("slot", { key: '3e1c56c60ca7a1b343aa25d3e63609ddcfef2822', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '8b165ea6688eb0a0c179fe76c583990d357e99d6', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'b54388620f28ecef14c0da6d4e8d27ed9b16de78', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '41fa24ea72a9f4318bb6dd183fb0a464ed45d8ca' }), h("span", { key: '6569844fd76312f12b64a7864f35e6f4637110db', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'cef4273c56dff02051a14435d02d975131d4c4a4', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -153,7 +153,7 @@ export class DuetUploadItem {
                     "references": {
                         "DuetFileChooserEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-file-chooser/duet-file-chooser.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-file-chooser/duet-file-chooser.tsx",
                             "id": "src/components/duet-file-chooser/duet-file-chooser.tsx::DuetFileChooserEvent"
                         }
                     }

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

@@ -221,7 +221,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterVariation"
                         }
                     }
@@ -453,7 +453,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
                         }
                     }
@@ -474,7 +474,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
                         }
                     }
@@ -495,7 +495,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
                         }
                     }
@@ -516,7 +516,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
                         }
                     }
@@ -537,7 +537,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterAnalyticsEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterAnalyticsEvent"
                         }
                     }
@@ -558,7 +558,7 @@ export class DuetFooter {
                     "references": {
                         "DuetFooterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-footer/duet-footer.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-footer/duet-footer.tsx",
                             "id": "src/components/duet-footer/duet-footer.tsx::DuetFooterChangeEvent"
                         }
                     }

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

@@ -594,4 +594,26 @@
   :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
+
+:host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+  grid-template-columns: minmax(0, 540px);
+  gap: 40px;
+  padding: 0;
+}
+@container (min-width: 720px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+    grid-template-columns: repeat(2, minmax(0, 540px));
+  }
+}
+@container (min-width: 1100px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+    grid-template-columns: repeat(3, minmax(0, 540px));
+  }
+}
+
+@container (min-width: 1100px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser.duet-grid-direct-children-4) {
+    grid-template-columns: repeat(2, minmax(0, 540px));
+  }
 }

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

@@ -5,6 +5,7 @@ import { Build, h, Host } from "@stencil/core";
 import { debounce } from "../../utils/js-utils";
 export class DuetGrid {
     constructor() {
+        this.directChildCount = 0;
         /**
          * Enable or disable the automatic responsive behaviour of the grid component.
          * Setting this option to "true" makes sure that contents are stacked vertically
@@ -121,7 +122,9 @@ export class DuetGrid {
         return Array.from(Build.isServer ? this.element.children : this.element.querySelectorAll(":scope > *"));
     }
     async updateGridItems() {
-        const items = this.getDirectChildren().filter(child => child.tagName.toLowerCase() === "duet-grid-item");
+        const children = this.getDirectChildren();
+        this.directChildCount = children.length;
+        const items = children.filter(child => child.tagName.toLowerCase() === "duet-grid-item");
         items.forEach(item => {
             item.responsive = this.responsive;
             item.breakpoint = this.breakpoint;
@@ -208,7 +211,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e64260236eda4217a2cb10444342c33d243da8cf', class: {
+        return (h(Host, { key: 'af6ceb11c84216f03b1dda1c12f3ae224b5c4874', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -235,9 +238,10 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
+                [`duet-grid-direct-children-${this.directChildCount}`]: true,
                 "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
                 "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
-            } }, h("slot", { key: '1cb11ce3685bf5043dfa3e36e6a0ff3653106b54' })));
+            } }, h("slot", { key: 'c000cfdac55f96a2f4698668e48b13f1e6829ccc' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +359,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridAlignment"
                         }
                     }
@@ -381,7 +385,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridDistribution": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridDistribution"
                         }
                     }
@@ -407,7 +411,7 @@ export class DuetGrid {
                     "references": {
                         "DuetGridMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-grid/duet-grid.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-grid/duet-grid.tsx",
                             "id": "src/components/duet-grid/duet-grid.tsx::DuetGridMobileAlignment"
                         }
                     }
@@ -428,8 +432,8 @@ export class DuetGrid {
                 "attribute": "grid-template",
                 "mutable": false,
                 "complexType": {
-                    "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"",
-                    "resolved": "\"button-grid\" | \"large\" | \"medium\" | \"sidebar-left\" | \"sidebar-right\" | \"small\" | \"three-columns\" | \"two-columns\"",
+                    "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"\n    | \"teaser\"",
+                    "resolved": "\"button-grid\" | \"large\" | \"medium\" | \"sidebar-left\" | \"sidebar-right\" | \"small\" | \"teaser\" | \"three-columns\" | \"two-columns\"",
                     "references": {}
                 },
                 "required": false,
@@ -465,6 +469,11 @@ export class DuetGrid {
             }
         };
     }
+    static get states() {
+        return {
+            "directChildCount": {}
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{