npm - @duetds/components - Versions diffs - 6.8.3 → 6.8.5 - Mend

@duetds/components 6.8.3 → 6.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (561) hide show

package/hydrate/index.js CHANGED Viewed

@@ -6534,6 +6534,15 @@ class DuetActionButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  /**
+   * Sets focus on the specified `duet-action-button`. Use this method instead of the global
+   * `button.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeButton) {
+      this.nativeButton.focus(options);
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -6558,7 +6567,7 @@ class DuetActionButton {
       "border-width": "1px",
       "border-style": "solid",
     };
-    return (hAsync(Host, { onKeyDown: e => this.onKeyboardDown(e) }, hAsync("style", { innerHTML: backgroundStyles }), hAsync("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+    return (hAsync(Host, { onKeyDown: e => this.onKeyboardDown(e) }, hAsync("style", { innerHTML: backgroundStyles }), hAsync("button", { ref: button => (this.nativeButton = button), part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
         "duet-action-button": true,
         "duet-action-button--disabled": this.disabled,
         [`duet-action-button--${this.theme}`]: this.theme !== "",
@@ -6588,7 +6597,8 @@ class DuetActionButton {
       "accessibleLabelsDefaults": [16],
       "accessibleLabel": [1, "accessible-label"],
       "accessibleControls": [1, "accessible-controls"],
-      "numbersStore": [32]
+      "numbersStore": [32],
+      "setFocus": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -6619,6 +6629,7 @@ class DuetAlert {
     this.theme = "";
     this.isDismissed = false;
     this.timeoutID = undefined;
+    this.language = getLanguage();
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
       sv: "Stäng meddelandet",
@@ -6633,6 +6644,11 @@ class DuetAlert {
     this.variation = "default";
     this.dismissible = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -6644,10 +6660,14 @@ class DuetAlert {
       this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
   disconnectedCallback() {
     if (this.timeoutID) {
       clearTimeout(this.timeoutID);
     }
+    disconnectLanguageChangeObserver(this);
   }
   /**
    * Show.
@@ -6686,6 +6706,9 @@ class DuetAlert {
         "duet-theme-turva": this.theme === "turva",
       } }, hAsync("div", { class: "duet-alert-container" }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", { id: this.descriptiveId }, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
+  static get watchers() { return {
+    "language": ["watchLanguageStateHandler"]
+  }; }
   static get style() { return duetAlertCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -6693,7 +6716,7 @@ class DuetAlert {
     "$members$": {
       "theme": [1025],
       "accessibleLabelDefaults": [1, "accessible-label-default"],
-      "accessibleLabel": [1, "accessible-label"],
+      "accessibleLabel": [1025, "accessible-label"],
       "announcements": [4],
       "icon": [1],
       "autoDismiss": [2, "auto-dismiss"],
@@ -6703,6 +6726,7 @@ class DuetAlert {
       "dismissible": [4],
       "isDismissed": [32],
       "timeoutID": [32],
+      "language": [32],
       "show": [64],
       "hide": [64]
     },
@@ -6924,6 +6948,11 @@ class DuetButton {
     this.iconOnly = false;
     this.url = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -6937,6 +6966,7 @@ class DuetButton {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
     this.syncToProxyButton();
+    connectLanguageChangeObserver(this);
     if (!this.url && this.element.closest("form")) {
       this.element.insertAdjacentElement("beforebegin", this.proxyButton);
     }
@@ -6944,6 +6974,7 @@ class DuetButton {
   disconnectedCallback() {
     this.proxyButton.remove();
     this.proxyButton = null;
+    disconnectLanguageChangeObserver(this);
   }
   syncToProxyButton() {
     this.proxyButton.type = this.getButtonType();
@@ -7035,6 +7066,7 @@ class DuetButton {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "language": ["watchLanguageStateHandler"],
     "disabled": ["syncToProxyButton"],
     "submit": ["syncToProxyButton"],
     "value": ["syncToProxyButton"],
@@ -7072,9 +7104,9 @@ class DuetButton {
       "identifier": [1],
       "submit": [516],
       "external": [4],
-      "language": [1],
+      "language": [1537],
       "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-      "accessibleLabelExternal": [1, "accessible-label-external"],
+      "accessibleLabelExternal": [1025, "accessible-label-external"],
       "icon": [1],
       "color": [1],
       "iconRight": [4, "icon-right"],
@@ -7086,7 +7118,7 @@ class DuetButton {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["submit", "submit"], ["url", "url"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["submit", "submit"], ["language", "language"], ["url", "url"]]
   }; }
 }
@@ -7542,6 +7574,7 @@ class DuetChoice {
     this.isHovering = false;
     this.isInfoOpen = false;
     this.isBlurred = false;
+    this.language = getLanguage();
     this.theme = "";
     this.label = "label";
     this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
@@ -7570,12 +7603,20 @@ class DuetChoice {
     this.disabled = false;
     this.required = false;
     this.infoLabelDefaults = {
-      fi: "Lisätietoja",
+      fi: "Lisätietoja vaihtoehdosta",
       en: "More information about",
       sv: "Mera information om",
     };
     this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelInfoButton === this.accessibleLabelInfoButtonDefaults[oldValue]) {
+      this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults, newValue);
+    }
+    if (newValue !== oldValue && this.infoLabel === this.infoLabelDefaults[oldValue]) {
+      this.infoLabel = getLocaleString(this.infoLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -7589,6 +7630,12 @@ class DuetChoice {
       ;
     this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -7694,6 +7741,9 @@ class DuetChoice {
       } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", null, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   get element() { return getElement(this); }
+  static get watchers() { return {
+    "language": ["watchLanguageStateHandler"]
+  }; }
   static get style() { return duetChoiceCss; }
   static get cmpMeta() { return {
     "$flags$": 6,
@@ -7702,7 +7752,7 @@ class DuetChoice {
       "theme": [1025],
       "label": [1],
       "accessibleLabelInfoButtonDefaults": [1, "accessible-label-info-default"],
-      "accessibleLabelInfoButton": [1, "accessible-label-info-button"],
+      "accessibleLabelInfoButton": [1025, "accessible-label-info-button"],
       "accessibleActiveDescendant": [1, "accessible-active-descendant"],
       "accessibleControls": [1, "accessible-controls"],
       "accessibleOwns": [1, "accessible-owns"],
@@ -7727,10 +7777,11 @@ class DuetChoice {
       "disabled": [516],
       "required": [4],
       "infoLabelDefaults": [1, "accessible-label-info-default"],
-      "infoLabel": [1, "info-label"],
+      "infoLabel": [1025, "info-label"],
       "isHovering": [32],
       "isInfoOpen": [32],
       "isBlurred": [32],
+      "language": [32],
       "setFocus": [64],
       "toggleInfoMethod": [64]
     },
@@ -7793,7 +7844,7 @@ const findCheckedOption = (el, tagName) => {
   return options.find((o) => o.checked === true);
 };
-const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
+const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 class DuetChoiceGroup {
@@ -9533,6 +9584,11 @@ class DuetDatePicker {
     this.incrementYears = 10;
     this.validity = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.placeholder === this.placeholderDefaults[oldValue]) {
+      this.placeholder = getLocaleString(this.placeholderDefaults, newValue);
+    }
+  }
   updateValidity() {
     this.determineValidity(parseISODate(this.value));
   }
@@ -9576,6 +9632,12 @@ class DuetDatePicker {
         break;
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
    */
