@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -41,7 +41,131 @@ export class DuetDatePicker {
                 fi: "Liian myöhäinen päivämäärä",
                 sv: "Datum för sent",
             },
+            valueMissing: {
+                en: "Date required",
+                fi: "Päivämäärä vaaditaan",
+                sv: "Datum krävs",
+            },
+        };
+        this.open = false;
+        this.focusedDay = new Date();
+        this.inputValue = "";
+        this.inputHasFocus = false;
+        this.internalValidityError = "";
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Expands the date picker input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "";
+        /**
+         * Adds a unique identifier for the date picker input.
+         */
+        this.identifier = "";
+        /**
+         * Label for the date picker input.
+         */
+        this.label = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * The currently active language. This setting changes the month/year/day.
+         * names and button labels as well as all screen reader labels.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Placeholder defaults.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholderDefaults = {
+            fi: "pp.kk.vvvv",
+            en: "dd.mm.yyyy",
+            sv: "dd.mm.åååå",
         };
+        /**
+         * Hint text to display before the user types into the date picker input.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Display the date picker input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+         */
+        this.disableBuiltInErrors = false;
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Forces the opening direction of the calendar modal to be always left or right.
+         * This setting can be useful when the input is smaller than the opening date picker
+         * would be as by default the picker always opens towards right.
+         */
+        this.direction = "right";
+        /**
+         * Tooltip to display next to the label of the date picker input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
+        /**
+         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+         */
+        this.value = "";
+        /**
+         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+         * This setting can be used alone or together with the max property.
+         */
+        this.min = "";
+        /**
+         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+         * This setting can be used alone or together with the min property.
+         */
+        this.max = "";
+        /**
+         * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+         */
+        this.incrementYears = 10;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
         this.enableActiveFocus = () => {
             this.focusTarget = "day-button";
         };
@@ -154,43 +278,6 @@ export class DuetDatePicker {
                 this.setValue(parsed);
             }
         };
