@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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: 'ffbf4028a27b7ce50696f3735314e12b48644e83', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: 'be1ffaf5b189177ace8c0e537601247fb4c541e1', class: "duet-date" }, h(DatePickerInput, { key: '9f256d886f365c0ffb729b2e19d9695ae62d125d', 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: '083b96641cff2923eeb8b2a2811559674a3422a7', class: {
+        return (h(Host, { key: '37f45a71c4032ac634736a6920fb025734c3bbe2', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '61c829b503df044c1b67f460b7dacd7398078cba', class: "duet-date" }, h(DatePickerInput, { key: '8a04908b051939c5c8eb85cf7efdeac0d3a21d6c', 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: 'acd43f63f5682534c6bf78625fe43c6c86a46dc0', 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: 'e996bbb11fb297a854c0b052a76bd901cc206b69', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'fb326c88bc79b2fb26934d500ada890909df7353', moveFocusTo: this.focusedDayNode }), h("div", { key: '012cbf4ec8c8a86c8490df5858d0b51ce5cd8b92', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '0a70e49f2bc2719fd766d604026711557e741918', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '79509cb586c8498c5f450e63759e27d6dc10622a', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '4377e01f607d4de35728b1cdc8cbc298f6b19142', margin: "none" }, this.label), h("button", { key: '3287aeee04a35a036c1cdf5e93851cbb1b2a18d7', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'dfcef3d22fa0a905e5b7de34da2c7c669d2e4cef', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'cdf305c57bc94b51d148077ddfd30b3c29a989a0' }, text.closeLabel))), h("div", { key: '7e0171347a1da56e751c38f36de27f199fa2ec47', class: "duet-date-dialog-header" }, h("div", { key: '83306e6e3f77c536f522c30ad516423d90e4bf6b', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'd12b4ec4e07e8c657a61c2e9fb944d0e87367cd4' }, h("h2", { key: 'ed4f5fa368effa1c5d0d49f0fed98c062ce66aaa', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '3049c56b3982abd6e9609e8bb39ccff0ff5fe4a6' }, h("label", { key: 'f81eb75848f18de93c98a21e2475545f5b18b11a', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '5cd66e4fbf36396e710f351fd7c36459a8515804', class: "duet-date-dialog-select" }, h("select", { key: '3dfa3aa9d7b96f84500d8af3b6c5dd6ff1325b20', 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: '1fb7b3f4fa0ecd6c9cf95613c50200df097e919c', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '99a67cc02351674b14ffb24949672d2a02a48324' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'a7a4c1b2f6b361cd51737e60d59c26c97abe1a47', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '49515f341552fba5f3151b093c2a5b1ddc53ee07' }, h("label", { key: '13f6235f20b354b5bece44b65e1b05f8dfa355dd', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '4bd86d771eea83a8bd24387e91b09baa8e1a22ad', class: "duet-date-dialog-select" }, h("select", { key: '027f699ba8c1da2af2525c937474e23595173ed0', 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: '8b1b6158805a2bfac0bf1d11358d9ead7b053ef8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'a49b7c229199f49a8e791d30c6164dfcb0a35b18' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'bc944c5c5d76c6f3fb6da35e5afa384d101952d9', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '93a4f1129af6c3e723b951147d022243e053c3df', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '5a13ca85a4fd737fedc9c7f5e623c3def16397ae', 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: '283fca10745ff21e1c0d0da2479121ef0d5ed890', 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: 'cc59e30b0a39e5a63682a2fb3da3c4080c7bc960', 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: '9de58a8642b2f06882542924e86b3792f5bc54ad', 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: '88bd9a51351af2edf1e2e07f155c1eabbff10646', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '08fa3fd43496f0250e63598a879eb03ff81ade36', moveFocusTo: this.focusedDayNode }), h("div", { key: 'a7d8dd867afa616cd47543b8c47a160b710b70f3', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '81c99489839f6ceb28ac6f25f73a0d92f054b0bc', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '404552e44ed007048db39d1d20108c6c38aca2bf', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'd49183b544c8e2a4a23ca281a62b3c4be8a90ebf', margin: "none" }, this.label), h("button", { key: '3adb95e86f08e23c1b60e6e19ec3d9d23467f33f', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'c500a093b3fdae7155e3a5aed30539f009f156c2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '1f23e50c6c479195a622d512ac4ee5d866ebcd9b' }, text.closeLabel))), h("div", { key: '662972a21f2c4cd532471209c9d49e51142f0b25', class: "duet-date-dialog-header" }, h("div", { key: 'fb7cbfa6f3ccded04f8d481447c5847a1293d535', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '8aa30a4e48fcc57ee56d7564284ff219260e8d5f' }, h("h2", { key: '7a40dd8ca6344ac0ccf504ce73b476a3f5e4b0f6', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '7ef05a1a7fab5bebf6d24bc78bb9789efd85835e' }, h("label", { key: 'b93bb5d18acd17fb2bc22bc43c00d16199d254da', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '72f8d34639a3a7de933c91e781b9aafa8e3fb668', class: "duet-date-dialog-select" }, h("select", { key: 'a09e0ba04dfd0da49e8d141c8b2c520d49a6108d', 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: '85e19eac15e8475ea1a891b49796c2999e9800b8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ae692bf29092ba59affd6258f57ef9dcc1847f2e' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'aed73b3af5c337b8e7ff70699106d3c685206ff1', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '860526bf60d4e94dfd2c19a5eabcd049b8273d82' }, h("label", { key: '6852a9ff1990eddd80f8c0edfa59cc762d68fcc9', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '28bf2d2a99952eb203a2198f558b7ccba9ae99c3', class: "duet-date-dialog-select" }, h("select", { key: 'efafa17aa2c9306af0ca13dbee83cdefeed076b2', 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: '5d9f4154d302ea2733b72a2f613abd9f7f569be8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'a6996b5aa61aa5227048b4eb1b8cb227b0dcda33' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '6c999d099466d7b9ac2dd54ba7cf9b80732d82ef', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '7c63a65698b7a07d10c9b75ad21a6c7585c99034', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '3599aaffa6d0b601b35cfa244faa11b705724ef0', 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: 'dfff287908a10fd3b84abbd643af6d095bb70537', 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: '4f9b1c1fd0791045a5d04055e1c61182f11ebe86', 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: '06daea4e6567faa83c290236d3bafd2ed6bb310e', 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,
+                "reflect": true,
                 "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\""
             }