@duetds/components 7.0.1 → 7.0.2

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

@@ -251,17 +251,6 @@ 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.
    */
@@ -278,7 +267,11 @@ export class DuetHeader {
         this.boundMqlFunctions[i] = bound;
       }
     }
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" },
+      { prop: "accessibleI18nLabels", defaults: "accessibleI18nLabelsDefaults" },
+      { prop: "accessibleLabelExternal", defaults: "accessibleLabelExternalDefaults" },
+    ]);
   }
   disconnectedCallback() {
     if (this.navigationEl) {
@@ -1289,9 +1282,6 @@ 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.js

@@ -61,11 +61,6 @@ 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.
    */
@@ -77,7 +72,10 @@ export class DuetHero {
     this.refresh();
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -781,9 +779,6 @@ 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-link/duet-link.js

@@ -25,11 +25,6 @@ export class DuetLink {
     this.icon = undefined;
     this.padding = "auto";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
-      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -37,7 +32,10 @@ export class DuetLink {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, {
+      prop: "accessibleLabelExternal",
+      defaults: "accessibleLabelExternalDefaults",
+    });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -373,10 +371,4 @@ export class DuetLink {
       }
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }];
-  }
 }

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

@@ -52,11 +52,6 @@ export class DuetLogo {
     this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     this.language = getLanguage();
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -64,7 +59,7 @@ export class DuetLogo {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -308,10 +303,4 @@ export class DuetLogo {
     };
   }
   static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }];
-  }
 }

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

@@ -98,11 +98,6 @@ export class DuetModal {
       }
     }
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefaults[oldValue]) {
-      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, newValue);
-    }
-  }
   activeChanged() {
     this.open = this.active;
   }
