@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -43,6 +43,79 @@ export class DuetMultiselect {
             fi: "Vihje",
             sv: "Tips",
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedItems = [];
+        this.processedGroups = [];
+        this.checkboxesVisible = false;
+        this.activeDescendant = "";
+        // Used only to select from selectedLangObject
+        this.language = getLanguage();
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Display the select in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * 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";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Value of multiselect
+         */
+        this.value = [];
+        /**
+         * Theme of the select.
+         */
+        this.theme = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Adds a unique identifier for the select.
+         */
+        this.identifier = createID("DuetMultiselect");
+        /**
+         * If set, the multiselect will display buttons to select or deselect all items.
+         * This should be used when there are many items, consider when the number of items is more than 5.
+         */
+        this.allControls = false;
+        /**
+         * Hint text to display.
+         */
+        this.placeholder = "";
+        /**
+         * Makes the select component disabled. This prevents users from being able
+         * to interact with the select, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Label for the select.
+         */
+        this.label = "label";
+        /**
+         * Tooltip to display next to the label of the 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";
         /**
          * Component event handling.
          */
@@ -135,30 +208,6 @@ export class DuetMultiselect {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.processedItems = [];
-        this.processedGroups = [];
-        this.checkboxesVisible = false;
-        this.activeDescendant = "";
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = [];
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = createID("DuetMultiselect");
-        this.allControls = false;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.items = undefined;
-        this.disabled = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -233,14 +282,14 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '5ccd987600f461c3c9a7f7c2f46b602f169b658d', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'e519c7bf79fa2214804ca502285f52a553b79ac3', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cfc287863231de5436fc09d8cd57b53d4ef24820', name: "tooltip" }), this.caption && (h("duet-caption", { key: '28baa67909e4027ae56a35d87a4e15a5f118e703', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '2b734b81c229392334276022638d7265e23c2168', class: "duet-multiselect-wrapper" }, h("button", { key: 'd6fb96ae298ce6e3d7df71217c728f29e1550c9a', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '7581bf2f7629efe48e128c941beee89c4d22f709', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '7b747555309afe0dc4716f4335269a5dc46f17ff', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '22f9e68fe690b60dfe7e28ba5767d613e1037070' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'e944a170506d54950f8d1cc7083bfe7e2844881c', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4670864110dc9cd1070d094d6f5632c1e4d12cb0', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'd5a82df3b04ff3ffd5d764d7f7bcaa6ee1684a76', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '5ccd987600f461c3c9a7f7c2f46b602f169b658d', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'e519c7bf79fa2214804ca502285f52a553b79ac3', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cfc287863231de5436fc09d8cd57b53d4ef24820', name: "tooltip" }), this.caption && (h("duet-caption", { key: '28baa67909e4027ae56a35d87a4e15a5f118e703', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '2b734b81c229392334276022638d7265e23c2168', class: "duet-multiselect-wrapper" }, h("button", { key: 'd6fb96ae298ce6e3d7df71217c728f29e1550c9a', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '7581bf2f7629efe48e128c941beee89c4d22f709', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '7b747555309afe0dc4716f4335269a5dc46f17ff', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '22f9e68fe690b60dfe7e28ba5767d613e1037070' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '8058039ac3e9c6cf1fdf9b45468adc80673e7096', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac8d3582da5151508ede09fe95ea1fe7a6b79444', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '0c1236ae0fad913c3e9d2fdd2d8a558467d415e8', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: 'adffc7b727675100dabd55690baa4cfdf8db6bc9', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '5fe77f9b62e41a2fe5b8e2f08df86a34f13a0db9', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '086c285ad8d21277035ca2f620d0506461671a30', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '2117b075e96a7825514769fde136f51b1ebf59f9', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ca41c3bf1cb8dc88c6bf4c5d237e8e3cc5fccd6c', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '7070fc9475815328dc21256e8ddf279f182dd2ad', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '6f9f7cb3b9e6acc65cae486e246a12110181fdff', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'b3241e3fb948c771065983f44f65b281026d5c21' }, this.error)))));
+            })))))), h("span", { key: '85105033af5fe4ee0285693dad9683dd515886b5', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'ba9f048437b257012370b3414c944bc27c3f3f77' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +307,7 @@ export class DuetMultiselect {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -278,12 +328,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -298,12 +348,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -318,12 +368,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -338,12 +388,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "unknown",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetMultiselectItem[]",
@@ -368,6 +418,7 @@ export class DuetMultiselect {
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -388,12 +439,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -408,12 +459,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -428,12 +479,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID(\"DuetMultiselect\")"
             },
             "allControls": {
                 "type": "boolean",
+                "attribute": "all-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -448,12 +499,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "all-controls",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -468,12 +519,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -488,11 +539,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "items": {
                 "type": "string",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string | DuetMultiselectItem[] | DuetMultiselectItemGroup[]",
@@ -518,11 +569,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -537,12 +588,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -557,12 +608,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -577,11 +628,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -602,11 +653,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -621,11 +672,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -640,12 +691,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -666,7 +717,6 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }

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

@@ -10,7 +10,14 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  */
 export class DuetNav {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Makes navigation sticky so it stays on top.
+         * when page is being scrolled. Works only for mobile.
+         */
         this.sticky = false;
     }
     /**
@@ -42,6 +49,7 @@ export class DuetNav {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -62,12 +70,12 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -82,7 +90,6 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -7,17 +7,46 @@ import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/ke
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetNotification {
     constructor() {
+        /**
+         * The currently active language.
+         * Used for announcing unread notifications to screen readers.
+         * @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();
+        /**
+         * Property to change accessibleLabelUnread defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelUnread when needed
+         */
         this.accessibleLabelUnreadDefaults = {
             en: "Unread",
             fi: "Lukematon",
             sv: "Oläst",
         };
+        /**
+         * Adds accessible label for tooltip that is shown over unread counter
+         * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
+         */
         this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
+        /**
+         * The url to open on notification click.
+         */
         this.url = "#";
+        /**
+         * The date of the notification.
+         */
         this.date = "";
+        /**
+         * Should the notification be visually highlighted?
+         */
         this.highlight = false;
+        /**
+         * Should the link open in a new window?
+         */
         this.external = false;
+        /**
+         * Theme of the notification.
+         */
         this.theme = "";
     }
     /**
@@ -65,6 +94,7 @@ export class DuetNotification {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -91,12 +121,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelUnreadDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-unread-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -121,6 +151,7 @@ export class DuetNotification {
             },
             "accessibleLabelUnread": {
                 "type": "string",
+                "attribute": "accessible-label-unread",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -138,12 +169,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-unread",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,12 +189,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "date": {
                 "type": "string",
+                "attribute": "date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,12 +209,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "date",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "highlight": {
                 "type": "boolean",
+                "attribute": "highlight",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,12 +229,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,12 +249,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -244,7 +275,6 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }