@duetds/components 9.2.2 → 9.2.4

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.js

@@ -93,6 +93,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -111,6 +113,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -129,6 +133,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Url"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false
             },
@@ -152,6 +158,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Left icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -176,6 +184,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Right icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -194,6 +204,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -211,6 +223,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-expanded",
                 "reflect": true
             },
@@ -228,6 +242,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Use this property to add an aria-haspopup attribute to a button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
@@ -255,6 +271,8 @@ export class DuetMenuBarItem {
                         }],
                     "text": "Defaults for accessibleLabelExternal"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
@@ -276,6 +294,8 @@ export class DuetMenuBarItem {
                         }],
                     "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
@@ -294,6 +314,8 @@ export class DuetMenuBarItem {
                     "tags": [],
                     "text": "Forces URL to open in a new browser tab. Used together with URL prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -62,6 +62,8 @@ export class DuetMenuBarLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -80,6 +82,8 @@ export class DuetMenuBarLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -98,6 +102,8 @@ export class DuetMenuBarLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -116,6 +122,8 @@ export class DuetMenuBarLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -134,6 +142,8 @@ export class DuetMenuBarLink {
                     "tags": [],
                     "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             }

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

@@ -324,6 +324,8 @@ export class DuetModal {
                         }],
                     "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
@@ -345,6 +347,8 @@ export class DuetModal {
                         }],
                     "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
@@ -366,6 +370,8 @@ export class DuetModal {
                         }],
                     "text": "When modal used as a lodader, as an audible substitute for the spinner, we use this message"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-loader-announcement",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLoaderAnnouncementDefaults,\n    this.language\n  )"
@@ -390,6 +396,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Size of the modal window."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -408,6 +416,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false
             },
@@ -425,6 +435,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Indicates the id or a string of space seperated ids of a component(s) that labels the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-labelled-by",
                 "reflect": false
             },
@@ -442,6 +454,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "By default the heading is used aria-label for the modal.\nIf you wish to use something else then you must set this label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -459,6 +473,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Details of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -477,6 +493,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Aria description the button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -501,6 +519,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Variation of the modal window. Slide-up variation has fixed height so it suits well for\nsituations where the modal content height changes. Loader variation is used when the user\ninitiates an action that takes time to complete - it can be used with addMessage() method to\ninsert accessible message to the modal to inform the user about the progress."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -525,6 +545,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Size of the modal window's padding."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "gutter-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -549,6 +571,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Theme of the modal."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -567,6 +591,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Accessible heading displayed in the modal. The modal marks this as the\nlabel of the modal when used. This helps screen reader users which is\nwhy this is a required property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -591,6 +617,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Accessible heading size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h3\""
@@ -615,6 +643,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Makes the visual style mimic a specific heading level. This option allows\nyou to make e.g. h1 visually look like h3, but still keep it h1 in the\nmarkup."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-visual-level",
                 "reflect": false
             },
@@ -638,6 +668,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Icon to display above the heading (from Duet\u2019s icons). Example:\n\"form-location\""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -662,6 +694,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"primary\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -680,6 +714,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Use this property when you need to have the modal dialog initially active."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -698,6 +734,8 @@ export class DuetModal {
                     "tags": [],
                     "text": "Use this property when you want the modal to close when clicked outside of modal."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-on-blur",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -275,6 +275,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -293,6 +295,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Display the select in error state along with an error message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -311,6 +315,8 @@ export class DuetMultiselect {
                     "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\""
@@ -329,6 +335,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Expands the input to fill 100% of the container width."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
@@ -353,6 +361,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Value of multiselect"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "theme": {
@@ -375,6 +385,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Theme of the select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -393,6 +405,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Visually hide the label, but still show it to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -411,6 +425,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Adds a unique identifier for the select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID(\"DuetMultiselect\")"
@@ -429,6 +445,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "If set, the multiselect will display buttons to select or deselect all items.\nThis should be used when there are many items, consider when the number of items is more than 5."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "all-controls",
                 "reflect": false,
                 "defaultValue": "false"
@@ -447,6 +465,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Hint text to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -465,6 +485,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Caption (underneath label) that can be set as a way of adding extra information"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false
             },
@@ -493,6 +515,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "An array of items to choose from"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "items",
                 "reflect": false
             },
@@ -510,6 +534,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -528,6 +554,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Label for the select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
@@ -546,6 +574,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Color of the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-color",
                 "reflect": false
             },
@@ -569,6 +599,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Font weight of the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-weight",
                 "reflect": false
             },
@@ -586,6 +618,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Indicates the id of a component that describes the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false
             },
@@ -603,6 +637,8 @@ export class DuetMultiselect {
                     "tags": [],
                     "text": "Tooltip to display next to the label of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -627,6 +663,8 @@ export class DuetMultiselect {
                     "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\""

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

@@ -60,6 +60,8 @@ export class DuetNav {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -78,6 +80,8 @@ export class DuetNav {
                     "tags": [],
                     "text": "Makes navigation sticky so it stays on top.\nwhen page is being scrolled. Works only for mobile."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -24,16 +24,24 @@
   width: 100%;
 }
 
+:host(:not([highlight])) ::slotted(duet-heading),
+:host(:not([highlight])) ::slotted(duet-paragraph) {
+  opacity: 0.7;
+}
+
 .duet-notification {
   display: block;
   padding: 16px;
-  color: rgb(8, 42, 77);
   cursor: pointer;
-  border-bottom: 1px solid rgb(212, 223, 229);
-  transition: 300ms ease;
+}
+:host(:first-of-type) .duet-notification {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -41,7 +49,6 @@
 }
 .duet-notification.duet-notification-highlight {
   font-weight: 600;
-  background: rgb(240, 247, 250);
 }
 .duet-notification.duet-notification-highlight.duet-theme-turva {
   background: rgb(245, 247, 250);
@@ -71,6 +78,7 @@
 .duet-notification-container {
   position: relative;
   display: flex;
+  border-bottom: 1px solid rgb(212, 223, 229);
 }
 
 .duet-notification-badge-container {
@@ -103,9 +111,10 @@
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.25;
-  color: rgb(98, 121, 138);
+  color: rgb(8, 42, 77);
   text-align: right;
   text-transform: uppercase;
+  opacity: 0.7;
 }
 @media (max-width: 35.9375em) {
   .duet-notification-date {
@@ -116,6 +125,25 @@
   color: rgb(113, 118, 132);
 }
 
+@media (min-width: 62em) {
+  :host(:not([highlight])) ::slotted(duet-heading),
+  :host(:not([highlight])) ::slotted(duet-paragraph) {
+    opacity: 1;
+  }
+  .duet-notification {
+    border-bottom: 1px solid rgb(212, 223, 229);
+  }
+  .duet-notification:hover {
+    background: rgb(228, 241, 247);
+  }
+  .duet-notification.duet-notification-highlight {
+    font-weight: 600;
+    background: rgb(240, 247, 250);
+  }
+  .duet-notification-container {
+    border-bottom-style: none;
+  }
+}
 ::slotted(duet-heading) {
   padding-right: 80px !important;
 }

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

@@ -89,6 +89,8 @@ export class DuetNotification {
                         }],
                     "text": "The currently active language.\nUsed for announcing unread notifications to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
@@ -113,6 +115,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "Property to change accessibleLabelUnread defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelUnread when needed"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    en: \"Unread\",\n    fi: \"Lukematon\",\n    sv: \"Ol\u00E4st\",\n  }"
             },
             "accessibleLabelUnread": {
@@ -132,6 +136,8 @@ export class DuetNotification {
                         }],
                     "text": "Adds accessible label for tooltip that is shown over unread counter"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-unread",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
@@ -150,6 +156,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "The url to open on notification click."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -168,6 +176,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "The date of the notification."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "date",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -186,6 +196,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "Should the notification be visually highlighted?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "false"
@@ -204,6 +216,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "Should the link open in a new window?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
@@ -228,6 +242,8 @@ export class DuetNotification {
                     "tags": [],
                     "text": "Theme of the notification."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""