@duetds/components 9.2.2 → 9.2.4

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

@@ -140,6 +140,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "Icon to display to the left of the drawer button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -158,6 +160,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "Label for the drawer button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
@@ -182,6 +186,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "The currently active language.\nUsed to determine the message displayed when there are no notifications."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
@@ -209,6 +215,8 @@ export class DuetNotificationDrawer {
                         }],
                     "text": "Defaults for accessibleLabelNotifications"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-notification-default",
                 "reflect": false,
                 "defaultValue": "{\n    en: \"No notifications\",\n    fi: \"Ei ilmoituksia\",\n    sv: \"Inga notifikationer\",\n  }"
@@ -230,6 +238,8 @@ export class DuetNotificationDrawer {
                         }],
                     "text": "Adds accessible label for tooltip that is shown for notifications"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-notifications",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
@@ -248,6 +258,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "Show a badge that indicates something has changed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
@@ -272,6 +284,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "Theme of the notification drawer."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -296,6 +310,8 @@ export class DuetNotificationDrawer {
                     "tags": [],
                     "text": "Which direction should the drawer open in?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"left\""

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -334,6 +334,8 @@ export class DuetNumberInput {
                         }],
                     "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
@@ -358,6 +360,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Locale used to format the entered value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "locale",
                 "reflect": false,
                 "defaultValue": "getLocale(this.language).locale"
@@ -376,6 +380,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Unit for the number input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "unit",
                 "reflect": false,
                 "defaultValue": "getLocale(this.language).money"
@@ -394,6 +400,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Indicates the id of a related component\u2019s visually focused element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-active-descendant",
                 "reflect": false
             },
@@ -411,6 +419,8 @@ export class DuetNumberInput {
                     "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
             },
@@ -428,6 +438,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Details of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -446,6 +458,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "String of id's that indicate alternative labels elements"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -464,6 +478,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Aria description the button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -482,6 +498,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Indicates the id of a component owned by the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-owns",
                 "reflect": false
             },
@@ -499,6 +517,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Indicates the id of a component that describes the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false
             },
@@ -525,6 +545,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Defaults for accessibleLive"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-live-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"{current} euroa valittuna\",\n    en: \"{current} euros selected\",\n    sv: \"{current} euro valt\",\n  }"
@@ -546,6 +568,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-live",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLiveDefaults, this.language)"
@@ -564,6 +588,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-live-enabled",
                 "reflect": false,
                 "defaultValue": "true"
@@ -591,6 +617,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Defaults for accessibleAdd"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-add-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
@@ -612,6 +640,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Accessible label for the add button that is read for screen reader users."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-add",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleAddDefaults, this.language)"
@@ -639,6 +669,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Defaults for accessibleSubtract"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-subtract-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
@@ -660,6 +692,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Accessible label for the subtract button that is read for screen reader users."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-subtract",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleSubtractDefaults, this.language)"
@@ -684,6 +718,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Theme of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -708,6 +744,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -726,6 +764,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Expands the input to fill 100% of the container width."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
@@ -744,6 +784,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Adds a unique identifier for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -761,6 +803,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Minimum value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
@@ -788,6 +832,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Defaults for Label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Nimilappu\",\n    en: \"Label\",\n    sv: \"Etikett\",\n  }"
@@ -809,6 +855,8 @@ export class DuetNumberInput {
                         }],
                     "text": "Label for the number input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
@@ -827,6 +875,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Visually hide the label, but still show it to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -845,6 +895,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Maximum value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "1000000"
@@ -863,6 +915,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Name of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -880,6 +934,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Display the input in error state along with an error message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -898,6 +954,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Tooltip to display next to the label of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -916,6 +974,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Step amount."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "5000"
@@ -934,6 +994,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Controls whether or not value gets rounded to the nearest\nmultiple of a step on blur. Set to \"false\" to disable this behaviour."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rounding",
                 "reflect": false,
                 "defaultValue": "true"
@@ -952,6 +1014,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Defines a specific role attribute for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false
             },
@@ -969,6 +1033,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Makes the number 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"
@@ -987,6 +1053,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Set whether the input is required or not. Please note that this is required 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"
@@ -1005,6 +1073,8 @@ export class DuetNumberInput {
                     "tags": [],
                     "text": "Value of the input. This is passed as a string since Number Input uses Duet\u2019s Input component internally and we need the value to support spaces and the unit as well."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }

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

@@ -77,6 +77,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "visible",
                 "reflect": true,
                 "defaultValue": "true"
@@ -95,6 +97,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Keep stacking context"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "keep-stacking-context",
                 "reflect": true,
                 "defaultValue": "false"
@@ -113,6 +117,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Modal overlay"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "modal-overlay",
                 "reflect": true,
                 "defaultValue": "false"
