@duetds/components 6.9.0 → 6.9.1

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -6,7 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { capitalizeFirstLetter, getColorByName, shadeRGBColor } from "../../utils/token-utils";
 /**
  * @slot default - slot inside an invisible element, this can be used to enhance accessibility
@@ -31,6 +31,7 @@ export class DuetActionButton {
       });
     });
     this.numbersStore = "";
+    this.language = getLanguage();
     this.theme = "";
     this.iconName = "action-arrow-left-small";
     this.iconColor = "currentColor";
@@ -48,12 +49,17 @@ export class DuetActionButton {
     this.accessibleDescription = undefined;
     this.accessibleLabelsDefaults = {
       en: "Click to activate action",
-      fi: "Klikkaa toiminnon aktivointiin",
+      fi: "Klikkaa aktivoidaksesi toiminto",
       sv: "Klicka för att aktivera åtgärd",
     };
     this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults);
     this.accessibleControls = "";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelsDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelsDefaults, newValue);
+    }
+  }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
     if (isKeyboardClick(e)) {
@@ -88,6 +94,12 @@ export class DuetActionButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-action-button`. Use this method instead of the global
    * `button.focus()`.
@@ -454,11 +466,11 @@ export class DuetActionButton {
           "tags": [],
           "text": "Default accessible label"
         },
-        "defaultValue": "{\n    en: \"Click to activate action\",\n    fi: \"Klikkaa toiminnon aktivointiin\",\n    sv: \"Klicka f\u00F6r att aktivera \u00E5tg\u00E4rd\",\n  }"
+        "defaultValue": "{\n    en: \"Click to activate action\",\n    fi: \"Klikkaa aktivoidaksesi toiminto\",\n    sv: \"Klicka f\u00F6r att aktivera \u00E5tg\u00E4rd\",\n  }"
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -472,7 +484,7 @@ export class DuetActionButton {
         },
         "attribute": "accessible-label",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelsDefaults)"
+        "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
       },
       "accessibleControls": {
         "type": "string",
@@ -496,7 +508,8 @@ export class DuetActionButton {
   }
   static get states() {
     return {
-      "numbersStore": {}
+      "numbersStore": {},
+      "language": {}
     };
   }
   static get events() {
@@ -549,4 +562,10 @@ export class DuetActionButton {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

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

@@ -5,7 +5,7 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
@@ -26,6 +26,7 @@ export class DuetCombobox {
     this.listOpen = false;
     this.selectedItems = new Set();
     this.activeItem = undefined;
+    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       en: {
         heading: "Select:",
@@ -56,6 +57,12 @@ export class DuetCombobox {
   activeItemHandler(state) {
     this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue &&
+      this.accessibleLabels === getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), oldValue)) {
+      this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), newValue);
+    }
+  }
   handleDocumentClick(e) {
     //we want to remove all user text if they have NOT selected from the dropdown
     const path = e.composedPath();
@@ -94,6 +101,7 @@ export class DuetCombobox {
       }
     });
     this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    connectLanguageChangeObserver(this);
     //add correct aria attributes to the input element
     this.input.accessibleAutocomplete = "list";
     this.input.accessibleControls = "duet-combobox-list-element";
@@ -109,6 +117,7 @@ export class DuetCombobox {
       e.stopPropagation();
     });
     this.resizeObserver.disconnect();
+    disconnectLanguageChangeObserver(this);
   }
   componentDidLoad() {
     // observe resize events to dynamically adjust size of dropdown area
@@ -380,7 +389,7 @@ export class DuetCombobox {
       },
       "accessibleLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "Record<string, string>",
           "resolved": "{ [x: string]: string; }",
@@ -567,7 +576,8 @@ export class DuetCombobox {
       "selectionMsg": {},
       "listOpen": {},
       "selectedItems": {},
-      "activeItem": {}
+      "activeItem": {},
+      "language": {}
     };
   }
   static get events() {
@@ -631,6 +641,9 @@ export class DuetCombobox {
     return [{
         "propName": "activeItem",
         "methodName": "activeItemHandler"
+      }, {
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
       }];
   }
   static get listeners() {

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { fieldSorter } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
@@ -41,6 +41,7 @@ export class DuetEditableTable {
         this.toggleColumn(column, e);
       }
     };
+    this.language = getLanguage();
     this.margin = "auto";
     this.variation = "striped";
     this.sticky = false;
@@ -63,6 +64,12 @@ export class DuetEditableTable {
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   createLabel(column) {
     const { sort_order, direction, index, label } = column;
     const i18nLabel = getLocaleString(label);
@@ -81,7 +88,7 @@ export class DuetEditableTable {
       }
       return "action-subtract-small";
     };
-    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": this.sortableDefaultLabel[this.language], variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
   }
   getSortedColumns() {
     //create a new array from sort instead of mutating original
@@ -110,7 +117,7 @@ export class DuetEditableTable {
         const label = this.createLabel(column);
         return label !== "" ? h("th", { scope: "col" }, label) : h("td", null);
       }
-    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
+    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, this.actionColumnLabel[this.language])))));
   }
   renderActions(rowItem, index) {
     // escape early
@@ -448,6 +455,11 @@ export class DuetEditableTable {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetTableToggle",

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

@@ -19,6 +19,9 @@
 :host(.duet-grid-breakpoint-x-small) {
   flex-direction: row !important;
 }
+:host(.duet-grid-breakpoint-x-small).duet-grid-row-reverse {
+  flex-direction: row-reverse !important;
+}
 @media (max-width: 22.5em) {
   :host(.duet-grid-breakpoint-x-small) {
     flex-direction: column !important;
@@ -29,24 +32,36 @@
   :host(.duet-grid-breakpoint-small) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-small).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 48em) {
   :host(.duet-grid-breakpoint-medium) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-medium).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 62em) {
   :host(.duet-grid-breakpoint-large) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-large).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 @media (min-width: 64.0625em) {
   :host(.duet-grid-breakpoint-x-large) {
     flex-direction: row !important;
   }
+  :host(.duet-grid-breakpoint-x-large).duet-grid-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 }
 
 :host(.duet-grid-wrap) {
@@ -56,6 +71,9 @@
 :host(.duet-no-stacking) {
   flex-direction: row !important;
 }
+:host(.duet-no-stacking).duet-grid-row-reverse {
+  flex-direction: row-reverse !important;
+}
 
 :host(.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
   flex-direction: column !important;

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

@@ -18,6 +18,7 @@ export class DuetGrid {
     this.responsive = false;
     this.breakpoint = "small";
     this.direction = "horizontal";
+    this.rowReverse = false;
     this.alignment = "top";
     this.distribution = "default";
     this.mobile = "";
@@ -140,6 +141,7 @@ export class DuetGrid {
         "duet-grid-breakpoint-medium": this.breakpoint === "medium",
         "duet-grid-breakpoint-large": this.breakpoint === "large",
         "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+        "duet-grid-row-reverse": this.rowReverse,
       } }));
   }
   static get is() { return "duet-grid"; }
@@ -220,6 +222,24 @@ export class DuetGrid {
         "reflect": false,
         "defaultValue": "\"horizontal\""
       },
+      "rowReverse": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reverse the order of the grid items when horizontal. Usefull when we want the primary item\nto be on bottom right on desktop, but on top on mobile and the first for screen readers."
+        },
+        "attribute": "row-reverse",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "alignment": {
         "type": "string",
         "mutable": false,

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

@@ -13,7 +13,7 @@ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodySc
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
@@ -251,6 +251,17 @@ export class DuetHeader {
     this.contactItems = undefined;
     this.languageItems = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.accessibleI18nLabels === this.accessibleI18nLabelsDefaults[oldValue]) {
+      this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -267,6 +278,7 @@ export class DuetHeader {
         this.boundMqlFunctions[i] = bound;
       }
     }
+    connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     if (this.navigationEl) {
@@ -279,6 +291,7 @@ export class DuetHeader {
       }
     }
     this.boundMqlFunctions = [];
+    disconnectLanguageChangeObserver(this);
   }
   /**
    * Component event handling.
@@ -614,7 +627,7 @@ export class DuetHeader {
       },
       "accessibleI18nLabels": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "I18nText",
           "resolved": "I18nText",
@@ -664,7 +677,7 @@ export class DuetHeader {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -708,7 +721,7 @@ export class DuetHeader {
       },
       "accessibleLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -1271,6 +1284,9 @@ export class DuetHeader {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "user",
         "methodName": "refresh"
       }, {

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

@@ -468,6 +468,7 @@
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product {
+    min-height: 375px;
     padding-top: 0;
   }
   .duet-hero.duet-hero-product.duet-hero-narrow {
@@ -485,6 +486,9 @@
   .duet-hero.duet-hero-product .background-area {
     top: -112px;
   }
+  .duet-hero.duet-hero-product .background-area.narrow {
+    top: 0;
+  }
 }
 .duet-hero.duet-hero-product .background-container {
   position: absolute;
@@ -497,6 +501,9 @@
   .duet-hero.duet-hero-product .background-container {
     top: -48px;
   }
+  .duet-hero.duet-hero-product .background-container.narrow {
+    top: -160px;
+  }
 }
 .duet-hero.duet-hero-product .background {
   position: absolute;

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

@@ -5,7 +5,7 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -60,6 +60,11 @@ export class DuetHero {
     this.actions = undefined;
     this.layout = "narrow";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -69,6 +74,12 @@ export class DuetHero {
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Local methods.
    */