@@ -122,7 +117,7 @@ export class DuetModal {
     }
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -695,9 +690,6 @@ export class DuetModal {
     return [{
         "propName": "open",
         "methodName": "openChanged"
-      }, {
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
       }, {
         "propName": "active",
         "methodName": "activeChanged"

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

@@ -19,11 +19,6 @@ 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.
    */
@@ -31,7 +26,7 @@ export class DuetNotification {
     inheritGlobalTheme(this);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -266,10 +261,4 @@ export class DuetNotification {
     };
   }
   static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }];
-  }
 }

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
-import { getLanguage, getLocale, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
 export class DuetNumberInput {
   constructor() {
@@ -234,6 +234,17 @@ export class DuetNumberInput {
       this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
+      { prop: "accessibleAdd", defaults: "accessibleAddDefaults" },
+      { prop: "accessibleSubtract", defaults: "accessibleSubtractDefaults" },
+      { prop: "label", defaults: "labelDefaults" },
+    ]);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-number-input`. Use this method instead of the global
    * `input.focus()`.
@@ -507,7 +518,7 @@ export class DuetNumberInput {
       },
       "accessibleLive": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -572,7 +583,7 @@ export class DuetNumberInput {
       },
       "accessibleAdd": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -619,7 +630,7 @@ export class DuetNumberInput {
       },
       "accessibleSubtract": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -765,7 +776,7 @@ export class DuetNumberInput {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -6,7 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
@@ -65,7 +65,6 @@ export class DuetPagination {
     this.numbersStore = "";
     this.totalPages = 10;
     this.internalSectionIndex = 0;
-    this.language = getLanguage();
     this.theme = "";
     this.jumpString = "...";
     this.variation = "default";
@@ -118,11 +117,6 @@ export class DuetPagination {
     this.ariaControls = "";
     this.current = 1;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabels === this.accessibleLabelsDefaults[oldValue]) {
-      this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults, newValue);
-    }
-  }
   watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
     this.calculatePageTake();
     return true;
@@ -148,7 +142,7 @@ export class DuetPagination {
     this.setFocus();
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelsDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -566,8 +560,7 @@ export class DuetPagination {
     return {
       "numbersStore": {},
       "totalPages": {},
-      "internalSectionIndex": {},
-      "language": {}
+      "internalSectionIndex": {}
     };
   }
   static get events() {
@@ -596,9 +589,6 @@ export class DuetPagination {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }, {
         "propName": "total",
         "methodName": "watchPropTotalHandler"
       }, {

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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetProgress {
   constructor() {
     /**
@@ -34,6 +34,12 @@ export class DuetProgress {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -175,7 +181,7 @@ export class DuetProgress {
       },
       "accessibleLabelUpload": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
  * @part range-numbers - this part enables style overrides for the range-numbers
@@ -20,7 +20,6 @@ export class DuetRangeStepper {
       this.clampStepIndex();
       this.handleStepClick(e);
     };
-    this.language = getLanguage();
     this.theme = "";
     this.stepIndex = 1;
     this.stepSize = 50;
@@ -45,11 +44,6 @@ export class DuetRangeStepper {
     this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
     this.ariaControls = "";
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.ariaLabels === this.ariaLabelsDefaults[oldValue]) {
-      this.ariaLabels = getLocaleString(this.ariaLabelsDefaults, newValue);
-    }
-  }
   watchStepIndexStateHandler(newValue) {
     if (this.leftBnRef && this.rightBnRef) {
       if (newValue <= 1) {
@@ -98,7 +92,7 @@ export class DuetRangeStepper {
     this.watchStepIndexStateHandler(this.stepIndex);
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, { prop: "ariaLabels", defaults: "ariaLabelsDefaults" });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -335,11 +329,6 @@ export class DuetRangeStepper {
       }
     };
   }
-  static get states() {
-    return {
-      "language": {}
-    };
-  }
   static get events() {
     return [{
         "method": "duetRangeStepUpdate",
@@ -366,9 +355,6 @@ export class DuetRangeStepper {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }, {
         "propName": "stepIndex",
         "methodName": "watchStepIndexStateHandler"
       }, {

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -65,20 +65,6 @@ export class DuetShowMore {
     this.margin = "auto";
     this.open = false;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.showMoreLabel === this.showMoreLabelDefaults[oldValue]) {
-      this.showMoreLabel = getLocaleString(this.showMoreLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showLessLabel === this.showLessLabelDefaults[oldValue]) {
-      this.showLessLabel = getLocaleString(this.showLessLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showMoreAccessibleLabel === this.showMoreAccessibleLabelDefaults[oldValue]) {
-      this.showMoreAccessibleLabel = getLocaleString(this.showMoreAccessibleLabelDefaults, newValue);
-    }
-    if (newValue !== oldValue && this.showLessAccessibleLabel === this.showLessAccessibleLabelDefaults[oldValue]) {
-      this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -87,7 +73,12 @@ export class DuetShowMore {
     this.buttonAriaOpen = this.open;
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "showMoreLabel", defaults: "showMoreLabelDefaults" },
+      { prop: "showLessLabel", defaults: "showLessLabelDefaults" },
+      { prop: "showMoreAccessibleLabel", defaults: "showMoreAccessibleLabelDefaults" },
+      { prop: "showLessAccessibleLabel", defaults: "showLessAccessibleLabelDefaults" },
+    ]);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -398,10 +389,4 @@ export class DuetShowMore {
       }];
   }
   static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }];
-  }
 }

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

@@ -2,17 +2,27 @@
  * Built with Duet Design System
  */
 import { Build, h } from "@stencil/core";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetTab {
   constructor() {
     this.label = undefined;
     this.caption = undefined;
     this.selected = undefined;
     this.accessibleDescriptionDefault = null;
-    this.accessibleDescription = this.accessibleDescriptionDefault
+    this.accessibleDescription = this
+      .accessibleDescriptionDefault
       ? getLocaleString(this.accessibleDescriptionDefault)
       : null;
   }
+  /**
+   * Component lifecycle events.
+   */
+  connectedCallback() {
+    connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -115,7 +125,7 @@ export class DuetTab {
       },
       "accessibleDescription": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -132,7 +142,7 @@ export class DuetTab {
         },
         "attribute": "accessible-description",
         "reflect": false,
-        "defaultValue": "this.accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
+        "defaultValue": "this\n    .accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
       }
     };
   }

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

@@ -93,14 +93,6 @@ export class DuetTooltip {
     this.positionHorizontal = "0";
     this.active = false;
   }
-  watchLanguageStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefault[oldValue]) {
-      this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, newValue);
-    }
-    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefault[oldValue]) {
-      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, newValue);
-    }
-  }
   /**
    * Component lifecycle events.
    */
@@ -134,7 +126,10 @@ export class DuetTooltip {
     this.focusTarget = null;
   }
   connectedCallback() {
-    connectLanguageChangeObserver(this);
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
+      { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefault" },
+    ]);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
@@ -519,9 +514,6 @@ export class DuetTooltip {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "language",
-        "methodName": "watchLanguageStateHandler"
-      }, {
         "propName": "active",
         "methodName": "handleActiveChange"
       }];

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

@@ -5,7 +5,7 @@ import { sizeHeader } from "@duetds/tokens";
 import { Fragment, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
@@ -56,6 +56,15 @@ export class DuetTray {
     inheritGlobalTheme(this);
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this, [
+      { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
+      { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
+    ]);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -155,7 +164,7 @@ export class DuetTray {
       },
       "accessibleCloseLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -172,7 +181,7 @@ export class DuetTray {
         },
         "attribute": "accessible-close-label",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleCloseLabelDefaults, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
       },
       "accessibleOpenLabelDefaults": {
         "type": "string",
@@ -202,7 +211,7 @@ export class DuetTray {
       },
       "accessibleOpenLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -219,7 +228,7 @@ export class DuetTray {
         },
         "attribute": "accessible-open-label",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleOpenLabelDefaults, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleOpenLabelDefaults,\n    this.language\n  )"
       },
       "theme": {
         "type": "string",