@duetds/components 4.36.1 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "4.36.1",
+  "version": "5.0.2",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -42,27 +42,25 @@
     "stencil:koa": "stencil build --dev --watch",
     "start": "run-p koa stencil:koa",
     "start:dev": "npm run stencil:dev",
-    "koa": "onchange -k -i --await-write-finish 600 \"helpers/*.js\" \"lib/**\" \"src/index.html\" \"../fonts/lib/**\" \"../tokens/lib/**\" \"../css/lib/**\" \"../icons/lib/**\" -- npm run koa:dev",
-    "koa:ci": "node helpers/koa-server.js &",
-    "koa:dev": "node helpers/koa-server.js",
+    "koa": "lerna exec 'npm run start:dev:watch' --scope '@duetds/server'",
+    "koa:ci": "lerna exec 'npm run koa:serve:ci' --scope '@duetds/server'",
     "duet:build:testsite": "stencil build --serve",
     "copy:vscode": "copyfiles --flat \"./lib/html.html-data.json\" \"../vscode\""
   },
   "dependencies": {
     "body-scroll-lock": "3.1.5",
-    "koa-colorful-logger": "0.0.3"
+    "kill-process-by-name": "1.0.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.17",
-    "@duetds/icons": "2.2.17",
+    "@duetds/fonts": "1.4.20",
+    "@duetds/icons": "2.2.20",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.5.0",
+    "@duetds/tokens": "2.4.16",
     "@koa/cors": "3.1.0",
     "@rollup/plugin-replace": "3.0.1",
     "@stencil/core": "2.12.1",
     "@stencil/sass": "1.5.2",
-    "@stencil/utils": "0.0.5",
     "@types/jest": "26.0.24",
     "@types/jest-image-snapshot": "4.3.1",
     "chalk": "4.1.2",
@@ -75,12 +73,6 @@
     "jest-environment-node": "26.6.2",
     "jest-image-snapshot": "4.5.1",
     "jest-junit": "12.2.0",
-    "kill-process-by-name": "1.0.5",
-    "koa": "2.13.4",
-    "koa-body": "4.2.0",
-    "koa-mount": "4.0.0",
-    "koa-router": "10.1.1",
-    "koa-static": "5.0.0",
     "npm-run-all": "4.1.5",
     "onchange": "7.1.0",
     "prettier": "2.5.1",
@@ -96,5 +88,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "9e5243a907ab40c6720b77cedd646cab08479680"
+  "gitHead": "c629527d8971df15557ba85ca9864530135087fe"
 }

package/lib/cjs/duet-editable-table-button.cjs.entry.js

@@ -1,96 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-4f342f1c.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-f402e205.js');
-require('./string-utils-267e3dbb.js');
-require('./tokens.module-6b2df1c2.js');
-
-const duetEditableTableButtonCss = "*.sc-duet-editable-table-button,*.sc-duet-editable-table-button::after,*.sc-duet-editable-table-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button{display:flex;align-content:space-between;justify-content:center;min-width:32px;max-width:32px;height:100%;min-height:32px;max-height:32px;padding:0;margin:0;cursor:pointer !important;background-color:transparent;border:1px solid;border-radius:50%}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button duet-icon.sc-duet-editable-table-button{align-self:center}";
-
-let DuetEditableTableButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetEditableItemAction = index.createEvent(this, "duetEditableItemAction", 7);
-    this.isHovering = false;
-    /**
-     * Theme of the empty state component.
-     */
-    this.theme = undefined;
-    /**
-     * 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;
-    };
-    this.getColours = (byName = false) => {
-      let colorHover = this.actions.color_hover;
-      let colorBlur = this.actions.color;
-      if (byName) {
-        colorHover = tokenUtils.getColorByName(this.actions.color_hover, this.theme);
-        colorBlur = tokenUtils.getColorByName(this.actions.color, this.theme);
-      }
-      return this.isHovering ? colorHover : colorBlur;
-    };
-  }
-  /**
-   /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.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 (index.h("button", { style: {
-        "border-color": this.getColours(true),
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? languageUtils.getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) }, index.h("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.getColours(), margin: "none" })));
-  }
-  get el() { return index.getElement(this); }
-};
-DuetEditableTableButton.style = duetEditableTableButtonCss;
-
-exports.duet_editable_table_button = DuetEditableTableButton;

package/lib/cjs/js-utils-33a9dbe3.js

@@ -1,16 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-const debounce = (func, timeout = 50) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(undefined, args);
-    }, timeout);
-  };
-};
-
-exports.debounce = debounce;

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

@@ -1,32 +0,0 @@
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-:host button {
-  display: flex;
-  align-content: space-between;
-  justify-content: center;
-  min-width: 32px;
-  max-width: 32px;
-  height: 100%;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0;
-  margin: 0;
-  cursor: pointer !important;
-  background-color: transparent;
-  border: 1px solid;
-  border-radius: 50%;
-}
-:host button duet-icon {
-  align-self: center;
-}

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

@@ -1,225 +0,0 @@
-/*!
- * 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 = undefined;
-    /**
-     * 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;
-    };
-    this.getColours = (byName = false) => {
-      let colorHover = this.actions.color_hover;
-      let colorBlur = this.actions.color;
-      if (byName) {
-        colorHover = getColorByName(this.actions.color_hover, this.theme);
-        colorBlur = getColorByName(this.actions.color, this.theme);
-      }
-      return this.isHovering ? colorHover : colorBlur;
-    };
-  }
-  /**
-   /**
-   * 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.getColours(true),
-      }, 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.getColours(), 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": "undefined"
-    },
-    "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

@@ -1,36 +0,0 @@
-*,
-*::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

@@ -1,225 +0,0 @@
-/*!
- * 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 set vertical alignment of action buttons
-     */
-    this.alignment = "middle";
-    /**
-     * 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, alignment: this.alignment, groupId: this.groupId }),
-      h("td", { class: "duet-editable-table-actions", style: { verticalAlign: this.alignment } },
-        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": "\"\""
-    },
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Key used to set vertical alignment of action buttons"
-      },
-      "attribute": "alignment",
-      "reflect": false,
-      "defaultValue": "\"middle\""
-    },
-    "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 | Record<string, string>; 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"
-    }]; }
-}