@@ -155,7 +166,7 @@ export class DuetHero {
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
         "duet-hero-narrow": this.layout === "narrow",
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { "background-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
       this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
         label: this.processedBack.label,
         href: this.processedBack.href,
@@ -492,7 +503,7 @@ export class DuetHero {
       },
       "accessibleLabelExternal": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -768,6 +779,9 @@ export class DuetHero {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }, {
         "propName": "back",
         "methodName": "refresh"
       }, {

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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
   return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
@@ -97,6 +97,7 @@ export class DuetMultiselect {
     this.processedItems = [];
     this.checkboxesVisible = false;
     this.activeDescendant = "";
+    this.language = getLanguage();
     this.margin = "auto";
     this.error = "";
     this.expand = false;
@@ -126,6 +127,12 @@ export class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
    * `multiselect.focus()`.
@@ -146,7 +153,6 @@ export class DuetMultiselect {
    * Always the last one in the class.
    */
   render() {
-    const selectedTranslation = getLocaleString(this.selectedLangObject);
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
@@ -156,7 +162,7 @@ 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("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { 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} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", selectedTranslation, h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", 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", { 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", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { 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} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", 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", { 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", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
         "duet-multiselect-checkboxes": true,
         "duet-multiselect-checkboxes-active": this.checkboxesVisible,
       }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
@@ -458,7 +464,8 @@ export class DuetMultiselect {
     return {
       "processedItems": {},
       "checkboxesVisible": {},
-      "activeDescendant": {}
+      "activeDescendant": {},
+      "language": {}
     };
   }
   static get events() {

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetNotification {
   constructor() {
     this.language = getLanguage();
@@ -19,12 +19,23 @@ export class DuetNotification {
     this.external = false;
     this.theme = "";
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelUnread === this.accessibleLabelUnreadDefaults[oldValue]) {
+      this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Move focus to the notification's link element.
    * Use this method instead of the native `focus()` method.
@@ -56,7 +67,7 @@ export class DuetNotification {
     return {
       "language": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "DuetLanguage",
           "resolved": "\"en\" | \"fi\" | \"sv\"",
@@ -80,7 +91,7 @@ export class DuetNotification {
           "text": "The currently active language.\nUsed for announcing unread notifications to screen readers."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "accessibleLabelUnreadDefaults": {
@@ -106,7 +117,7 @@ export class DuetNotification {
       },
       "accessibleLabelUnread": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -123,7 +134,7 @@ export class DuetNotification {
         },
         "attribute": "accessible-label-unread",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelUnreadDefaults, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
       },
       "url": {
         "type": "string",
@@ -255,4 +266,10 @@ export class DuetNotification {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }