@duetds/components 4.35.4 → 5.0.0

package/lib/types/utils/js-utils.d.ts

@@ -1 +1,3 @@
 export declare const debounce: (func: any, timeout?: number) => (...args: any[]) => void;
+export declare function fieldSorter(fields: any): (a: any, b: any) => any;
+export declare const memoize: (fn: any) => (value: any) => any;

package/lib/types/utils/keyboard-utils.d.ts

@@ -2,10 +2,14 @@ export declare const isArrowLeftKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowUpKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowRightKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowDownKey: (e: KeyboardEvent) => boolean;
+export declare const isArrowKey: (e: KeyboardEvent) => boolean;
 export declare const isEscapeKey: (e: KeyboardEvent) => boolean;
 export declare const isTabKey: (e: KeyboardEvent) => boolean;
 export declare const isBackspaceKey: (e: KeyboardEvent) => boolean;
 export declare const isSpaceKey: (e: KeyboardEvent) => boolean;
+export declare const isPlusKey: (e: KeyboardEvent) => boolean;
+export declare const isMinusKey: (e: KeyboardEvent) => boolean;
 export declare const isQuestionKey: (e: KeyboardEvent) => boolean;
 export declare const isEnterKey: (e: KeyboardEvent) => boolean;
 export declare const isKeyboardClick: (e: KeyboardEvent) => boolean;
+export declare const isNumber: (e: KeyboardEvent) => boolean;

package/lib/types/utils/token-utils.d.ts

@@ -6,3 +6,5 @@ export declare function camelize(str?: string): string;
 export declare function getTheme(theme?: DuetTheme): DuetTheme;
 export declare function getColorByName(name: string, theme?: DuetTheme): string | undefined;
 export declare function convertToColorName(name?: string, theme?: DuetTheme): string;
+export declare function getFontSizeByName(name: string): string | undefined;
+export declare function getFontWeightByName(name: string): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "4.35.4",
+  "version": "5.0.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -53,16 +53,15 @@
     "koa-colorful-logger": "0.0.3"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.15",
-    "@duetds/icons": "2.2.15",
+    "@duetds/fonts": "1.4.18",
+    "@duetds/icons": "2.2.18",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.4.15",
+    "@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",
@@ -96,5 +95,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "1f56f80a6a6e196d94212f538634d8eda80deaf5"
+  "gitHead": "a41bea547aadc3e00adbcf5c02593a57249da9bb"
 }

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-6ae8090f.js');
-const languageUtils = require('./language-utils-aa282901.js');
-const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-05bd23b4.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/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"
-    }]; }
-}