@@ -9713,10 +9775,11 @@ class DuetDatePicker {
         left: this.direction === "left",
         error: !!this.error,
         active: this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync(FocusGuard, { moveFocusTo: this.focusedDayNode }), hAsync("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, hAsync("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), hAsync("div", { class: "duet-date-dialog-mobile-header" }, hAsync("duet-label", { margin: "none" }, this.label), hAsync("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, hAsync("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.closeLabel))), hAsync("div", { class: "duet-date-dialog-header" }, hAsync("div", { class: "duet-date-dialog-dropdowns" }, hAsync("duet-visually-hidden", null, hAsync("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (hAsync("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, text.monthLabelsShort[focusedMonth]), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (hAsync("option", { key: year, selected: year === focusedYear }, year)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, this.focusedDay.getFullYear()), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), hAsync("div", { class: "duet-date-dialog-buttons" }, hAsync("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), hAsync("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), hAsync(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), hAsync(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync(FocusGuard, { moveFocusTo: this.focusedDayNode }), hAsync("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, hAsync("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), hAsync("div", { class: "duet-date-dialog-mobile-header" }, hAsync("duet-label", { margin: "none" }, this.label), hAsync("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, hAsync("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.closeLabel))), hAsync("div", { class: "duet-date-dialog-header" }, hAsync("div", { class: "duet-date-dialog-dropdowns" }, hAsync("duet-visually-hidden", null, hAsync("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (hAsync("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, text.monthLabelsShort[focusedMonth]), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (hAsync("option", { key: year, selected: year === focusedYear }, year)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, this.focusedDay.getFullYear()), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), hAsync("div", { class: "duet-date-dialog-buttons" }, hAsync("duet-action-button", { accessibleLabel: i18n$2[this.language].prevMonthLabel, actionName: i18n$2[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), hAsync("duet-action-button", { accessibleLabel: i18n$2[this.language].nextMonthLabel, actionName: i18n$2[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), hAsync(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), hAsync(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "language": ["watchLanguageStateHandler"],
     "min": ["updateValidity"],
     "max": ["updateValidity"],
     "value": ["updateValidity", "updateInternalValue"],
@@ -9734,9 +9797,9 @@ class DuetDatePicker {
       "label": [1],
       "caption": [1],
       "margin": [1],
-      "language": [1],
+      "language": [1537],
       "placeholderDefaults": [1, "placeholder-default"],
-      "placeholder": [1],
+      "placeholder": [1025],
       "echoPlaceholder": [1540, "echo-placeholder"],
       "disabled": [516],
       "error": [1],
@@ -9764,7 +9827,7 @@ class DuetDatePicker {
     },
     "$listeners$": [[4, "click", "handleDocumentClick"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["echoPlaceholder", "echo-placeholder"], ["disabled", "disabled"], ["value", "value"]]
+    "$attrsToReflect$": [["language", "language"], ["echoPlaceholder", "echo-placeholder"], ["disabled", "disabled"], ["value", "value"]]
   }; }
 }
@@ -10177,9 +10240,14 @@ class DuetFooter {
     this.language = getLanguage();
     this.items = undefined;
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
     this.menu = undefined;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabelExternal === this.accessibleLabelExternalDefaults[oldValue]) {
+      this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -10187,6 +10255,12 @@ class DuetFooter {
     inheritGlobalTheme(this);
     this.refresh();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Local methods
    */
@@ -10212,6 +10286,7 @@ class DuetFooter {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "language": ["watchLanguageStateHandler"],
     "menu": ["refresh"],
     "items": ["refresh"]
   }; }
@@ -10224,10 +10299,10 @@ class DuetFooter {
       "variation": [1],
       "margin": [1],
       "logoHref": [1, "logo-href"],
-      "language": [1025],
+      "language": [1537],
       "items": [8],
       "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-      "accessibleLabelExternal": [1, "accessible-label-external"],
+      "accessibleLabelExternal": [1025, "accessible-label-external"],
       "menu": [8],
       "processedMainItem": [32],
       "processedItems": [32],
@@ -10235,7 +10310,7 @@ class DuetFooter {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["language", "language"]]
   }; }
 }
@@ -12213,12 +12288,23 @@ 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.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus on the specified `duet-link`. Use this method instead of the global
    * `link.focus()`.
@@ -12253,6 +12339,9 @@ class DuetLink {
       }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
   }
   static get delegatesFocus() { return true; }
+  static get watchers() { return {
+    "language": ["watchLanguageStateHandler"]
+  }; }
   static get style() { return duetLinkCss; }
   static get cmpMeta() { return {
     "$flags$": 25,
@@ -12260,9 +12349,9 @@ class DuetLink {
     "$members$": {
       "variation": [1],
       "accessibleLabel": [1, "accessible-label"],
-      "language": [1025],
+      "language": [1537],
       "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
-      "accessibleLabelExternal": [1, "accessible-label-external"],
+      "accessibleLabelExternal": [1025, "accessible-label-external"],
       "identifier": [1],
       "theme": [1025],
       "url": [513],
@@ -12274,7 +12363,7 @@ class DuetLink {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["url", "url"]]
+    "$attrsToReflect$": [["language", "language"], ["url", "url"]]
   }; }
 }
@@ -13086,6 +13175,11 @@ class DuetModal {
       }
     }
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefaults[oldValue]) {
+      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, newValue);
+    }
+  }
   activeChanged() {
     this.open = this.active;
   }
@@ -13103,7 +13197,11 @@ class DuetModal {
       this.modalEl.classList.add("duet-disable-transitions");
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
   disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
     enableBodyScroll(this.modalEl);
   }
   /**
@@ -13184,6 +13282,7 @@ class DuetModal {
   get element() { return getElement(this); }
   static get watchers() { return {
     "open": ["openChanged"],
+    "language": ["watchLanguageStateHandler"],
     "active": ["activeChanged"]
   }; }
   static get style() { return duetModalCss; }
@@ -13191,9 +13290,9 @@ class DuetModal {
     "$flags$": 9,
     "$tagName$": "duet-modal",
     "$members$": {
-      "language": [1025],
+      "language": [1537],
       "accessibleCloseLabelDefaults": [1, "accessible-close-label-default"],
-      "accessibleCloseLabel": [1, "accessible-close-label"],
+      "accessibleCloseLabel": [1025, "accessible-close-label"],
       "size": [1],
       "accessibleDescribedBy": [1, "accessible-described-by"],
       "accessibleLabelledBy": [1, "accessible-labelled-by"],
@@ -13215,7 +13314,7 @@ class DuetModal {
     },
     "$listeners$": [[8, "keyup", "handleKeyUp"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["active", "active"]]
+    "$attrsToReflect$": [["language", "language"], ["active", "active"]]
   }; }
 }
@@ -14953,17 +15052,17 @@ class DuetRangeStepper {
     }
   }
   watchStepIndexStateHandler(newValue) {
-    if (this.element.shadowRoot.childElementCount > 0) {
+    if (this.leftBnRef && this.rightBnRef) {
       if (newValue <= 1) {
         this.leftBnRef.setAttribute("disabled", "");
-        this.rightBnRef.focus();
+        this.rightBnRef.setFocus();
       }
       else {
         this.leftBnRef.removeAttribute("disabled");
       }
       if (newValue >= this.total / this.stepSize) {
         this.rightBnRef.setAttribute("disabled", "");
-        this.leftBnRef.focus();
+        this.leftBnRef.setFocus();
       }
       else {
         this.rightBnRef.removeAttribute("disabled");
@@ -14975,6 +15074,8 @@ class DuetRangeStepper {
       if (this.stepIndex * newValue > this.total) {
         this.stepIndex = Math.ceil(this.total / newValue);
       }
+      // trigger handler in case a button needs to be disabled or enabled but stepSize did not change
+      this.watchStepIndexStateHandler(this.stepIndex);
     }
   }
   handleStepClick(e) {
@@ -15503,6 +15604,7 @@ class DuetSlideout {
     this.onClick = (e) => {
       this.toggleMenu(e);
     };
+    this.language = getLanguage();
     this.theme = "";
     this.open = false;
     this.backgroundColor = "gray-lightest";
@@ -15539,6 +15641,12 @@ class DuetSlideout {
       this.openButton = this.openButton;
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Component event handling.
    */
@@ -15589,6 +15697,7 @@ class DuetSlideout {
       "theme": [1025],
       "open": [1540],
       "backgroundColor": [1537, "background-color"],
+      "language": [32],
       "toggle": [64],
       "setFocus": [64]
     },
@@ -15611,6 +15720,7 @@ class DuetSlideoutLang {
       fi: "Valitse kieli",
       sv: "Välj språk",
     };
+    this.language = getLanguage();
     this.theme = "";
   }
   /**
@@ -15619,6 +15729,12 @@ class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -15633,7 +15749,8 @@ class DuetSlideoutLang {
     "$flags$": 9,
     "$tagName$": "duet-slideout-lang",
     "$members$": {
-      "theme": [1025]
+      "theme": [1025],
+      "language": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -15738,6 +15855,7 @@ class DuetSlideoutPanel {
       }
     };
     this.label = undefined;
+    this.language = getLanguage();
     this.theme = "";
     this.active = false;
     this.open = false;
@@ -15752,6 +15870,12 @@ class DuetSlideoutPanel {
     inheritGlobalTheme(this);
     this.updateLabel();
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -15811,6 +15935,7 @@ class DuetSlideoutPanel {
       "labelSize": [1537, "label-size"],
       "backgroundColor": [1537, "background-color"],
       "label": [32],
+      "language": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,

package/lib/cjs/duet-action-button.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6d5f06d0.js');
+const index = require('./index-6f5a3a97.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-134e0318.js');
@@ -94,6 +94,15 @@ const DuetActionButton = class {
   componentWillLoad() {
     themeableComponent.inheritGlobalTheme(this);
   }
+  /**
+   * Sets focus on the specified `duet-action-button`. Use this method instead of the global
+   * `button.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeButton) {
+      this.nativeButton.focus(options);
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -118,7 +127,7 @@ const DuetActionButton = class {
       "border-width": "1px",
       "border-style": "solid",
     };
-    return (index.h(index.Host, { onKeyDown: e => this.onKeyboardDown(e) }, index.h("style", { innerHTML: backgroundStyles }), index.h("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+    return (index.h(index.Host, { onKeyDown: e => this.onKeyboardDown(e) }, index.h("style", { innerHTML: backgroundStyles }), index.h("button", { ref: button => (this.nativeButton = button), part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
         "duet-action-button": true,
         "duet-action-button--disabled": this.disabled,
         [`duet-action-button--${this.theme}`]: this.theme !== "",

package/lib/cjs/duet-alert.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-6d5f06d0.js');
+const index = require('./index-6f5a3a97.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-44df1d37.js');
@@ -34,6 +34,7 @@ const DuetAlert = class {
     this.theme = "";
     this.isDismissed = false;
     this.timeoutID = undefined;
+    this.language = languageUtils.getLanguage();
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
       sv: "Stäng meddelandet",
@@ -48,6 +49,11 @@ const DuetAlert = class {
     this.variation = "default";
     this.dismissible = false;
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = languageUtils.getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -59,10 +65,14 @@ const DuetAlert = class {
       this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
     }
   }
+  connectedCallback() {
+    languageUtils.connectLanguageChangeObserver(this);
+  }
   disconnectedCallback() {
     if (this.timeoutID) {
       clearTimeout(this.timeoutID);
     }
+    languageUtils.disconnectLanguageChangeObserver(this);
   }
   /**
    * Show.
@@ -101,6 +111,9 @@ const DuetAlert = class {
         "duet-theme-turva": this.theme === "turva",
       } }, index.h("div", { class: "duet-alert-container" }, this.icon && (index.h("div", { class: "duet-alert-icon" }, index.h("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), index.h("span", { id: this.descriptiveId }, index.h("slot", null))), this.dismissible && (index.h("div", { class: "duet-alert-dismiss" }, index.h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
+  static get watchers() { return {
+    "language": ["watchLanguageStateHandler"]
+  }; }
 };
 DuetAlert.style = duetAlertCss;