@duetds/components 6.8.9 → 6.9.1

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; }",
@@ -468,7 +477,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         },
@@ -567,7 +576,8 @@ export class DuetCombobox {
       "selectionMsg": {},
       "listOpen": {},
       "selectedItems": {},
-      "activeItem": {}
+      "activeItem": {},
+      "language": {}
     };
   }
   static get events() {
@@ -587,7 +597,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         }
@@ -611,7 +621,7 @@ export class DuetCombobox {
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           },
           "return": "Promise<string>"
@@ -631,6 +641,9 @@ export class DuetCombobox {
     return [{
         "propName": "activeItem",
         "methodName": "activeItemHandler"
+      }, {
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
       }];
   }
   static get listeners() {

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -99,7 +99,7 @@ export class DuetCookieConsent {
           "references": {
             "DuetCookieConsentEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
             }
           }
         }

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -755,7 +755,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         },
@@ -927,7 +927,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }
@@ -947,7 +947,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }
@@ -967,7 +967,7 @@ export class DuetDatePicker {
           "references": {
             "DuetDatePickerFocusEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx"
             }
           }
         }

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

@@ -75,7 +75,7 @@ export class DuetDivider {
           "references": {
             "DuetDividerMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-divider/duet-divider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-divider/duet-divider.tsx"
             }
           }
         },

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
@@ -261,7 +268,7 @@ export class DuetEditableTable {
         "mutable": false,
         "complexType": {
           "original": "DuetTableBreakpoint",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
+          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
           "references": {
             "DuetTableBreakpoint": {
               "location": "import",
@@ -288,7 +295,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableActions": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -312,7 +319,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableColumns": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -336,7 +343,7 @@ export class DuetEditableTable {
           "references": {
             "DuetEditableTableRows": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         },
@@ -448,6 +455,11 @@ export class DuetEditableTable {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetTableToggle",
@@ -465,7 +477,7 @@ export class DuetEditableTable {
           "references": {
             "DuetTableToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         }
@@ -485,7 +497,7 @@ export class DuetEditableTable {
           "references": {
             "DuetTableMenuEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-editable-table/duet-editable-table.tsx"
             }
           }
         }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -95,7 +95,7 @@ export class DuetEmptyState {
           "references": {
             "DuetEmptyStateSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-empty-state/duet-empty-state.tsx"
             }
           }
         },

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

@@ -160,7 +160,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         },
@@ -354,7 +354,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -374,7 +374,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -394,7 +394,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -414,7 +414,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -434,7 +434,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }
@@ -454,7 +454,7 @@ export class DuetFooter {
           "references": {
             "DuetFooterChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-footer/duet-footer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-footer/duet-footer.tsx"
             }
           }
         }

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 = "";
@@ -85,6 +86,7 @@ export class DuetGrid {
     items.forEach(item => {
       item.responsive = this.responsive;
       item.breakpoint = this.breakpoint;
+      item.direction = this.direction;
     });
   }
   async updateGridItemsWithInputFields() {
@@ -139,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"; }
@@ -219,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,
@@ -228,7 +249,7 @@ export class DuetGrid {
           "references": {
             "DuetGridAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -251,7 +272,7 @@ export class DuetGrid {
           "references": {
             "DuetGridDistribution": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -274,7 +295,7 @@ export class DuetGrid {
           "references": {
             "DuetGridMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-grid/duet-grid.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-grid/duet-grid.tsx"
             }
           }
         },
@@ -303,6 +324,9 @@ export class DuetGrid {
       }, {
         "propName": "breakpoint",
         "methodName": "updateGridItems"
+      }, {
+        "propName": "direction",
+        "methodName": "updateGridItems"
       }];
   }
 }

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

@@ -20,10 +20,11 @@
   line-height: 1.5;
   color: rgb(0, 41, 77);
 }
-:host:first-child, :host:first-of-type {
+
+:host(.duet-grid-direction-horizontal):first-child, :host(.duet-grid-direction-horizontal):first-of-type {
   padding-left: 0;
 }
-:host:last-child, :host:last-of-type {
+:host(.duet-grid-direction-horizontal):last-child, :host(.duet-grid-direction-horizontal):last-of-type {
   padding-right: 0;
 }
 

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

@@ -11,6 +11,7 @@ export class DuetGridItem {
     this.theme = "";
     this.margin = "auto";
     this.responsive = false;
+    this.direction = "horizontal";
     this.breakpoint = "small";
   }
   /**
@@ -33,7 +34,12 @@ export class DuetGridItem {
         "duet-grid-item": true,
         "duet-grid-item-fill": this.fill,
         "duet-grid-item-responsive": this.responsive,
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-item-br-x-small": this.breakpoint === "x-small",
+        "duet-grid-item-br-small": this.breakpoint === "small",
         "duet-grid-item-br-medium": this.breakpoint === "medium",
+        "duet-grid-item-br-large": this.breakpoint === "large",
         "duet-grid-item-br-x-large": this.breakpoint === "x-large",
       } }));
   }
@@ -170,6 +176,32 @@ export class DuetGridItem {
         "reflect": false,
         "defaultValue": "false"
       },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetDirection",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "DuetDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Direction of the grid items.\nThis property is used internally by Grid, and should not be set by the developer."
+            }],
+          "text": ""
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "\"horizontal\""
+      },
       "breakpoint": {
         "type": "string",
         "mutable": false,