@duetds/components 4.30.0 → 4.33.0

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

@@ -0,0 +1,218 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Prop, State } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
+export class DuetEditableTableButton {
+  constructor() {
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * action items passed from host component
+     * @internal
+     */
+    this.actions = undefined;
+    /**
+     * uid that gets passed along when the action is emitted
+     * @internal
+     */
+    this.uid = "";
+    /**
+     * group associated with action
+     * @internal
+     */
+    this.group = "";
+    /**
+     * key of the item in the map
+     * @internal
+     */
+    this.keyName = "";
+    this.onMouseEnter = () => {
+      this.isHovering = true;
+    };
+    this.onMouseLeave = () => {
+      this.isHovering = false;
+    };
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  emitActionEvent(ev) {
+    this.duetEditableItemAction.emit({
+      originalEvent: ev,
+      uid: this.uid,
+      group: this.group,
+      action: this.actions.id,
+      keyName: this.keyName,
+      component: "duet-editable-table-item",
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("button", { style: {
+        "border-color": this.isHovering
+          ? getColorByName(this.actions.color_hover)
+          : getColorByName(this.actions.color),
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) },
+      h("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.isHovering ? this.actions.color_hover : this.actions.color, margin: "none" })));
+  }
+  static get is() { return "duet-editable-table-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-editable-table-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-editable-table-button.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": "DuetEditableTableActionButtonItems",
+        "resolved": "{ icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }",
+        "references": {
+          "DuetEditableTableActionButtonItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "action items passed from host component"
+      },
+      "defaultValue": "undefined"
+    },
+    "uid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "uid that gets passed along when the action is emitted"
+      },
+      "attribute": "uid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "group associated with action"
+      },
+      "attribute": "group",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "keyName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "key of the item in the map"
+      },
+      "attribute": "key-name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  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 | number | bigint; keyName: string | number | bigint; action: string; group: string; component: \"duet-editable-table-item\"; }",
+        "references": {
+          "DuetEditableTableItemEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,36 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  display: table-row;
+  height: 32px;
+}
+
+.duet-editable-table-content, .duet-editable-table-actions {
+  height: 32px;
+  padding: 12px 0;
+  vertical-align: middle;
+  break-word: break-all;
+  border-bottom: 1px solid #e1e3e6;
+}
+.duet-editable-table-actions-items {
+  display: flex;
+  justify-content: flex-end;
+}
+.duet-editable-table-actions-items duet-editable-table-button {
+  padding-left: 8px;
+}
+.duet-editable-table .editable-item-small {
+  font-size: 0.75rem;
+  font-weight: 400;
+}

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;
+}