-        this.open = false;
-        this.focusedDay = new Date();
-        this.inputValue = "";
-        this.inputHasFocus = false;
-        this.internalValidityError = "";
-        this.theme = "";
-        this.expand = false;
-        this.name = "";
-        this.identifier = "";
-        this.label = "";
-        this.caption = undefined;
-        this.margin = "auto";
-        this.language = getLanguage();
-        this.placeholderDefaults = {
-            fi: "pp.kk.vvvv",
-            en: "dd.mm.yyyy",
-            sv: "dd.mm.åååå",
-        };
-        this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
-        this.echoPlaceholder = false;
-        this.disabled = false;
-        this.error = "";
-        this.labelHidden = false;
-        this.role = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.required = false;
-        this.direction = "right";
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.min = "";
-        this.max = "";
-        this.incrementYears = 10;
-        this.accessibleLiveError = "polite";
     }
     /**
      * This offers information relating to the current validity of the component.
@@ -330,10 +417,10 @@ export class DuetDatePicker {
             tooLong: false,
             tooShort: false,
             typeMismatch: false,
-            valueMissing,
             badInput,
             rangeUnderflow,
             rangeOverflow,
+            valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
     }
@@ -393,13 +480,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: 'f349fd70a53b7cd9729e6f4a519994e86cb60105', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '3af25d99b276b29bffb5fb56e3807bd310a7b7b6', class: "duet-date" }, h(DatePickerInput, { key: '95cd7445820e3618f4e8553288a08a28c4013f5a', 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 || this.internalValidityError || null, 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: '1601a61d1f4aae686581b6d232c996d6bd4b566f', class: {
+        return (h(Host, { key: 'cb9845ce610b07e9c3ee1eed878e8bc8ce018459', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '9136d8bd2bfa2fdcd56789cba998d54d6a663d00', class: "duet-date" }, h(DatePickerInput, { key: 'd273a896ab5775b8f2de47d0408b512213731006', 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 || (!this.disableBuiltInErrors && this.internalValidityError) || null, 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: 'ac93b73b4e207311461374c7fde8b550b7b5aea6', 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: '96831a945399f6893f9e79d8aaa218bc02fe0a8e', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '9be207554c16e4a16118f5f36ae4bb64a9bad1f0', moveFocusTo: this.focusedDayNode }), h("div", { key: '20a4189123efcc2d4dced702d6d0fb7786de2479', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '3ad4621b49c92d3008920366eaea3d86075165d4', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '05aa408db91c6f9af01134adcc7735f72065adc3', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'c389ccaabf1427fa8e3c95e3d6e3d4d2d8886e80', margin: "none" }, this.label), h("button", { key: '91d67cff777873af7aee2764cfc1447b4e90437c', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '0a228d827ae9ffff2325163c45eda95dcca764db', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '7e3caabcab88f9f26acfd03c11d3e6f0ce198a76' }, text.closeLabel))), h("div", { key: '5588d1ba8e3f48fd340585d7c7e42096abc7e99a', class: "duet-date-dialog-header" }, h("div", { key: '72e458e1e52feb85527d09ff5bed9297104a512d', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '82b46e98af47e939e9c462ae9e89e7dbf65b697d' }, h("h2", { key: '5ffe7ed43d48807cbc4070b5ef130edf44c65b7c', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'a3adba70c76a4e37aaa153740ce455b42efdd6cd' }, h("label", { key: '19fbfd0efc6efa48b4305a7d16949ef7d867a7df', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '7c1fab8f84e07002df8ddd2674f5cc78c872fbfd', class: "duet-date-dialog-select" }, h("select", { key: '4f66b02e6ba8ae82327c024bd2a0bb5fa244d4d6', 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: '979ca83f258b7cf38902554fec596ee9df4632b2', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '00e5077816b80a68f32020074e8d848a3381996b' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'f4173da6638bd2d52b02ef8512f3201d34455e51', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '34ecaae386b30f78e10a37af7757f9cbebac5505' }, h("label", { key: '5cf0a3c7e8ca078e80ca46918b7fd4c981b6a799', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '51d3325c45e77f8df1574c96b27525ac13b950d9', class: "duet-date-dialog-select" }, h("select", { key: '3fbb50b63c06163b6529fd6acfa7c8e0b5aeec78', 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: 'e15e16bf5d774d97ff915ab981e79e1fc0df08b4', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '7d112442db2e32440ab4be7cecf8b427849d6ebc' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '4d53be40feba0c07efa661626817f40e42588e3f', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'a30130c0f3e97a3bf43919af86b7b029ef662c37', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '572a31fff6ddf43e6d94a054eb3c9deb188c140d', 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: '443649deeff0e2f9c4ca9ecbf5f5522ad6a68218', 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: 'b9851b55c5898d04c9950805468cff2017c84335', 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: 'c3d607ab65e9c2bf52946701cdbc9b5c5d20e716', 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: '5cdb9465322b0e94e00fa77e8dbdc49f7a3e3d80', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '424a6e5b1acf0fd1d186207cc918c49cd96f2c83', moveFocusTo: this.focusedDayNode }), h("div", { key: 'afa48891f98d6029638b28b6d262237aa6b74b87', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: 'd74b52c947c6e4ccf14c30005f22e2436dbc728d', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '546e84a8a3cbab555ee262759adfb2e77a08ecb5', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '372d8064bf5a956b4bdc42ed975630c5a4619ebb', margin: "none" }, this.label), h("button", { key: '1850243d9af86b20cd03b6ec9dd92f7ef13d91b1', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '33861012c05b49081bd813e323d881855b86ac4c', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '39bae44b56d60c7117199763166ce097349c9866' }, text.closeLabel))), h("div", { key: 'f0994f2a30581567406ad6a36a3c36d61d01c352', class: "duet-date-dialog-header" }, h("div", { key: 'b8b380f3761394628127ccb41718b82fa4d1423c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'ca290b58c995ae474a3b60fef19b38206807a20e' }, h("h2", { key: '27f68c536215973cf1203bf3cee52de0443eff0c', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '29bd3976ea9734c02aae33721e181417c577bcc1' }, h("label", { key: '8183aa79bdcb18a5a6f33447f628ea2a94fe275c', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '1860110277653760de4fabb7f23cf641457184bc', class: "duet-date-dialog-select" }, h("select", { key: '10e94ebbfadcd6c97e20bf45754fcc3a73074bd2', 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: 'deffc1742f3855666fa7ea3e9c94ec05c5244b15', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '250ffdb114542531c02de80fb9ac33583374783c' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'fa1f1e35fc0cf93572135a63d9749eb99a3ac640', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '9ad3ad9f5dcc139472cc205949140a0498d559f3' }, h("label", { key: '1a6738bc37053cd0266f2660ddf8b0a211d71a4f', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'a46e74ba3f51a9909a1b93988e9c0ffa48c7a696', class: "duet-date-dialog-select" }, h("select", { key: '01d3a4c7397d7a7702f15cbd6d354c085fb39213', 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: '627ac82de8935938f75b3cdb8096db62a74346db', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'c4c5d67ab6aa7c3f1c116981bfc8b7569f3b0854' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '877b67f1ba519d2b988cd06796fce29a36c0d738', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '08b758011468574e5f1c3f497f332e4bc01b5682', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '38e273f78b20a59b586207480c884a4f554538da', 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: '412ccd58b096a8451a2371def3ca3f5fdc909c4f', 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: '5599f98bd9f9385f58de71cfd2e33ff86fc23f62', 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: 'e1a22b3aeff86d4bf76c92ccb46dca73c8171dcc', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -417,6 +504,7 @@ export class DuetDatePicker {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -437,12 +525,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -457,12 +545,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -477,12 +565,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -497,12 +585,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -517,12 +605,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -537,11 +625,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -562,12 +650,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -594,12 +682,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "placeholderDefaults": {
                 "type": "string",
+                "attribute": "placeholder-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -623,12 +711,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"pp.kk.vvvv\",\n    en: \"dd.mm.yyyy\",\n    sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\",\n  }"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -646,12 +734,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -666,12 +754,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -686,12 +774,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -706,12 +794,32 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "disableBuiltInErrors": {
+                "type": "boolean",
+                "attribute": "disable-built-in-errors",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -726,12 +834,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -746,11 +854,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -765,11 +873,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -784,11 +892,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -803,11 +911,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -822,11 +930,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -841,12 +949,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDatePickerDirection",
@@ -867,12 +975,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"right\""
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -887,12 +995,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -913,12 +1021,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -933,12 +1041,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -953,12 +1061,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -973,12 +1081,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "incrementYears": {
                 "type": "number",
+                "attribute": "increment",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -993,12 +1101,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "increment",
                 "reflect": false,
                 "defaultValue": "10"
             },
             "validity": {
                 "type": "unknown",
+                "attribute": "validity",
                 "mutable": false,
                 "complexType": {
                     "original": "ValidityState",
@@ -1021,6 +1129,7 @@ export class DuetDatePicker {
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -1035,7 +1144,6 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             }