@duetds/components 9.2.2 → 9.2.4

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

@@ -84,6 +84,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -108,6 +110,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -126,6 +130,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image",
                 "reflect": false
             },
@@ -143,6 +149,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -160,6 +168,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Description."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false
             },
@@ -177,6 +187,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Email."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "email",
                 "reflect": false
             },
@@ -194,6 +206,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Phone."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "phone",
                 "reflect": false
             },
@@ -211,6 +225,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-text",
                 "reflect": false
             },
@@ -234,6 +250,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
@@ -252,6 +270,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button url."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-url",
                 "reflect": false
             }

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

@@ -70,6 +70,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Adds accessible label for the cookie consent ok button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
@@ -94,6 +96,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Theme of the cookie consent banner."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-const formatOptionsShort = { day: "numeric", month: "long" };
+const formatOptionsShort = { day: "numeric", month: "long", weekday: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n = {
     fi: {

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-import { isEqual } from "./date-utils";
+import { isEqual, printISODate } from "./date-utils";
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -13,5 +13,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref }, h("span", { "aria-hidden": "true" }, day.getDate()), h("duet-visually-hidden", null, formatterShort.format(day))));
+    return (h("td", { "data-day": printISODate(day), class: "duet-date-table-cell", "aria-label": formatterShort.format(day), role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };

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

@@ -4,10 +4,12 @@
 import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
+export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, hasFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
     const { buttonLabel, selected, formatterLong } = i18n[language];
-    return (h("div", { class: {
-            "duet-theme-turva": theme === "turva",
-            "duet-date-input": true,
-        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+    const classes = {
+        "duet-theme-turva": theme === "turva",
+        "duet-date-input": true,
+        "duet-date-input-has-focus": hasFocus,
+    };
+    return (h("div", { class: classes }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

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

@@ -17,9 +17,9 @@ export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme
             onFocusExit(e);
         }
     }
-    return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
+    return (h("div", { role: "application" }, h("table", { role: "presentation", class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
         // @ts-ignore
-        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("duet-visually-hidden", null, label)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" }, h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
             if (el && isEqual(day, focusedDate)) {
                 focusedDayRef(el);
             }

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

@@ -64,20 +64,22 @@
 .duet-date-button {
   -webkit-user-select: none;
   user-select: none;
-  position: absolute;
-  top: 1px;
-  right: 1px;
+  position: relative;
   z-index: 200;
+  box-sizing: content-box;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: calc(100% - 2px);
+  width: 47px;
+  height: 48px;
   color: rgb(8, 42, 77);
   cursor: pointer;
-  background: transparent !important;
-  border-left: 1px solid rgb(181, 198, 208) !important;
-  border-radius: 0 4px 4px 0 !important;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(127, 150, 165);
+  border-left-color: rgb(181, 198, 208);
+  border-radius: 0 4px 4px 0;
+  transition: box-shadow 150ms ease, border 150ms ease !important;
 }
 .duet-theme-turva .duet-date-button {
   color: rgb(23, 28, 58);
@@ -92,6 +94,12 @@
   content: "";
   background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
+.duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #909599 !important;
+}
+.duet-theme-turva .duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #747475 !important;
+}
 .duet-date-button:disabled {
   pointer-events: none;
   cursor: not-allowed;
@@ -113,13 +121,14 @@
 .duet-date-button:active duet-icon {
   transform: translateY(0);
 }
-.duet-date-button:focus {
+.duet-date-input-has-focus .duet-date-button, .duet-date-button:focus {
+  height: 46px;
   color: rgb(0, 119, 179);
   border-color: transparent;
   outline: 0;
   box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-button:focus {
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px #171c3a !important;
 }
@@ -240,6 +249,9 @@
 .duet-date-table .duet-date-table-cell {
   text-align: center;
 }
+.duet-date-table .duet-date-table-cell:focus {
+  outline: none;
+}
 
 .duet-date-table-button {
   position: relative;
@@ -254,7 +266,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  line-height: 1.25 !important;
+  line-height: 2.6 !important;
   color: rgb(8, 42, 77) !important;
   text-align: center;
   vertical-align: initial !important;
@@ -284,12 +296,12 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-.duet-date-table-button[aria-pressed=true], .duet-date-table-button:focus {
+[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
   outline: 0;
 }
-.duet-theme-turva .duet-date-table-button[aria-pressed=true], .duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }
@@ -304,11 +316,11 @@
   background: rgb(198, 12, 48) !important;
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
-.duet-date-table-button:focus {
+:focus .duet-date-table-button {
   z-index: 200;
   box-shadow: 0 0 5px 0 #0077b3 !important;
 }
-.duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva :focus .duet-date-table-button {
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
 .duet-date-table-button.disabled {

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

@@ -52,9 +52,10 @@ export class DuetDatePicker {
         };
         this.handleBlur = (event) => {
             event.stopPropagation();
-            if (!this.validity.valid) {
+            this.inputHasFocus = false;
+            if (!this._validity.valid) {
                 this.value = null;
-                const errorKey = Object.entries(this.validity).find(entry => !!entry[1])[0];
+                const errorKey = Object.entries(this._validity).find(entry => !!entry[1])[0];
                 this.internalValidityError = getLocaleString(this.dateErrorMessages[errorKey]);
             }
             this.duetBlur.emit({
@@ -63,6 +64,7 @@ export class DuetDatePicker {
         };
         this.handleFocus = (event) => {
             event.stopPropagation();
+            this.inputHasFocus = true;
             this.duetFocus.emit({
                 component: "duet-date-picker",
             });
@@ -119,7 +121,14 @@ export class DuetDatePicker {
             PageDown: () => this.addMonths(1),
             "Shift+PageUp": () => this.addYears(-1),
             "Shift+PageDown": () => this.addYears(1),
+            Space: evt => this.handleKeyboardDaySelect(evt),
+            Enter: evt => this.handleKeyboardDaySelect(evt),
         });
+        this.handleKeyboardDaySelect = (evt) => {
+            const el = evt.target;
+            const date = parseISODate(el.dataset.day);
+            this.handleDaySelect(evt, date);
+        };
         this.handleDaySelect = (_event, day) => {
             const min = parseISODate(this.min);
             const max = parseISODate(this.max);
@@ -146,6 +155,7 @@ export class DuetDatePicker {
         this.open = false;
         this.focusedDay = new Date();
         this.inputValue = "";
+        this.inputHasFocus = false;
         this.internalValidityError = "";
         this.theme = "";
         this.expand = false;
@@ -178,15 +188,22 @@ export class DuetDatePicker {
         this.min = "";
         this.max = "";
         this.incrementYears = 10;
-        this.validity = undefined;
         this.accessibleLiveError = "polite";
     }
+    /**
+     * 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.
+     */
+    get validity() {
+        return this._validity;
+    }
     updateValidity(newValue, _oldValue, propName) {
         if (propName === "value" && newValue === null) {
             return;
         }
         this.determineValidity(parseISODate(this.value));
-        if (this.validity.valid) {
+        if (this._validity.valid) {
             this.internalValidityError = "";
         }
     }
@@ -301,7 +318,7 @@ export class DuetDatePicker {
         const valueMissing = this.required && date == null;
         const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
         const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
-        this.validity = {
+        this._validity = {
             patternMismatch: false,
             customError: false,
             stepMismatch: false,
@@ -374,7 +391,7 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { 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", { class: {
+        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { 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", { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
@@ -416,6 +433,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Theme of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -434,6 +453,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Expands the date picker input to fill 100% of the container width."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
@@ -452,6 +473,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Name of the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -470,6 +493,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Adds a unique identifier for the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -488,6 +513,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Label for the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -506,6 +533,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Caption (underneath label) that can be set as a way of adding extra information."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false
             },
@@ -529,6 +558,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -559,6 +590,8 @@ export class DuetDatePicker {
                         }],
                     "text": "The currently active language. This setting changes the month/year/day.\nnames and button labels as well as all screen reader labels."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
@@ -586,6 +619,8 @@ export class DuetDatePicker {
                         }],
                     "text": "Placeholder defaults."
                 },
+                "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  }"
@@ -607,6 +642,8 @@ export class DuetDatePicker {
                         }],
                     "text": "Hint text to display before the user types into the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
@@ -625,6 +662,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings 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)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "echo-placeholder",
                 "reflect": true,
                 "defaultValue": "false"
@@ -643,6 +682,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Makes the date picker input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -661,6 +702,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Display the date picker input in error state along with an error message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -679,6 +722,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Visually hide the label, but still show it to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -697,6 +742,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Defines a specific role attribute for the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false
             },
@@ -714,6 +761,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Indicates the id of a related component\u2019s visually focused element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-active-descendant",
                 "reflect": false
             },
@@ -731,6 +780,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-controls",
                 "reflect": false
             },
@@ -748,6 +799,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Indicates the id of a component owned by the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-owns",
                 "reflect": false
             },
@@ -765,6 +818,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Indicates the id of a component that describes the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false
             },
@@ -782,6 +837,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -806,6 +863,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Forces the opening direction of the calendar modal to be always left or right.\nThis setting can be useful when the input is smaller than the opening date picker\nwould be as by default the picker always opens towards right."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"right\""
@@ -824,6 +883,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Tooltip to display next to the label of the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -848,6 +909,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -866,6 +929,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Date value. Must be in IS0-8601 format: YYYY-MM-DD"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
@@ -884,6 +949,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -902,6 +969,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -920,13 +989,15 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "increment",
                 "reflect": false,
                 "defaultValue": "10"
             },
             "validity": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "ValidityState",
                     "resolved": "ValidityState",
@@ -941,8 +1012,10 @@ 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.\n**This property should be treated as read only**."
-                }
+                    "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."
+                },
+                "getter": true,
+                "setter": false
             },
             "accessibleLiveError": {
                 "type": "string",
@@ -958,6 +1031,8 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
@@ -969,6 +1044,7 @@ export class DuetDatePicker {
             "open": {},
             "focusedDay": {},
             "inputValue": {},
+            "inputHasFocus": {},
             "internalValidityError": {}
         };
     }