@guiexpert/table 0.0.2 → 1.0.1

package/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": [
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "guiexpert",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "guiexpert",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [],
+      "rules": {}
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,35 @@
+
+Dual Licensing
+
+In short:
+
+a) Individual License (Open Source, MIT License)
+Individuals and non-commercial users can freely use and modify this software library under the terms of the open source license.
+
+b) Commercial License:
+This license is intended for businesses, organizations, and commercial use cases.
+Businesses would need to obtain a separate commercial license to use the software library in their proprietary applications.
+For organizations that wish to use this software library for commercial purposes, we offer a separate commercial license.
+The commercial license provides additional features, services, and support not available under the open source license.
+
+___________________
+Open Source License:
+
+MIT License
+
+Copyright (c) GUI Expert GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+___________________
+Commercial License:
+
+For organizations that wish to use this software library for commercial purposes, we offer a separate commercial license. The commercial license provides additional features, services, and support not available under the open source license.
+
+Please contact us at license@gui.expert for more information on the commercial license and pricing.
+
+By using this software library, you agree to the terms and conditions of the open source license for individual users, and any separate agreement for the commercial license for businesses.

package/README.md

@@ -0,0 +1,102 @@
+
+# GuiExpert Table with plain JS
+
+This is the base component of the GuiExpert Table Project. One can use this in a plain JS project.
+
+## Become a master at creating web applications with large tables
+
+This is the UI-agnostic table component for your next web app. 😊
+
+<img src="https://raw.githubusercontent.com/guiexperttable/table-website/main/src/assets/screens/heatmap.png" width="50%">
+
+### Features
+- Handle large datasets easily
+- Excellent performance for large tables by vertical and horizontal virtual scrolling
+- Fully-featured (advanced sorting and filtering)
+- Highly customizable data grid
+- Outstanding performance
+- No third-party dependencies
+- UI-agnostic
+- Column Interactions (resize, reorder)
+- Sorting Rows
+- Row, Column, and Range Selection
+- Single and Multi Selection
+- UI-agnostic
+- Row and Column Spanning
+- Fixed Columns (Left and Right)
+- Tree table (Hierarchical View)
+- Accessibility support: Keyboard Shortcuts
+- Custom Filtering
+- In-place Cell Editing
+- Userdefined Key and Mouse Events
+- Customizable Look & Feel (via CSS variables)
+- Row sorting
+- Column Reordering (Drag and Drop)
+- State Persistence (Row Sorting, Column Order, Selection)
+- Customizable Cell Contents via Renderer for Header, Body and Footer
+- Full control over the HTML structure and style
+
+
+## Links
+
+- [Demos](https://gui.expert/demos)
+- [Documentation](https://gui.expert/doc)
+- [API](https://gui.expert/api)
+
+## Get Started
+
+Add the following NPM package to your existing plain JS project (run this in your project root directory):
+
+```
+npm install --save @guiexpert/table
+```
+
+Add an empty <div> element to your html code:
+
+```
+<div
+    class="container-div"
+    style="width:100%;height:100%;background:transparent;margin:0;padding:0;"
+    ></div>
+```
+
+If you are working with plain JS, you don't need to do this. If you are using TypeScript as a language, please import the following classes:
+```
+import {
+  EventAdapter,
+  SimpleDomService,
+  TableModelIf,
+  TableOptions,
+  TableScope } from "@guiexpert/table";
+```
+
+
+Create a table model. 
+Select ('querySelector') the <div> element and create a table scope. 
+Finally, call firstInit() at least once. 
+In this example, you will see the plain TS version. For plain JS, remove ': TableModelIf'.
+
+```
+const tableModel: TableModelIf = TableModelFactory
+  .createByArrayOfArraysParams<any>(param: {
+    columnLabels: [
+      ['Header 1', 'Header 2']
+    ],
+    data: [
+      ['Text 1a', 'Text 2a'],
+      ['Text 1b', 'Text 2b'],
+    ]
+  };
+
+const ele = document.querySelector(".container-div") as HTMLDivElement;
+
+const tableScope = new TableScope(
+  ele, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter()
+);
+tableScope.firstInit();
+```
+
+There are numerous possibilities to create table models.
+Please refer to the [Documentation](https://gui.expert/doc) for further information or the [Demo](https://gui.expert/demos) section for examples.
+
+

package/jest.config.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+export default {
+  displayName: 'table',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/libs/table',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [],
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/table",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,24 +1,14 @@
 {
   "name": "@guiexpert/table",
-  "version": "0.0.2",
-  "peerDependencies": {},
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "version": "1.0.1",
+  "scripts": {
+    "typedoc:json": "npx typedoc --json ../../apps/table-website/src/assets/json/doctype.json src/index.ts",
+    "typedoc:docs": "npx typedoc --out ../../apps/table-website/src/assets/docs src/index.ts",
+    "publish": "npm publish"
   },
-  "module": "esm2020/guiexpert-table.mjs",
-  "es2020": "esm2020/guiexpert-table.mjs",
-  "esm2020": "esm2020/guiexpert-table.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "es2020": "./esm2020/guiexpert-table.mjs",
-      "esm2020": "./esm2020/guiexpert-table.mjs",
-      "default": "./esm2020/guiexpert-table.mjs"
-    }
+  "peerDependencies": {
   },
-  "sideEffects": false
-}
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/project.json

@@ -0,0 +1,47 @@
+{
+  "name": "@guiexpert/table",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/table/src",
+  "prefix": "guiexpert",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:ng-packagr-lite",
+      "outputs": [
+        "dist/libs/table"
+      ],
+      "options": {
+        "project": "libs/table/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/table/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/table/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": [
+        "coverage/libs/table"
+      ],
+      "options": {
+        "jestConfig": "libs/table/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/table/**/*.ts",
+          "libs/table/**/*.html"
+        ]
+      }
+    }
+  },
+  "tags": []
+}

package/{index.d.ts → src/index.ts}

@@ -1,5 +1,5 @@
+
 export * from './lib/table/table-scope';
-export * from './lib/table/table-model-factory';
 export * from './lib/table/table-api';
 export * from './lib/table/ele-scope';
 export * from './lib/table/render-scope';
@@ -7,15 +7,25 @@ export * from './lib/table/mouse-handler';
 export * from './lib/table/input-handler';
 export * from './lib/table/event-listener.if';
 export * from './lib/table/event-adapter';
+export * from './lib/table/css-vars';
+
+export * from './lib/table/factory/tree-factory';
+export * from './lib/table/factory/table-factory';
+
+
 export * from './lib/table/action/action-id.type';
 export * from './lib/table/action/shortcut.service';
 export * from './lib/table/action/shortcut-actionid-mapping.type';
 export * from './lib/table/action/windows-shortcut-actionId-mapping';
 export * from './lib/table/action/osx-shortcut-actionId-mapping';
 export * from './lib/table/action/on-action-triggered.if';
+
 export * from './lib/table/data/side-ident.type';
 export * from './lib/table/data/div-scope.type';
 export * from './lib/table/data/geo-data';
+export * from './lib/table/data/table-model-and-options.if';
+export * from './lib/table/data/table-model-and-options';
+
 export * from './lib/table/data/common/get-t';
 export * from './lib/table/data/common/value-label.if';
 export * from './lib/table/data/common/value-label';
@@ -27,28 +37,37 @@ export * from './lib/table/data/common/checked-type';
 export * from './lib/table/data/common/sizes';
 export * from './lib/table/data/common/aligns';
 export * from './lib/table/data/common/boolean-function';
-export * from './lib/table/data/common/checkbox-column';
+export * from './lib/table/data/common/checkbox-column-def';
 export * from './lib/table/data/common/size';
 export * from './lib/table/data/common/size.if';
 export * from './lib/table/data/common/sort-item';
 export * from './lib/table/data/common/sort-state.type';
 export * from './lib/table/data/common/area-map';
 export * from './lib/table/data/common/area-map.type';
-export * from './lib/table/data/common/area-map-factory';
-export * from './lib/table/data/common/filter-function';
-export * from './lib/table/data/common/args-render-cell-div';
-export * from './lib/table/data/common/args-adjust-columns-to-row-parent-params';
-export * from './lib/table/data/common/event/ge-mouse-event';
-export * from './lib/table/data/common/event/ge-model-change-event';
-export * from './lib/table/data/common/event/ge-cell-indices';
-export * from './lib/table/data/common/event/ge-key-event';
-export * from './lib/table/focus/focus-model';
-export * from './lib/table/focus/focus-model.if';
-export * from './lib/table/focus/focus.type';
-export * from './lib/table/checkbox/checkbox-model';
-export * from './lib/table/checkbox/tree-checkbox-model';
-export * from './lib/table/checkbox/checkbox-model.if';
-export * from './lib/table/data/options/auto-restore-options.if';
+export * from "./lib/table/data/common/area-map-factory";
+export * from "./lib/table/data/common/filter-function";
+export * from "./lib/table/data/common/args-render-cell-div";
+export * from "./lib/table/data/common/args-adjust-columns-to-row-parent-params";
+
+export * from "./lib/table/data/common/event/ge-mouse-event";
+export * from "./lib/table/data/common/event/ge-model-change-event";
+export * from "./lib/table/data/common/event/ge-cell-indices";
+export * from "./lib/table/data/common/event/ge-key-event";
+
+export * from "./lib/table/data/common/event/input/table-cell-update-event";
+export * from "./lib/table/data/common/event/input/table-cell-update-event.if";
+
+export * from "./lib/table/data/event/mouse-target-data";
+
+export * from "./lib/table/focus/focus-model";
+export * from "./lib/table/focus/focus-model.if";
+export * from "./lib/table/focus/focus.type";
+
+export * from "./lib/table/checkbox/checkbox-model";
+export * from "./lib/table/checkbox/tree-checkbox-model";
+export * from "./lib/table/checkbox/checkbox-model.if";
+
+export * from "./lib/table/data/options/auto-restore-options.if";
 export * from './lib/table/data/options/auto-restore-options';
 export * from './lib/table/data/options/table-options';
 export * from './lib/table/data/options/table-options.if';
@@ -60,23 +79,36 @@ export * from './lib/table/data/options/icon';
 export * from './lib/table/data/options/icon.if';
 export * from './lib/table/data/options/sorted-options.if';
 export * from './lib/table/data/options/sorted-options';
+
 export * from './lib/table/data/tablemodel/padding';
 export * from './lib/table/data/tablemodel/table-model.if';
 export * from './lib/table/data/tablemodel/table-model';
 export * from './lib/table/data/tablemodel/area-ident.type';
+
 export * from './lib/table/data/tablemodel/column/column-def';
 export * from './lib/table/data/tablemodel/column/column-def.if';
+
+export * from './lib/table/data/tablemodel/cellgroup/cell-group';
+export * from './lib/table/data/tablemodel/cellgroup/cell-group.if';
+export * from './lib/table/data/tablemodel/cellgroup/cellgroup-factory';
+export * from './lib/table/data/tablemodel/cellgroup/cell-group-ext';
+
 export * from './lib/table/data/tablemodel/areamodel/area-model.if';
-export * from './lib/table/data/tablemodel/areamodel/abstract-area-model';
-export * from './lib/table/data/tablemodel/areamodel/area-model-array-array';
-export * from './lib/table/data/tablemodel/areamodel/area-model-hidden';
+export * from './lib/table/data/tablemodel/areamodel/area-model';
+export * from './lib/table/data/tablemodel/areamodel/area-model-cell-groups';
+export * from "./lib/table/data/tablemodel/areamodel/abstract-area-model";
+export * from "./lib/table/data/tablemodel/areamodel/area-model-array-of-arrays";
+export * from "./lib/table/data/tablemodel/areamodel/area-model-hidden";
 export * from './lib/table/data/tablemodel/areamodel/area-model-object-array';
 export * from './lib/table/data/tablemodel/areamodel/area-model-tree';
 export * from './lib/table/data/tablemodel/areamodel/col-and-rowspan-model';
+export * from './lib/table/data/tablemodel/areamodel/has-default-row-height-if';
+
 export * from './lib/table/data/common/tree-row';
 export * from './lib/table/data/common/tree-row-if';
 export * from './lib/table/data/common/tree-arrow.type';
 export * from './lib/table/data/tablemodel/areamodel/area-model-object-array-with-columndefs';
+
 export * from './lib/table/service/convenience-dom.service';
 export * from "./lib/table/service/dom-service.if";
 export * from "./lib/table/service/simple-dom-service";
@@ -87,9 +119,13 @@ export * from "./lib/table/service/store-state-sorting.service";
 export * from "./lib/table/service/data/collapsed-expanded.data";
 export * from "./lib/table/service/data/html-style.type";
 export * from "./lib/table/service/ge-filter.service";
+
+
 export * from "./lib/table/renderer/renderer";
 export * from "./lib/table/renderer/cell-render.if";
+export * from "./lib/table/renderer/cell-group-ext-cell-renderer";
 export * from "./lib/table/renderer/checkbox-cell-renderer";
+export * from "./lib/table/renderer/checkbox-boolean-property-cell-renderer";
 export * from "./lib/table/renderer/date-to-iso-cell-renderer";
 export * from "./lib/table/renderer/date-to-int-date-cell-renderer";
 export * from "./lib/table/renderer/date-to-locale-date-cell-renderer";
@@ -99,9 +135,22 @@ export * from "./lib/table/renderer/date-to-tec-cell-renderer";
 export * from "./lib/table/renderer/renderer-cleanup-fn.type";
 export * from "./lib/table/renderer/number-cell-renderer";
 export * from "./lib/table/renderer/edit/edit-cell-renderer.type";
+export * from "./lib/table/renderer/edit/edit-input-pipe.if";
+export * from "./lib/table/renderer/edit/edit-input-pipe-for-number";
 export * from "./lib/table/renderer/edit/input-cell-renderer";
 export * from './lib/table/renderer/edit/select-cell-renderer';
+
 export * from './lib/table/selection/selection-model';
 export * from './lib/table/selection/selection-model.if';
 export * from './lib/table/selection/selection.type';
 export * from './lib/table/selection/selection-service';
+
+export * from './lib/table/color/color-rgb';
+export * from './lib/table/color/color-rgb.if';
+export * from './lib/table/color/ge-css-color-util';
+export * from './lib/table/color/three-color-gradient-arg.if';
+export * from './lib/table/color/three-color-gradient-arg';
+export * from './lib/table/color/two-color-gradient-arg.if';
+export * from './lib/table/color/two-color-gradient-arg';
+export * from "./lib/table/data/tablemodel/areamodel/has-default-row-height-if";
+

package/src/lib/table/action/action-id.type.ts

@@ -0,0 +1,24 @@
+// TODO use it
+export const actionIds = [
+  //"COPY_2_CLIPBOARD",
+
+  "START_EDITING",
+  "TOGGLE_SELECTION",
+  "SELECT_ALL",
+  "DESELECT_ALL",
+
+  "NAVIGATE_LEFT",
+  "NAVIGATE_RIGHT",
+  "NAVIGATE_UP",
+  "NAVIGATE_DOWN",
+  //
+  // "ENTER_PRESSED",
+  // "HOME_PRESSED",
+  // "SPACE_PRESSED",
+  // "END_PRESSED",
+  // "PAGEUP_PRESSED",
+  // "PAGEDOWN_PRESSED"
+] as const;
+
+export type ActionId = typeof actionIds[number];
+

package/{lib/table/action/on-action-triggered.if.d.ts → src/lib/table/action/on-action-triggered.if.ts}

@@ -1,4 +1,7 @@
 import { ActionId } from "./action-id.type";
+
 export interface OnActionTriggeredIf {
-    onActionTriggered(actionId: ActionId): boolean;
+
+  onActionTriggered(actionId: ActionId): boolean;
+
 }

package/src/lib/table/action/osx-shortcut-actionId-mapping.ts

@@ -0,0 +1,29 @@
+import { ActionId } from "./action-id.type";
+
+export class OsxShortcutActionIdMapping {
+
+  get(): { [key: string]: ActionId } {
+    return {
+      "f2": "START_EDITING",
+
+      "space": "TOGGLE_SELECTION",
+
+      "ctrl+num_add": "SELECT_ALL",
+      "cmd+a": "SELECT_ALL",
+      "ctrl+a": "SELECT_ALL",
+
+      "cmd+x": "DESELECT_ALL",
+      "cmd+shift+a": "DESELECT_ALL",
+      "ctrl+shift+a": "DESELECT_ALL",
+      "ctrl+num_subtract": "DESELECT_ALL",
+      "ctrl -": "DESELECT_ALL",
+
+      "arrowup": "NAVIGATE_UP",
+      "arrowdown": "NAVIGATE_DOWN",
+      "arrowleft": "NAVIGATE_LEFT",
+      "arrowright": "NAVIGATE_RIGHT"
+    };
+  }
+
+
+}

package/src/lib/table/action/shortcut-actionid-mapping.type.ts

@@ -0,0 +1,3 @@
+import { ActionId } from "./action-id.type";
+
+export type ShortcutActionIdMapping = { [key: string]: ActionId };

package/src/lib/table/action/shortcut.service.ts

@@ -0,0 +1,134 @@
+import { ActionId } from "./action-id.type";
+import { TableScope } from "../table-scope";
+import { ShortcutActionIdMapping } from "./shortcut-actionid-mapping.type";
+import { WindowsShortcutActionIdMapping } from "./windows-shortcut-actionId-mapping";
+import { OsxShortcutActionIdMapping } from "./osx-shortcut-actionId-mapping";
+import { OnActionTriggeredIf } from "./on-action-triggered.if";
+
+
+export class ShortcutService {
+
+  private shortcutActionIdMapping: ShortcutActionIdMapping = {};
+  private listener: OnActionTriggeredIf[] = [];
+
+  constructor(
+    protected tableScope: TableScope
+  ) {
+    this.listener.push(tableScope);
+    this.init();
+  }
+
+
+  addListener(listener: OnActionTriggeredIf) {
+    if (!this.listener.includes(listener)) {
+      this.listener.push(listener);
+    }
+  }
+
+  init() {
+    if (this.isMacintosh()) {
+      Object.assign(this.shortcutActionIdMapping, new OsxShortcutActionIdMapping().get());
+    } else {
+      Object.assign(this.shortcutActionIdMapping, new WindowsShortcutActionIdMapping().get());
+    }
+    Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping);
+    if (this.isDebug()) {
+      console.info("ShortcutService", this.shortcutActionIdMapping);
+    }
+    // add key down listener:
+    this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
+    //this.tableScope.hostElement.addEventListener("keyup", this.onKeyDown.bind(this));
+  }
+
+  private isMacintosh() {
+    return navigator.platform.indexOf("Mac") > -1;
+  }
+
+  private isDebug() {
+    return this.isLocalhost();
+  }
+
+  private isLocalhost() {
+    return (location.hostname === "localhost" || location.hostname === "127.0.0.1");
+  }
+
+
+  private onKeyDown(evt: KeyboardEvent) {
+    const actionId = this.findEnty(evt);
+    if (actionId) {
+      const consumed = this.emit(actionId);
+      if (consumed) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    }
+  }
+
+  private emit(actionId: ActionId): boolean {
+    if (this.isDebug()) {
+      console.info("ShortcutService emit:", actionId);
+    }
+    let ret = false;
+    for (const l of this.listener) {
+      const consumed = l.onActionTriggered(actionId);
+      if (consumed) {
+        ret = true;
+      }
+    }
+    return ret;
+  }
+
+  private findEnty(evt: KeyboardEvent): ActionId | undefined {
+    const tokens = this.getTokenByEvent(evt);
+    if (this.isDebug()) {
+      console.info("ShortcutService tokens:", tokens);
+    }
+    for (const key in this.shortcutActionIdMapping) {
+      const shortcutTokens = key
+        .replace(/opt/g, "alt")
+        .replace(/cmd/g, "meta")
+        .split(/[\+ ]/g).sort();
+      if (this.areTokensEquals(tokens, shortcutTokens)) {
+        return this.shortcutActionIdMapping[key] as ActionId;
+      }
+    }
+    return undefined;
+  }
+
+  private areTokensEquals(tokens1: string[], tokens2: string[]): boolean {
+    if (tokens1.length !== tokens2.length) {
+      return false;
+    }
+    if (tokens1.length === 0) {
+      return false;
+    }
+    for (let i = 0; i < tokens1.length; i++) {
+      if (tokens1[i] !== tokens2[i]) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  private getTokenByEvent(evt: KeyboardEvent): string[] {
+    const tokens: string[] = [];
+    if (evt.altKey) {
+      tokens.push("alt");
+    }
+    if (evt.shiftKey) {
+      tokens.push("shift");
+    }
+    if (evt.ctrlKey) {
+      tokens.push("ctrl");
+    }
+    if (evt.metaKey) {
+      tokens.push("meta");
+    }
+    if (evt.code) {
+      tokens.push(evt.code.toLowerCase().replace(/key/g, ""));
+    }
+    return tokens.sort();
+  }
+
+}