@duetds/components 4.32.0 → 4.33.0

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

@@ -0,0 +1,203 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { TableData } from "./duet-editable-table-tabledata";
+export class DuetEditableTableItem {
+  constructor() {
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * Actions that can be performed on the element
+     */
+    this.actions = undefined;
+    /**
+     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
+     * @internal
+     */
+    this.groupId = "";
+    /**
+     * Key used to identify item, when running actions
+     */
+    this.keyName = "";
+    /**
+     * Object of data itemsused to render the entire row
+     */
+    this.data = undefined;
+  }
+  watchPropHandler(_newValue, _oldValue) {
+    // console.log("The new value of activated is: ", _newValue)
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { role: "row" },
+      h(TableData, { data: this.data.item, groupId: this.groupId }),
+      h("td", { class: "duet-editable-table-actions" },
+        h("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
+          const { map = undefined } = result;
+          // if map has been specified, only show the current action if groupID matches the map array
+          if (map && !map.includes(this.groupId)) {
+            return;
+          }
+          return (h("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
+        })))));
+  }
+  static get is() { return "duet-editable-table-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-editable-table-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-editable-table-item.css"]
+  }; }
+  static get properties() { return {
+    "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 empty state component."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "actions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableActions",
+        "resolved": "{ icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableActions": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Actions that can be performed on the element"
+      },
+      "defaultValue": "undefined"
+    },
+    "groupId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "GroupId used to pierce the shadowdom - gets concatenated with \"content & actions\" and used as part=\"groupIDcontent/actions\" to pierce the content/Action item"
+      },
+      "attribute": "group-id",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "keyName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Key used to identify item, when running actions"
+      },
+      "attribute": "key-name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "data": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetEditableTableItemData",
+        "resolved": "{ uid: string; item: string | HTMLElement; group: string; }",
+        "references": {
+          "DuetEditableTableItemData": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Object of data itemsused to render the entire row"
+      },
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get states() { return {
+    "isHovering": {}
+  }; }
+  static get events() { return [{
+      "method": "duetEditableItemAction",
+      "name": "duetEditableItemAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when any action is clicked"
+      },
+      "complexType": {
+        "original": "DuetEditableTableItemEvent",
+        "resolved": "{ originalEvent?: Event; uid: string; keyName: string; action: string; group: string; component: \"duet-editable-table-item\"; }",
+        "references": {
+          "DuetEditableTableItemEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "data",
+      "methodName": "watchPropHandler"
+    }]; }
+}

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

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+//simple functional component that renders the data in the table
+export const TableData = ({ data, groupId }, _children) => {
+  if (typeof data === "string") {
+    return h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content` });
+  }
+  else {
+    return (h("td", { class: "duet-editable-table-content", part: `${groupId}content` }, data));
+  }
+};

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

@@ -0,0 +1,16 @@
+duet-editable-table {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.duet-editable-table-header tr .duet-editable-table-header-hidden {
+  padding: 0 !important;
+  font-size: 0;
+  border-bottom: 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"; }
+}