@duetds/components 4.30.0 → 4.33.0

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

@@ -0,0 +1,348 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Method, Prop, State } from "@stencil/core";
+import { debounce } from "../../utils/js-utils";
+import { getLocaleString, sanitizeString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetEditableTable {
+  constructor() {
+    /**
+     * State() variables
+     * @internal
+     */
+    this.tick = Date.now();
+    /**
+     * Map of items that contain list of things.
+     */
+    this.items = new Map();
+    /**
+     * Array of internationalized defaults for the default groups labels.
+     */
+    this.groupsLabelDefaults = {
+      fi: "Kaikki",
+      en: "All items",
+      sv: "Alla objekt",
+    };
+    /**
+     * Array of internationalized defaults for the default action labels.
+     */
+    this.actionLabelDefaults = {
+      fi: "Toiminnot",
+      en: "Actions",
+      sv: "Handlingar",
+    };
+    /**
+     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
+     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     */
+    this.groups = [
+      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
+    ];
+    /**
+     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * @default undefined
+     * @example [{
+                variation: "default",
+                icon: "action-edit-2",
+                id: "edit",
+                map: ["success"],
+                label: {
+                  fi: " Label",
+                  en: " Label",
+                  sv: " Label",
+                }
+              }]
+     */
+    this.actions = undefined;
+    /**
+     * Shows or hides the table labels.
+     */
+    this.hideGroups = false;
+    /**
+     * Exposes the aria role for optimizing accessibility.
+     */
+    this.accessibleRole = undefined;
+    /**
+     * Private methods.
+     */
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 100); // will trigger re-render
+    this.filterMap = needle => {
+      if (needle === "all") {
+        return Array.from(this.items);
+      }
+      return Array.from(this.items).filter(item => needle === item[1].group);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    if (typeof this.groups === "string") {
+      this.internalGroupArray = sanitizeString(this.groups);
+    }
+    else {
+      this.internalGroupArray = this.groups;
+    }
+    if (typeof this.actions === "string") {
+      this.internalActionsArray = sanitizeString(this.actions);
+    }
+    else {
+      this.internalActionsArray = this.actions;
+    }
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Method to force an update of a tabular data array.
+   * when called the method will rerender the entire tabular structure.
+   */
+  async updateTable(passedItems = undefined) {
+    this.items = new Map(passedItems || this.items);
+    this.kick();
+  }
+  render() {
+    return (h(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+      } }, this.internalGroupArray.map(group => {
+      const currentGroup = this.filterMap(group.id);
+      if (!currentGroup.length) {
+        return;
+      }
+      return (h("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" },
+        h("table", { class: "duet-editable-table", "aria-role": this.accessibleRole },
+          h("thead", { class: "duet-editable-table-header" },
+            h("tr", null,
+              h("th", { class: {
+                  "duet-editable-table-header-hidden": this.hideGroups,
+                } }, !this.hideGroups ? (getLocaleString(group.label)) : (h("duet-visually-hidden", null, getLocaleString(group.label)))),
+              h("th", { class: {
+                  "duet-editable-table-header-hidden": this.hideGroups,
+                } },
+                h("duet-visually-hidden", null, group.actionLabel
+                  ? getLocaleString(group.actionLabel)
+                  : getLocaleString(this.actionLabelDefaults))))),
+          h("tbody", null, currentGroup.map(dataAsArray => {
+            const [key, value] = dataAsArray;
+            return (h("duet-editable-table-item", { keyName: key, data: Object.assign({}, value), groupId: group.id, part: group.id, actions: this.internalActionsArray }));
+          })))));
+    })));
+  }
+  static get is() { return "duet-editable-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-editable-table.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-editable-table.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetEditableTableItems",
+        "resolved": "Map<any, DuetEditableTableItemData>",
+        "references": {
+          "DuetEditableTableItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Map of items that contain list of things."
+      },
+      "defaultValue": "new Map()"
+    },
+    "groupsLabelDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Array of internationalized defaults for the default groups labels."
+      },
+      "defaultValue": "{\n    fi: \"Kaikki\",\n    en: \"All items\",\n    sv: \"Alla objekt\",\n  }"
+    },
+    "actionLabelDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Array of internationalized defaults for the default action labels."
+      },
+      "defaultValue": "{\n    fi: \"Toiminnot\",\n    en: \"Actions\",\n    sv: \"Handlingar\",\n  }"
+    },
+    "groups": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableGroupNames | string",
+        "resolved": "string | { id: string; label: DuetLangObject; actionLabel?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableGroupNames": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{ id: \"all\", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }."
+          }, {
+            "name": "example",
+            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]."
+          }],
+        "text": "Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions)."
+      },
+      "attribute": "groups",
+      "reflect": false,
+      "defaultValue": "[\n    { id: \"all\", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },\n  ]"
+    },
+    "actions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableActions | string",
+        "resolved": "string | { icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableActions": {
+            "location": "import",
+            "path": "./duet-editable-table-item"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "undefined"
+          }, {
+            "name": "example",
+            "text": "[{\nvariation: \"default\",\nicon: \"action-edit-2\",\nid: \"edit\",\nmap: [\"success\"],\nlabel: {\n  fi: \" Label\",\n  en: \" Label\",\n  sv: \" Label\",\n}\n}]"
+          }],
+        "text": "Array of actions that are mapped via the map variable to the various groups defined in group."
+      },
+      "attribute": "actions",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "hideGroups": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows or hides the table labels."
+      },
+      "attribute": "hide-table-labels",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "accessibleRole": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exposes the aria role for optimizing accessibility."
+      },
+      "attribute": "accessible-role",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the table."
+      },
+      "attribute": "theme",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "tick": {}
+  }; }
+  static get methods() { return {
+    "updateTable": {
+      "complexType": {
+        "signature": "(passedItems?: DuetEditableTableItems) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DuetEditableTableItems": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method to force an update of a tabular data array.\nwhen called the method will rerender the entire tabular structure.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -60,7 +60,7 @@ export class DuetFooter {
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
     /**
      * Component event handling.
      */
@@ -255,11 +255,11 @@ export class DuetFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the logo to match the\nchosen language."
       },
@@ -285,11 +285,11 @@ export class DuetFooter {
       "reflect": false
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -301,11 +301,13 @@ export class DuetFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -320,14 +322,14 @@ export class DuetFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
     },
     "menu": {
       "type": "any",
@@ -359,8 +361,8 @@ export class DuetFooter {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "in favour of the more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "in favour of the more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
           }],
         "text": ""
       },

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

@@ -1,13 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
-import { watchForOptions } from "../../utils/watch-options";
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { watchForElement, watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";
 }
 export class DuetGrid {
   constructor() {
+    this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -24,7 +25,9 @@ export class DuetGrid {
      */
     this.direction = "horizontal";
     /**
-     * Adjusts the vertical alignment of the grid items.
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
      */
     this.alignment = "top";
     /**
@@ -36,14 +39,34 @@ export class DuetGrid {
      */
     this.mobile = "";
   }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
   /**
    * Component lifecycle events.
    */
   async connectedCallback() {
     const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+    }
     this.updateGridItems();
   }
   disconnectedCallback() {
@@ -51,6 +74,10 @@ export class DuetGrid {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
   }
   /**
    * Local methods
@@ -62,6 +89,27 @@ export class DuetGrid {
       item.breakpoint = this.breakpoint;
     });
   }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -71,7 +119,7 @@ export class DuetGrid {
         "duet-grid": true,
         "duet-no-stacking": !this.responsive,
         "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
         "duet-grid-align-center": this.alignment === "center",
         "duet-grid-align-stretch": this.alignment === "stretch",
         "duet-grid-align-baseline": this.alignment === "baseline",
@@ -169,7 +217,7 @@ export class DuetGrid {
       "mutable": false,
       "complexType": {
         "original": "DuetGridAlignment",
-        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"stretch\" | \"top\"",
+        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form_distribute\" | \"stretch\" | \"top\"",
         "references": {
           "DuetGridAlignment": {
             "location": "local"
@@ -180,7 +228,7 @@ export class DuetGrid {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Adjusts the vertical alignment of the grid items."
+        "text": "Adjusts the vertical alignment of the grid items, if set to \"form_distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors."
       },
       "attribute": "alignment",
       "reflect": false,
@@ -231,6 +279,9 @@ export class DuetGrid {
       "defaultValue": "\"\""
     }
   }; }
+  static get states() { return {
+    "distributeFormElement": {}
+  }; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "responsive",

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

@@ -173,8 +173,8 @@ export class DuetGridItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Enable or disable the automatic responsive behaviour of the grid item.\nThis property is used internally by Grid, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Enable or disable the automatic responsive behaviour of the grid item.\nThis property is used internally by Grid, and should not be set by the developer."
           }],
         "text": ""
       },
@@ -199,8 +199,8 @@ export class DuetGridItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Switch the breakpoint used to trigger the content stacking.\nThis property is used internally by Grid, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Switch the breakpoint used to trigger the content stacking.\nThis property is used internally by Grid, and should not be set by the developer."
           }],
         "text": ""
       },