@@ -137,6 +143,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Theme"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -161,6 +169,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Mode"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "display-device",
                 "reflect": false,
                 "defaultValue": "\"all\""
@@ -179,6 +189,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Transition"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "transition",
                 "reflect": false,
                 "defaultValue": "\"slowly\""
@@ -197,6 +209,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Z-index"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "z-index",
                 "reflect": false,
                 "defaultValue": "\"400\""
@@ -215,6 +229,8 @@ export class DuetOverlay {
                     "tags": [],
                     "text": "Variation, dark and white can be used when we want to have text on the overlay"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""

package/lib/collection/components/duet-page-heading/duet-page-heading.css

@@ -208,4 +208,18 @@
 .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
   position: relative;
   top: -3px;
+}
+.duet-page-heading .progress-indicator {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}
+.duet-page-heading .progress-step {
+  width: 100%;
+  height: 4px;
+  background-color: rgb(181, 198, 208);
+  border-radius: 2px;
+}
+.duet-page-heading .progress-step.active {
+  background-color: rgb(0, 119, 179);
 }

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -11,6 +11,8 @@ export class DuetPageHeading {
         this.theme = "";
         this.icon = "";
         this.layout = "narrow";
+        this.progressCurrentStep = undefined;
+        this.progressTotalSteps = undefined;
     }
     /**
      * Component lifecycle events.
@@ -18,18 +20,27 @@ export class DuetPageHeading {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    progressIndicator() {
+        return (h("div", { class: "progress-indicator" }, Array.from({ length: Math.ceil(this.progressTotalSteps) }, (_, i) => {
+            const indicatorStep = i + 1;
+            return (h("div", { class: {
+                    "progress-step": true,
+                    active: indicatorStep <= this.progressCurrentStep,
+                } }));
+        })));
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '7158f6bb1baba0316e310548c2f11fbba22ed802', class: {
+        return (h("div", { key: '2a170e4c6fc33fdba313ded3c3f01a78c9ac0866', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '9279bef8f915599c716557dcb4cfae9e8ebdcdd7', class: "background" }, this.theme === "turva" && h("div", { key: '88fee514b2c9d6db4993c6070e379e6d354b7f91', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'cf612c48b8322c7b6f8d15e9e3ae7929ebfc754c', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'c370d729b95244f6b94a6dc1ad15494af14bdcad', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'c6d34424c53f9fd3d0596a04d2fc111e78c36187', class: "brand-shaped-icon" }, h("duet-icon", { key: 'df9bf6856c35d65c8490b3c4738a56ffb5a1b8ee', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '275b220fddac6f60e953cc2dee0aaf6a9766807a', class: "heading" }, h("slot", { key: 'fb7b03458b5853815d412eddd93a164f21d102c6', name: "heading" }))));
+            } }, h("div", { key: '4b02d9d0134c3cb06bba6bdbd1b20f9d2d26e56a', class: "background" }, this.theme === "turva" && h("div", { key: 'ba779c516b2646ea7b062bd893a5928a91770b51', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '975ea6aff24cd955e428eb5c92312984dc034d56', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'cc7486a21275418c5bb85daef2f87a8272b94aa7', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '47ea901848ac5c4e50bc3c961d9bfa6f904d6d37', class: "brand-shaped-icon" }, h("duet-icon", { key: '370ac1f81a9d150ca01159b00a60cd8a730aef5f', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '0b151e3015924091b9e9a35145e23754234641ef', class: "heading" }, h("slot", { key: '89c063ef8fceed0f4c75255f29dcd7200f394976', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: 'ee3688b0e6d3145fbf47501fc353caa398898e5f' }, h("duet-spacer", { key: '0b86d382eee4c4287419fe1c660970f943c32cba', size: "large" }), h("div", { key: 'e0010cce92077310161c55fd134b022eb8f7e035', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +76,8 @@ export class DuetPageHeading {
                     "tags": [],
                     "text": "Theme of the hero area."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -89,6 +102,8 @@ export class DuetPageHeading {
                     "tags": [],
                     "text": "Icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -107,9 +122,49 @@ export class DuetPageHeading {
                     "tags": [],
                     "text": "Layout.\nValues narrow and fluid are deprecated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
+            },
+            "progressCurrentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step of total steps in progress indicator.\n(Current step should start from 1, not 0.)\nTo render a progress indicator both progressTotalSteps and progressCurrentStep must be given."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "progress-current-step",
+                "reflect": false
+            },
+            "progressTotalSteps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total steps amount in progress indicator.\nTo render a progress indicator both progressTotalSteps and progressCurrentStep must be given"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "progress-total-steps",
+                "reflect": false
             }
         };
     }