Build update

Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) from 16.8.6 to 16.9.0.
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/master/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v16.9.0/packages/react)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.esdoc.json

@@ -1,8 +0,0 @@
-{
-  "source": "./src",
-  "destination": "./docs",
-  "plugins": [
-    {"name": "esdoc-standard-plugin"},
-    {"name": "esdoc-ecmascript-proposal-plugin", "option": {"all": true}}
-  ]
-}

.npmignore

@@ -19,7 +19,6 @@ yarn-debug.log*
 yarn-error.log*
 /.github
 /demo
-.esdoc.json
 
 # Development folders and files
 public

.travis.yml

@@ -1,13 +1,13 @@
 language: node_js
 node_js:
- - '11.10.1'
+ - node
 install:
   - npm install -g codecov
   - npm install
 script:
 - npm run start -- --testMode
 - npm run demo
-- npm run test -- --coverage
+- npm run coverage
 - codecov
 after_success:
   - wget https://raw.githubusercontent.com/DiscordHooks/travis-ci-discord-webhook/master/send.sh

README.md

@@ -4,8 +4,8 @@
   <blockquote>The easily customisable and responsive on-screen virtual keyboard for Javascript projects.</blockquote>
   <a href="https://www.npmjs.com/package/simple-keyboard" target="_blank"><img src="https://img.shields.io/npm/v/simple-keyboard.svg?style=flat" alt="npm version"></a>
   <a href="https://travis-ci.org/hodgef/simple-keyboard" target="_blank"><img src="https://travis-ci.org/hodgef/simple-keyboard.svg?branch=master" alt="Build Status"></a>
+  <img src="https://img.shields.io/david/hodgef/js-library-boilerplate.svg" />
   <a href="https://codecov.io/gh/hodgef/simple-keyboard" target="_blank"><img src="https://img.shields.io/codecov/c/github/hodgef/simple-keyboard/master.svg?style=flat" alt="Coverage Status"></a>
-  <a href="https://doc.esdoc.org/github.com/hodgef/simple-keyboard" target="_blank"><img src="https://doc.esdoc.org/github.com/hodgef/simple-keyboard/badge.svg" alt="Documentation Status"></a>
   <a href="https://www.codacy.com/app/hodgef/simple-keyboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=hodgef/simple-keyboard&amp;utm_campaign=Badge_Grade" target="_blank"><img src="https://api.codacy.com/project/badge/Grade/5778fccc6a894701853d9a1f2fb44a76" alt="Codacy Badge"></a>
   </p>
 </div>

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.20.0
+ *   simple-keyboard v2.25.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,5 +8,5 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:-webkit-flex;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:-webkit-flex;display:flex}.simple-keyboard .hg-button{display:inline-block;-webkit-flex-grow:1;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
+ */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 /*# sourceMappingURL=index.css.map */

build/css/simple-keyboard.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.20.0 (Non-minified build)
+ *   simple-keyboard v2.25.0 (Non-minified build)
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,141 +8,4 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */
-body,
-html {
-  margin: 0;
-  padding: 0;
-}
-
-.simple-keyboard {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
-    Helvetica, Arial, "Lucida Grande", sans-serif;
-  width: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  touch-action: manipulation;
-}
-
-.simple-keyboard .hg-row {
-  display: -webkit-flex;
-  display: flex;
-}
-
-.simple-keyboard .hg-row:not(:last-child) {
-  margin-bottom: 5px;
-}
-
-.simple-keyboard .hg-row .hg-button:not(:last-child) {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row > div:last-child {
-  margin-right: 0;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  display: -webkit-flex;
-  display: flex;
-}
-
-.simple-keyboard .hg-button {
-  display: inline-block;
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-  cursor: pointer;
-}
-
-.simple-keyboard .hg-button span {
-  pointer-events: none;
-}
-
-/**
- * hg-theme-default theme
- */
-.simple-keyboard.hg-theme-default {
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 5px;
-  border-radius: 5px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button {
-  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
-  height: 40px;
-  border-radius: 5px;
-  box-sizing: border-box;
-  padding: 5px;
-  background: white;
-  border-bottom: 1px solid #b5b5b5;
-  cursor: pointer;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-}
-
-/* When using option "useButtonTag" */
-.simple-keyboard button.hg-button {
-  border-width: 0;
-  outline: 0;
-  font-size: inherit;
-}
-
-.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active {
-  background: #e4e4e4;
-}
-
-.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
-  width: 33.3%;
-  height: 60px;
-  -webkit-align-items: center;
-          align-items: center;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: center;
-          justify-content: center;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
-  height: 85px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
-  height: 85px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
-  width: 105px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
-  max-width: 85px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
-  max-width: 45px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
-  background: rgba(5, 25, 70, 0.53);
-  color: white;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
-  max-width: 82px;
-}
-
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
-  max-width: 60px;
-}
-
+ */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}

build/index.d.ts

@@ -1,7 +1,8 @@
 declare module 'simple-keyboard' {
   interface KeyboardLayoutObject {
     default: string[];
-    shift?: string[];
+    shift?: any;
+    [key: string]: string[];
   }
 
   interface KeyboardButtonTheme {
@@ -9,12 +10,13 @@ declare module 'simple-keyboard' {
     buttons: string;
   }
 
-  interface KeyboardOptions {
-    /**
-     * Utilities
-     */
-    utilities?: any;
+  interface KeyboardButtonAttributes {
+    attribute: string;
+    value: string;
+    buttons: string;
+  }
 
+  interface KeyboardOptions {
     /**
      * Modify the keyboard layout.
      */
@@ -45,6 +47,11 @@ declare module 'simple-keyboard' {
      */
     buttonTheme?: KeyboardButtonTheme[];
 
+    /**
+     * A prop to add your own attributes to one or several buttons.
+     */
+    buttonAttributes?: KeyboardButtonAttributes[];
+
     /**
      * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
      */
@@ -70,11 +77,7 @@ declare module 'simple-keyboard' {
      *
      * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      */
-    maxLength?:
-      | number
-      | {
-          [inputName: string]: number;
-        };
+    maxLength?: any;
 
     /**
      * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
@@ -131,11 +134,21 @@ declare module 'simple-keyboard' {
      */
     useMouseEvents?: boolean;
 
+    /**
+     * Disable button hold action.
+     */
+    disableButtonHold?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */
     onKeyPress?: (button: string) => any;
 
+    /**
+     * Executes the callback function on key release.
+     */
+    onKeyReleased?: (button: string) => any;
+
     /**
      * Executes the callback function on input change. Returns the current input's string.
      */
@@ -170,8 +183,22 @@ declare module 'simple-keyboard' {
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
+
+    /**
+     * Options
+     */
     options: KeyboardOptions;
 
+    /**
+     * Utilities
+     */
+    utilities?: any;
+
+    /**
+     * caretPosition
+     */
+    caretPosition?: number;
+
     /**
      * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
      * @param  {string} buttons List of buttons to select (separated by a space).
@@ -223,6 +250,11 @@ declare module 'simple-keyboard' {
      * @param  {string} button The button layout name to select
      */
     getButtonElement(button: string): HTMLElement | HTMLElement[];
+
+    /**
+     * Clears keyboard listeners and DOM elements.
+     */
+    destroy(): void;
   }
 
   export default Keyboard;

config/jest/fileTransform.js

@@ -10,18 +10,19 @@ module.exports = {
     const assetFilename = JSON.stringify(path.basename(filename));
 
     if (filename.match(/\.svg$/)) {
-      return `module.exports = {
+      return `const React = require('react');
+      module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: (props) => ({
+        ReactComponent: React.forwardRef((props, ref) => ({
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
-          ref: null,
+          ref: ref,
           key: null,
           props: Object.assign({}, props, {
             children: ${assetFilename}
           })
-        }),
+        })),
       };`;
     }
 

config/modules.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+
+/**
+ * Get the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  // We need to explicitly check for null and undefined (and not a falsy value) because
+  // TypeScript treats an empty string as `.`.
+  if (baseUrl == null) {
+    // If there's no baseUrl set we respect NODE_PATH
+    // Note that NODE_PATH is deprecated and will be removed
+    // in the next major release of create-react-app.
+
+    const nodePath = process.env.NODE_PATH || '';
+    return nodePath.split(path.delimiter).filter(Boolean);
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return [paths.appSrc];
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const hasTsConfig = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (hasTsConfig && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // TypeScript project and set up the config
+  // based on tsconfig.json
+  if (hasTsConfig) {
+    config = require(paths.appTsConfig);
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    hasTsConfig,
+  };
+}
+
+module.exports = getModules();

config/paths.js

@@ -82,6 +82,7 @@ module.exports = {
   appSrcLibTypes: resolveApp('src/lib/@types'),
   appSrcDemo: resolveApp('src/demo'),
   appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),

config/webpack.config.dev.js

@@ -1,423 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const resolve = require('resolve');
-const webpack = require('webpack');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const getClientEnvironment = require('./env');
-const paths = require('./paths');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    require.resolve('style-loader'),
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
-  }
-  return loaders;
-};
-
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
-module.exports = {
-  mode: 'development',
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-  // See the discussion in https://github.com/facebook/create-react-app/issues/343
-  devtool: 'cheap-module-source-map',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  entry: [
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  optimization: {
-    // Automatically split vendor and commons
-    // https://twitter.com/wSokra/status/969633336732905474
-    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-    splitChunks: {
-      cacheGroups: {
-        default: false,
-      }
-    },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: false,
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebook/create-react-app/issues/253
-    modules: ['node_modules'].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebook/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: paths.moduleFileExtensions
-      .map(ext => `.${ext}`)
-      .filter(ext => useTypeScript || !ext.includes('ts')),
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-      // guards against forgotten dependencies and such.
-      PnpWebpackPlugin,
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  resolveLoader: {
-    plugins: [
-      // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-      // from the current package.
-      PnpWebpackPlugin.moduleLoader(module),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // Disable require.ensure as it's not a standard language feature.
-      { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process application JS with Babel.
-          // The preset includes JSX, Flow, and some ESnext features.
-          {
-            test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
-              customize: require.resolve(
-                'babel-preset-react-app/webpack-overrides'
-              ),
-              
-              plugins: [
-                [
-                  require.resolve('babel-plugin-named-asset-import'),
-                  {
-                    loaderMap: {
-                      svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
-                      },
-                    },
-                  },
-                ],
-              ],
-              // This is a feature of `babel-loader` for webpack (not Babel itself).
-              // It enables caching results in ./node_modules/.cache/babel-loader/
-              // directory for faster rebuilds.
-              cacheDirectory: true,
-              // Don't waste time on Gzipping the cache
-              cacheCompression: false,
-            },
-          },
-          // Process any JS outside of the app with Babel.
-          // Unlike the application JS, we only compile the standard ES features.
-          {
-            test: /\.(js|mjs)$/,
-            exclude: /@babel(?:\/|\\{1,2})runtime/,
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              configFile: false,
-              compact: false,
-              presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
-              ],
-              cacheDirectory: true,
-              // Don't waste time on Gzipping the cache
-              cacheCompression: false,
-              
-              // If an error happens in a package, it's possible to be
-              // because it was compiled. Thus, we don't want the browser
-              // debugger to show the original code. Instead, the code
-              // being evaluated would be much more helpful.
-              sourceMaps: false,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
-          // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
-          // By default we support CSS Modules with the extension .module.css
-          {
-            test: cssRegex,
-            exclude: cssModuleRegex,
-            use: getStyleLoaders({
-              importLoaders: 1,
-            }),
-          },
-          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .module.css
-          {
-            test: cssModuleRegex,
-            use: getStyleLoaders({
-              importLoaders: 1,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            }),
-          },
-          // Opt-in support for SASS (using .scss or .sass extensions).
-          // Chains the sass-loader with the css-loader and the style-loader
-          // to immediately apply all styles to the DOM.
-          // By default we support SASS Modules with the
-          // extensions .module.scss or .module.sass
-          {
-            test: sassRegex,
-            exclude: sassModuleRegex,
-            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
-          },
-          // Adds support for CSS Modules, but using SASS
-          // using the extension .module.scss or .module.sass
-          {
-            test: sassModuleRegex,
-            use: getStyleLoaders(
-              {
-                importLoaders: 2,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              },
-              'sass-loader'
-            ),
-          },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise be processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
-      // ** STOP ** Are you adding a new loader?
-      // Make sure to add the new loader(s) before the "file" loader.
-    ],
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-    // This gives some necessary context to module not found errors, such as
-    // the requesting resource.
-    new ModuleNotFoundPlugin(paths.appPath),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebook/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebook/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-      publicPath: publicPath,
-    }),
-    // TypeScript type checking
-    useTypeScript &&
-      new ForkTsCheckerWebpackPlugin({
-        typescript: resolve.sync('typescript', {
-          basedir: paths.appNodeModules,
-        }),
-        async: false,
-        checkSyntacticErrors: true,
-        tsconfig: paths.appTsConfig,
-        compilerOptions: {
-          module: 'esnext',
-          moduleResolution: 'node',
-          resolveJsonModule: true,
-          isolatedModules: true,
-          noEmit: true,
-          jsx: 'preserve',
-        },
-        reportFiles: [
-          '**',
-          '!**/*.json',
-          '!**/__tests__/**',
-          '!**/?(*.)(spec|test).*',
-          '!src/setupProxy.js',
-          '!src/setupTests.*',
-        ],
-        watch: paths.appSrc,
-        silent: true,
-        formatter: typescriptFormatter,
-      }),
-  ].filter(Boolean),
-
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance processing because we utilize
-  // our own hints via the FileSizeReporter
-  performance: false,
-};

config/webpack.config.js

@@ -0,0 +1,672 @@
+'use strict';
+
+const fs = require('fs');
+const isWsl = require('is-wsl');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const safePostCssParser = require('postcss-safe-parser');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const getPackageJson = require('./getPackageJson');
+const PrettierPlugin = require("prettier-webpack-plugin");
+
+const postcssNormalize = require('postcss-normalize');
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author,
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version}
+  ${repository.url}
+
+  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+  `;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction
+    ? paths.servedPath
+    : isEnvDevelopment && '/';
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === './';
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction
+    ? publicPath.slice(0, -1)
+    : isEnvDevelopment && '';
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        options: Object.assign(
+          {},
+          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+        ),
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: 'postcss',
+          plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+            }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
+          ],
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push({
+        loader: require.resolve(preProcessor),
+        options: {
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      });
+    }
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: isEnvProduction ? [paths.appLibIndexJs] : [
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+      // Finally, this is your app's code:
+      paths.appIndexJs,
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'index.js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+      // TODO: remove this when upgrading to webpack 5
+      futureEmitAssets: true,
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
+      publicPath: publicPath,
+      library: "SimpleKeyboard",
+      libraryTarget: 'umd',
+      umdNamedDefine: true,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+            path
+              .relative(paths.appSrcLib, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // we want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minfication steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending futher investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+              //keep_classnames: true,
+              //keep_fnames: true,
+              module: true
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          // Use multi-process parallel running to improve the build speed
+          // Default number of concurrent runs: os.cpus().length - 1
+          // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
+          // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
+          parallel: !isWsl,
+          // Enable file caching
+          cache: true,
+          sourceMap: shouldUseSourceMap,
+        }),
+        new webpack.BannerPlugin({ 
+          banner: banner, 
+          entryOnly: true 
+        }),
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+      //chunks: 'all',
+      cacheGroups: {
+        default: false,
+      }
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: false,
+    },
+    resolve: {
+      // This allows you to set a fallback for where Webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+      },
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        { parser: { requireEnsure: false } },
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        {
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
+          enforce: 'pre',
+          use: [
+            {
+              options: {
+                formatter: require.resolve('react-dev-utils/eslintFormatter'),
+                eslintPath: require.resolve('eslint'),
+                
+              },
+              loader: require.resolve('eslint-loader'),
+            },
+          ],
+        include: paths.appSrcLib,
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: 10000,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrcLib,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+                
+                plugins: [
+                  [
+                    require.resolve('babel-plugin-named-asset-import'),
+                    {
+                      loaderMap: {
+                        svg: {
+                          ReactComponent: '@svgr/webpack?-prettier,-svgo,+ref![path]',
+                        },
+                      },
+                    },
+                  ],
+                ],
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                  "@babel/preset-env",
+                  "@babel/preset-react"
+                ],
+                plugins: [
+                  [
+                    "@babel/plugin-proposal-class-properties"
+                  ]
+                ],
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+                
+                // If an error happens in a package, it's possible to be
+                // because it was compiled. Thus, we don't want the browser
+                // debugger to show the original code. Instead, the code
+                // being evaluated would be much more helpful.
+                sourceMaps: false,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  modules: true,
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+                'sass-loader'
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    plugins: [
+      isEnvDevelopment &&
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: paths.appHtml,
+      }),
+      // Generates an `index.html` file with the <script> injected.
+      /*new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      ),*/
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+      // In production, it will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // This is necessary to emit hot updates (currently CSS only):
+      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment &&
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: 'css/index.css',
+          chunkFilename: 'css/index.[contenthash:8].chunk.css',
+        }),
+      // Generate a manifest file which contains a mapping of all asset filenames
+      // to their corresponding output file so that tools can pick it up without
+      // having to parse `index.html`.
+    /*new ManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: publicPath,
+        generate: (seed, files) => {
+          const manifestFiles = files.reduce(function(manifest, file) {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+
+          return {
+            files: manifestFiles,
+          };
+        },
+      }),*/
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new CopyWebpackPlugin([
+        {
+          from: `${paths.appSrcLibTypes}`,
+          to: paths.appBuild
+        }
+      ]),
+      new PrettierPlugin(),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the Webpack build.
+      /*isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          importWorkboxFrom: 'cdn',
+          navigateFallback: publicUrl + '/index.html',
+          navigateFallbackBlacklist: [
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp('^/_'),
+            // Exclude URLs containing a dot, as they're likely a resource in
+            // public/ and not a SPA route
+            new RegExp('/[^/]+\\.[^/]+$'),
+          ],
+        }),*/
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+          }),
+          async: isEnvDevelopment,
+          useTypescriptIncrementalApi: true,
+          checkSyntacticErrors: true,
+          tsconfig: paths.appTsConfig,
+          reportFiles: [
+            '**',
+            '!**/__tests__/**',
+            '!**/?(*.)(spec|test).*',
+            '!**/src/setupProxy.*',
+            '!**/src/setupTests.*',
+          ],
+          watch: paths.appSrcLib,
+          silent: true,
+          // The formatter is invoked directly in WebpackDevServerUtils during development
+          formatter: isEnvProduction ? typescriptFormatter : undefined,
+        }),
+    ].filter(Boolean),
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      module: 'empty',
+      dgram: 'empty',
+      dns: 'mock',
+      fs: 'empty',
+      http2: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

config/webpack.config.prod.js

@@ -1,576 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const getPackageJson = require('./getPackageJson');
-var PrettierPlugin = require("prettier-webpack-plugin");
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Assert this just to be safe.
-// Development builds of React are slow and not intended for production.
-if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
-}
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-const {
-  version,
-  name,
-  license,
-  repository,
-  author,
-} = getPackageJson('version', 'name', 'license', 'repository', 'author');
-
-const banner = `
-  ${name} v${version}
-  ${repository.url}
-
-  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
-
-  This source code is licensed under the ${license} license found in the
-  LICENSE file in the root directory of this source tree.
-  `;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    {
-      loader: MiniCssExtractPlugin.loader,
-      options: Object.assign(
-        {},
-        shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
-      ),
-    },
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-        sourceMap: shouldUseSourceMap,
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push({
-      loader: require.resolve(preProcessor),
-      options: {
-        sourceMap: shouldUseSourceMap,
-      },
-    });
-  }
-  return loaders;
-};
-
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-  mode: 'production',
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the app code.
-  entry: [paths.appLibIndexJs],
-  output: {
-    // The build folder.
-    path: paths.appBuild,
-    // Generated JS file names (with nested folders).
-    // There will be one main bundle, and one file per asynchronous chunk.
-    // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'index.js',
-    chunkFilename: 'index.[chunkhash:8].chunk.js',
-    // We inferred the "public path" (such as / or /my-project) from homepage.
-    publicPath: publicPath,
-    library: "SimpleKeyboard",
-    libraryTarget: 'umd',
-    umdNamedDefine: true,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path
-        .relative(paths.appSrcLib, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          parse: {
-            // we want terser to parse ecma 8 code. However, we don't want it
-            // to apply any minfication steps that turns valid ecma 5 code
-            // into invalid ecma 5 code. This is why the 'compress' and 'output'
-            // sections only apply transformations that are ecma 5 safe
-            // https://github.com/facebook/create-react-app/pull/4234
-            ecma: 8,
-          },
-          compress: {
-            ecma: 5,
-            warnings: false,
-            // Disabled because of an issue with Uglify breaking seemingly valid code:
-            // https://github.com/facebook/create-react-app/issues/2376
-            // Pending further investigation:
-            // https://github.com/mishoo/UglifyJS2/issues/2011
-            comparisons: false,
-            // Disabled because of an issue with Terser breaking valid code:
-            // https://github.com/facebook/create-react-app/issues/5250
-            // Pending futher investigation:
-            // https://github.com/terser-js/terser/issues/120
-            inline: 2,
-          },
-          mangle: {
-            safari10: true,
-            //keep_classnames: true,
-            //keep_fnames: true,
-            module: true
-          },
-          output: {
-            ecma: 5,
-            comments: false,
-            // Turned on because emoji and regex is not minified properly using default
-            // https://github.com/facebook/create-react-app/issues/2488
-            ascii_only: true,
-          },
-        },
-        // Use multi-process parallel running to improve the build speed
-        // Default number of concurrent runs: os.cpus().length - 1
-        parallel: true,
-        // Enable file caching
-        cache: true,
-        sourceMap: shouldUseSourceMap,
-      }),
-      new webpack.BannerPlugin({ 
-        banner: banner, 
-        entryOnly: true 
-      }),
-      new OptimizeCSSAssetsPlugin({
-        cssProcessorOptions: {
-          parser: safePostCssParser,
-          map: shouldUseSourceMap
-            ? {
-                // `inline: false` forces the sourcemap to be output into a
-                // separate file
-                inline: false,
-                // `annotation: true` appends the sourceMappingURL to the end of
-                // the css file, helping the browser find the sourcemap
-                annotation: true,
-              }
-            : false,
-        },
-      }),
-    ],
-    // Automatically split vendor and commons
-    // https://twitter.com/wSokra/status/969633336732905474
-    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-    splitChunks: {
-      //chunks: 'all',
-      cacheGroups: {
-        default: false,
-      }
-    },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: false,
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebook/create-react-app/issues/253
-    modules: ['node_modules'].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebook/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: paths.moduleFileExtensions
-      .map(ext => `.${ext}`)
-      .filter(ext => useTypeScript || !ext.includes('ts')),
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-      // guards against forgotten dependencies and such.
-      PnpWebpackPlugin,
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrcLib, [paths.appPackageJson]),
-    ],
-  },
-  resolveLoader: {
-    plugins: [
-      // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-      // from the current package.
-      PnpWebpackPlugin.moduleLoader(module),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // Disable require.ensure as it's not a standard language feature.
-      { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|mjs|jsx)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrcLib,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process application JS with Babel.
-          // The preset includes JSX, Flow, TypeScript and some ESnext features.
-          {
-            test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrcLib,
-
-            loader: require.resolve('babel-loader'),
-            options: {
-              customize: require.resolve(
-                'babel-preset-react-app/webpack-overrides'
-              ),
-              
-              plugins: [
-                [
-                  require.resolve('babel-plugin-named-asset-import'),
-                  {
-                    loaderMap: {
-                      svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
-                      },
-                    },
-                  },
-                ],
-              ],
-              cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
-              compact: true,
-            },
-          },
-          // Process any JS outside of the app with Babel.
-          // Unlike the application JS, we only compile the standard ES features.
-          {
-            test: /\.(js|mjs)$/,
-            exclude: /@babel(?:\/|\\{1,2})runtime/,
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              configFile: false,
-              compact: false,
-              presets: [
-                [
-                  require.resolve('babel-preset-react-app/dependencies'),
-                  { helpers: true },
-                ],
-              ],
-              cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
-              
-              // If an error happens in a package, it's possible to be
-              // because it was compiled. Thus, we don't want the browser
-              // debugger to show the original code. Instead, the code
-              // being evaluated would be much more helpful.
-              sourceMaps: false,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // `MiniCSSExtractPlugin` extracts styles into CSS
-          // files. If you use code splitting, async bundles will have their own separate CSS chunk file.
-          // By default we support CSS Modules with the extension .module.css
-          {
-            test: cssRegex,
-            exclude: cssModuleRegex,
-            loader: getStyleLoaders({
-              importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
-            }),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-          // using the extension .module.css
-          {
-            test: cssModuleRegex,
-            loader: getStyleLoaders({
-              importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            }),
-          },
-          // Opt-in support for SASS. The logic here is somewhat similar
-          // as in the CSS routine, except that "sass-loader" runs first
-          // to compile SASS files into CSS.
-          // By default we support SASS Modules with the
-          // extensions .module.scss or .module.sass
-          {
-            test: sassRegex,
-            exclude: sassModuleRegex,
-            loader: getStyleLoaders(
-              {
-                importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
-              },
-              'sass-loader'
-            ),
-            // Don't consider CSS imports dead code even if the
-            // containing package claims to have no side effects.
-            // Remove this when webpack adds a warning or an error for this.
-            // See https://github.com/webpack/webpack/issues/6571
-            sideEffects: true,
-          },
-          // Adds support for CSS Modules, but using SASS
-          // using the extension .module.scss or .module.sass
-          {
-            test: sassModuleRegex,
-            loader: getStyleLoaders(
-              {
-                importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
-              },
-              'sass-loader'
-            ),
-          },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise be processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-    // Generates an `index.html` file with the <script> injected.
-    /*new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true,
-      },
-    }),*/
-    // Inlines the webpack runtime script. This script is too small to warrant
-    // a network request.
-    shouldInlineRuntimeChunk &&
-      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In production, it will be an empty string unless you specify "homepage"
-    // in `package.json`, in which case it will be the pathname of that URL.
-    new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-    // This gives some necessary context to module not found errors, such as
-    // the requesting resource.
-    new ModuleNotFoundPlugin(paths.appPath),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: 'css/index.css',
-      chunkFilename: 'css/index.[contenthash:8].chunk.css',
-    }),
-    // Generate a manifest file which contains a mapping of all asset filenames
-    // to their corresponding output file so that tools can pick it up without
-    // having to parse `index.html`.
-    /*new ManifestPlugin({
-      fileName: 'asset-manifest.json',
-      publicPath: publicPath,
-    }),*/
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new CopyWebpackPlugin([
-      {
-        from: `${paths.appSrcLibTypes}`,
-        to: paths.appBuild
-      }
-    ]),
-    new PrettierPlugin(),
-    // Generate a service worker script that will precache, and keep up to date,
-    // the HTML & assets that are part of the Webpack build.
-    /*new WorkboxWebpackPlugin.GenerateSW({
-      clientsClaim: true,
-      exclude: [/\.map$/, /asset-manifest\.json$/],
-      importWorkboxFrom: 'cdn',
-      navigateFallback: publicUrl + '/index.html',
-      navigateFallbackBlacklist: [
-        // Exclude URLs starting with /_, as they're likely an API call
-        new RegExp('^/_'),
-        // Exclude URLs containing a dot, as they're likely a resource in
-        // public/ and not a SPA route
-        new RegExp('/[^/]+\\.[^/]+$'),
-      ],
-    }),*/
-    // TypeScript type checking
-    fs.existsSync(paths.appTsConfig) &&
-      new ForkTsCheckerWebpackPlugin({
-        typescript: resolve.sync('typescript', {
-          basedir: paths.appNodeModules,
-        }),
-        async: false,
-        checkSyntacticErrors: true,
-        tsconfig: paths.appTsConfig,
-        compilerOptions: {
-          module: 'esnext',
-          moduleResolution: 'node',
-          resolveJsonModule: true,
-          isolatedModules: true,
-          noEmit: true,
-          jsx: 'preserve',
-        },
-        reportFiles: [
-          '**',
-          '!**/*.json',
-          '!**/__tests__/**',
-          '!**/?(*.)(spec|test).*',
-          '!src/setupProxy.js',
-          '!src/setupTests.*',
-        ],
-        watch: paths.appSrcLib,
-        silent: true,
-        formatter: typescriptFormatter,
-      }),
-  ].filter(Boolean),
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance processing because we utilize
-  // our own hints via the FileSizeReporter
-  performance: false,
-};

config/webpack.config.unminified.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const isWsl = require('is-wsl');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
@@ -8,35 +9,27 @@ const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const safePostCssParser = require('postcss-safe-parser');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
+const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const getPackageJson = require('./getPackageJson');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const getPackageJson = require('./getPackageJson');
 
+const postcssNormalize = require('postcss-normalize');
 
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = false;
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -65,10 +58,35 @@ const banner = `
   LICENSE file in the root directory of this source tree.
   `;
 
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction
+    ? paths.servedPath
+    : isEnvDevelopment && '/';
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === './';
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction
+    ? publicPath.slice(0, -1)
+    : isEnvDevelopment && '';
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
 // common function to get style loaders
 const getStyleLoaders = (cssOptions, preProcessor) => {
   const loaders = [
-    {
+      {
       loader: MiniCssExtractPlugin.loader,
       options: Object.assign(
         {},
@@ -96,56 +114,61 @@ const getStyleLoaders = (cssOptions, preProcessor) => {
             },
             stage: 3,
           }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
         ],
-        sourceMap: shouldUseSourceMap,
+          sourceMap: shouldUseSourceMap,
       },
     },
-  ];
+    ].filter(Boolean);
   if (preProcessor) {
     loaders.push({
       loader: require.resolve(preProcessor),
       options: {
-        sourceMap: shouldUseSourceMap,
+          sourceMap: shouldUseSourceMap,
       },
     });
   }
   return loaders;
 };
 
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-  mode: 'production',
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: false,
-  // In production, we only want to load the app code.
+  return {
+    mode: 'production',
+    // Stop compilation early in production
+    bail: true,
+    devtool: false,
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
   entry: [paths.appLibIndexJs],
   output: {
     // The build folder.
-    path: paths.appBuild,
-    // Generated JS file names (with nested folders).
+      path: paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
     // There will be one main bundle, and one file per asynchronous chunk.
-    // We don't currently advertise code splitting but Webpack supports it.
-    filename: 'simple-keyboard.js',
-    chunkFilename: 'index.[chunkhash:8].chunk.js',
+      // In development, it does not produce real files.
+      filename: 'simple-keyboard.js',
+      // TODO: remove this when upgrading to webpack 5
+      futureEmitAssets: true,
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: 'index.[chunkhash:8].chunk.js',
     // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
     publicPath: publicPath,
     library: "SimpleKeyboard",
     libraryTarget: 'umd',
     umdNamedDefine: true,
     // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path
-        .relative(paths.appSrcLib, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
+      devtoolModuleFilenameTemplate: info =>
+        path
+          .relative(paths.appSrcLib, info.absoluteResourcePath)
+          .replace(/\\/g, '/'),
   },
   optimization: {
     minimizer: [
-      // we specify a custom UglifyJsPlugin here to get source maps in production
+        // we specify a custom UglifyJsPlugin here to get source maps in production
       new UglifyJsPlugin({
         cache: false,
         parallel: false,
@@ -159,23 +182,54 @@ module.exports = {
           mangle: false,
           compress: false
         },
-        sourceMap: false
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
+        // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
+        parallel: !isWsl,
+        // Enable file caching
+        cache: true,
+        sourceMap: false,
       }),
       new webpack.BannerPlugin({ 
         banner: banner, 
         entryOnly: true 
-      })
-    ]
+        }),
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+      //chunks: 'all',
+      cacheGroups: {
+        default: false,
+      }
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: false,
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
     // We placed these paths second because we want `node_modules` to "win"
     // if there are any conflicts. This matches Node resolution mechanism.
     // https://github.com/facebook/create-react-app/issues/253
-    modules: ['node_modules'].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
+      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
@@ -199,7 +253,7 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrcLib, [paths.appPackageJson]),
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   resolveLoader: {
@@ -218,7 +272,7 @@ module.exports = {
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
       {
-        test: /\.(js|mjs|jsx)$/,
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
         enforce: 'pre',
         use: [
           {
@@ -237,8 +291,9 @@ module.exports = {
         // match the requirements. When no loader matches it will fall
         // back to the "file" loader at the end of the loader list.
         oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
           {
             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
             loader: require.resolve('url-loader'),
@@ -248,11 +303,10 @@ module.exports = {
             },
           },
           // Process application JS with Babel.
-          // The preset includes JSX, Flow, TypeScript and some ESnext features.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
           {
             test: /\.(js|mjs|jsx|ts|tsx)$/,
             include: paths.appSrcLib,
-
             loader: require.resolve('babel-loader'),
             options: {
               customize: require.resolve(
@@ -265,16 +319,18 @@ module.exports = {
                   {
                     loaderMap: {
                       svg: {
-                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+                          ReactComponent: '@svgr/webpack?-prettier,-svgo,+ref![path]',
                       },
                     },
                   },
                 ],
               ],
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
               cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
-              compact: true,
+                cacheCompression: true,
+                compact: true,
             },
           },
           // Process any JS outside of the app with Babel.
@@ -294,8 +350,7 @@ module.exports = {
                 ],
               ],
               cacheDirectory: true,
-              // Save disk space when time isn't as important
-              cacheCompression: true,
+                cacheCompression: true,
               
               // If an error happens in a package, it's possible to be
               // because it was compiled. Thus, we don't want the browser
@@ -306,15 +361,17 @@ module.exports = {
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // `MiniCSSExtractPlugin` extracts styles into CSS
-          // files. If you use code splitting, async bundles will have their own separate CSS chunk file.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
           // By default we support CSS Modules with the extension .module.css
           {
             test: cssRegex,
             exclude: cssModuleRegex,
-            loader: getStyleLoaders({
+              use: getStyleLoaders({
               importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
+                sourceMap: shouldUseSourceMap,
             }),
             // Don't consider CSS imports dead code even if the
             // containing package claims to have no side effects.
@@ -326,25 +383,23 @@ module.exports = {
           // using the extension .module.css
           {
             test: cssModuleRegex,
-            loader: getStyleLoaders({
+              use: getStyleLoaders({
               importLoaders: 1,
-              sourceMap: shouldUseSourceMap,
+                sourceMap: shouldUseSourceMap,
               modules: true,
               getLocalIdent: getCSSModuleLocalIdent,
             }),
           },
-          // Opt-in support for SASS. The logic here is somewhat similar
-          // as in the CSS routine, except that "sass-loader" runs first
-          // to compile SASS files into CSS.
+            // Opt-in support for SASS (using .scss or .sass extensions).
           // By default we support SASS Modules with the
           // extensions .module.scss or .module.sass
           {
             test: sassRegex,
             exclude: sassModuleRegex,
-            loader: getStyleLoaders(
+              use: getStyleLoaders(
               {
                 importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
+                  sourceMap: shouldUseSourceMap,
               },
               'sass-loader'
             ),
@@ -358,24 +413,25 @@ module.exports = {
           // using the extension .module.scss or .module.sass
           {
             test: sassModuleRegex,
-            loader: getStyleLoaders(
+              use: getStyleLoaders(
               {
                 importLoaders: 2,
-                sourceMap: shouldUseSourceMap,
+                  sourceMap: shouldUseSourceMap,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               },
               'sass-loader'
             ),
           },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
           // This loader doesn't use a "test" so it will catch all modules
           // that fall through the other loaders.
           {
             loader: require.resolve('file-loader'),
             // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise be processed through "file" loader.
+              // its runtime that would otherwise be processed through "file" loader.
             // Also exclude `html` and `json` extensions so they get processed
             // by webpacks internal loaders.
             exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
@@ -391,9 +447,15 @@ module.exports = {
   },
   plugins: [
     // Generates an `index.html` file with the <script> injected.
-    /*new HtmlWebpackPlugin({
+      /*new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
       inject: true,
       template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -406,7 +468,10 @@ module.exports = {
         minifyCSS: true,
         minifyURLs: true,
       },
-    }),*/
+              }
+            : undefined
+        )
+      ),*/
     // Inlines the webpack runtime script. This script is too small to warrant
     // a network request.
     shouldInlineRuntimeChunk &&
@@ -416,20 +481,22 @@ module.exports = {
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     // In production, it will be an empty string unless you specify "homepage"
     // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
     // This gives some necessary context to module not found errors, such as
     // the requesting resource.
     new ModuleNotFoundPlugin(paths.appPath),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
     // Otherwise React will be compiled in the very slow development mode.
     new webpack.DefinePlugin(env.stringified),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: 'css/simple-keyboard.css',
-      chunkFilename: 'css/index.[contenthash:8].chunk.css',
+          filename: 'css/simple-keyboard.css',
+          chunkFilename: 'css/index.[contenthash:8].chunk.css',
     }),
     // Generate a manifest file which contains a mapping of all asset filenames
     // to their corresponding output file so that tools can pick it up without
@@ -437,6 +504,16 @@ module.exports = {
     /*new ManifestPlugin({
       fileName: 'asset-manifest.json',
       publicPath: publicPath,
+        generate: (seed, files) => {
+          const manifestFiles = files.reduce(function(manifest, file) {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+
+          return {
+            files: manifestFiles,
+          };
+        },
     }),*/
     // Moment.js is an extremely popular library that bundles large locale files
     // by default due to how Webpack interprets its code. This is a practical
@@ -446,7 +523,8 @@ module.exports = {
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
-    /*new WorkboxWebpackPlugin.GenerateSW({
+      /*isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
       clientsClaim: true,
       exclude: [/\.map$/, /asset-manifest\.json$/],
       importWorkboxFrom: 'cdn',
@@ -460,40 +538,36 @@ module.exports = {
       ],
     }),*/
     // TypeScript type checking
-    fs.existsSync(paths.appTsConfig) &&
+      useTypeScript &&
       new ForkTsCheckerWebpackPlugin({
         typescript: resolve.sync('typescript', {
           basedir: paths.appNodeModules,
         }),
-        async: false,
+          async: false,
+          useTypescriptIncrementalApi: true,
         checkSyntacticErrors: true,
         tsconfig: paths.appTsConfig,
-        compilerOptions: {
-          module: 'esnext',
-          moduleResolution: 'node',
-          resolveJsonModule: true,
-          isolatedModules: true,
-          noEmit: true,
-          jsx: 'preserve',
-        },
         reportFiles: [
           '**',
-          '!**/*.json',
           '!**/__tests__/**',
           '!**/?(*.)(spec|test).*',
-          '!src/setupProxy.js',
-          '!src/setupTests.*',
+            '!**/src/setupProxy.*',
+            '!**/src/setupTests.*',
         ],
         watch: paths.appSrcLib,
         silent: true,
-        formatter: typescriptFormatter,
+          // The formatter is invoked directly in WebpackDevServerUtils during development
+          formatter: isEnvProduction ? typescriptFormatter : undefined,
       }),
   ].filter(Boolean),
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {
+      module: 'empty',
     dgram: 'empty',
+      dns: 'mock',
     fs: 'empty',
+      http2: 'empty',
     net: 'empty',
     tls: 'empty',
     child_process: 'empty',
@@ -502,3 +576,4 @@ module.exports = {
   // our own hints via the FileSizeReporter
   performance: false,
 };
+};

config/webpackDevServer.config.js

@@ -4,7 +4,6 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const config = require('./webpack.config.dev');
 const paths = require('./paths');
 const fs = require('fs');
 
@@ -61,7 +60,7 @@ module.exports = function(proxy, allowedHost) {
     hot: true,
     // It is important to tell WebpackDevServer to use the same "root" path
     // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
+    publicPath: '/',
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
     quiet: true,

docs/ast/source/demo/index.js.json

@@ -1,513 +0,0 @@
-{
-  "type": "File",
-  "start": 0,
-  "end": 70,
-  "loc": {
-    "start": {
-      "line": 1,
-      "column": 0
-    },
-    "end": {
-      "line": 6,
-      "column": 10
-    }
-  },
-  "program": {
-    "type": "Program",
-    "start": 0,
-    "end": 70,
-    "loc": {
-      "start": {
-        "line": 1,
-        "column": 0
-      },
-      "end": {
-        "line": 6,
-        "column": 10
-      }
-    },
-    "sourceType": "module",
-    "body": [
-      {
-        "type": "ImportDeclaration",
-        "start": 0,
-        "end": 24,
-        "loc": {
-          "start": {
-            "line": 1,
-            "column": 0
-          },
-          "end": {
-            "line": 1,
-            "column": 24
-          }
-        },
-        "specifiers": [
-          {
-            "type": "ImportDefaultSpecifier",
-            "start": 7,
-            "end": 10,
-            "loc": {
-              "start": {
-                "line": 1,
-                "column": 7
-              },
-              "end": {
-                "line": 1,
-                "column": 10
-              }
-            },
-            "local": {
-              "type": "Identifier",
-              "start": 7,
-              "end": 10,
-              "loc": {
-                "start": {
-                  "line": 1,
-                  "column": 7
-                },
-                "end": {
-                  "line": 1,
-                  "column": 10
-                },
-                "identifierName": "App"
-              },
-              "name": "App"
-            }
-          }
-        ],
-        "source": {
-          "type": "StringLiteral",
-          "start": 16,
-          "end": 23,
-          "loc": {
-            "start": {
-              "line": 1,
-              "column": 16
-            },
-            "end": {
-              "line": 1,
-              "column": 23
-            }
-          },
-          "extra": {
-            "rawValue": "./App",
-            "raw": "'./App'"
-          },
-          "value": "./App"
-        },
-        "trailingComments": [
-          {
-            "type": "CommentBlock",
-            "value": "*\r\n * Initializing demo\r\n ",
-            "start": 28,
-            "end": 58,
-            "loc": {
-              "start": {
-                "line": 3,
-                "column": 0
-              },
-              "end": {
-                "line": 5,
-                "column": 3
-              }
-            }
-          }
-        ]
-      },
-      {
-        "type": "ExpressionStatement",
-        "start": 60,
-        "end": 70,
-        "loc": {
-          "start": {
-            "line": 6,
-            "column": 0
-          },
-          "end": {
-            "line": 6,
-            "column": 10
-          }
-        },
-        "expression": {
-          "type": "NewExpression",
-          "start": 60,
-          "end": 69,
-          "loc": {
-            "start": {
-              "line": 6,
-              "column": 0
-            },
-            "end": {
-              "line": 6,
-              "column": 9
-            }
-          },
-          "callee": {
-            "type": "Identifier",
-            "start": 64,
-            "end": 67,
-            "loc": {
-              "start": {
-                "line": 6,
-                "column": 4
-              },
-              "end": {
-                "line": 6,
-                "column": 7
-              },
-              "identifierName": "App"
-            },
-            "name": "App"
-          },
-          "arguments": [],
-          "leadingComments": null
-        },
-        "leadingComments": [
-          {
-            "type": "CommentBlock",
-            "value": "*\r\n * Initializing demo\r\n ",
-            "start": 28,
-            "end": 58,
-            "loc": {
-              "start": {
-                "line": 3,
-                "column": 0
-              },
-              "end": {
-                "line": 5,
-                "column": 3
-              }
-            }
-          }
-        ]
-      }
-    ],
-    "directives": []
-  },
-  "comments": [
-    {
-      "type": "CommentBlock",
-      "value": "*\r\n * Initializing demo\r\n ",
-      "start": 28,
-      "end": 58,
-      "loc": {
-        "start": {
-          "line": 3,
-          "column": 0
-        },
-        "end": {
-          "line": 5,
-          "column": 3
-        }
-      }
-    }
-  ],
-  "tokens": [
-    {
-      "type": {
-        "label": "import",
-        "keyword": "import",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "import",
-      "start": 0,
-      "end": 6,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 0
-        },
-        "end": {
-          "line": 1,
-          "column": 6
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "App",
-      "start": 7,
-      "end": 10,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 7
-        },
-        "end": {
-          "line": 1,
-          "column": 10
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "from",
-      "start": 11,
-      "end": 15,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 11
-        },
-        "end": {
-          "line": 1,
-          "column": 15
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "string",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "./App",
-      "start": 16,
-      "end": 23,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 16
-        },
-        "end": {
-          "line": 1,
-          "column": 23
-        }
-      }
-    },
-    {
-      "type": {
-        "label": ";",
-        "beforeExpr": true,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 23,
-      "end": 24,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 23
-        },
-        "end": {
-          "line": 1,
-          "column": 24
-        }
-      }
-    },
-    {
-      "type": "CommentBlock",
-      "value": "*\r\n * Initializing demo\r\n ",
-      "start": 28,
-      "end": 58,
-      "loc": {
-        "start": {
-          "line": 3,
-          "column": 0
-        },
-        "end": {
-          "line": 5,
-          "column": 3
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "new",
-        "keyword": "new",
-        "beforeExpr": true,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "new",
-      "start": 60,
-      "end": 63,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 0
-        },
-        "end": {
-          "line": 6,
-          "column": 3
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "App",
-      "start": 64,
-      "end": 67,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 4
-        },
-        "end": {
-          "line": 6,
-          "column": 7
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "(",
-        "beforeExpr": true,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "start": 67,
-      "end": 68,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 7
-        },
-        "end": {
-          "line": 6,
-          "column": 8
-        }
-      }
-    },
-    {
-      "type": {
-        "label": ")",
-        "beforeExpr": false,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "start": 68,
-      "end": 69,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 8
-        },
-        "end": {
-          "line": 6,
-          "column": 9
-        }
-      }
-    },
-    {
-      "type": {
-        "label": ";",
-        "beforeExpr": true,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 69,
-      "end": 70,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 9
-        },
-        "end": {
-          "line": 6,
-          "column": 10
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "eof",
-        "beforeExpr": false,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 70,
-      "end": 70,
-      "loc": {
-        "start": {
-          "line": 6,
-          "column": 10
-        },
-        "end": {
-          "line": 6,
-          "column": 10
-        }
-      }
-    }
-  ]
-}

docs/ast/source/lib/index.js.json

@@ -1,407 +0,0 @@
-{
-  "type": "File",
-  "start": 0,
-  "end": 85,
-  "loc": {
-    "start": {
-      "line": 1,
-      "column": 0
-    },
-    "end": {
-      "line": 3,
-      "column": 0
-    }
-  },
-  "program": {
-    "type": "Program",
-    "start": 0,
-    "end": 85,
-    "loc": {
-      "start": {
-        "line": 1,
-        "column": 0
-      },
-      "end": {
-        "line": 3,
-        "column": 0
-      }
-    },
-    "sourceType": "module",
-    "body": [
-      {
-        "type": "ImportDeclaration",
-        "start": 0,
-        "end": 51,
-        "loc": {
-          "start": {
-            "line": 1,
-            "column": 0
-          },
-          "end": {
-            "line": 1,
-            "column": 51
-          }
-        },
-        "specifiers": [
-          {
-            "type": "ImportDefaultSpecifier",
-            "start": 7,
-            "end": 21,
-            "loc": {
-              "start": {
-                "line": 1,
-                "column": 7
-              },
-              "end": {
-                "line": 1,
-                "column": 21
-              }
-            },
-            "local": {
-              "type": "Identifier",
-              "start": 7,
-              "end": 21,
-              "loc": {
-                "start": {
-                  "line": 1,
-                  "column": 7
-                },
-                "end": {
-                  "line": 1,
-                  "column": 21
-                },
-                "identifierName": "SimpleKeyboard"
-              },
-              "name": "SimpleKeyboard"
-            }
-          }
-        ],
-        "source": {
-          "type": "StringLiteral",
-          "start": 27,
-          "end": 50,
-          "loc": {
-            "start": {
-              "line": 1,
-              "column": 27
-            },
-            "end": {
-              "line": 1,
-              "column": 50
-            }
-          },
-          "extra": {
-            "rawValue": "./components/Keyboard",
-            "raw": "'./components/Keyboard'"
-          },
-          "value": "./components/Keyboard"
-        }
-      },
-      {
-        "type": "ExportDefaultDeclaration",
-        "start": 53,
-        "end": 83,
-        "loc": {
-          "start": {
-            "line": 2,
-            "column": 0
-          },
-          "end": {
-            "line": 2,
-            "column": 30
-          }
-        },
-        "declaration": {
-          "type": "Identifier",
-          "start": 68,
-          "end": 82,
-          "loc": {
-            "start": {
-              "line": 2,
-              "column": 15
-            },
-            "end": {
-              "line": 2,
-              "column": 29
-            },
-            "identifierName": "SimpleKeyboard"
-          },
-          "name": "SimpleKeyboard",
-          "leadingComments": [],
-          "trailingComments": []
-        }
-      }
-    ],
-    "directives": []
-  },
-  "comments": [],
-  "tokens": [
-    {
-      "type": {
-        "label": "import",
-        "keyword": "import",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "import",
-      "start": 0,
-      "end": 6,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 0
-        },
-        "end": {
-          "line": 1,
-          "column": 6
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "SimpleKeyboard",
-      "start": 7,
-      "end": 21,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 7
-        },
-        "end": {
-          "line": 1,
-          "column": 21
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "from",
-      "start": 22,
-      "end": 26,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 22
-        },
-        "end": {
-          "line": 1,
-          "column": 26
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "string",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "./components/Keyboard",
-      "start": 27,
-      "end": 50,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 27
-        },
-        "end": {
-          "line": 1,
-          "column": 50
-        }
-      }
-    },
-    {
-      "type": {
-        "label": ";",
-        "beforeExpr": true,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 50,
-      "end": 51,
-      "loc": {
-        "start": {
-          "line": 1,
-          "column": 50
-        },
-        "end": {
-          "line": 1,
-          "column": 51
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "export",
-        "keyword": "export",
-        "beforeExpr": false,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "export",
-      "start": 53,
-      "end": 59,
-      "loc": {
-        "start": {
-          "line": 2,
-          "column": 0
-        },
-        "end": {
-          "line": 2,
-          "column": 6
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "default",
-        "keyword": "default",
-        "beforeExpr": true,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "value": "default",
-      "start": 60,
-      "end": 67,
-      "loc": {
-        "start": {
-          "line": 2,
-          "column": 7
-        },
-        "end": {
-          "line": 2,
-          "column": 14
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "name",
-        "beforeExpr": false,
-        "startsExpr": true,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null
-      },
-      "value": "SimpleKeyboard",
-      "start": 68,
-      "end": 82,
-      "loc": {
-        "start": {
-          "line": 2,
-          "column": 15
-        },
-        "end": {
-          "line": 2,
-          "column": 29
-        }
-      }
-    },
-    {
-      "type": {
-        "label": ";",
-        "beforeExpr": true,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 82,
-      "end": 83,
-      "loc": {
-        "start": {
-          "line": 2,
-          "column": 29
-        },
-        "end": {
-          "line": 2,
-          "column": 30
-        }
-      }
-    },
-    {
-      "type": {
-        "label": "eof",
-        "beforeExpr": false,
-        "startsExpr": false,
-        "rightAssociative": false,
-        "isLoop": false,
-        "isAssign": false,
-        "prefix": false,
-        "postfix": false,
-        "binop": null,
-        "updateContext": null
-      },
-      "start": 85,
-      "end": 85,
-      "loc": {
-        "start": {
-          "line": 3,
-          "column": 0
-        },
-        "end": {
-          "line": 3,
-          "column": 0
-        }
-      }
-    }
-  ]
-}

docs/badge.svg

@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="104" height="20">
-  <script/>
-  <linearGradient id="a" x2="0" y2="100%">
-    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
-    <stop offset="1" stop-opacity=".1"/>
-  </linearGradient>
-  <rect rx="3" width="104" height="20" fill="#555"/>
-  <rect rx="3" x="64" width="40" height="20" fill="#4fc921"/>
-  <path fill="#4fc921" d="M64 0h4v20h-4z"/>
-  <rect rx="3" width="104" height="20" fill="url(#a)"/>
-  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
-    <text x="32" y="15" fill="#010101" fill-opacity=".3">document</text>
-    <text x="32" y="14">document</text>
-    <text x="84" y="15" fill="#010101" fill-opacity=".3">100%</text>
-    <text x="84" y="14">100%</text>
-  </g>
-</svg>

docs/class/src/demo/App.js~App.html

@@ -1,563 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../">
-  <title data-ice="title">App | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><div class="header-notice">
-  <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import App from &apos;<span><a href="file/src/demo/App.js.html#lineNumber7">simple-keyboard/src/demo/App.js</a></span>&apos;</code></pre></div>
-  <span data-ice="access">public</span>
-  <span data-ice="kind">class</span>
-  
-  
-  
-  <span data-ice="source">| <span><a href="file/src/demo/App.js.html#lineNumber7">source</a></span></span>
-</div>
-
-<div class="self-detail detail">
-  <h1 data-ice="name">App</h1>
-
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-
-  
-  
-  <div class="description" data-ice="description"><p>simple-keyboard demo</p>
-</div>
-  
-
-  
-
-  
-
-  
-
-  
-</div>
-
-
-
-<div data-ice="constructorSummary"><h2>Constructor Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Constructor</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-constructor-constructor">constructor</a></span></span><span class="code" data-ice="signature">()</span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Instantiates the demo class</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-<div data-ice="memberSummary"><h2>Member Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Members</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-member-handleShiftButton">handleShiftButton</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Handles shift functionality</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-member-layoutName">layoutName</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Default input name</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-member-onChange">onChange</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Called when simple-keyboard input has changed</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-member-onDOMLoaded">onDOMLoaded</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Executed when the DOM is ready</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html#instance-member-onKeyPress">onKeyPress</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Called when a simple-keyboard key is pressed</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-
-
-
-
-
-
-<div data-ice="constructorDetails"><h2 data-ice="title">Public Constructors</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-constructor-constructor">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">constructor</span><span class="code" data-ice="signature">()</span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber11">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Instantiates the demo class</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-<div data-ice="memberDetails"><h2 data-ice="title">Public Members</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-handleShiftButton">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">handleShiftButton</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber54">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Handles shift functionality</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-layoutName">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">layoutName</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber18">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Default input name</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-onChange">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">onChange</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber66">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Called when simple-keyboard input has changed</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-onDOMLoaded">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">onDOMLoaded</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber24">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Executed when the DOM is ready</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-onKeyPress">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">onKeyPress</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/demo/App.js.html#lineNumber73">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Called when a simple-keyboard key is pressed</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html

@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">KeyboardLayout | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><div class="header-notice">
-  <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import KeyboardLayout from &apos;<span><a href="file/src/lib/services/KeyboardLayout.js.html#lineNumber4">simple-keyboard/src/lib/services/KeyboardLayout.js</a></span>&apos;</code></pre></div>
-  <span data-ice="access">public</span>
-  <span data-ice="kind">class</span>
-  
-  
-  
-  <span data-ice="source">| <span><a href="file/src/lib/services/KeyboardLayout.js.html#lineNumber4">source</a></span></span>
-</div>
-
-<div class="self-detail detail">
-  <h1 data-ice="name">KeyboardLayout</h1>
-
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-
-  
-  
-  <div class="description" data-ice="description"><p>Keyboard Layout Service</p>
-</div>
-  
-
-  
-
-  
-
-  
-
-  
-</div>
-
-
-<div data-ice="staticMethodSummary"><h2>Static Method Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Static Public Methods</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      <span data-ice="static">static</span>
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html#static-method-getDefaultLayout">getDefaultLayout</a></span></span><span class="code" data-ice="signature">(): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Get default simple-keyboard layout</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-
-
-
-
-
-
-
-<div data-ice="staticMethodDetails"><h2 data-ice="title">Static Public Methods</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="static-method-getDefaultLayout">
-    <span class="access" data-ice="access">public</span>
-    <span data-ice="static">static</span>
-    
-    
-    
-    
-    <span class="code" data-ice="name">getDefaultLayout</span><span class="code" data-ice="signature">(): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/services/KeyboardLayout.js.html#lineNumber9">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Get default simple-keyboard layout</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  <div class="return-params" data-ice="returnParams">
-    <h4>Return:</h4>
-    <table>
-      <tbody>
-        <tr>
-          <td class="return-type code" data-ice="returnType"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></td>
-          <td class="return-desc" data-ice="returnDescription"><p>The default layout (US-QWERTY)</p>
-</td>
-        </tr>
-      </tbody>
-    </table>
-    <div data-ice="returnProperties">
-</div>
-  </div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-
-
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html

@@ -1,452 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">PhysicalKeyboard | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><div class="header-notice">
-  <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import PhysicalKeyboard from &apos;<span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber4">simple-keyboard/src/lib/services/PhysicalKeyboard.js</a></span>&apos;</code></pre></div>
-  <span data-ice="access">public</span>
-  <span data-ice="kind">class</span>
-  
-  
-  
-  <span data-ice="source">| <span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber4">source</a></span></span>
-</div>
-
-<div class="self-detail detail">
-  <h1 data-ice="name">PhysicalKeyboard</h1>
-
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-
-  
-  
-  <div class="description" data-ice="description"><p>Physical Keyboard Service</p>
-</div>
-  
-
-  
-
-  
-
-  
-
-  
-</div>
-
-
-
-<div data-ice="constructorSummary"><h2>Constructor Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Constructor</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-constructor-constructor">constructor</a></span></span><span class="code" data-ice="signature">()</span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Creates an instance of the PhysicalKeyboard service</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-<div data-ice="memberSummary"><h2>Member Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Members</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-member-simpleKeyboardInstance">simpleKeyboardInstance</a></span></span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-<div data-ice="methodSummary"><h2>Method Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Methods</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-method-getSimpleKeyboardLayoutKey">getSimpleKeyboardLayoutKey</a></span></span><span class="code" data-ice="signature">(event: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Transforms a KeyboardEvent&apos;s &quot;key.code&quot; string into a simple-keyboard layout format</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-method-initKeyboardListener">initKeyboardListener</a></span></span><span class="code" data-ice="signature">()</span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Initializes key event listeners</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-
-
-
-
-
-<div data-ice="constructorDetails"><h2 data-ice="title">Public Constructors</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-constructor-constructor">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">constructor</span><span class="code" data-ice="signature">()</span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber8">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Creates an instance of the PhysicalKeyboard service</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-<div data-ice="memberDetails"><h2 data-ice="title">Public Members</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-simpleKeyboardInstance">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">simpleKeyboardInstance</span><span class="code" data-ice="signature">: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber12">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-<div data-ice="methodDetails"><h2 data-ice="title">Public Methods</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-method-getSimpleKeyboardLayoutKey">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">getSimpleKeyboardLayoutKey</span><span class="code" data-ice="signature">(event: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>): <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber66">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Transforms a KeyboardEvent&apos;s &quot;key.code&quot; string into a simple-keyboard layout format</p>
-</div>
-
-  
-
-  <div data-ice="properties"><div data-ice="properties">
-  <h4 data-ice="title">Params:</h4>
-  <table class="params">
-    <thead>
-    <tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
-    </thead>
-    <tbody>
-    
-    <tr data-ice="property" data-depth="0">
-      <td data-ice="name" class="code" data-depth="0">event</td>
-      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></td>
-      <td data-ice="appendix"></td>
-      <td data-ice="description"><p>The KeyboardEvent</p>
-</td>
-    </tr>
-</tbody>
-  </table>
-</div>
-</div>
-
-  <div class="return-params" data-ice="returnParams">
-    <h4>Return:</h4>
-    <table>
-      <tbody>
-        <tr>
-          <td class="return-type code" data-ice="returnType"><span>*</span></td>
-          
-        </tr>
-      </tbody>
-    </table>
-    <div data-ice="returnProperties">
-</div>
-  </div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-method-initKeyboardListener">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">initKeyboardListener</span><span class="code" data-ice="signature">()</span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html#lineNumber29">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Initializes key event listeners</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/class/src/lib/tests/TestUtility.js~TestUtility.html

@@ -1,482 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">TestUtility | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><div class="header-notice">
-  <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import TestUtility from &apos;<span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber4">simple-keyboard/src/lib/tests/TestUtility.js</a></span>&apos;</code></pre></div>
-  <span data-ice="access">public</span>
-  <span data-ice="kind">class</span>
-  
-  
-  
-  <span data-ice="source">| <span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber4">source</a></span></span>
-</div>
-
-<div class="self-detail detail">
-  <h1 data-ice="name">TestUtility</h1>
-
-  
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-
-  
-  
-  <div class="description" data-ice="description"><p>Test Utility Functions</p>
-</div>
-  
-
-  
-
-  
-
-  
-
-  
-</div>
-
-
-
-
-<div data-ice="memberSummary"><h2>Member Summary</h2><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">Public Members</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-clear">clear</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Clears DOM structure</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-iterateButtons">iterateButtons</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Iterates on the keyboard buttons</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-setDOM">setDOM</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Set&apos;s a basic DOM structure to test in</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-testLayoutFctButtons">testLayoutFctButtons</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Test if function buttons are interactive (have an onclick)</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-testLayoutStdButtons">testLayoutStdButtons</a></span></span><span class="code" data-ice="signature">: <span>*</span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Test if standard buttons respect maxLength and do input a value</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-
-
-
-
-
-
-
-<div data-ice="memberDetails"><h2 data-ice="title">Public Members</h2>
-
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-clear">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">clear</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber18">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Clears DOM structure</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-iterateButtons">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">iterateButtons</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber98">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Iterates on the keyboard buttons</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-setDOM">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">setDOM</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber8">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Set&apos;s a basic DOM structure to test in</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-testLayoutFctButtons">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">testLayoutFctButtons</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber74">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Test if function buttons are interactive (have an onclick)</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-<div class="detail" data-ice="detail">
-  <h3 data-ice="anchor" id="instance-member-testLayoutStdButtons">
-    <span class="access" data-ice="access">public</span>
-    
-    
-    
-    
-    
-    <span class="code" data-ice="name">testLayoutStdButtons</span><span class="code" data-ice="signature">: <span>*</span></span>
-    <span class="right-info">
-      
-      
-      <span data-ice="source"><span><a href="file/src/lib/tests/TestUtility.js.html#lineNumber25">source</a></span></span>
-    </span>
-  </h3>
-
-  
-  
-  
-  <div data-ice="description"><p>Test if standard buttons respect maxLength and do input a value</p>
-</div>
-
-  
-
-  <div data-ice="properties">
-</div>
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-
-  
-  
-</div>
-</div>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/coverage.json

@@ -1,37 +0,0 @@
-{
-  "coverage": "100%",
-  "expectCount": 78,
-  "actualCount": 78,
-  "files": {
-    "src/demo/App.js": {
-      "expectCount": 8,
-      "actualCount": 8,
-      "undocumentLines": []
-    },
-    "src/lib/components/Keyboard.js": {
-      "expectCount": 41,
-      "actualCount": 41,
-      "undocumentLines": []
-    },
-    "src/lib/services/KeyboardLayout.js": {
-      "expectCount": 2,
-      "actualCount": 2,
-      "undocumentLines": []
-    },
-    "src/lib/services/PhysicalKeyboard.js": {
-      "expectCount": 5,
-      "actualCount": 5,
-      "undocumentLines": []
-    },
-    "src/lib/services/Utilities.js": {
-      "expectCount": 16,
-      "actualCount": 16,
-      "undocumentLines": []
-    },
-    "src/lib/tests/TestUtility.js": {
-      "expectCount": 6,
-      "actualCount": 6,
-      "undocumentLines": []
-    }
-  }
-}

docs/css/github.css

@@ -1,83 +0,0 @@
-/* github markdown */
-.github-markdown {
-  font-size: 16px;
-}
-
-.github-markdown h1,
-.github-markdown h2,
-.github-markdown h3,
-.github-markdown h4,
-.github-markdown h5 {
-  margin-top: 1em;
-  margin-bottom: 16px;
-  font-weight: bold;
-  padding: 0;
-}
-
-.github-markdown h1:nth-of-type(1) {
-  margin-top: 0;
-}
-
-.github-markdown h1 {
-  font-size: 2em;
-  padding-bottom: 0.3em;
-}
-
-.github-markdown h2 {
-  font-size: 1.75em;
-  padding-bottom: 0.3em;
-}
-
-.github-markdown h3 {
-  font-size: 1.5em;
-}
-
-.github-markdown h4 {
-  font-size: 1.25em;
-}
-
-.github-markdown h5 {
-  font-size: 1em;
-}
-
-.github-markdown ul, .github-markdown ol {
-  padding-left: 2em;
-}
-
-.github-markdown pre > code {
-  font-size: 0.85em;
-}
-
-.github-markdown table {
-  margin-bottom: 1em;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.github-markdown table tr {
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-}
-
-.github-markdown table th,
-.github-markdown table td {
-  padding: 6px 13px;
-  border: 1px solid #ddd;
-}
-
-.github-markdown table tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-
-.github-markdown hr {
-  border-right: 0;
-  border-bottom: 1px solid #e5e5e5;
-  border-left: 0;
-  border-top: 0;
-}
-
-/** badge(.svg) does not have border */
-.github-markdown img:not([src*=".svg"]) {
-  max-width: 100%;
-  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-}

docs/css/identifiers.css

@@ -1,37 +0,0 @@
-.identifiers-wrap {
-  display: flex;
-  align-items: flex-start;
-}
-
-.identifier-dir-tree {
-  background: #fff;
-  border: solid 1px #ddd;
-  border-radius: 0.25em;
-  top: 52px;
-  position: -webkit-sticky;
-  position: sticky;
-  max-height: calc(100vh - 155px);
-  overflow-y: scroll;
-  min-width: 200px;
-  margin-left: 1em;
-}
-
-.identifier-dir-tree-header {
-  padding: 0.5em;
-  background-color: #fafafa;
-  border-bottom: solid 1px #ddd;
-}
-
-.identifier-dir-tree-content {
-  padding: 0 0.5em 0;
-}
-
-.identifier-dir-tree-content > div {
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
-}
-
-.identifier-dir-tree-content a {
-  color: inherit;
-}
-

docs/css/manual.css

@@ -1,134 +0,0 @@
-.github-markdown .manual-toc {
-  padding-left: 0;
-}
-
-.manual-index .manual-cards {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.manual-index .manual-card-wrap {
-  width: 280px;
-  padding: 10px 20px 10px 0;
-  box-sizing: border-box;
-}
-
-.manual-index .manual-card-wrap > h1 {
-  margin: 0;
-  font-size: 1em;
-  font-weight: 600;
-  padding: 0.2em 0 0.2em 0.5em;
-  border-radius: 0.1em 0.1em 0 0;
-  border: none;
-}
-
-.manual-index .manual-card-wrap > h1 span {
-  color: #555;
-}
-
-.manual-index .manual-card {
-  height: 200px;
-  overflow: hidden;
-  border: solid 1px rgba(230, 230, 230, 0.84);
-  border-radius: 0 0 0.1em 0.1em;
-  padding: 8px;
-  position: relative;
-}
-
-.manual-index .manual-card > div {
-  transform: scale(0.4);
-  transform-origin: 0 0;
-  width: 250%;
-}
-
-.manual-index .manual-card > a {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(210, 210, 210, 0.1);
-}
-
-.manual-index .manual-card > a:hover {
-  background: none;
-}
-
-.manual-index .manual-badge {
-  margin: 0;
-}
-
-.manual-index .manual-user-index {
-  margin-bottom: 1em;
-  border-bottom: solid 1px #ddd;
-}
-
-.manual-root .navigation {
-  padding-left: 4px;
-  margin-top: 4px;
-}
-
-.navigation .manual-toc-root > div {
-  padding-left: 0.25em;
-  padding-right: 0.75em;
-}
-
-.github-markdown .manual-toc-title a {
-  color: inherit;
-}
-
-.manual-breadcrumb-list {
-  font-size: 0.8em;
-  margin-bottom: 1em;
-}
-
-.manual-toc-title a:hover {
-  color: #039BE5;
-}
-
-.manual-toc li {
-  margin: 0.75em 0;
-  list-style-type: none;
-}
-
-.navigation .manual-toc [class^="indent-h"] a {
-  color: #666;
-}
-
-.navigation .manual-toc .indent-h1 a {
-  color: #555;
-  font-weight: 600;
-  display: block;
-}
-
-.manual-toc .indent-h1 {
-  display: block;
-  margin: 0.4em 0 0 0.25em;
-  padding: 0.2em 0 0.2em 0.5em;
-  border-radius: 0.1em;
-}
-
-.manual-root .navigation .manual-toc li:not(.indent-h1) {
-  margin-top: 0.5em;
-}
-
-.manual-toc .indent-h2 {
-  display: none;
-  margin-left: 1.5em;
-}
-.manual-toc .indent-h3 {
-  display: none;
-  margin-left: 2.5em;
-}
-.manual-toc .indent-h4 {
-  display: none;
-  margin-left: 3.5em;
-}
-.manual-toc .indent-h5 {
-  display: none;
-  margin-left: 4.5em;
-}
-
-.manual-nav li {
-  margin: 0.75em 0;
-}

docs/css/prettify-tomorrow.css

@@ -1,132 +0,0 @@
-/* Tomorrow Theme */
-/* Original theme - https://github.com/chriskempson/tomorrow-theme */
-/* Pretty printing styles. Used with prettify.js. */
-/* SPAN elements with the classes below are added by prettyprint. */
-/* plain text */
-.pln {
-  color: #4d4d4c; }
-
-@media screen {
-  /* string content */
-  .str {
-    color: #718c00; }
-
-  /* a keyword */
-  .kwd {
-    color: #8959a8; }
-
-  /* a comment */
-  .com {
-    color: #8e908c; }
-
-  /* a type name */
-  .typ {
-    color: #4271ae; }
-
-  /* a literal value */
-  .lit {
-    color: #f5871f; }
-
-  /* punctuation */
-  .pun {
-    color: #4d4d4c; }
-
-  /* lisp open bracket */
-  .opn {
-    color: #4d4d4c; }
-
-  /* lisp close bracket */
-  .clo {
-    color: #4d4d4c; }
-
-  /* a markup tag name */
-  .tag {
-    color: #c82829; }
-
-  /* a markup attribute name */
-  .atn {
-    color: #f5871f; }
-
-  /* a markup attribute value */
-  .atv {
-    color: #3e999f; }
-
-  /* a declaration */
-  .dec {
-    color: #f5871f; }
-
-  /* a variable name */
-  .var {
-    color: #c82829; }
-
-  /* a function name */
-  .fun {
-    color: #4271ae; } }
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str {
-    color: #060; }
-
-  .kwd {
-    color: #006;
-    font-weight: bold; }
-
-  .com {
-    color: #600;
-    font-style: italic; }
-
-  .typ {
-    color: #404;
-    font-weight: bold; }
-
-  .lit {
-    color: #044; }
-
-  .pun, .opn, .clo {
-    color: #440; }
-
-  .tag {
-    color: #006;
-    font-weight: bold; }
-
-  .atn {
-    color: #404; }
-
-  .atv {
-    color: #060; } }
-/* Style */
-/*
-pre.prettyprint {
-  background: white;
-  font-family: Consolas, Monaco, 'Andale Mono', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  border: 1px solid #ccc;
-  padding: 10px; }
-*/
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums {
-  margin-top: 0;
-  margin-bottom: 0; }
-
-/* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L4,
-li.L5,
-li.L6,
-li.L7,
-li.L8,
-li.L9 {
-  /* */ }
-
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 {
-  /* */ }

docs/css/search.css

@@ -1,84 +0,0 @@
-/* search box */
-.search-box {
-  position: absolute;
-  top: 10px;
-  right: 50px;
-  padding-right: 8px;
-  padding-bottom: 10px;
-  line-height: normal;
-  font-size: 12px;
-}
-
-.search-box img {
-  width: 20px;
-  vertical-align: top;
-}
-
-.search-input {
-  display: inline;
-  visibility: hidden;
-  width: 0;
-  padding: 2px;
-  height: 1.5em;
-  outline: none;
-  background: transparent;
-  border: 1px #0af;
-  border-style: none none solid none;
-  vertical-align: bottom;
-}
-
-.search-input-edge {
-  display: none;
-  width: 1px;
-  height: 5px;
-  background-color: #0af;
-  vertical-align: bottom;
-}
-
-.search-result {
-  position: absolute;
-  display: none;
-  height: 600px;
-  width: 100%;
-  padding: 0;
-  margin-top: 5px;
-  margin-left: 24px;
-  background: white;
-  box-shadow: 1px 1px 4px rgb(0,0,0);
-  white-space: nowrap;
-  overflow-y: scroll;
-}
-
-.search-result-import-path {
-  color: #aaa;
-  font-size: 12px;
-}
-
-.search-result li {
-  list-style: none;
-  padding: 2px 4px;
-}
-
-.search-result li a {
-  display: block;
-}
-
-.search-result li.selected {
-  background: #ddd;
-}
-
-.search-result li.search-separator {
-  background: rgb(37, 138, 175);
-  color: white;
-}
-
-.search-box.active .search-input {
-  visibility: visible;
-  transition: width 0.2s ease-out;
-  width: 300px;
-}
-
-.search-box.active .search-input-edge {
-  display: inline-block;
-}
-

docs/css/source.css

@@ -1,55 +0,0 @@
-table.files-summary {
-  width: 100%;
-  margin: 10px 0;
-  border-spacing: 0;
-  border: 0;
-  border-collapse: collapse;
-  text-align: right;
-}
-
-table.files-summary tbody tr:hover {
-  background: #eee;
-}
-
-table.files-summary td:first-child,
-table.files-summary td:nth-of-type(2) {
-  text-align: left;
-}
-
-table.files-summary[data-use-coverage="false"] td.coverage {
-  display: none;
-}
-
-table.files-summary thead {
-  background: #fafafa;
-}
-
-table.files-summary td {
-  border: solid 1px #ddd;
-  padding: 4px 10px;
-  vertical-align: top;
-}
-
-table.files-summary td.identifiers > span {
-  display: block;
-  margin-top: 4px;
-}
-table.files-summary td.identifiers > span:first-child {
-  margin-top: 0;
-}
-
-table.files-summary .coverage-count {
-  font-size: 12px;
-  color: #aaa;
-  display: inline-block;
-  min-width: 40px;
-}
-
-.total-coverage-count {
-  position: relative;
-  bottom: 2px;
-  font-size: 12px;
-  color: #666;
-  font-weight: 500;
-  padding-left: 5px;
-}

docs/css/style.css

@@ -1,608 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700);
-@import url(./manual.css);
-@import url(./source.css);
-@import url(./test.css);
-@import url(./identifiers.css);
-@import url(./github.css);
-@import url(./search.css);
-
-* {
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-}
-
-html
-{
-  font-family: 'Source Sans Pro', 'Roboto', sans-serif;
-  overflow: auto;
-  /*font-size: 14px;*/
-  /*color: #4d4e53;*/
-  /*color: rgba(0, 0, 0, .68);*/
-  color: #555;
-  background-color: #fff;
-}
-
-a {
-  /*color: #0095dd;*/
-  /*color:rgb(37, 138, 175);*/
-  color: #039BE5;
-}
-
-code a:hover {
-  text-decoration: underline;
-}
-
-ul, ol {
-  padding-left: 20px;
-}
-
-ul li {
-  list-style: disc;
-  margin: 4px 0;
-}
-
-ol li {
-  margin: 4px 0;
-}
-
-h1 {
-  margin-bottom: 10px;
-  font-size: 34px;
-  font-weight: 300;
-  border-bottom: solid 1px #ddd;
-}
-
-h2 {
-  margin-top: 24px;
-  margin-bottom: 10px;
-  font-size: 20px;
-  border-bottom: solid 1px #ddd;
-  font-weight: 300;
-}
-
-h3 {
-  position: relative;
-  font-size: 16px;
-  margin-bottom: 12px;
-  padding: 4px;
-  font-weight: 300;
-}
-
-details {
-  cursor: pointer;
-}
-
-del {
-  text-decoration: line-through;
-}
-
-p {
-  margin-bottom: 15px;
-  line-height: 1.5;
-}
-
-code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-}
-
-pre > code {
-  display: block;
-}
-
-pre.prettyprint, pre > code {
-  padding: 4px;
-  margin: 1em 0;
-  background-color: #f5f5f5;
-  border-radius: 3px;
-}
-
-pre.prettyprint > code {
-  margin: 0;
-}
-
-p > code,
-li > code {
-  padding: 0.2em 0.5em;
-  margin: 0;
-  font-size: 85%;
-  background-color: rgba(0,0,0,0.04);
-  border-radius: 3px;
-}
-
-.code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 13px;
-}
-
-.import-path pre.prettyprint,
-.import-path pre.prettyprint code {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: white;
-}
-
-.layout-container {
-  /*display: flex;*/
-  /*flex-direction: row;*/
-  /*justify-content: flex-start;*/
-  /*align-items: stretch;*/
-}
-
-.layout-container > header {
-  display: flex;
-  height: 40px;
-  line-height: 40px;
-  font-size: 16px;
-  padding: 0 10px;
-  margin: 0;
-  position: fixed;
-  width: 100%;
-  z-index: 1;
-  background-color: #fafafa;
-  top: 0;
-  border-bottom: solid 1px #ddd;
-}
-.layout-container > header > a{
-  margin: 0 5px;
-  color: #444;
-}
-
-.layout-container > header > a.repo-url-github {
-  font-size: 0;
-  display: inline-block;
-  width: 20px;
-  height: 38px;
-  background: url("../image/github.png") no-repeat center;
-  background-size: 20px;
-  vertical-align: top;
-}
-
-.navigation {
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 250px;
-  height: 100%;
-  padding-top: 40px;
-  padding-left: 15px;
-  padding-bottom: 2em;
-  margin-top:1em;
-  overflow-x: scroll;
-  box-shadow: rgba(255, 255, 255, 1) -1px 0 0 inset;
-  border-right: 1px solid #ddd;
-}
-
-.navigation ul {
-  padding: 0;
-}
-
-.navigation li {
-  list-style: none;
-  margin: 4px 0;
-  white-space: nowrap;
-}
-
-.navigation li a {
-  color: #666;
-}
-
-.navigation .nav-dir-path {
-  display: block;
-  margin-top: 0.7em;
-  margin-bottom: 0.25em;
-  font-weight: 600;
-}
-
-.kind-class,
-.kind-interface,
-.kind-function,
-.kind-typedef,
-.kind-variable,
-.kind-external {
-  margin-left: 0.75em;
-  width: 1.2em;
-  height: 1.2em;
-  display: inline-block;
-  text-align: center;
-  border-radius: 0.2em;
-  margin-right: 0.2em;
-  font-weight: bold;
-  line-height: 1.2em;
-}
-
-.kind-class {
-  color: #009800;
-  background-color: #bfe5bf;
-}
-
-.kind-interface {
-  color: #fbca04;
-  background-color: #fef2c0;
-}
-
-.kind-function {
-  color: #6b0090;
-  background-color: #d6bdde;
-}
-
-.kind-variable {
-  color: #eb6420;
-  background-color: #fad8c7;
-}
-
-.kind-typedef {
-  color: #db001e;
-  background-color: #edbec3;
-}
-
-.kind-external {
-  color: #0738c3;
-  background-color: #bbcbea;
-}
-
-.summary span[class^="kind-"] {
-  margin-left: 0;
-}
-
-h1 .version,
-h1 .url a {
-  font-size: 14px;
-  color: #aaa;
-}
-
-.content {
-  margin-top: 40px;
-  margin-left: 250px;
-  padding: 10px 50px 10px 20px;
-}
-
-.header-notice {
-  font-size: 14px;
-  color: #aaa;
-  margin: 0;
-}
-
-.expression-extends .prettyprint {
-  margin-left: 10px;
-  background: white;
-}
-
-.extends-chain {
-  border-bottom: 1px solid#ddd;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-}
-
-.extends-chain span:nth-of-type(1) {
-  padding-left: 10px;
-}
-
-.extends-chain > div {
-  margin: 5px 0;
-}
-
-.description table {
-  font-size: 14px;
-  border-spacing: 0;
-  border: 0;
-  border-collapse: collapse;
-}
-
-.description thead {
-  background: #999;
-  color: white;
-}
-
-.description table td,
-.description table th {
-  border: solid 1px #ddd;
-  padding: 4px;
-  font-weight: normal;
-}
-
-.flat-list ul {
-  padding-left: 0;
-}
-
-.flat-list li {
-  display: inline;
-  list-style: none;
-}
-
-table.summary {
-  width: 100%;
-  margin: 10px 0;
-  border-spacing: 0;
-  border: 0;
-  border-collapse: collapse;
-}
-
-table.summary thead {
-  background: #fafafa;
-}
-
-table.summary td {
-  border: solid 1px #ddd;
-  padding: 4px 10px;
-}
-
-table.summary tbody td:nth-child(1) {
-  text-align: right;
-  white-space: nowrap;
-  min-width: 64px;
-  vertical-align: top;
-}
-
-table.summary tbody td:nth-child(2) {
-  width: 100%;
-  border-right: none;
-}
-
-table.summary tbody td:nth-child(3) {
-  white-space: nowrap;
-  border-left: none;
-  vertical-align: top;
-}
-
-table.summary td > div:nth-of-type(2) {
-  padding-top: 4px;
-  padding-left: 15px;
-}
-
-table.summary td p {
-  margin-bottom: 0;
-}
-
-.inherited-summary thead td {
-  padding-left: 2px;
-}
-
-.inherited-summary thead a {
-  color: white;
-}
-
-.inherited-summary .summary tbody {
-  display: none;
-}
-
-.inherited-summary .summary .toggle {
-  padding: 0 4px;
-  font-size: 12px;
-  cursor: pointer;
-}
-.inherited-summary .summary .toggle.closed:before {
-  content: "▶";
-}
-.inherited-summary .summary .toggle.opened:before {
-  content: "▼";
-}
-
-.member, .method {
-  margin-bottom: 24px;
-}
-
-table.params {
-  width: 100%;
-  margin: 10px 0;
-  border-spacing: 0;
-  border: 0;
-  border-collapse: collapse;
-}
-
-table.params thead {
-  background: #eee;
-  color: #aaa;
-}
-
-table.params td {
-  padding: 4px;
-  border: solid 1px #ddd;
-}
-
-table.params td p {
-  margin: 0;
-}
-
-.content .detail > * {
-  margin: 15px 0;
-}
-
-.content .detail > h3 {
-  color: black;
-  background-color: #f0f0f0;
-}
-
-.content .detail > div {
-  margin-left: 10px;
-}
-
-.content .detail > .import-path {
-  margin-top: -8px;
-}
-
-.content .detail + .detail {
-  margin-top: 30px;
-}
-
-.content .detail .throw td:first-child {
-  padding-right: 10px;
-}
-
-.content .detail h4 + :not(pre) {
-  padding-left: 0;
-  margin-left: 10px;
-}
-
-.content .detail h4 + ul li {
-  list-style: none;
-}
-
-.return-param * {
-  display: inline;
-}
-
-.argument-params {
-  margin-bottom: 20px;
-}
-
-.return-type {
-  padding-right: 10px;
-  font-weight: normal;
-}
-
-.return-desc {
-  margin-left: 10px;
-  margin-top: 4px;
-}
-
-.return-desc p {
-  margin: 0;
-}
-
-.deprecated, .experimental, .instance-docs {
-  border-left: solid 5px orange;
-  padding-left: 4px;
-  margin: 4px 0;
-}
-
-tr.listen p,
-tr.throw p,
-tr.emit p{
-  margin-bottom: 10px;
-}
-
-.version, .since {
-  color: #aaa;
-}
-
-h3 .right-info {
-  position: absolute;
-  right: 4px;
-  font-size: 14px;
-}
-
-.version + .since:before {
-  content: '| ';
-}
-
-.see {
-  margin-top: 10px;
-}
-
-.see h4 {
-  margin: 4px 0;
-}
-
-.content .detail h4 + .example-doc {
-  margin: 6px 0;
-}
-
-.example-caption {
-  position: relative;
-  bottom: -1px;
-  display: inline-block;
-  padding: 4px;
-  font-style: italic;
-  background-color: #f5f5f5;
-  font-weight: bold;
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.example-caption + pre.source-code {
-  margin-top: 0;
-  border-top-left-radius: 0;
-}
-
-footer, .file-footer {
-  text-align: right;
-  font-style: italic;
-  font-weight: 100;
-  font-size: 13px;
-  margin-right: 50px;
-  margin-left: 270px;
-  border-top: 1px solid #ddd;
-  padding-top: 30px;
-  margin-top: 20px;
-  padding-bottom: 10px;
-}
-
-footer img {
-  width: 24px;
-  vertical-align: middle;
-  padding-left: 4px;
-  position: relative;
-  top: -3px;
-  opacity: 0.6;
-}
-
-pre.source-code {
-  padding: 4px;
-}
-
-pre.raw-source-code > code {
-  padding: 0;
-  margin: 0;
-  font-size: 12px;
-  background: #fff;
-  border: solid 1px #ddd;
-  line-height: 1.5;
-}
-
-pre.raw-source-code > code > ol {
-  counter-reset:number;
-  list-style:none;
-  margin:0;
-  padding:0;
-  overflow: hidden;
-}
-
-pre.raw-source-code > code > ol li:before {
-  counter-increment: number;
-  content: counter(number);
-  display: inline-block;
-  min-width: 3em;
-  color: #aaa;
-  text-align: right;
-  padding-right: 1em;
-}
-
-pre.source-code.line-number {
-  padding: 0;
-}
-
-pre.source-code ol {
-  background: #eee;
-  padding-left: 40px;
-}
-
-pre.source-code li {
-  background: white;
-  padding-left: 4px;
-  list-style: decimal;
-  margin: 0;
-}
-
-pre.source-code.line-number li.active {
-  background: rgb(255, 255, 150) !important;
-}
-
-pre.source-code.line-number li.error-line {
-  background: #ffb8bf;
-}
-
-.inner-link-active {
-  /*background: rgb(255, 255, 150) !important;*/
-  background: #039BE5 !important;
-  color: #fff !important;
-  padding-left: 0.1em !important;
-}
-
-.inner-link-active a {
-  color: inherit;
-}

docs/css/test.css

@@ -1,58 +0,0 @@
-table.test-summary thead {
-  background: #fafafa;
-}
-
-table.test-summary thead .test-description {
-  width: 50%;
-}
-
-table.test-summary {
-  width: 100%;
-  margin: 10px 0;
-  border-spacing: 0;
-  border: 0;
-  border-collapse: collapse;
-}
-
-table.test-summary thead .test-count {
-  width: 3em;
-}
-
-table.test-summary tbody tr:hover {
-  background-color: #eee;
-}
-
-table.test-summary td {
-  border: solid 1px #ddd;
-  padding: 4px 10px;
-  vertical-align: top;
-}
-
-table.test-summary td p {
-  margin: 0;
-}
-
-table.test-summary tr.test-interface .toggle {
-  display: inline-block;
-  float: left;
-  margin-right: 4px;
-  cursor: pointer;
-  font-size: 0.8em;
-  padding-top: 0.25em;
-}
-
-table.test-summary tr.test-interface .toggle.opened:before {
-  content: '▼';
-}
-
-table.test-summary tr.test-interface .toggle.closed:before {
-  content: '▶';
-}
-
-table.test-summary .test-target > span {
-  display: block;
-  margin-top: 4px;
-}
-table.test-summary .test-target > span:first-child {
-  margin-top: 0;
-}

docs/file/src/demo/App.js.html

@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../">
-  <title data-ice="title">src/demo/App.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/demo/App.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Keyboard from &apos;../lib&apos;;
-import &apos;./css/App.css&apos;;
-
-/**
- * simple-keyboard demo
- */
-class App {
-  /**
-   * Instantiates the demo class
-   */
-  constructor(){
-    document.addEventListener(&apos;DOMContentLoaded&apos;, this.onDOMLoaded);
-
-    /**
-     * Default input name
-     * @type {string}
-     */
-    this.layoutName = &quot;default&quot;;
-  }
-
-  /**
-   * Executed when the DOM is ready
-   */
-  onDOMLoaded = () =&gt; {
-    /**
-     * Creates a new simple-keyboard instance
-     */
-    this.keyboard = new Keyboard({
-      debug: true,
-      layoutName: this.layoutName,
-      onChange: input =&gt; this.onChange(input),
-      onKeyPress: button =&gt; this.onKeyPress(button),
-      newLineOnEnter: true,
-      physicalKeyboardHighlight: true,
-    });
-  
-    /**
-     * Adding preview (demo only)
-     */
-    document.querySelector(&apos;.simple-keyboard&apos;).insertAdjacentHTML(&apos;beforebegin&apos;, `
-    &lt;div class=&quot;simple-keyboard-preview&quot;&gt;
-      &lt;textarea class=&quot;input&quot;&gt;&lt;/textarea&gt;
-    &lt;/div&gt;
-    `);
-  
-    document.querySelector(&apos;.input&apos;).addEventListener(&apos;input&apos;, (event) =&gt; {
-      this.keyboard.setInput(event.target.value);
-    });
-  }
-
-  /**
-   * Handles shift functionality
-   */
-  handleShiftButton = () =&gt; {
-    let layoutName = this.layoutName;
-    let shiftToggle = this.layoutName = layoutName === &quot;default&quot; ? &quot;shift&quot; : &quot;default&quot;;
-  
-    this.keyboard.setOptions({
-      layoutName: shiftToggle
-    });
-  }
-
-  /**
-   * Called when simple-keyboard input has changed
-   */
-  onChange = input =&gt; {
-    document.querySelector(&apos;.input&apos;).value = input;
-  }
-
-  /**
-   * Called when a simple-keyboard key is pressed
-   */
-  onKeyPress = button =&gt; {
-    console.log(&quot;Button pressed&quot;, button);
-  
-      /**
-       * Shift functionality
-       */
-      if(button === &quot;{lock}&quot; || button === &quot;{shift}&quot;)
-        this.handleShiftButton();
-  }
-
-}
-
-export default App;</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/demo/index.js.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../">
-  <title data-ice="title">src/demo/index.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/demo/index.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import App from &apos;./App&apos;;
-
-/**
- * Initializing demo
- */
-new App();</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/components/Keyboard.js.html

@@ -1,874 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">src/lib/components/Keyboard.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/components/Keyboard.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import &apos;./Keyboard.css&apos;;
-
-// Services
-import PhysicalKeyboard from &apos;../services/PhysicalKeyboard&apos;;
-import KeyboardLayout from &apos;../services/KeyboardLayout&apos;;
-import Utilities from &apos;../services/Utilities&apos;;
-
-/**
- * Root class for simple-keyboard
- * This class:
- * - Parses the options
- * - Renders the rows and buttons
- * - Handles button functionality
- */
-class SimpleKeyboard {
-  /**
-   * Creates an instance of SimpleKeyboard
-   * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
-   */
-  constructor(...params){
-    let keyboardDOMQuery = typeof params[0] === &quot;string&quot; ? params[0] : &apos;.simple-keyboard&apos;;
-    let options = typeof params[0] === &quot;object&quot; ? params[0] : params[1];
-
-    if(!options)
-      options = {};
-
-    /**
-     * Initializing Utilities
-     */
-    this.utilities = new Utilities(this);
-
-    /**
-     * Processing options
-     */
-    this.keyboardDOM = document.querySelector(keyboardDOMQuery);
-
-    /**
-     * @type {object}
-     * @property {object} layout Modify the keyboard layout.
-     * @property {string} layoutName Specifies which layout should be used.
-     * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: &#x201C;backspace&#x201D;).
-     * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
-     * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
-     * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
-     * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
-     * @property {boolean} newLineOnEnter Specifies whether clicking the &#x201C;ENTER&#x201D; button will input a newline (\n) or not.
-     * @property {boolean} tabCharOnTab Specifies whether clicking the &#x201C;TAB&#x201D; button will input a tab character (\t) or not.
-     * @property {string} inputName Allows you to use a single simple-keyboard instance for several inputs.
-     * @property {number} maxLength Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element&#x2019;s maxlengthattribute.
-     * @property {object} maxLength Restrains simple-keyboard&#x2019;s individual inputs to a certain length. This should be used in addition to the input element&#x2019;s maxlengthattribute.
-     * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
-     * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
-     * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
-     * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
-     * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
-     * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: &#x201C;{shift}&#x201D;).
-     * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input&#x2019;s string.
-     * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
-     * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
-     * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
-     */
-    this.options = options;
-    this.options.layoutName = this.options.layoutName || &quot;default&quot;;
-    this.options.theme = this.options.theme || &quot;hg-theme-default&quot;;
-    this.options.inputName = this.options.inputName || &quot;default&quot;;
-    this.options.preventMouseDownDefault = this.options.preventMouseDownDefault === false ? false : true;
-
-    /**
-     * @type {object} Classes identifying loaded plugins
-     */
-    this.keyboardPluginClasses = &apos;&apos;;
-
-    /**
-     * Bindings
-     */
-    this.handleButtonClicked = this.handleButtonClicked.bind(this);
-    this.syncInstanceInputs = this.syncInstanceInputs.bind(this);
-    this.clearInput = this.clearInput.bind(this);
-    this.getInput = this.getInput.bind(this);
-    this.setInput = this.setInput.bind(this);
-    this.replaceInput = this.replaceInput.bind(this);
-    this.clear = this.clear.bind(this);
-    this.dispatch = this.dispatch.bind(this);
-    this.addButtonTheme = this.addButtonTheme.bind(this);
-    this.removeButtonTheme = this.removeButtonTheme.bind(this);
-    this.getButtonElement = this.getButtonElement.bind(this);
-    this.handleCaret = this.handleCaret.bind(this);
-    this.caretEventHandler = this.caretEventHandler.bind(this);
-    this.onInit = this.onInit.bind(this);
-    this.onRender = this.onRender.bind(this);
-    this.render = this.render.bind(this);
-    this.loadModules = this.loadModules.bind(this);
-    this.handleButtonMouseUp = this.handleButtonMouseUp.bind(this);
-    this.handleButtonMouseDown = this.handleButtonMouseDown.bind(this);
-    this.handleButtonHold = this.handleButtonHold.bind(this);
-    this.onModulesLoaded = this.onModulesLoaded.bind(this);
-
-    /**
-     * simple-keyboard uses a non-persistent internal input to keep track of the entered string (the variable `keyboard.input`).
-     * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.
-     * @example
-     * // To get entered input
-     * let input = keyboard.getInput();
-     * 
-     * // To clear entered input.
-     * keyboard.clearInput();
-     * 
-     * @type {object}
-     * @property {object} default Default SimpleKeyboard internal input.
-     * @property {object} myInputName Example input that can be set through `options.inputName:&quot;myInputName&quot;`.
-     */
-    this.input = {};
-    this.input[this.options.inputName] = &apos;&apos;;
-
-    /**
-     * @type {string} DOM class of the keyboard wrapper, normally &quot;simple-keyboard&quot; by default.
-     */
-    this.keyboardDOMClass = keyboardDOMQuery.split(&apos;.&apos;).join(&quot;&quot;);
-
-    /**
-     * @type {object} Contains the DOM elements of every rendered button, the key being the button&apos;s layout name (e.g.: &quot;{enter}&quot;).
-     */
-    this.buttonElements = {};
-
-    /**
-     * Rendering keyboard
-     */
-    if(this.keyboardDOM)
-      this.render();
-    else {
-      console.warn(`&quot;${keyboardDOMQuery}&quot; was not found in the DOM.`);
-      throw new Error(&quot;KEYBOARD_DOM_ERROR&quot;);
-    }
-
-    /**
-     * Saving instance
-     * This enables multiple simple-keyboard support with easier management
-     */
-    if(!window[&apos;SimpleKeyboardInstances&apos;])
-      window[&apos;SimpleKeyboardInstances&apos;] = {};
-      
-    window[&apos;SimpleKeyboardInstances&apos;][this.utilities.camelCase(this.keyboardDOMClass)] = this;
-
-    /**
-     * Physical Keyboard support
-     */
-    this.physicalKeyboardInterface = new PhysicalKeyboard(this);
-
-    /**
-     * Modules
-     */
-    this.modules = {};
-    this.loadModules();
-  }
-
-  /**
-   * Handles clicks made to keyboard buttons
-   * @param  {string} button The button&apos;s layout name.
-   */
-  handleButtonClicked(button){
-    let debug = this.options.debug;
-
-    /**
-     * Ignoring placeholder buttons
-     */
-    if(button === &apos;{//}&apos;)
-      return false;
-
-    /**
-     * Calling onKeyPress
-     */
-    if(typeof this.options.onKeyPress === &quot;function&quot;)
-      this.options.onKeyPress(button);
-    
-    if(!this.input[this.options.inputName])
-      this.input[this.options.inputName] = &apos;&apos;;
-
-    let updatedInput = this.utilities.getUpdatedInput(
-      button, this.input[this.options.inputName], this.options, this.caretPosition
-    );
-
-    if(this.input[this.options.inputName] !== updatedInput){
-
-      /**
-       * If maxLength and handleMaxLength yield true, halting
-       */
-      if(this.options.maxLength &amp;&amp; this.utilities.handleMaxLength(this.input, this.options, updatedInput)){
-        return false;
-      }
-
-      this.input[this.options.inputName]  = this.utilities.getUpdatedInput(
-        button, this.input[this.options.inputName], this.options, this.caretPosition, true
-      );
-
-      if(debug)
-        console.log(&apos;Input changed:&apos;, this.input);
-
-      /**
-       * Enforce syncInstanceInputs, if set
-       */
-      if(this.options.syncInstanceInputs)
-        this.syncInstanceInputs(this.input);
-
-      /**
-       * Calling onChange
-       */
-      if(typeof this.options.onChange === &quot;function&quot;)
-        this.options.onChange(this.input[this.options.inputName]);
-    }
-    
-    if(debug){
-      console.log(&quot;Key pressed:&quot;, button);
-    }
-  }
-
-  /**
-   * Handles button mousedown
-   */
-  /* istanbul ignore next */
-  handleButtonMouseDown(button, e){
-    /**
-     * @type {boolean} Whether the mouse is being held onKeyPress
-     */
-    this.isMouseHold = true;
-
-    if(this.holdInteractionTimeout)
-      clearTimeout(this.holdInteractionTimeout);
-
-    if(this.holdTimeout)
-      clearTimeout(this.holdTimeout);
-
-    /**
-     * @type {object} Time to wait until a key hold is detected
-     */
-    this.holdTimeout = setTimeout(() =&gt; {
-      if(
-        this.isMouseHold  &amp;&amp;
-        (
-          (!button.includes(&quot;{&quot;) &amp;&amp; !button.includes(&quot;}&quot;)) ||
-          button === &quot;{bksp}&quot; ||
-          button === &quot;{space}&quot; ||
-          button === &quot;{tab}&quot;
-        )
-      ){
-        if(this.options.debug)
-          console.log(&quot;Button held:&quot;, button);
-
-        this.handleButtonHold(button, e);
-      }
-      clearTimeout(this.holdTimeout);
-    }, 500);
-  }
-
-  /**
-   * Handles button mouseup
-   */
-  handleButtonMouseUp(){
-    this.isMouseHold = false;
-    if(this.holdInteractionTimeout)
-      clearTimeout(this.holdInteractionTimeout);
-  }
-
-  /**
-   * Handles button hold
-   */
-  /* istanbul ignore next */
-  handleButtonHold(button){
-    if(this.holdInteractionTimeout)
-      clearTimeout(this.holdInteractionTimeout);
-
-    /**
-     * @type {object} Timeout dictating the speed of key hold iterations
-     */
-    this.holdInteractionTimeout = setTimeout(() =&gt; {
-      if(this.isMouseHold){
-        this.handleButtonClicked(button);
-        this.handleButtonHold(button);
-      } else {
-        clearTimeout(this.holdInteractionTimeout);
-      }
-    }, 100);
-  }
-
-  /**
-   * Send a command to all simple-keyboard instances (if you have several instances).
-   */
-  syncInstanceInputs(){
-    this.dispatch((instance) =&gt; {
-      instance.replaceInput(this.input);
-    });
-  }
-  
-  /**
-   * Clear the keyboard&#x2019;s input.
-   * @param {string} [inputName] optional - the internal input to select
-   */
-  clearInput(inputName){
-    inputName = inputName || this.options.inputName;
-    this.input[inputName] = &apos;&apos;;
-
-    /**
-     * Enforce syncInstanceInputs, if set
-     */
-    if(this.options.syncInstanceInputs)
-      this.syncInstanceInputs(this.input);
-  }
-
-  /**
-   * Get the keyboard&#x2019;s input (You can also get it from the onChange prop).
-   * @param  {string} [inputName] optional - the internal input to select
-   */
-  getInput(inputName){
-    inputName = inputName || this.options.inputName;
-
-    /**
-     * Enforce syncInstanceInputs, if set
-     */
-    if(this.options.syncInstanceInputs)
-      this.syncInstanceInputs(this.input);
-
-    return this.input[this.options.inputName];
-  }
-
-  /**
-   * Set the keyboard&#x2019;s input.
-   * @param  {string} input the input value
-   * @param  {string} inputName optional - the internal input to select
-   */
-  setInput(input, inputName){
-    inputName = inputName || this.options.inputName;
-    this.input[inputName] = input;
-
-    /**
-     * Enforce syncInstanceInputs, if set
-     */
-    if(this.options.syncInstanceInputs)
-      this.syncInstanceInputs(this.input);
-  }
-  
-  /**
-   * Replace the input object (`keyboard.input`)
-   * @param  {object} inputObj The input object
-   */
-  replaceInput(inputObj){
-    this.input = inputObj;
-  }
-
-  /**
-   * Set new option or modify existing ones after initialization. 
-   * @param  {object} option The option to set
-   */
-  setOptions = option =&gt; {
-    option = option || {};
-    this.options = Object.assign(this.options, option);
-    this.render();
-  }
-
-  /**
-   * Remove all keyboard rows and reset keyboard values.
-   * Used interally between re-renders.
-   */
-  clear(){
-    this.keyboardDOM.innerHTML = &apos;&apos;;
-    this.keyboardDOM.className = this.keyboardDOMClass;
-    this.buttonElements = {};
-  }
-
-  /**
-   * Send a command to all simple-keyboard instances at once (if you have multiple instances).
-   * @param  {function(instance: object, key: string)} callback Function to run on every instance
-   */
-  dispatch(callback){
-    if(!window[&apos;SimpleKeyboardInstances&apos;]){
-      console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`);
-      throw new Error(&quot;INSTANCES_VAR_ERROR&quot;);
-    }
-    
-    return Object.keys(window[&apos;SimpleKeyboardInstances&apos;]).forEach((key) =&gt; {
-      callback(window[&apos;SimpleKeyboardInstances&apos;][key], key);
-    })
-  }
-
-  /**
-   * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
-   * @param  {string} buttons List of buttons to select (separated by a space).
-   * @param  {string} className Classes to give to the selected buttons (separated by space).
-   */
-  addButtonTheme(buttons, className){
-    if(!className || !buttons)
-      return false;
-
-    buttons.split(&quot; &quot;).forEach(button =&gt; {
-      className.split(&quot; &quot;).forEach(classNameItem =&gt; {
-        if(!this.options.buttonTheme)
-          this.options.buttonTheme = [];
-
-        let classNameFound = false;
-  
-        /**
-         * If class is already defined, we add button to class definition
-         */
-        this.options.buttonTheme.map(buttonTheme =&gt; {
-
-          if(buttonTheme.class.split(&quot; &quot;).includes(classNameItem)){
-            classNameFound = true;
-            
-            let buttonThemeArray = buttonTheme.buttons.split(&quot; &quot;);
-            if(!buttonThemeArray.includes(button)){
-              classNameFound = true;
-              buttonThemeArray.push(button);
-              buttonTheme.buttons = buttonThemeArray.join(&quot; &quot;);
-            }
-          }
-          return buttonTheme;
-        });
-
-        /**
-         * If class is not defined, we create a new entry
-         */
-        if(!classNameFound){
-          this.options.buttonTheme.push({
-            class: classNameItem,
-            buttons: buttons
-          });
-        }
-
-      });
-    });
-
-    this.render();
-  }
-
-  /**
-   * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
-   * @param  {string} buttons List of buttons to select (separated by a space).
-   * @param  {string} className Classes to give to the selected buttons (separated by space).
-   */
-  removeButtonTheme(buttons, className){
-    /**
-     * When called with empty parameters, remove all button themes
-     */
-    if(!buttons &amp;&amp; !className){
-      this.options.buttonTheme = [];
-      this.render();
-      return false;
-    }
-
-    /**
-     * If buttons are passed and buttonTheme has items
-     */
-    if(buttons &amp;&amp; Array.isArray(this.options.buttonTheme) &amp;&amp; this.options.buttonTheme.length){
-      let buttonArray = buttons.split(&quot; &quot;);
-      buttonArray.forEach((button, key) =&gt; {
-        this.options.buttonTheme.map((buttonTheme, index) =&gt; {
-
-          /**
-           * If className is set, we affect the buttons only for that class
-           * Otherwise, we afect all classes
-           */
-          if(
-            (className &amp;&amp; className.includes(buttonTheme.class)) ||
-            !className
-          ){
-            let filteredButtonArray = buttonTheme.buttons.split(&quot; &quot;).filter(item =&gt; item !== button);
-
-            /**
-             * If buttons left, return them, otherwise, remove button Theme
-             */
-            if(filteredButtonArray.length){
-              buttonTheme.buttons = filteredButtonArray.join(&quot; &quot;);
-            } else {
-              this.options.buttonTheme.splice(index, 1);
-              buttonTheme = null;
-            }
- 
-          }
-
-          return buttonTheme;
-        });
-      });
-
-      this.render();
-    }
-  }
-
-  /**
-   * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
-   * @param  {string} button The button layout name to select
-   */
-  getButtonElement(button){
-    let output;
-
-    let buttonArr = this.buttonElements[button];
-    if(buttonArr){
-      if(buttonArr.length &gt; 1){
-        output = buttonArr;
-      } else {
-        output = buttonArr[0];
-      }
-    }
-
-    return output;
-  }
-
-  /**
-   * Retrieves the current cursor position within a input or textarea (if any)
-   */
-  handleCaret(){
-    /**
-     * Only first instance should insall the caret handling events
-     */
-    this.caretPosition = null;
-    let simpleKeyboardInstances = window[&apos;SimpleKeyboardInstances&apos;];
-
-    if(
-      (
-        simpleKeyboardInstances &amp;&amp;
-        Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass)
-      ) ||
-      !simpleKeyboardInstances
-    ){
-    if(this.options.debug){
-        console.log(`Caret handling started (${this.keyboardDOMClass})`)
-    }
-
-    document.addEventListener(&quot;keyup&quot;, this.caretEventHandler);
-    document.addEventListener(&quot;mouseup&quot;, this.caretEventHandler);
-    document.addEventListener(&quot;touchend&quot;, this.caretEventHandler);
-  }
-  }
-
-  /**
-   * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
-   */
-  caretEventHandler(event){
-    let targetTagName;
-    if(event.target.tagName){
-      targetTagName = event.target.tagName.toLowerCase();
-    }
-
-    this.dispatch(instance =&gt; {
-      if(instance.isMouseHold){
-        instance.isMouseHold = false;
-    }
-
-    if(
-      (targetTagName === &quot;textarea&quot; ||
-      targetTagName === &quot;input&quot;) &amp;&amp;
-        !instance.options.disableCaretPositioning
-    ){
-      /**
-       * Tracks current cursor position
-       * As keys are pressed, text will be added/removed at that position within the input.
-       */
-        instance.caretPosition = event.target.selectionStart;
-
-        if(instance.options.debug){
-          console.log(&apos;Caret at: &apos;, event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
-      }     
-    }
-    });
-  }
-
-  /**
-   * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
-   */
-  onInit(){
-    if(this.options.debug){
-      console.log(`${this.keyboardDOMClass} Initialized`)
-    }
-
-    /**
-     * Caret handling
-     */
-    this.handleCaret();
-
-    if(typeof this.options.onInit === &quot;function&quot;)
-      this.options.onInit();
-  }
-
-  /**
-   * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
-   */
-  onRender(){
-    if(typeof this.options.onRender === &quot;function&quot;)
-      this.options.onRender();
-  }
-
- /**
-  * Executes the callback function once all modules have been loaded
-  */
-  onModulesLoaded(){
-    if(typeof this.options.onModulesLoaded === &quot;function&quot;)
-      this.options.onModulesLoaded();
-  }
-
-  /**
-   * Register module
-   */
-  registerModule = (name, initCallback) =&gt; {
-    if(!this.modules[name])
-      this.modules[name] = {};
-
-    initCallback(this.modules[name]);
-  }
-
-  /**
-   * Load modules
-   */
-  loadModules(){
-    if(Array.isArray(this.options.modules)){
-      this.options.modules.forEach(Module =&gt; {
-        let module = new Module();
-
-        /* istanbul ignore next */
-        if(module.constructor.name &amp;&amp; module.constructor.name !== &quot;Function&quot;){
-          let classStr = `module-${this.utilities.camelCase(module.constructor.name)}`;
-          this.keyboardPluginClasses = this.keyboardPluginClasses + ` ${classStr}`;
-        }
-
-        module.init(this);
-      });
-
-      this.keyboardPluginClasses = this.keyboardPluginClasses + &apos; modules-loaded&apos;;
-
-      this.render();
-      this.onModulesLoaded();
-    }
-  }
-
-  /**
-   * Get module prop
-   */
-  getModuleProp = (name, prop) =&gt; {
-    if(!this.modules[name])
-      return false;
-    
-    return this.modules[name][prop];
-  }
-
-  /**
-   * getModulesList
-   */
-  getModulesList = () =&gt; {
-    return Object.keys(this.modules);
-  }
-
-  /**
-   * Renders rows and buttons as per options
-   */
-  render(){
-    /**
-     * Clear keyboard
-     */
-    this.clear();
-
-    let layoutClass = this.options.layout ? &quot;hg-layout-custom&quot; : `hg-layout-${this.options.layoutName}`;
-    let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
-    let useTouchEvents = this.options.useTouchEvents || false
-
-    /**
-     * Account for buttonTheme, if set
-     */
-    let buttonThemesParsed = {};
-    if(Array.isArray(this.options.buttonTheme)){
-      this.options.buttonTheme.forEach(themeObj =&gt; {
-        if(themeObj.buttons &amp;&amp; themeObj.class){
-          let themeButtons;
-
-          if(typeof themeObj.buttons === &quot;string&quot;){
-            themeButtons = themeObj.buttons.split(&apos; &apos;);
-          }
-
-          if(themeButtons){
-            themeButtons.forEach(themeButton =&gt; {
-              let themeParsed = buttonThemesParsed[themeButton];
-
-              // If the button has already been added
-              if(themeParsed){
-                // Making sure we don&apos;t add duplicate classes, even when buttonTheme has duplicates
-                if(!this.utilities.countInArray(themeParsed.split(&quot; &quot;), themeObj.class)){
-                  buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
-                }
-              } else {
-                buttonThemesParsed[themeButton] = themeObj.class;
-              }
-            });
-          }
-        } else {
-          console.warn(`buttonTheme row is missing the &quot;buttons&quot; or the &quot;class&quot;. Please check the documentation.`)
-        }
-      });
-    }
-
-    /**
-     * Adding themeClass, layoutClass to keyboardDOM
-     */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses}`;
-
-    /**
-     * Iterating through each row
-     */
-    layout[this.options.layoutName].forEach((row, rIndex) =&gt; {
-      let rowArray = row.split(&apos; &apos;);
-
-      /**
-       * Creating empty row
-       */
-      var rowDOM = document.createElement(&apos;div&apos;);
-      rowDOM.className += &quot;hg-row&quot;;
-
-      /**
-       * Iterating through each button in row
-       */
-      rowArray.forEach((button, bIndex) =&gt; {
-        let fctBtnClass = this.utilities.getButtonClass(button);
-        let buttonThemeClass = buttonThemesParsed[button];
-        let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
-
-        /**
-         * Creating button
-         */
-        var buttonDOM = document.createElement(&apos;div&apos;);
-        buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? &quot; &quot;+buttonThemeClass : &quot;&quot;}`;
-        
-        if (useTouchEvents) {
-          buttonDOM.ontouchstart = (e) =&gt; {
-            this.handleButtonClicked(button);
-            this.handleButtonMouseDown(button, e);
-          }
-          buttonDOM.ontouchend = e =&gt; this.handleButtonMouseUp();
-          buttonDOM.ontouchcancel = e =&gt; this.handleButtonMouseUp();
-        } else {
-          buttonDOM.onclick = () =&gt; {
-            this.isMouseHold = false;
-            this.handleButtonClicked(button);
-          }
-          buttonDOM.onmousedown = (e) =&gt; {
-            if (this.options.preventMouseDownDefault) e.preventDefault();
-            this.handleButtonMouseDown(button, e);
-          }
-        }
-        
-        /**
-         * Adding identifier
-         */
-        buttonDOM.setAttribute(&quot;data-skBtn&quot;, button);
-
-        /**
-         * Adding unique id
-         * Since there&apos;s no limit on spawning same buttons, the unique id ensures you can style every button
-         */
-        let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
-        buttonDOM.setAttribute(&quot;data-skBtnUID&quot;, buttonUID);
-
-        /**
-         * Adding display label
-         */
-        buttonDOM.setAttribute(&quot;data-displayLabel&quot;, buttonDisplayName);
-
-        /**
-         * Adding button label to button
-         */
-        var buttonSpanDOM = document.createElement(&apos;span&apos;);
-        buttonSpanDOM.innerHTML = buttonDisplayName;
-        buttonDOM.appendChild(buttonSpanDOM);
-
-        /**
-         * Adding to buttonElements
-         */
-        if(!this.buttonElements[button])
-          this.buttonElements[button] = [];
-
-        this.buttonElements[button].push(buttonDOM);
-
-        /**
-         * Appending button to row
-         */
-        rowDOM.appendChild(buttonDOM);
-
-      });
-
-      /**
-       * Appending row to keyboard
-       */
-      this.keyboardDOM.appendChild(rowDOM);
-    });
-
-    /**
-     * Calling onRender
-     */
-    this.onRender();
-
-    if(!this.initialized){
-      /**
-       * Ensures that onInit is only called once per instantiation
-       */
-      this.initialized = true;
-
-      /**
-       * Handling mouseup
-       */
-      if (!useTouchEvents) {
-        document.onmouseup = () =&gt; this.handleButtonMouseUp();
-      }
-
-      /**
-       * Calling onInit
-       */
-      this.onInit();
-    }
-  }
-}
-
-export default SimpleKeyboard;
-</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/index.js.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../">
-  <title data-ice="title">src/lib/index.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/index.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import SimpleKeyboard from &apos;./components/Keyboard&apos;;
-export default SimpleKeyboard;
-</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/services/KeyboardLayout.js.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">src/lib/services/KeyboardLayout.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/services/KeyboardLayout.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
- * Keyboard Layout Service
- */
-class KeyboardLayout {
-  /**
-   * Get default simple-keyboard layout
-   * @return {object} The default layout (US-QWERTY)
-   */
-  static getDefaultLayout(){
-    return {
-      &apos;default&apos;: [
-        &apos;` 1 2 3 4 5 6 7 8 9 0 - = {bksp}&apos;,
-        &apos;{tab} q w e r t y u i o p [ ] \\&apos;,
-        &apos;{lock} a s d f g h j k l ; \&apos; {enter}&apos;,
-        &apos;{shift} z x c v b n m , . / {shift}&apos;,
-        &apos;.com @ {space}&apos;
-      ],
-      &apos;shift&apos;: [
-        &apos;~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}&apos;,
-        &apos;{tab} Q W E R T Y U I O P { } |&apos;,
-        &apos;{lock} A S D F G H J K L : &quot; {enter}&apos;,
-        &apos;{shift} Z X C V B N M &lt; &gt; ? {shift}&apos;,
-        &apos;.com @ {space}&apos;
-      ]
-    } 
-  }
-}
-
-export default KeyboardLayout;</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/services/PhysicalKeyboard.js.html

@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">src/lib/services/PhysicalKeyboard.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/services/PhysicalKeyboard.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
- * Physical Keyboard Service
- */
-class PhysicalKeyboard {
-  /**
-   * Creates an instance of the PhysicalKeyboard service
-   */
-  constructor(simpleKeyboardInstance){
-    /**
-     * @type {object} A simple-keyboard instance
-     */
-    this.simpleKeyboardInstance = simpleKeyboardInstance;
-
-    /**
-     * Bindings
-     */
-    this.initKeyboardListener = this.initKeyboardListener.bind(this);
-    this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(this);
-
-    /**
-     * Initialize key listeners
-     */
-    this.initKeyboardListener();
-  }
-
-  /**
-   * Initializes key event listeners
-   */
-  initKeyboardListener(){
-    // Adding button style on keydown
-    document.addEventListener(&quot;keydown&quot;, (event) =&gt; {
-      if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
-        let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
-
-        this.simpleKeyboardInstance.dispatch(instance =&gt; {
-          let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
-
-          if(buttonDOM){
-            buttonDOM.style.backgroundColor = this.simpleKeyboardInstance.options.physicalKeyboardHighlightBgColor || &quot;#9ab4d0&quot;;
-            buttonDOM.style.color = this.simpleKeyboardInstance.options.physicalKeyboardHighlightTextColor || &quot;white&quot;;
-          }
-        });
-      }
-    });
-
-    // Removing button style on keyup
-    document.addEventListener(&quot;keyup&quot;, (event) =&gt; {
-      if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
-        let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
-
-        this.simpleKeyboardInstance.dispatch(instance =&gt; {
-          let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
-
-          if(buttonDOM &amp;&amp; buttonDOM.removeAttribute){
-            buttonDOM.removeAttribute(&quot;style&quot;);
-          }
-        });
-      }
-    });
-  }
-
-  /**
-   * Transforms a KeyboardEvent&apos;s &quot;key.code&quot; string into a simple-keyboard layout format
-   * @param  {object} event The KeyboardEvent
-   */
-  getSimpleKeyboardLayoutKey(event){
-    let output;
-
-    if(
-      event.code.includes(&quot;Numpad&quot;) ||
-      event.code.includes(&quot;Shift&quot;) ||
-      event.code.includes(&quot;Space&quot;) ||
-      event.code.includes(&quot;Backspace&quot;) ||
-      event.code.includes(&quot;Control&quot;) ||
-      event.code.includes(&quot;Alt&quot;) ||
-      event.code.includes(&quot;Meta&quot;)
-    ){
-      output = event.code;
-    } else {
-      output = event.key;
-    }
-
-    /**
-     * If button is not uppercase, casting to lowercase
-     */
-    if (
-      output !== output.toUpperCase() ||
-      (event.code[0] === &quot;F&quot; &amp;&amp; Number.isInteger(Number(event.code[1])) &amp;&amp; event.code.length &lt;= 3)
-    ) {
-      output = output.toLowerCase();
-    }
-
-    return output;
-  }
-}
-
-export default PhysicalKeyboard;</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/services/Utilities.js.html

@@ -1,432 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">src/lib/services/Utilities.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/services/Utilities.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
- * Utility Service
- */
-class Utilities {
-  /**
-   * Creates an instance of the Utility service
-   */
-  constructor(simpleKeyboardInstance){
-    /**
-     * @type {object} A simple-keyboard instance
-     */
-    this.simpleKeyboardInstance = simpleKeyboardInstance;
-
-    /**
-     * Bindings
-     */
-    this.getButtonClass = this.getButtonClass.bind(this);
-    this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
-    this.getUpdatedInput = this.getUpdatedInput.bind(this);
-    this.updateCaretPos = this.updateCaretPos.bind(this);
-    this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
-    this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
-    this.camelCase = this.camelCase.bind(this);
-    this.countInArray = this.countInArray.bind(this);
-  }
-
-  /**
-   * Adds default classes to a given button
-   * 
-   * @param  {string} button The button&apos;s layout name
-   * @return {string} The classes to be added to the button
-   */
-  getButtonClass(button){
-    let buttonTypeClass = (button.includes(&quot;{&quot;) &amp;&amp; button.includes(&quot;}&quot;) &amp;&amp; button !== &apos;{//}&apos;) ? &quot;functionBtn&quot; : &quot;standardBtn&quot;;
-    let buttonWithoutBraces = button.replace(&quot;{&quot;, &quot;&quot;).replace(&quot;}&quot;, &quot;&quot;);
-    let buttonNormalized = &apos;&apos;;
-
-    if(buttonTypeClass !== &quot;standardBtn&quot;)
-      buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
-
-    return `hg-${buttonTypeClass}${buttonNormalized}`;
-  }
-
-  /**
-   * Default button display labels
-   */
-  getDefaultDiplay(){
-    return {
-      &apos;{bksp}&apos;: &apos;backspace&apos;,
-      &apos;{backspace}&apos;: &apos;backspace&apos;,
-      &apos;{enter}&apos;: &apos;&lt; enter&apos;,
-      &apos;{shift}&apos;: &apos;shift&apos;,
-      &apos;{shiftleft}&apos;: &apos;shift&apos;,
-      &apos;{shiftright}&apos;: &apos;shift&apos;,
-      &apos;{alt}&apos;: &apos;alt&apos;,
-      &apos;{s}&apos;: &apos;shift&apos;,
-      &apos;{tab}&apos;: &apos;tab&apos;,
-      &apos;{lock}&apos;: &apos;caps&apos;,
-      &apos;{capslock}&apos;: &apos;caps&apos;,
-      &apos;{accept}&apos;: &apos;Submit&apos;,
-      &apos;{space}&apos;: &apos; &apos;,
-      &apos;{//}&apos;: &apos; &apos;,
-      &quot;{esc}&quot;: &quot;esc&quot;,
-      &quot;{escape}&quot;: &quot;esc&quot;,
-      &quot;{f1}&quot;: &quot;f1&quot;,
-      &quot;{f2}&quot;: &quot;f2&quot;,
-      &quot;{f3}&quot;: &quot;f3&quot;,
-      &quot;{f4}&quot;: &quot;f4&quot;,
-      &quot;{f5}&quot;: &quot;f5&quot;,
-      &quot;{f6}&quot;: &quot;f6&quot;,
-      &quot;{f7}&quot;: &quot;f7&quot;,
-      &quot;{f8}&quot;: &quot;f8&quot;,
-      &quot;{f9}&quot;: &quot;f9&quot;,
-      &quot;{f10}&quot;: &quot;f10&quot;,
-      &quot;{f11}&quot;: &quot;f11&quot;,
-      &quot;{f12}&quot;: &quot;f12&quot;,
-      &apos;{numpaddivide}&apos;: &apos;/&apos;,
-      &apos;{numlock}&apos;: &apos;lock&apos;,
-      &quot;{arrowup}&quot;: &quot;&#x2191;&quot;,
-      &quot;{arrowleft}&quot;: &quot;&#x2190;&quot;,
-      &quot;{arrowdown}&quot;: &quot;&#x2193;&quot;,
-      &quot;{arrowright}&quot;: &quot;&#x2192;&quot;,
-      &quot;{prtscr}&quot;: &quot;print&quot;,
-      &quot;{scrolllock}&quot;: &quot;scroll&quot;,
-      &quot;{pause}&quot;: &quot;pause&quot;,
-      &quot;{insert}&quot;: &quot;ins&quot;,
-      &quot;{home}&quot;: &quot;home&quot;,
-      &quot;{pageup}&quot;: &quot;up&quot;,
-      &quot;{delete}&quot;: &quot;del&quot;,
-      &quot;{end}&quot;: &quot;end&quot;,
-      &quot;{pagedown}&quot;: &quot;down&quot;,
-      &quot;{numpadmultiply}&quot;: &quot;*&quot;,
-      &quot;{numpadsubtract}&quot;: &quot;-&quot;,
-      &quot;{numpadadd}&quot;: &quot;+&quot;,
-      &quot;{numpadenter}&quot;: &quot;enter&quot;,
-      &quot;{period}&quot;: &quot;.&quot;,
-      &quot;{numpaddecimal}&quot;: &quot;.&quot;,
-      &quot;{numpad0}&quot;: &quot;0&quot;,
-      &quot;{numpad1}&quot;: &quot;1&quot;,
-      &quot;{numpad2}&quot;: &quot;2&quot;,
-      &quot;{numpad3}&quot;: &quot;3&quot;,
-      &quot;{numpad4}&quot;: &quot;4&quot;,
-      &quot;{numpad5}&quot;: &quot;5&quot;,
-      &quot;{numpad6}&quot;: &quot;6&quot;,
-      &quot;{numpad7}&quot;: &quot;7&quot;,
-      &quot;{numpad8}&quot;: &quot;8&quot;,
-      &quot;{numpad9}&quot;: &quot;9&quot;,
-    };
-  }
-  /**
-   * Returns the display (label) name for a given button
-   * 
-   * @param  {string} button The button&apos;s layout name
-   * @param  {object} display The provided display option
-   * @param  {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
-   */
-  getButtonDisplayName(button, display, mergeDisplay){
-    if(mergeDisplay){
-      display = Object.assign({}, this.getDefaultDiplay(), display);
-    } else {
-      display = display || this.getDefaultDiplay();
-    }
-
-    return display[button] || button;
-  }
-
-  
-  /**
-   * Returns the updated input resulting from clicking a given button
-   * 
-   * @param  {string} button The button&apos;s layout name
-   * @param  {string} input The input string
-   * @param  {object} options The simple-keyboard options object
-   * @param  {number} caretPos The cursor&apos;s current position
-   * @param  {boolean} moveCaret Whether to update simple-keyboard&apos;s cursor
-   */
-  getUpdatedInput(button, input, options, caretPos, moveCaret){
-    
-    let output = input;
-
-    if((button === &quot;{bksp}&quot; || button === &quot;{backspace}&quot;) &amp;&amp; output.length &gt; 0){
-      output = this.removeAt(output, caretPos, moveCaret);
-
-    } else if(button === &quot;{space}&quot;)
-      output = this.addStringAt(output, &quot; &quot;, caretPos, moveCaret);
-
-    else if(button === &quot;{tab}&quot; &amp;&amp; !(typeof options.tabCharOnTab === &quot;boolean&quot; &amp;&amp; options.tabCharOnTab === false)){
-      output = this.addStringAt(output, &quot;\t&quot;, caretPos, moveCaret);
-
-    } else if((button === &quot;{enter}&quot; || button === &quot;{numpadenter}&quot;) &amp;&amp; options.newLineOnEnter)
-      output = this.addStringAt(output, &quot;\n&quot;, caretPos, moveCaret);
-
-    else if(button.includes(&quot;numpad&quot;) &amp;&amp; Number.isInteger(Number(button[button.length - 2]))){
-      output = this.addStringAt(output, button[button.length - 2], caretPos);
-    }
-    else if(button === &quot;{numpaddivide}&quot;)
-      output = this.addStringAt(output, &apos;/&apos;, caretPos, moveCaret);
-
-    else if(button === &quot;{numpadmultiply}&quot;)
-      output = this.addStringAt(output, &apos;*&apos;, caretPos, moveCaret);
-
-    else if(button === &quot;{numpadsubtract}&quot;)
-      output = this.addStringAt(output, &apos;-&apos;, caretPos, moveCaret);
-
-    else if(button === &quot;{numpadadd}&quot;)
-      output = this.addStringAt(output, &apos;+&apos;, caretPos, moveCaret);
-
-    else if(button === &quot;{numpaddecimal}&quot;)
-      output = this.addStringAt(output, &apos;.&apos;, caretPos, moveCaret);
-
-    else if(button === &quot;{&quot; || button === &quot;}&quot;)
-      output = this.addStringAt(output, button, caretPos, moveCaret);
-
-    else if(!button.includes(&quot;{&quot;) &amp;&amp; !button.includes(&quot;}&quot;))
-      output = this.addStringAt(output, button, caretPos, moveCaret);
-
-    return output;
-  }
-
-  /**
-   * Moves the cursor position by a given amount
-   * 
-   * @param  {number} length Represents by how many characters the input should be moved
-   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
-   */
-  updateCaretPos(length, minus){
-    if(this.simpleKeyboardInstance.options.syncInstanceInputs){
-      this.simpleKeyboardInstance.dispatch(instance =&gt; {
-        this.updateCaretPosAction(instance, length, minus);
-      });
-    } else {
-      this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
-    }
-  }
-
-  /**
-   * Action method of updateCaretPos
-   * 
-   * @param  {object} instance The instance whose position should be updated
-   * @param  {number} length Represents by how many characters the input should be moved
-   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
-   */
-  updateCaretPosAction(instance, length, minus){
-    if(minus){
-      if(instance.caretPosition &gt; 0)
-      instance.caretPosition = instance.caretPosition - length;
-    } else {
-      instance.caretPosition = instance.caretPosition + length;
-    }
-
-    if(this.simpleKeyboardInstance.options.debug){
-      console.log(&quot;Caret at:&quot;, instance.caretPosition, `(${instance.keyboardDOMClass})`);
-    }
-  }
-
-  /**
-   * Adds a string to the input at a given position
-   * 
-   * @param  {string} source The source input
-   * @param  {string} string The string to add
-   * @param  {number} position The (cursor) position where the string should be added
-   * @param  {boolean} moveCaret Whether to update simple-keyboard&apos;s cursor
-   */
-  addStringAt(source, string, position, moveCaret){
-    let output;
-
-    if(!position &amp;&amp; position !== 0){
-      output = source + string;
-    } else {
-      output = [source.slice(0, position), string, source.slice(position)].join(&apos;&apos;);
-
-      /**
-       * Avoid caret position change when maxLength is set
-       */
-      if(!this.isMaxLengthReached()){
-        if(moveCaret) this.updateCaretPos(string.length);
-      }
-
-    }
-
-    return output;
-  }
-
-  /**
-   * Removes an amount of characters at a given position
-   * 
-   * @param  {string} source The source input
-   * @param  {number} position The (cursor) position from where the characters should be removed
-   * @param  {boolean} moveCaret Whether to update simple-keyboard&apos;s cursor
-   */
-  removeAt(source, position, moveCaret){
-    if(this.simpleKeyboardInstance.caretPosition === 0){
-      return source;
-    }
-
-    let output;
-    let prevTwoChars;
-    let emojiMatched;
-    let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
-
-    /**
-     * Emojis are made out of two characters, so we must take a custom approach to trim them.
-     * For more info: https://mathiasbynens.be/notes/javascript-unicode
-     */
-    if(position &amp;&amp; position &gt;= 0){
-      prevTwoChars = source.substring(position - 2, position)
-      emojiMatched = prevTwoChars.match(emojiMatchedReg);
-
-      if(emojiMatched){
-        output = source.substr(0, (position - 2)) + source.substr(position);
-        if(moveCaret) this.updateCaretPos(2, true);
-      } else {
-        output = source.substr(0, (position - 1)) + source.substr(position);
-        if(moveCaret) this.updateCaretPos(1, true);
-      }
-    } else {
-      prevTwoChars = source.slice(-2);
-      emojiMatched = prevTwoChars.match(emojiMatchedReg);
-
-      if(emojiMatched){
-        output = source.slice(0, -2);
-        if(moveCaret) this.updateCaretPos(2, true);
-      } else {
-        output = source.slice(0, -1);
-        if(moveCaret) this.updateCaretPos(1, true);
-      }
-    }
-
-    return output;
-  }
-  /**
-   * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
-   * 
-   * @param  {object} inputObj
-   * @param  {object} options
-   * @param  {string} updatedInput
-   */
-  handleMaxLength(inputObj, options, updatedInput){
-    let maxLength = options.maxLength;
-    let currentInput = inputObj[options.inputName];
-    let condition = currentInput.length === maxLength;
-
-    if(
-      /**
-       * If pressing this button won&apos;t add more characters
-       * We exit out of this limiter function
-       */
-      updatedInput.length &lt;= currentInput.length
-    ){
-      return false;
-    }
-
-    if(Number.isInteger(maxLength)){
-      if(options.debug){
-        console.log(&quot;maxLength (num) reached:&quot;, condition);
-      }
-
-      if(condition){
-        /**
-         * @type {boolean} Boolean value that shows whether maxLength has been reached
-         */
-        this.maxLengthReached = true;
-        return true;
-      } else {
-        this.maxLengthReached = false;
-        return false;
-      }
-    }
-
-    if(typeof maxLength === &quot;object&quot;){
-      let condition = currentInput.length === maxLength[options.inputName];
-
-      if(options.debug){
-        console.log(&quot;maxLength (obj) reached:&quot;, condition);
-      }
-
-      if(condition){
-        this.maxLengthReached = true;
-        return true;
-      } else {
-        this.maxLengthReached = false;
-        return false;
-      }
-    }
-  }
-
-  /**
-   * Gets the current value of maxLengthReached
-   */
-  isMaxLengthReached(){
-    return Boolean(this.maxLengthReached);
-  }
-
-  /**
-   * Transforms an arbitrary string to camelCase
-   * 
-   * @param  {string} string The string to transform.
-   */
-  camelCase(string){
-    return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) =&gt; string + word[0].toUpperCase() + word.slice(1));
-  };
-
-  /**
-   * Counts the number of duplicates in a given array
-   * 
-   * @param  {Array} array The haystack to search in
-   * @param  {string} value The needle to search for
-   */
-  countInArray(array, value){
-    return array.reduce((n, x) =&gt; n + (x === value), 0);
-  }
-}
-
-export default Utilities;</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/file/src/lib/tests/TestUtility.js.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="../../../../">
-  <title data-ice="title">src/lib/tests/TestUtility.js | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1 data-ice="title">src/lib/tests/TestUtility.js</h1>
-<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
- * Test Utility Functions
- */
-export default class TestUtility {
-  /**
-   * Set&apos;s a basic DOM structure to test in
-   */
-  setDOM = (divClass) =&gt; {
-    this.clear();
-    const div = document.createElement(&apos;div&apos;);
-    div.className += divClass || &quot;simple-keyboard&quot;;
-    document.body.appendChild(div);
-  }
-
-  /**
-   * Clears DOM structure
-   */
-  clear = () =&gt; {
-    document.body.innerHTML = &quot;&quot;;
-  }
-
-  /**
-   * Test if standard buttons respect maxLength and do input a value
-   */
-  testLayoutStdButtons = (keyboard) =&gt; {
-    let stdBtnCount = 0;
-    let fullInput = &apos;&apos;;
-
-    this.iterateButtons((button) =&gt; {
-      let label = button.getAttribute(&quot;data-skbtn&quot;);
-
-      if(label.includes(&quot;{&quot;))
-        return false;
-
-      // Click all standard buttons, respects maxLength
-      button.onclick();
-
-      // Recording fullInput, bypasses maxLength
-      fullInput = keyboard.utilities.getUpdatedInput(label, fullInput, keyboard.options, null);
-
-      stdBtnCount += label.length;
-    });
-
-    /**
-     * Check if maxLength is respected
-     */
-    if(
-      (
-        typeof keyboard.options.maxLength === &quot;object&quot; &amp;&amp;
-        keyboard.getInput().length !== keyboard.options.maxLength[keyboard.options.layoutName]
-      ) ||
-      (
-        typeof keyboard.options.maxLength !== &quot;object&quot; &amp;&amp;
-        keyboard.getInput().length !== keyboard.options.maxLength
-      )
-    )
-      throw new Error(&quot;MAX_LENGTH_ISSUE&quot;);
-    else
-      console.log(&quot;MAX_LENGTH PASSED:&quot;, keyboard.options.layoutName, keyboard.getInput().length, keyboard.options.maxLength);
-
-    /**
-     * Check if all standard buttons are inputting something
-     * (Regardless of maxLength)
-     */
-    if(stdBtnCount !== fullInput.length)
-      throw new Error(&quot;STANDARD_BUTTONS_ISSUE&quot;);
-    else
-      console.log(&quot;STANDARD_BUTTONS PASSED:&quot;, keyboard.options.layoutName, stdBtnCount, fullInput.length);
-  }
-
-  /**
-   * Test if function buttons are interactive (have an onclick)
-   */
-  testLayoutFctButtons = (callback) =&gt; {
-    let fctBtnCount = 0;
-    let fctBtnHasOnclickCount = 0;
-
-    this.iterateButtons((button) =&gt; {
-      let label = button.getAttribute(&quot;data-skbtn&quot;);
-
-      if(!label.includes(&quot;{&quot;) &amp;&amp; !label.includes(&quot;}&quot;))
-        return false;
-
-      fctBtnCount++;
-
-      if(button.onclick){
-        button.onclick();
-        fctBtnHasOnclickCount++;
-      }
-
-      callback(fctBtnCount, fctBtnHasOnclickCount);
-    });
-  }
-
-  /**
-   * Iterates on the keyboard buttons
-   */
-  iterateButtons = (callback, selector) =&gt; {
-    let rows = document.body.querySelector(selector || &apos;.simple-keyboard&apos;).children;
-
-    Array.from(rows).forEach(row =&gt; {
-      Array.from(row.children).forEach((button) =&gt; {
-        callback(button);
-      });
-    });
-  }
-}</code></pre>
-
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/identifiers.html

@@ -1,291 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl">
-  <title data-ice="title">Reference | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1>References</h1>
-
-<div class="identifiers-wrap">
-  <div>
-    
-  <div data-ice="dirSummaryWrap">
-      <h2 data-ice="dirPath" id="demo">demo</h2>
-      <div data-ice="dirSummary"><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">summary</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>simple-keyboard demo</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-    </div>
-<div data-ice="dirSummaryWrap">
-      <h2 data-ice="dirPath" id="lib-components">lib/components</h2>
-      <div data-ice="dirSummary"><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">summary</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Root class for simple-keyboard
-This class:</p>
-<ul>
-<li>Parses the options</li>
-<li>Renders the rows and buttons</li>
-<li>Handles button functionality</li>
-</ul>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-    </div>
-<div data-ice="dirSummaryWrap">
-      <h2 data-ice="dirPath" id="lib-services">lib/services</h2>
-      <div data-ice="dirSummary"><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">summary</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Keyboard Layout Service</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Physical Keyboard Service</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-<tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Utility Service</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-    </div>
-<div data-ice="dirSummaryWrap">
-      <h2 data-ice="dirPath" id="lib-tests">lib/tests</h2>
-      <div data-ice="dirSummary"><table class="summary" data-ice="summary">
-  <thead><tr><td data-ice="title" colspan="3">summary</td></tr></thead>
-  <tbody>
-  
-  <tr data-ice="target">
-    <td>
-      <span class="access" data-ice="access">public</span>
-      
-      
-      
-      <span class="override" data-ice="override"></span>
-    </td>
-    <td>
-      <div>
-        <p>
-          <span data-ice="kind-icon" class="kind-class">C</span>
-          
-          
-          <span class="code" data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span>
-        </p>
-      </div>
-      <div>
-        
-        
-        <div data-ice="description"><p>Test Utility Functions</p>
-</div>
-      </div>
-    </td>
-    <td>
-      
-      
-    </td>
-  </tr>
-</tbody>
-</table>
-</div>
-    </div>
-</div>
-
-  <div class="identifier-dir-tree" data-ice="dirTreeWrap">
-    <div class="identifier-dir-tree-header">Directories</div>
-    <div class="identifier-dir-tree-content" data-ice="dirTree"><div style="padding-left: 0em"><a href="#demo">demo</a></div>
-<div style="padding-left: 1em"><a href="#lib-components">components</a></div>
-<div style="padding-left: 1em"><a href="#lib-services">services</a></div>
-<div style="padding-left: 1em"><a href="#lib-tests">tests</a></div></div>
-  </div>
-</div>
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/image/badge.svg

@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="104" height="20">
-  <script/>
-  <linearGradient id="a" x2="0" y2="100%">
-    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
-    <stop offset="1" stop-opacity=".1"/>
-  </linearGradient>
-  <rect rx="3" width="104" height="20" fill="#555"/>
-  <rect rx="3" x="64" width="40" height="20" fill="@color@"/>
-  <path fill="@color@" d="M64 0h4v20h-4z"/>
-  <rect rx="3" width="104" height="20" fill="url(#a)"/>
-  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
-    <text x="32" y="15" fill="#010101" fill-opacity=".3">document</text>
-    <text x="32" y="14">document</text>
-    <text x="84" y="15" fill="#010101" fill-opacity=".3">@ratio@</text>
-    <text x="84" y="14">@ratio@</text>
-  </g>
-</svg>

docs/image/manual-badge.svg

@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="102" height="20">
-  <script/>
-  <linearGradient id="a" x2="0" y2="100%">
-    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
-    <stop offset="1" stop-opacity=".1"/>
-  </linearGradient>
-  <rect rx="3" width="102" height="20" fill="#555"/>
-  <rect rx="3" x="52" width="50" height="20" fill="@color@"/>
-  <path fill="@color@" d="M52 0h4v20h-4z"/>
-  <rect rx="3" width="102" height="20" fill="url(#a)"/>
-  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
-    <text x="26" y="15" fill="#010101" fill-opacity=".3">manual</text>
-    <text x="26" y="14">manual</text>
-    <text x="77" y="15" fill="#010101" fill-opacity=".3">@value@</text>
-    <text x="77" y="14">@value@</text>
-  </g>
-</svg>

docs/index.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl">
-  <title data-ice="title">Home | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><p><div>
-  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" width="100%"></a>
-  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-10172018.gif" width="100%"></a>
-  &lt;blockquote&gt;The easily customisable and responsive on-screen virtual keyboard for Javascript projects.&lt;/blockquote&gt;
-  <p><a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
-  <a href="https://www.npmjs.com/package/simple-keyboard" target="_blank"><img src="https://img.shields.io/npm/v/simple-keyboard.svg?style=flat"></a>
-  <a href="https://travis-ci.org/hodgef/simple-keyboard" target="_blank"><img src="https://travis-ci.org/hodgef/simple-keyboard.svg?branch=master"></a>
-  <a href="https://codecov.io/gh/hodgef/simple-keyboard" target="_blank"><img src="https://img.shields.io/codecov/c/github/hodgef/simple-keyboard/master.svg?style=flat"></a>
-  <a href="https://doc.esdoc.org/github.com/hodgef/simple-keyboard" target="_blank"><img src="https://doc.esdoc.org/github.com/hodgef/simple-keyboard/badge.svg"></a>
-  </p>
-</div>
-
-</p>
-<h2 id="&#x1F4E6;-installation--amp--usage">&#x1F4E6; Installation &amp; Usage</h2><p>You can use simple-keyboard as a <code>&lt;script&gt;</code> tag from a CDN, or install it from npm.</p>
-<p>Check out the <a href="https://simple-keyboard.com/getting-started">Getting Started</a> docs to begin.</p>
-<h2 id="&#x1F4D6;-documentation">&#x1F4D6; Documentation</h2><p>Check out the <a href="https://simple-keyboard.com/documentation">simple-keyboard documentation</a> site.</p>
-<p>Feel free to browse the <a href="https://simple-keyboard.com/qa-use-cases/">Q&amp;A / Use-cases</a> page for advanced use-cases.</p>
-<h2 id="&#x1F680;-demo">&#x1F680; Demo</h2><p><a href="https://simple-keyboard.com/demo">https://simple-keyboard.com/demo</a></p>
-<h3 id="to-run-demo-on-your-own-computer">To run demo on your own computer</h3><ul>
-<li>Clone this repository</li>
-<li><code>npm install</code></li>
-<li><code>npm start</code></li>
-<li>Visit <a href="http://localhost:3000/">http://localhost:3000/</a></li>
-</ul>
-<h3 id="other-versions">Other versions</h3><ul>
-<li>ReactJS - <a href="https://github.com/hodgef/react-simple-keyboard">react-simple-keyboard</a></li>
-</ul>
-<h3 id="questions-">Questions?</h3><p><a href="http://franciscohodge.com/simple-keyboard/chat/join" title="Join our Discord chat" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/discord.png" width="200"></a></p>
-<h2 id="&#x2705;-contributing">&#x2705; Contributing</h2><p>PR&apos;s and issues are welcome. Feel free to submit any issues you have at:
-<a href="https://github.com/hodgef/simple-keyboard/issues">https://github.com/hodgef/simple-keyboard/issues</a></p>
-</div>
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

docs/lint.json

@@ -1 +0,0 @@
-[]

docs/script/inherited-summary.js

@@ -1,28 +0,0 @@
-(function(){
-  function toggle(ev) {
-    var button = ev.target;
-    var parent = ev.target.parentElement;
-    while(parent) {
-      if (parent.tagName === 'TABLE' && parent.classList.contains('summary')) break;
-      parent = parent.parentElement;
-    }
-
-    if (!parent) return;
-
-    var tbody = parent.querySelector('tbody');
-    if (button.classList.contains('opened')) {
-      button.classList.remove('opened');
-      button.classList.add('closed');
-      tbody.style.display = 'none';
-    } else {
-      button.classList.remove('closed');
-      button.classList.add('opened');
-      tbody.style.display = 'block';
-    }
-  }
-
-  var buttons = document.querySelectorAll('.inherited-summary thead .toggle');
-  for (var i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener('click', toggle);
-  }
-})();

docs/script/inner-link.js

@@ -1,32 +0,0 @@
-// inner link(#foo) can not correctly scroll, because page has fixed header,
-// so, I manually scroll.
-(function(){
-  var matched = location.hash.match(/errorLines=([\d,]+)/);
-  if (matched) return;
-
-  function adjust() {
-    window.scrollBy(0, -55);
-    var el = document.querySelector('.inner-link-active');
-    if (el) el.classList.remove('inner-link-active');
-
-    // ``[ ] . ' " @`` are not valid in DOM id. so must escape these.
-    var id = location.hash.replace(/([\[\].'"@$])/g, '\\$1');
-    var el = document.querySelector(id);
-    if (el) el.classList.add('inner-link-active');
-  }
-
-  window.addEventListener('hashchange', adjust);
-
-  if (location.hash) {
-    setTimeout(adjust, 0);
-  }
-})();
-
-(function(){
-  var els = document.querySelectorAll('[href^="#"]');
-  var href = location.href.replace(/#.*$/, ''); // remove existed hash
-  for (var i = 0; i < els.length; i++) {
-    var el = els[i];
-    el.href = href + el.getAttribute('href'); // because el.href is absolute path
-  }
-})();

docs/script/manual.js

@@ -1,12 +0,0 @@
-(function(){
-  var matched = location.pathname.match(/\/(manual\/.*\.html)$/);
-  if (!matched) return;
-
-  var currentName = matched[1];
-  var cssClass = '.navigation .manual-toc li[data-link="' + currentName + '"]';
-  var styleText = cssClass + '{ display: block; }\n';
-  styleText += cssClass + '.indent-h1 a { color: #039BE5 }';
-  var style = document.createElement('style');
-  style.textContent = styleText;
-  document.querySelector('head').appendChild(style);
-})();

docs/script/patch-for-local.js

@@ -1,8 +0,0 @@
-(function(){
-  if (location.protocol === 'file:') {
-    var elms = document.querySelectorAll('a[href="./"]');
-    for (var i = 0; i < elms.length; i++) {
-      elms[i].href = './index.html';
-    }
-  }
-})();

docs/script/prettify/Apache-License-2.0.txt

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

docs/script/prettify/prettify.js

@@ -1,46 +0,0 @@
-!function(){/*
-
- Copyright (C) 2006 Google Inc.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-window.PR_SHOULD_USE_CONTINUATION=!0;
-(function(){function T(a){function d(e){var b=e.charCodeAt(0);if(92!==b)return b;var a=e.charAt(1);return(b=w[a])?b:"0"<=a&&"7">=a?parseInt(e.substring(1),8):"u"===a||"x"===a?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[0-9A-Fa-f]{4}|\\x[0-9A-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\s\S]|-|[^-\\]/g);e=
-[];var a="^"===b[0],c=["["];a&&c.push("^");for(var a=a?1:0,g=b.length;a<g;++a){var h=b[a];if(/\\[bdsw]/i.test(h))c.push(h);else{var h=d(h),k;a+2<g&&"-"===b[a+1]?(k=d(b[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):b.push(g=h);for(a=0;a<b.length;++a)h=b[a],
-c.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(f(h[1])));c.push("]");return c.join("")}function v(e){for(var a=e.source.match(/(?:\[(?:[^\x5C\x5D]|\\[\s\S])*\]|\\u[A-Fa-f0-9]{4}|\\x[A-Fa-f0-9]{2}|\\[0-9]+|\\[^ux0-9]|\(\?[:!=]|[\(\)\^]|[^\x5B\x5C\(\)\^]+)/g),c=a.length,d=[],g=0,h=0;g<c;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++A);for(h=g=0;g<c;++g)k=a[g],"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===
-k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<c;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&n)for(g=0;g<c;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=b(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var A=0,n=!1,l=!1,m=0,c=a.length;m<c;++m){var p=a[m];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){n=!0;
-l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],m=0,c=a.length;m<c;++m){p=a[m];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+v(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var c=a.nodeType;if(1==c){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)f(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)v[l]="\n",n[l<<1]=A++,n[l++<<1|1]=a}}else if(3==c||4==c)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[ \t\r\n]+/g,
-" "),v[l]=c,n[l<<1]=A,A+=c.length,n[l++<<1|1]=a)}var b=/(?:^|\s)nocode(?:\s|$)/,v=[],A=0,n=[],l=0;f(a);return{a:v.join("").replace(/\n$/,""),c:n}}function J(a,d,f,b,v){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},b(a),v.push.apply(v,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var b=f.nodeType,d=1===b?d?a:f:3===b?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,m=a.h,c=[l,"pln"],p=0,w=a.a.match(v)||[],r={},e=0,t=w.length;e<
-t;++e){var z=w[e],q=r[z],g=void 0,h;if("string"===typeof q)h=!1;else{var k=b[z.charAt(0)];if(k)g=z.match(k[1]),q=k[0];else{for(h=0;h<A;++h)if(k=d[h],g=z.match(k[1])){q=k[0];break}g||(q="pln")}!(h=5<=q.length&&"lang-"===q.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,q="src");h||(r[z]=q)}k=p;p+=z.length;if(h){h=g[1];var B=z.indexOf(h),D=B+h.length;g[2]&&(D=z.length-g[2].length,B=D-h.length);q=q.substring(5);J(m,l+k,z.substring(0,B),f,c);J(m,l+k+B,h,K(q,h),c);J(m,l+k+D,z.substring(D),f,c)}else c.push(l+
-k,q)}a.g=c}var b={},v;(function(){for(var f=a.concat(d),l=[],m={},c=0,p=f.length;c<p;++c){var w=f[c],r=w[3];if(r)for(var e=r.length;0<=--e;)b[r.charAt(e)]=w;w=w[1];r=""+w;m.hasOwnProperty(r)||(l.push(w),m[r]=null)}l.push(/[\0-\uffff]/);v=T(l)})();var A=d.length;return f}function y(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
-null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var b=a.hashComments;b&&(a.cStyleComments?(1<b?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
-null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(b=a.regexLiterals){var v=(b=1<b?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
-("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+v+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+v+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&f.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&f.push(["kwd",new RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
-null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(b),null]);return G(d,f)}function L(a,d,f){function b(a){var c=a.nodeType;if(1==c&&!A.test(a.className))if("br"===a.nodeName)v(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((3==c||4==c)&&f){var d=a.nodeValue,q=d.match(n);q&&(c=d.substring(0,q.index),a.nodeValue=c,(d=d.substring(q.index+q[0].length))&&
-a.parentNode.insertBefore(l.createTextNode(d),a.nextSibling),v(a),c||a.parentNode.removeChild(a))}}function v(a){function b(a,c){var d=c?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=b(k,1),e=a.nextSibling;k.appendChild(d);for(var f=e;f;f=e)e=f.nextSibling,k.appendChild(f)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=b(a.nextSibling,0);for(var d;(d=a.parentNode)&&1===d.nodeType;)a=d;c.push(a)}for(var A=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,l=a.ownerDocument,m=l.createElement("li");a.firstChild;)m.appendChild(a.firstChild);
-for(var c=[m],p=0;p<c.length;++p)b(c[p]);d===(d|0)&&c[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=c.length;p<r;++p)m=c[p],m.className="L"+(p+d)%10,m.firstChild||m.appendChild(l.createTextNode("\u00a0")),w.appendChild(m);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var b=d[f];I.hasOwnProperty(b)?E.console&&console.warn("cannot override language handler %s",b):I[b]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
-"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),b=f.a;a.a=b;a.c=f.c;a.i=0;K(d,b)(a);var v=/\bMSIE\s(\d+)/.exec(navigator.userAgent),v=v&&8>=+v[1],d=/\n/g,A=a.a,n=A.length,f=0,l=a.c,m=l.length,b=0,c=a.g,p=c.length,w=0;c[p]=n;var r,e;for(e=r=0;e<p;)c[e]!==c[e+2]?(c[r++]=c[e++],c[r++]=c[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var t=c[e],z=c[e+1],q=e+2;q+2<=p&&c[q+1]===z;)q+=2;c[r++]=t;c[r++]=z;e=q}c.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
-try{for(;b<m;){var h=l[b+2]||n,k=c[w+2]||n,q=Math.min(h,k),B=l[b+1],D;if(1!==B.nodeType&&(D=A.substring(f,q))){v&&(D=D.replace(d,"\r"));B.nodeValue=D;var N=B.ownerDocument,u=N.createElement("span");u.className=c[w+1];var y=B.parentNode;y.replaceChild(u,B);u.appendChild(B);f<h&&(l[b+1]=B=N.createTextNode(A.substring(q,h)),y.insertBefore(B,u.nextSibling))}f=q;f>=h&&(b+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(x){E.console&&console.log(x&&x.stack||x)}}var E=window,C=["break,continue,do,else,for,if,return,while"],
-F=[[C,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
-O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],
-F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,function,get,implements,instanceof,interface,let,null,set,undefined,var,with,yield,Infinity,NaN"],Q=[C,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[C,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],C=[C,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],
-S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=y({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,C],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",
-/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,
-"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(y({keywords:H,
-hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(y({keywords:"null,true,false"}),["json"]);t(y({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(y({keywords:O,cStyleComments:!0}),["java"]);t(y({keywords:C,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(y({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(y({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
-hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(y({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(y({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(y({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,
-regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=E.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:y,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:E.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";
-b=b.firstChild;f&&L(b,f,!0);M({j:d,m:f,h:b,l:1,a:null,i:null,c:null,g:null});return b.innerHTML},prettyPrint:E.prettyPrint=function(a,d){function f(){for(var b=E.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;p<t.length&&c.now()<b;p++){for(var d=t[p],l=g,m=d;m=m.previousSibling;){var n=m.nodeType,u=(7===n||8===n)&&m.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==n||/\S/.test(m.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}m=d.className;if((l!==g||r.test(m))&&
-!e.test(m)){n=!1;for(u=d.parentNode;u;u=u.parentNode)if(q.test(u.tagName)&&u.className&&r.test(u.className)){n=!0;break}if(!n){d.className+=" prettyprinted";n=l.lang;if(!n){var n=m.match(w),C;!n&&(C=V(d))&&z.test(C.tagName)&&(n=C.className.match(w));n&&(n=n[1])}if(y.test(d.tagName))u=1;else var u=d.currentStyle,x=v.defaultView,u=(u=u?u.whiteSpace:x&&x.getComputedStyle?x.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);x=l.linenums;(x="true"===x||+x)||(x=(x=m.match(/\blinenums\b(?::(\d+))?/))?
-x[1]&&x[1].length?+x[1]:!0:!1);x&&L(d,x,u);M({j:n,h:d,m:x,l:u,a:null,i:null,c:null,g:null})}}}p<t.length?E.setTimeout(f,250):"function"===typeof a&&a()}for(var b=d||document.body,v=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],t=[],n=0;n<b.length;++n)for(var l=0,m=b[n].length;l<m;++l)t.push(b[n][l]);var b=null,c=Date;c.now||(c={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,
-e=/\bprettyprinted\b/,y=/pre|xmp/i,z=/^code$/i,q=/^(?:pre|code|xmp)$/i,g={};f()}},H=E.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()

docs/script/pretty-print.js

@@ -1,25 +0,0 @@
-(function(){
-  prettyPrint();
-  var lines = document.querySelectorAll('.prettyprint.linenums li[class^="L"]');
-  for (var i = 0; i < lines.length; i++) {
-    lines[i].id = 'lineNumber' + (i + 1);
-  }
-
-  var matched = location.hash.match(/errorLines=([\d,]+)/);
-  if (matched) {
-    var lines = matched[1].split(',');
-    for (var i = 0; i < lines.length; i++) {
-      var id = '#lineNumber' + lines[i];
-      var el = document.querySelector(id);
-      el.classList.add('error-line');
-    }
-    return;
-  }
-
-  if (location.hash) {
-    // ``[ ] . ' " @`` are not valid in DOM id. so must escape these.
-    var id = location.hash.replace(/([\[\].'"@$])/g, '\\$1');
-    var line = document.querySelector(id);
-    if (line) line.classList.add('active');
-  }
-})();

docs/script/search.js

@@ -1,117 +0,0 @@
-(function(){
-  var searchIndex = window.esdocSearchIndex;
-  var searchBox = document.querySelector('.search-box');
-  var input = document.querySelector('.search-input');
-  var result = document.querySelector('.search-result');
-  var selectedIndex = -1;
-  var prevText;
-
-  // active search box and focus when mouse enter on search box.
-  searchBox.addEventListener('mouseenter', function(){
-    searchBox.classList.add('active');
-    input.focus();
-  });
-
-  // search with text when key is upped.
-  input.addEventListener('keyup', function(ev){
-    var text = ev.target.value.toLowerCase();
-    if (!text) {
-      result.style.display = 'none';
-      result.innerHTML = '';
-      return;
-    }
-
-    if (text === prevText) return;
-    prevText = text;
-
-    var html = {class: [], method: [], member: [], function: [], variable: [], typedef: [], external: [], file: [], test: [], testFile: []};
-    var len = searchIndex.length;
-    var kind;
-    for (var i = 0; i < len; i++) {
-      var pair = searchIndex[i];
-      if (pair[0].indexOf(text) !== -1) {
-        kind = pair[3];
-        html[kind].push('<li><a href="' + pair[1] + '">' + pair[2] + '</a></li>');
-      }
-    }
-
-    var innerHTML = '';
-    for (kind in html) {
-      var list = html[kind];
-      if (!list.length) continue;
-      innerHTML += '<li class="search-separator">' + kind + '</li>\n' + list.join('\n');
-    }
-    result.innerHTML = innerHTML;
-    if (innerHTML) result.style.display = 'block';
-    selectedIndex = -1;
-  });
-
-  // down, up and enter key are pressed, select search result.
-  input.addEventListener('keydown', function(ev){
-    if (ev.keyCode === 40) {
-      // arrow down
-      var current = result.children[selectedIndex];
-      var selected = result.children[selectedIndex + 1];
-      if (selected && selected.classList.contains('search-separator')) {
-        var selected = result.children[selectedIndex + 2];
-        selectedIndex++;
-      }
-
-      if (selected) {
-        if (current) current.classList.remove('selected');
-        selectedIndex++;
-        selected.classList.add('selected');
-      }
-    } else if (ev.keyCode === 38) {
-      // arrow up
-      var current = result.children[selectedIndex];
-      var selected = result.children[selectedIndex - 1];
-      if (selected && selected.classList.contains('search-separator')) {
-        var selected = result.children[selectedIndex - 2];
-        selectedIndex--;
-      }
-
-      if (selected) {
-        if (current) current.classList.remove('selected');
-        selectedIndex--;
-        selected.classList.add('selected');
-      }
-    } else if (ev.keyCode === 13) {
-      // enter
-      var current = result.children[selectedIndex];
-      if (current) {
-        var link = current.querySelector('a');
-        if (link) location.href = link.href;
-      }
-    } else {
-      return;
-    }
-
-    ev.preventDefault();
-  });
-
-  // select search result when search result is mouse over.
-  result.addEventListener('mousemove', function(ev){
-    var current = result.children[selectedIndex];
-    if (current) current.classList.remove('selected');
-
-    var li = ev.target;
-    while (li) {
-      if (li.nodeName === 'LI') break;
-      li = li.parentElement;
-    }
-
-    if (li) {
-      selectedIndex = Array.prototype.indexOf.call(result.children, li);
-      li.classList.add('selected');
-    }
-  });
-
-  // clear search result when body is clicked.
-  document.body.addEventListener('click', function(ev){
-    selectedIndex = -1;
-    result.style.display = 'none';
-    result.innerHTML = '';
-  });
-
-})();

docs/script/search_index.js

@@ -1,800 +0,0 @@
-window.esdocSearchIndex = [
-  [
-    "simple-keyboard/src/demo/app.js~app",
-    "class/src/demo/App.js~App.html",
-    "<span>App</span> <span class=\"search-result-import-path\">simple-keyboard/src/demo/App.js</span>",
-    "class"
-  ],
-  [
-    "simple-keyboard/src/lib/services/keyboardlayout.js~keyboardlayout",
-    "class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html",
-    "<span>KeyboardLayout</span> <span class=\"search-result-import-path\">simple-keyboard/src/lib/services/KeyboardLayout.js</span>",
-    "class"
-  ],
-  [
-    "simple-keyboard/src/lib/services/physicalkeyboard.js~physicalkeyboard",
-    "class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html",
-    "<span>PhysicalKeyboard</span> <span class=\"search-result-import-path\">simple-keyboard/src/lib/services/PhysicalKeyboard.js</span>",
-    "class"
-  ],
-  [
-    "simple-keyboard/src/lib/components/keyboard.js~simplekeyboard",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html",
-    "<span>SimpleKeyboard</span> <span class=\"search-result-import-path\">simple-keyboard/src/lib/components/Keyboard.js</span>",
-    "class"
-  ],
-  [
-    "simple-keyboard/src/lib/tests/testutility.js~testutility",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html",
-    "<span>TestUtility</span> <span class=\"search-result-import-path\">simple-keyboard/src/lib/tests/TestUtility.js</span>",
-    "class"
-  ],
-  [
-    "simple-keyboard/src/lib/services/utilities.js~utilities",
-    "class/src/lib/services/Utilities.js~Utilities.html",
-    "<span>Utilities</span> <span class=\"search-result-import-path\">simple-keyboard/src/lib/services/Utilities.js</span>",
-    "class"
-  ],
-  [
-    "src/.external-ecmascript.js~array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array",
-    "src/.external-ecmascript.js~Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~arraybuffer",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer",
-    "src/.external-ecmascript.js~ArrayBuffer",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~boolean",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean",
-    "src/.external-ecmascript.js~Boolean",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~dataview",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView",
-    "src/.external-ecmascript.js~DataView",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~date",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date",
-    "src/.external-ecmascript.js~Date",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~error",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error",
-    "src/.external-ecmascript.js~Error",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~evalerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError",
-    "src/.external-ecmascript.js~EvalError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~float32array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array",
-    "src/.external-ecmascript.js~Float32Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~float64array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array",
-    "src/.external-ecmascript.js~Float64Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~function",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function",
-    "src/.external-ecmascript.js~Function",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~generator",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator",
-    "src/.external-ecmascript.js~Generator",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~generatorfunction",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction",
-    "src/.external-ecmascript.js~GeneratorFunction",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~infinity",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity",
-    "src/.external-ecmascript.js~Infinity",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~int16array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array",
-    "src/.external-ecmascript.js~Int16Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~int32array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array",
-    "src/.external-ecmascript.js~Int32Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~int8array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array",
-    "src/.external-ecmascript.js~Int8Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~internalerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError",
-    "src/.external-ecmascript.js~InternalError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~json",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON",
-    "src/.external-ecmascript.js~JSON",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~map",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map",
-    "src/.external-ecmascript.js~Map",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~nan",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN",
-    "src/.external-ecmascript.js~NaN",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~number",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number",
-    "src/.external-ecmascript.js~Number",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~object",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object",
-    "src/.external-ecmascript.js~Object",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~promise",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise",
-    "src/.external-ecmascript.js~Promise",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~proxy",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy",
-    "src/.external-ecmascript.js~Proxy",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~rangeerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError",
-    "src/.external-ecmascript.js~RangeError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~referenceerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError",
-    "src/.external-ecmascript.js~ReferenceError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~reflect",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect",
-    "src/.external-ecmascript.js~Reflect",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~regexp",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp",
-    "src/.external-ecmascript.js~RegExp",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~set",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set",
-    "src/.external-ecmascript.js~Set",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~string",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String",
-    "src/.external-ecmascript.js~String",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~symbol",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol",
-    "src/.external-ecmascript.js~Symbol",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~syntaxerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError",
-    "src/.external-ecmascript.js~SyntaxError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~typeerror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError",
-    "src/.external-ecmascript.js~TypeError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~urierror",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError",
-    "src/.external-ecmascript.js~URIError",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~uint16array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array",
-    "src/.external-ecmascript.js~Uint16Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~uint32array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array",
-    "src/.external-ecmascript.js~Uint32Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~uint8array",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array",
-    "src/.external-ecmascript.js~Uint8Array",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~uint8clampedarray",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray",
-    "src/.external-ecmascript.js~Uint8ClampedArray",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~weakmap",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap",
-    "src/.external-ecmascript.js~WeakMap",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~weakset",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet",
-    "src/.external-ecmascript.js~WeakSet",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~boolean",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean",
-    "src/.external-ecmascript.js~boolean",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~function",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function",
-    "src/.external-ecmascript.js~function",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~null",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null",
-    "src/.external-ecmascript.js~null",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~number",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number",
-    "src/.external-ecmascript.js~number",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~object",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object",
-    "src/.external-ecmascript.js~object",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~string",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String",
-    "src/.external-ecmascript.js~string",
-    "external"
-  ],
-  [
-    "src/.external-ecmascript.js~undefined",
-    "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined",
-    "src/.external-ecmascript.js~undefined",
-    "external"
-  ],
-  [
-    "src/demo/app.js",
-    "file/src/demo/App.js.html",
-    "src/demo/App.js",
-    "file"
-  ],
-  [
-    "src/demo/app.js~app#constructor",
-    "class/src/demo/App.js~App.html#instance-constructor-constructor",
-    "src/demo/App.js~App#constructor",
-    "method"
-  ],
-  [
-    "src/demo/app.js~app#handleshiftbutton",
-    "class/src/demo/App.js~App.html#instance-member-handleShiftButton",
-    "src/demo/App.js~App#handleShiftButton",
-    "member"
-  ],
-  [
-    "src/demo/app.js~app#keyboard",
-    "class/src/demo/App.js~App.html#instance-member-keyboard",
-    "src/demo/App.js~App#keyboard",
-    "member"
-  ],
-  [
-    "src/demo/app.js~app#layoutname",
-    "class/src/demo/App.js~App.html#instance-member-layoutName",
-    "src/demo/App.js~App#layoutName",
-    "member"
-  ],
-  [
-    "src/demo/app.js~app#onchange",
-    "class/src/demo/App.js~App.html#instance-member-onChange",
-    "src/demo/App.js~App#onChange",
-    "member"
-  ],
-  [
-    "src/demo/app.js~app#ondomloaded",
-    "class/src/demo/App.js~App.html#instance-member-onDOMLoaded",
-    "src/demo/App.js~App#onDOMLoaded",
-    "member"
-  ],
-  [
-    "src/demo/app.js~app#onkeypress",
-    "class/src/demo/App.js~App.html#instance-member-onKeyPress",
-    "src/demo/App.js~App#onKeyPress",
-    "member"
-  ],
-  [
-    "src/demo/index.js",
-    "file/src/demo/index.js.html",
-    "src/demo/index.js",
-    "file"
-  ],
-  [
-    "src/lib/components/keyboard.js",
-    "file/src/lib/components/Keyboard.js.html",
-    "src/lib/components/Keyboard.js",
-    "file"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#addbuttontheme",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-addButtonTheme",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#addButtonTheme",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#buttonelements",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-buttonElements",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#buttonElements",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#careteventhandler",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-caretEventHandler",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#caretEventHandler",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#caretposition",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-caretPosition",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#caretPosition",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#clear",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-clear",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#clear",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#clearinput",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-clearInput",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#clearInput",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#constructor",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-constructor-constructor",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#constructor",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#dispatch",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-dispatch",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#dispatch",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#getbuttonelement",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-getButtonElement",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#getButtonElement",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#getinput",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-getInput",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#getInput",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#getmoduleprop",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-getModuleProp",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#getModuleProp",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#getmoduleslist",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-getModulesList",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#getModulesList",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#handlebuttonclicked",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-handleButtonClicked",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#handleButtonClicked",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#handlebuttonhold",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-handleButtonHold",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#handleButtonHold",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#handlebuttonmousedown",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-handleButtonMouseDown",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#handleButtonMouseDown",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#handlebuttonmouseup",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-handleButtonMouseUp",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#handleButtonMouseUp",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#handlecaret",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-handleCaret",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#handleCaret",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#holdinteractiontimeout",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-holdInteractionTimeout",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#holdInteractionTimeout",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#holdtimeout",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-holdTimeout",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#holdTimeout",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#initialized",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-initialized",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#initialized",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#input",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-input",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#input",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#ismousehold",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-isMouseHold",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#isMouseHold",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#keyboarddom",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-keyboardDOM",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#keyboardDOM",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#keyboarddomclass",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-keyboardDOMClass",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#keyboardDOMClass",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#keyboardpluginclasses",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-keyboardPluginClasses",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#keyboardPluginClasses",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#loadmodules",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-loadModules",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#loadModules",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#modules",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-modules",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#modules",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#oninit",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-onInit",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#onInit",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#onmodulesloaded",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-onModulesLoaded",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#onModulesLoaded",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#onrender",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-onRender",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#onRender",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#options",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-options",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#options",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#physicalkeyboardinterface",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-physicalKeyboardInterface",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#physicalKeyboardInterface",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#registermodule",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-registerModule",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#registerModule",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#removebuttontheme",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-removeButtonTheme",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#removeButtonTheme",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#render",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-render",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#render",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#replaceinput",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-replaceInput",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#replaceInput",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#setinput",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-setInput",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#setInput",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#setoptions",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-setOptions",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#setOptions",
-    "member"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#syncinstanceinputs",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-method-syncInstanceInputs",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#syncInstanceInputs",
-    "method"
-  ],
-  [
-    "src/lib/components/keyboard.js~simplekeyboard#utilities",
-    "class/src/lib/components/Keyboard.js~SimpleKeyboard.html#instance-member-utilities",
-    "src/lib/components/Keyboard.js~SimpleKeyboard#utilities",
-    "member"
-  ],
-  [
-    "src/lib/index.js",
-    "file/src/lib/index.js.html",
-    "src/lib/index.js",
-    "file"
-  ],
-  [
-    "src/lib/services/keyboardlayout.js",
-    "file/src/lib/services/KeyboardLayout.js.html",
-    "src/lib/services/KeyboardLayout.js",
-    "file"
-  ],
-  [
-    "src/lib/services/keyboardlayout.js~keyboardlayout.getdefaultlayout",
-    "class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html#static-method-getDefaultLayout",
-    "src/lib/services/KeyboardLayout.js~KeyboardLayout.getDefaultLayout",
-    "method"
-  ],
-  [
-    "src/lib/services/physicalkeyboard.js",
-    "file/src/lib/services/PhysicalKeyboard.js.html",
-    "src/lib/services/PhysicalKeyboard.js",
-    "file"
-  ],
-  [
-    "src/lib/services/physicalkeyboard.js~physicalkeyboard#constructor",
-    "class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-constructor-constructor",
-    "src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard#constructor",
-    "method"
-  ],
-  [
-    "src/lib/services/physicalkeyboard.js~physicalkeyboard#getsimplekeyboardlayoutkey",
-    "class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-method-getSimpleKeyboardLayoutKey",
-    "src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard#getSimpleKeyboardLayoutKey",
-    "method"
-  ],
-  [
-    "src/lib/services/physicalkeyboard.js~physicalkeyboard#initkeyboardlistener",
-    "class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-method-initKeyboardListener",
-    "src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard#initKeyboardListener",
-    "method"
-  ],
-  [
-    "src/lib/services/physicalkeyboard.js~physicalkeyboard#simplekeyboardinstance",
-    "class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html#instance-member-simpleKeyboardInstance",
-    "src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard#simpleKeyboardInstance",
-    "member"
-  ],
-  [
-    "src/lib/services/utilities.js",
-    "file/src/lib/services/Utilities.js.html",
-    "src/lib/services/Utilities.js",
-    "file"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#addstringat",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-addStringAt",
-    "src/lib/services/Utilities.js~Utilities#addStringAt",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#camelcase",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-camelCase",
-    "src/lib/services/Utilities.js~Utilities#camelCase",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#constructor",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-constructor-constructor",
-    "src/lib/services/Utilities.js~Utilities#constructor",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#countinarray",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-countInArray",
-    "src/lib/services/Utilities.js~Utilities#countInArray",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#getbuttonclass",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-getButtonClass",
-    "src/lib/services/Utilities.js~Utilities#getButtonClass",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#getbuttondisplayname",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-getButtonDisplayName",
-    "src/lib/services/Utilities.js~Utilities#getButtonDisplayName",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#getdefaultdiplay",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-getDefaultDiplay",
-    "src/lib/services/Utilities.js~Utilities#getDefaultDiplay",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#getupdatedinput",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-getUpdatedInput",
-    "src/lib/services/Utilities.js~Utilities#getUpdatedInput",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#handlemaxlength",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-handleMaxLength",
-    "src/lib/services/Utilities.js~Utilities#handleMaxLength",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#ismaxlengthreached",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-isMaxLengthReached",
-    "src/lib/services/Utilities.js~Utilities#isMaxLengthReached",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#maxlengthreached",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-member-maxLengthReached",
-    "src/lib/services/Utilities.js~Utilities#maxLengthReached",
-    "member"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#removeat",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-removeAt",
-    "src/lib/services/Utilities.js~Utilities#removeAt",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#simplekeyboardinstance",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-member-simpleKeyboardInstance",
-    "src/lib/services/Utilities.js~Utilities#simpleKeyboardInstance",
-    "member"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#updatecaretpos",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPos",
-    "src/lib/services/Utilities.js~Utilities#updateCaretPos",
-    "method"
-  ],
-  [
-    "src/lib/services/utilities.js~utilities#updatecaretposaction",
-    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPosAction",
-    "src/lib/services/Utilities.js~Utilities#updateCaretPosAction",
-    "method"
-  ],
-  [
-    "src/lib/tests/testutility.js",
-    "file/src/lib/tests/TestUtility.js.html",
-    "src/lib/tests/TestUtility.js",
-    "file"
-  ],
-  [
-    "src/lib/tests/testutility.js~testutility#clear",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-clear",
-    "src/lib/tests/TestUtility.js~TestUtility#clear",
-    "member"
-  ],
-  [
-    "src/lib/tests/testutility.js~testutility#iteratebuttons",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-iterateButtons",
-    "src/lib/tests/TestUtility.js~TestUtility#iterateButtons",
-    "member"
-  ],
-  [
-    "src/lib/tests/testutility.js~testutility#setdom",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-setDOM",
-    "src/lib/tests/TestUtility.js~TestUtility#setDOM",
-    "member"
-  ],
-  [
-    "src/lib/tests/testutility.js~testutility#testlayoutfctbuttons",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-testLayoutFctButtons",
-    "src/lib/tests/TestUtility.js~TestUtility#testLayoutFctButtons",
-    "member"
-  ],
-  [
-    "src/lib/tests/testutility.js~testutility#testlayoutstdbuttons",
-    "class/src/lib/tests/TestUtility.js~TestUtility.html#instance-member-testLayoutStdButtons",
-    "src/lib/tests/TestUtility.js~TestUtility#testLayoutStdButtons",
-    "member"
-  ]
-]

docs/script/test-summary.js

@@ -1,54 +0,0 @@
-(function(){
-  function toggle(ev) {
-    var button = ev.target;
-    var parent = ev.target.parentElement;
-    while(parent) {
-      if (parent.tagName === 'TR' && parent.classList.contains('test-interface')) break;
-      parent = parent.parentElement;
-    }
-
-    if (!parent) return;
-
-    var direction;
-    if (button.classList.contains('opened')) {
-      button.classList.remove('opened');
-      button.classList.add('closed');
-      direction = 'closed';
-    } else {
-      button.classList.remove('closed');
-      button.classList.add('opened');
-      direction = 'opened';
-    }
-
-    var targetDepth = parseInt(parent.dataset.testDepth, 10) + 1;
-    var nextElement = parent.nextElementSibling;
-    while (nextElement) {
-      var depth = parseInt(nextElement.dataset.testDepth, 10);
-      if (depth >= targetDepth) {
-        if (direction === 'opened') {
-          if (depth === targetDepth)  nextElement.style.display = '';
-        } else if (direction === 'closed') {
-          nextElement.style.display = 'none';
-          var innerButton = nextElement.querySelector('.toggle');
-          if (innerButton && innerButton.classList.contains('opened')) {
-            innerButton.classList.remove('opened');
-            innerButton.classList.add('closed');
-          }
-        }
-      } else {
-        break;
-      }
-      nextElement = nextElement.nextElementSibling;
-    }
-  }
-
-  var buttons = document.querySelectorAll('.test-summary tr.test-interface .toggle');
-  for (var i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener('click', toggle);
-  }
-
-  var topDescribes = document.querySelectorAll('.test-summary tr[data-test-depth="0"]');
-  for (var i = 0; i < topDescribes.length; i++) {
-    topDescribes[i].style.display = '';
-  }
-})();

docs/source.html

@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <base data-ice="baseUrl" href="">
-  <title data-ice="title">Source | simple-keyboard</title>
-  <link type="text/css" rel="stylesheet" href="css/style.css">
-  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
-  <script src="script/prettify/prettify.js"></script>
-  <script src="script/manual.js"></script>
-<meta name="description" content="On-screen Javascript Virtual Keyboard"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="simple-keyboard"><meta property="twitter:description" content="On-screen Javascript Virtual Keyboard"></head>
-<body class="layout-container" data-ice="rootContainer">
-
-<header>
-  <a href="./">Home</a>
-  
-  <a href="identifiers.html">Reference</a>
-  <a href="source.html">Source</a>
-  
-  <div class="search-box">
-  <span>
-    <img src="./image/search.png">
-    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
-  </span>
-    <ul class="search-result"></ul>
-  </div>
-<a style="position:relative; top:3px;" href="https://github.com/hodgef/simple-keyboard"><img width="20px" src="./image/github.png"></a></header>
-
-<nav class="navigation" data-ice="nav"><div>
-  <ul>
-    
-  <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#demo">demo</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/demo/App.js~App.html">App</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-components">lib/components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-services">lib/services</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></span></li>
-<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></span></li>
-<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#lib-tests">lib/tests</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></span></li>
-</ul>
-</div>
-</nav>
-
-<div class="content" data-ice="content"><h1>Source <img data-ice="coverageBadge" src="./badge.svg"><span data-ice="totalCoverageCount" class="total-coverage-count">78/78</span></h1>
-
-<table class="files-summary" data-ice="files" data-use-coverage="true">
-  <thead>
-    <tr>
-      <td>File</td>
-      <td>Identifier</td>
-      <td class="coverage">Document</td>
-      <td style="display: none;">Size</td>
-      <td style="display: none;">Lines</td>
-      <td style="display: none;">Updated</td>
-    </tr>
-  </thead>
-  <tbody>
-    
-  <tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/demo/App.js.html">src/demo/App.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/demo/App.js~App.html">App</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">8/8</span></td>
-      <td style="display: none;" data-ice="size">1918 byte</td>
-      <td style="display: none;" data-ice="lines">84</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 01:59:07 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/demo/index.js.html">src/demo/index.js</a></span></td>
-      <td data-ice="identifier" class="identifiers">-</td>
-      <td class="coverage"><span data-ice="coverage">-</span></td>
-      <td style="display: none;" data-ice="size">70 byte</td>
-      <td style="display: none;" data-ice="lines">5</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/components/Keyboard.js.html">src/lib/components/Keyboard.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">41/41</span></td>
-      <td style="display: none;" data-ice="size">26391 byte</td>
-      <td style="display: none;" data-ice="lines">815</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 01:52:55 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/index.js.html">src/lib/index.js</a></span></td>
-      <td data-ice="identifier" class="identifiers">-</td>
-      <td class="coverage"><span data-ice="coverage">-</span></td>
-      <td style="display: none;" data-ice="size">85 byte</td>
-      <td style="display: none;" data-ice="lines">2</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/services/KeyboardLayout.js.html">src/lib/services/KeyboardLayout.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/services/KeyboardLayout.js~KeyboardLayout.html">KeyboardLayout</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">2/2</span></td>
-      <td style="display: none;" data-ice="size">746 byte</td>
-      <td style="display: none;" data-ice="lines">28</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html">src/lib/services/PhysicalKeyboard.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/services/PhysicalKeyboard.js~PhysicalKeyboard.html">PhysicalKeyboard</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">5/5</span></td>
-      <td style="display: none;" data-ice="size">2908 byte</td>
-      <td style="display: none;" data-ice="lines">96</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/services/Utilities.js.html">src/lib/services/Utilities.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">16/16</span></td>
-      <td style="display: none;" data-ice="size">11708 byte</td>
-      <td style="display: none;" data-ice="lines">373</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 01:55:18 (UTC)</td>
-    </tr>
-<tr data-ice="file">
-      <td data-ice="filePath"><span><a href="file/src/lib/tests/TestUtility.js.html">src/lib/tests/TestUtility.js</a></span></td>
-      <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/tests/TestUtility.js~TestUtility.html">TestUtility</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">6/6</span></td>
-      <td style="display: none;" data-ice="size">2830 byte</td>
-      <td style="display: none;" data-ice="lines">106</td>
-      <td style="display: none;" data-ice="updated">2018-11-06 21:41:47 (UTC)</td>
-    </tr>
-</tbody>
-</table>
-</div>
-
-<footer class="footer">
-  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
-</footer>
-
-<script src="script/search_index.js"></script>
-<script src="script/search.js"></script>
-<script src="script/pretty-print.js"></script>
-<script src="script/inherited-summary.js"></script>
-<script src="script/test-summary.js"></script>
-<script src="script/inner-link.js"></script>
-<script src="script/patch-for-local.js"></script>
-</body>
-</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.20.0",
+  "version": "2.25.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -9,9 +9,9 @@
     "build": "node scripts/build.js && node scripts/buildUnminified.js",
     "demo": "node scripts/demo.js",
     "test": "node scripts/test.js",
+    "coverage": "node scripts/test.js --coverage --watchAll=false",
     "postinstall": "node bin/postinstall",
-    "prepare": "npm run build",
-    "docs": "esdoc"
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -40,65 +40,66 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
-    "@svgr/webpack": "4.1.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "babel-loader": "8.0.5",
-    "babel-plugin-named-asset-import": "^0.3.1",
-    "babel-preset-react-app": "^7.0.2",
-    "bfj": "6.1.1",
+    "@babel/runtime": "7.5.4",
+    "@svgr/webpack": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "1.13.0",
+    "@typescript-eslint/parser": "1.13.0",
+    "babel-eslint": "10.0.2",
+    "babel-jest": "24.8.0",
+    "babel-loader": "8.0.6",
+    "babel-plugin-named-asset-import": "^0.3.2",
+    "babel-preset-react-app": "^9.0.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "chalk": "2.4.2",
-    "copy-webpack-plugin": "^5.0.0",
-    "css-loader": "2.1.1",
-    "dotenv": "6.2.0",
-    "dotenv-expand": "4.2.0",
-    "esdoc": "^1.1.0",
-    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
-    "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "5.15.1",
-    "eslint-config-react-app": "^3.0.8",
-    "eslint-loader": "2.1.2",
-    "eslint-plugin-flowtype": "3.4.2",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.12.4",
-    "file-loader": "3.0.1",
-    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.5",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "3.2.0",
+    "dotenv": "8.0.0",
+    "dotenv-expand": "5.1.0",
+    "eslint": "^5.16.0",
+    "eslint-config-react-app": "^4.0.1",
+    "eslint-loader": "2.2.1",
+    "eslint-plugin-flowtype": "3.13.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-hooks": "^1.5.0",
+    "file-loader": "4.2.0",
+    "fs-extra": "8.1.0",
+    "html-webpack-plugin": "4.0.0-beta.8",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.2",
-    "jest-resolve": "23.6.0",
-    "mini-css-extract-plugin": "0.5.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.4.1",
+    "is-wsl": "^2.0.0",
+    "jest": "24.8.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.8.0",
+    "jest-watch-typeahead": "0.3.1",
+    "mini-css-extract-plugin": "0.8.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.5.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.6.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "prettier-webpack-plugin": "^1.2.0",
-    "react": "^16.8.4",
-    "react-app-polyfill": "^0.2.2",
-    "react-dev-utils": "^7.0.5",
-    "react-dom": "^16.8.4",
-    "resolve": "1.10.0",
-    "sass-loader": "7.1.0",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.2.3",
+    "react": "^16.8.6",
+    "react-app-polyfill": "^1.0.1",
+    "react-dev-utils": "^9.0.1",
+    "react-dom": "^16.8.6",
+    "resolve": "1.12.0",
+    "sass-loader": "7.2.0",
+    "semver": "6.3.0",
+    "style-loader": "1.0.0",
+    "terser-webpack-plugin": "1.4.1",
     "uglifyjs-webpack-plugin": "^2.1.2",
-    "url-loader": "1.1.2",
-    "webpack": "4.29.6",
-    "webpack-dev-server": "3.2.1",
+    "url-loader": "2.1.0",
+    "webpack": "4.39.1",
+    "webpack-dev-server": "3.8.0",
     "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "4.1.0"
+    "workbox-webpack-plugin": "4.3.1"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -109,14 +110,24 @@
       }
     }
   },
-  "browserslist": [
-    ">0.2%",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/index.js",
+      "!src/utils/**",
       "!src/**/*.d.ts",
       "!**/tests/**"
     ],
@@ -124,12 +135,11 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
+    "setupFilesAfterEnv": [],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
+      "<rootDir>/src/**/tests/**/*.{js,jsx,ts,tsx}"
     ],
-    "testEnvironment": "jsdom",
-    "testURL": "http://localhost",
+    "testEnvironment": "jest-environment-jsdom-fourteen",
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
@@ -139,6 +149,7 @@
       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
       "^.+\\.module\\.(css|sass|scss)$"
     ],
+    "modulePaths": [],
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
@@ -154,6 +165,10 @@
       "web.jsx",
       "jsx",
       "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
     ]
   },
   "babel": {
@@ -163,7 +178,10 @@
     ],
     "plugins": [
       [
-        "@babel/plugin-proposal-class-properties"
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
       ]
     ]
   }

public/index.html

@@ -1,24 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <title>simple-keyboard</title>
     <style>
       /**
@@ -35,20 +23,6 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root">
-      <div class="simple-keyboard"></div>
-    </div>
-    
-
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div id="root"></div>
   </body>
 </html>

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

scripts/build.js

@@ -16,11 +16,10 @@ require('../config/env');
 
 
 const path = require('path');
-const chalk = require('chalk');
+const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
-const bfj = require('bfj');
-const config = require('../config/webpack.config.prod');
+const configFactory = require('../config/webpack.config');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -44,9 +43,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
-// Process CLI arguments
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+// Generate configuration
+const config = configFactory('production');
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
@@ -122,9 +120,21 @@ checkBrowsers(paths.appPath, isInteractive)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
+  // We used to support resolving modules according to `NODE_PATH`.
+  // This now has been deprecated in favor of jsconfig/tsconfig.json
+  // This lets you use absolute paths in imports inside large monorepos:
+  if (process.env.NODE_PATH) {
+    console.log(
+      chalk.yellow(
+        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+      )
+    );
+    console.log();
+  }
+
   console.log('Creating an optimized production build...');
 
-  let compiler = webpack(config);
+  const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;
@@ -164,19 +174,11 @@ function build(previousFileSizes) {
         return reject(new Error(messages.warnings.join('\n\n')));
       }
 
-      const resolveArgs = {
+      return resolve({
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      };
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
+      });
     });
   });
 }

scripts/buildUnminified.js

@@ -16,11 +16,10 @@ require('../config/env');
 
 
 const path = require('path');
-const chalk = require('chalk');
+const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
-const bfj = require('bfj');
-const config = require('../config/webpack.config.unminified');
+const configFactory = require('../config/webpack.config.unminified');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -44,9 +43,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
-// Process CLI arguments
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+// Generate configuration
+const config = configFactory('production');
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
@@ -123,8 +121,19 @@ checkBrowsers(paths.appPath, isInteractive)
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
   console.log('Creating a non-minified production build...');
+  // We used to support resolving modules according to `NODE_PATH`.
+  // This now has been deprecated in favor of jsconfig/tsconfig.json
+  // This lets you use absolute paths in imports inside large monorepos:
+  if (process.env.NODE_PATH) {
+    console.log(
+      chalk.yellow(
+        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+      )
+    );
+    console.log();
+  }
 
-  let compiler = webpack(config);
+  const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;
@@ -164,19 +173,11 @@ function build(previousFileSizes) {
         return reject(new Error(messages.warnings.join('\n\n')));
       }
 
-      const resolveArgs = {
+      return resolve({
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      };
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
+      });
     });
   });
 }

scripts/demo.js

@@ -16,11 +16,10 @@ require('../config/env');
 
 
 const path = require('path');
-const chalk = require('chalk');
+const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
-const bfj = require('bfj');
-const config = require('../config/webpack.config.demo');
+const configFactory = require('../config/webpack.config.demo');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -44,9 +43,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appDemoIndexJs])) {
   process.exit(1);
 }
 
-// Process CLI arguments
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
+// Generate configuration
+const config = configFactory('production');
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
@@ -122,9 +120,21 @@ checkBrowsers(paths.appPath, isInteractive)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
+  // We used to support resolving modules according to `NODE_PATH`.
+  // This now has been deprecated in favor of jsconfig/tsconfig.json
+  // This lets you use absolute paths in imports inside large monorepos:
+  if (process.env.NODE_PATH) {
+    console.log(
+      chalk.yellow(
+        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+      )
+    );
+    console.log();
+  }
+
   console.log('Creating an optimized production build...');
 
-  let compiler = webpack(config);
+  const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;
@@ -164,19 +174,11 @@ function build(previousFileSizes) {
         return reject(new Error(messages.warnings.join('\n\n')));
       }
 
-      const resolveArgs = {
+      return resolve({
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      };
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appDemo + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
+      });
     });
   });
 }

scripts/start.js

@@ -16,7 +16,7 @@ require('../config/env');
 
 
 const fs = require('fs');
-const chalk = require('chalk');
+const chalk = require('react-dev-utils/chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const clearConsole = require('react-dev-utils/clearConsole');
@@ -29,7 +29,7 @@ const {
 } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
 const paths = require('../config/paths');
-const config = require('../config/webpack.config.dev');
+const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -56,12 +56,12 @@ if (process.env.HOST) {
     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
   );
   console.log(
-    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
+    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
   );
   console.log();
 }
 
-// We require that you explictly set browsers and do not fall back to
+// We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 checkBrowsers(paths.appPath, isInteractive)
@@ -77,11 +77,27 @@ checkBrowsers(paths.appPath, isInteractive)
     }
     const args = process.argv;
     const testMode = args[2] === "--testMode";
+    const config = configFactory('development');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
     const urls = prepareUrls(protocol, HOST, port);
+    const devSocket = {
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler({
+      appName,
+      config,
+      devSocket,
+      urls,
+      useYarn,
+      useTypeScript,
+      webpack,
+    });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
@@ -99,6 +115,19 @@ checkBrowsers(paths.appPath, isInteractive)
       if (isInteractive) {
         clearConsole();
       }
+
+      // We used to support resolving modules according to `NODE_PATH`.
+      // This now has been deprecated in favor of jsconfig/tsconfig.json
+      // This lets you use absolute paths in imports inside large monorepos:
+      if (process.env.NODE_PATH) {
+        console.log(
+          chalk.yellow(
+            'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+          )
+        );
+        console.log();
+      }
+
       console.log(chalk.cyan('Starting the development server...\n'));
       openBrowser(urls.localUrlForBrowser);
 
@@ -106,7 +135,7 @@ checkBrowsers(paths.appPath, isInteractive)
        * Handle testMode
        */
       if(testMode){
-        compiler.plugin('done', (stats) => {
+        compiler.hooks.done.tap('done', (stats) => {
           stats = stats.toJson();
       
           if (stats.errors && stats.errors.length > 0) {

scripts/test.js

@@ -38,10 +38,9 @@ function isInMercurialRepository() {
   }
 }
 
-// Watch unless on CI, in coverage mode, or explicitly running all tests
+// Watch unless on CI or explicitly running all tests
 if (
   !process.env.CI &&
-  argv.indexOf('--coverage') === -1 &&
   argv.indexOf('--watchAll') === -1
 ) {
   // https://github.com/facebook/create-react-app/issues/5210

src/demo/App.js

@@ -1,85 +0,0 @@
-import Keyboard from '../lib';
-import './css/App.css';
-
-/**
- * simple-keyboard demo
- */
-class App {
-  /**
-   * Instantiates the demo class
-   */
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-
-    /**
-     * Default input name
-     * @type {string}
-     */
-    this.layoutName = "default";
-  }
-
-  /**
-   * Executed when the DOM is ready
-   */
-  onDOMLoaded = () => {
-    /**
-     * Creates a new simple-keyboard instance
-     */
-    this.keyboard = new Keyboard({
-      debug: true,
-      layoutName: this.layoutName,
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button),
-      newLineOnEnter: true,
-      physicalKeyboardHighlight: true
-    });
-  
-    /**
-     * Adding preview (demo only)
-     */
-    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
-    <div class="simple-keyboard-preview">
-      <textarea class="input"></textarea>
-    </div>
-    `);
-  
-    document.querySelector('.input').addEventListener('input', (event) => {
-      this.keyboard.setInput(event.target.value);
-    });
-  }
-
-  /**
-   * Handles shift functionality
-   */
-  handleShiftButton = () => {
-    let layoutName = this.layoutName;
-    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
-  
-    this.keyboard.setOptions({
-      layoutName: shiftToggle
-    });
-  }
-
-  /**
-   * Called when simple-keyboard input has changed
-   */
-  onChange = input => {
-    document.querySelector('.input').value = input;
-  }
-
-  /**
-   * Called when a simple-keyboard key is pressed
-   */
-  onKeyPress = button => {
-    console.log("Button pressed", button);
-  
-      /**
-       * Shift functionality
-       */
-      if(button === "{lock}" || button === "{shift}")
-        this.handleShiftButton();
-  }
-
-}
-
-export default App;

src/demo/BasicDemo.js

@@ -0,0 +1,55 @@
+import Keyboard from "../lib";
+import "./css/BasicDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button)
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/ButtonThemeDemo.js

@@ -0,0 +1,73 @@
+import Keyboard from "../lib";
+import "./css/ButtonThemeDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      theme: "hg-theme-default my-theme",
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      buttonTheme: [
+        {
+          class: "my-button",
+          buttons: "{enter} {bksp} q Q"
+        },
+        {
+          class: "my-button-outline",
+          buttons: "q Q b B"
+        }
+      ],
+      buttonAttributes: [
+        {
+          attribute: "aria-label",
+          value: "bee",
+          buttons: "b B"
+        }
+      ]
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/FullKeyboardDemo.js

@@ -0,0 +1,157 @@
+import Keyboard from "../lib";
+import "./css/FullKeyboardDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboardContainer">
+      <div class="simple-keyboard-main"></div>
+
+      <div class="controlArrows">
+        <div class="simple-keyboard-control"></div>
+        <div class="simple-keyboard-arrows"></div>
+      </div>
+
+      <div class="numPad">
+        <div class="simple-keyboard-numpad"></div>
+        <div class="simple-keyboard-numpadEnd"></div>
+      </div>
+    </div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    let commonKeyboardOptions = {
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      theme: "simple-keyboard hg-theme-default hg-layout-default",
+      physicalKeyboardHighlight: true,
+      syncInstanceInputs: true,
+      mergeDisplay: true,
+      debug: true
+    };
+
+    this.keyboard = new Keyboard(".simple-keyboard-main", {
+      ...commonKeyboardOptions,
+      /**
+       * Layout by:
+       * Sterling Butters (https://github.com/SterlingButters)
+       */
+      layout: {
+        default: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
+          "{tab} q w e r t y u i o p [ ] \\",
+          "{capslock} a s d f g h j k l ; ' {enter}",
+          "{shiftleft} z x c v b n m , . / {shiftright}",
+          "{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
+        ],
+        shift: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "~ ! @ # $ % ^ & * ( ) _ + {backspace}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{capslock} A S D F G H J K L : " {enter}',
+          "{shiftleft} Z X C V B N M < > ? {shiftright}",
+          "{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
+        ]
+      },
+      display: {
+        "{escape}": "esc ⎋",
+        "{tab}": "tab ⇥",
+        "{backspace}": "backspace ⌫",
+        "{enter}": "enter ↵",
+        "{capslock}": "caps lock ⇪",
+        "{shiftleft}": "shift ⇧",
+        "{shiftright}": "shift ⇧",
+        "{controlleft}": "ctrl ⌃",
+        "{controlright}": "ctrl ⌃",
+        "{altleft}": "alt ⌥",
+        "{altright}": "alt ⌥",
+        "{metaleft}": "cmd ⌘",
+        "{metaright}": "cmd ⌘"
+      }
+    });
+
+    this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: [
+          "{prtscr} {scrolllock} {pause}",
+          "{insert} {home} {pageup}",
+          "{delete} {end} {pagedown}"
+        ]
+      }
+    });
+
+    this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
+      }
+    });
+
+    this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: [
+          "{numlock} {numpaddivide} {numpadmultiply}",
+          "{numpad7} {numpad8} {numpad9}",
+          "{numpad4} {numpad5} {numpad6}",
+          "{numpad1} {numpad2} {numpad3}",
+          "{numpad0} {numpaddecimal}"
+        ]
+      }
+    });
+
+    this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
+      }
+    });
+
+    document.querySelector(".input").addEventListener("input", event => {
+      let input = document.querySelector(".input").value;
+      this.keyboard.setInput(input);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    this.keyboard.setInput(input);
+
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (
+      button === "{shift}" ||
+      button === "{shiftleft}" ||
+      button === "{shiftright}" ||
+      button === "{capslock}"
+    )
+      this.handleShift();
+  }
+
+  handleShift() {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/App.css

@@ -1,32 +0,0 @@
-#root {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  max-width: 850px;
-  margin: 0 auto;
-  padding-top: 20px;
-}
-
-#root .simple-keyboard-preview {
-  background: rgba(0,0,0,0.8);
-  border: 20px solid rgba(0,0,0,0.1);
-  height: 200px;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-#root .input {
-  color: rgba(255,255,255,0.9);
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: monospace;
-  width: 100%;
-  height: 100%;
-  font-size: 18px;
-}
-
-.simple-keyboard.hg-layout-custom {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}

src/demo/css/BasicDemo.css

@@ -0,0 +1,12 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}

src/demo/css/ButtonThemeDemo.css

@@ -0,0 +1,26 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button {
+  background: blue;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button[aria-label] {
+  background: black;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button-outline {
+  border: 2px solid red;
+}

src/demo/css/FullKeyboardDemo.css

@@ -0,0 +1,132 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.keyboardContainer {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  width: 1024px;
+  border-radius: 5px;
+}
+
+.simple-keyboard.hg-theme-default {
+  display: inline-block;
+}
+
+.simple-keyboard-main.simple-keyboard {
+  width: 640px;
+  min-width: 640px;
+  background: none;
+}
+
+.simple-keyboard-main.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-arrows.simple-keyboard {
+  align-self: flex-end;
+  background: none;
+}
+
+.simple-keyboard .hg-button.selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.simple-keyboard .hg-button.emptySpace {
+  pointer-events: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.simple-keyboard-arrows .hg-row {
+  justify-content: center;
+}
+
+.simple-keyboard-arrows .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.controlArrows {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column;
+}
+
+.simple-keyboard-control.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-control.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-control .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.numPad {
+  display: flex;
+  align-items: flex-end;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  width: 160px;
+}
+
+.simple-keyboard-numpad.simple-keyboard .hg-button {
+  width: 50px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard {
+  width: 50px;
+  background: none;
+  margin: 0;
+  padding: 5px 5px 5px 0;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.simple-keyboard-numpadEnd .hg-button.hg-standardBtn.hg-button-plus {
+  height: 85px;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button.hg-button-enter {
+  height: 85px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.hg-button.hg-functionBtn.hg-button-space {
+  width: 350px;
+}

src/demo/css/index.css

@@ -0,0 +1,3 @@
+#root {
+  padding: 0px 40px;
+}

src/demo/index.js

@@ -1,6 +1,18 @@
-import App from './App';
+import "./css/index.css";
 
 /**
- * Initializing demo
+ * Demos
  */
-new App();
+import BasicDemo from "./BasicDemo";
+//import FullKeyboardDemo from "./FullKeyboardDemo";
+//import ButtonThemeDemo from "./ButtonThemeDemo";
+
+/**
+ * Selected demo
+ */
+const SELECTED_DEMO = BasicDemo;
+
+/**
+ * Bootstrap
+ */
+new SELECTED_DEMO();

src/demo/tests/BasicDemo.test.js

@@ -1,20 +1,18 @@
-import TestUtility from '../../lib/tests/TestUtility';
-import Index from '../index';
-import App from '../App';
+import TestUtility from '../../utils/TestUtility';
+import BasicDemo from '../BasicDemo';
 
 let testUtil = new TestUtility();
 
 it('Demo will load', () => {
   testUtil.setDOM();
 
-  let demo = new App();
+  let demo = new BasicDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
   testUtil.setDOM();
 
-  let demo = new App();
-  demo.onDOMLoaded();
+  let demo = new BasicDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
@@ -22,8 +20,7 @@ it('Demo onDOMLoaded will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new App();
-  demo.onDOMLoaded();
+  let demo = new BasicDemo();
 
   demo.onChange("test");
   
@@ -33,8 +30,7 @@ it('Demo onChange will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new App();
-  demo.onDOMLoaded();
+  let demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -44,8 +40,7 @@ it('Demo onChange will work', () => {
 it('Demo input change will work', () => {
   testUtil.setDOM();
 
-  let demo = new App();
-  demo.onDOMLoaded();
+  let demo = new BasicDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -56,8 +51,7 @@ it('Demo input change will work', () => {
 it('Demo handleShiftButton will work', () => {
   testUtil.setDOM();
 
-  let demo = new App();
-  demo.onDOMLoaded();
+  let demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");

src/demo/tests/ButtonThemeDemo.test.js

@@ -0,0 +1,77 @@
+import TestUtility from '../../utils/TestUtility';
+import ButtonThemeDemo from '../ButtonThemeDemo';
+
+let testUtil = new TestUtility();
+
+it('Demo will load', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('Demo buttons will have proper attributes and classes', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  let buttonDOM = demo.keyboard.getButtonElement("b");
+
+  console.log("buttonDOM", buttonDOM.outerHTML);
+
+  let hasAttribute = buttonDOM.hasAttribute("aria-label");
+  expect(hasAttribute).toBeTruthy();
+
+  let hasClass = buttonDOM.classList.contains("my-button-outline");
+  expect(hasClass).toBeTruthy();
+});

src/demo/tests/FullKeyboardDemo.test.js

@@ -0,0 +1,62 @@
+import TestUtility from '../../utils/TestUtility';
+import FullKeyboardDemo from '../FullKeyboardDemo';
+
+let testUtil = new TestUtility();
+
+it('Demo will load', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+  expect(demo.keyboardNumPad.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  testUtil.setDOM();
+
+  let demo = new FullKeyboardDemo();
+
+  demo.keyboard.getButtonElement("{shiftleft}").onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shiftright}").onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});

src/lib/@types/index.d.ts

@@ -1,7 +1,8 @@
 declare module 'simple-keyboard' {
   interface KeyboardLayoutObject {
     default: string[];
-    shift?: string[];
+    shift?: any;
+    [key: string]: string[];
   }
 
   interface KeyboardButtonTheme {
@@ -9,12 +10,13 @@ declare module 'simple-keyboard' {
     buttons: string;
   }
 
-  interface KeyboardOptions {
-    /**
-     * Utilities
-     */
-    utilities?: any;
+  interface KeyboardButtonAttributes {
+    attribute: string;
+    value: string;
+    buttons: string;
+  }
 
+  interface KeyboardOptions {
     /**
      * Modify the keyboard layout.
      */
@@ -45,6 +47,11 @@ declare module 'simple-keyboard' {
      */
     buttonTheme?: KeyboardButtonTheme[];
 
+    /**
+     * A prop to add your own attributes to one or several buttons.
+     */
+    buttonAttributes?: KeyboardButtonAttributes[];
+
     /**
      * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
      */
@@ -70,11 +77,7 @@ declare module 'simple-keyboard' {
      *
      * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      */
-    maxLength?:
-      | number
-      | {
-          [inputName: string]: number;
-        };
+    maxLength?: any;
 
     /**
      * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
@@ -131,11 +134,21 @@ declare module 'simple-keyboard' {
      */
     useMouseEvents?: boolean;
 
+    /**
+     * Disable button hold action.
+     */
+    disableButtonHold?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */
     onKeyPress?: (button: string) => any;
 
+    /**
+     * Executes the callback function on key release.
+     */
+    onKeyReleased?: (button: string) => any;
+
     /**
      * Executes the callback function on input change. Returns the current input's string.
      */
@@ -170,8 +183,22 @@ declare module 'simple-keyboard' {
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
+
+    /**
+     * Options
+     */
     options: KeyboardOptions;
 
+    /**
+     * Utilities
+     */
+    utilities?: any;
+
+    /**
+     * caretPosition
+     */
+    caretPosition?: number;
+
     /**
      * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
      * @param  {string} buttons List of buttons to select (separated by a space).
@@ -223,6 +250,11 @@ declare module 'simple-keyboard' {
      * @param  {string} button The button layout name to select
      */
     getButtonElement(button: string): HTMLElement | HTMLElement[];
+
+    /**
+     * Clears keyboard listeners and DOM elements.
+     */
+    destroy(): void;
   }
 
   export default Keyboard;

src/lib/components/Keyboard.css

@@ -78,10 +78,6 @@ html {
   font-size: inherit;
 }
 
-.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active {
-  background: #e4e4e4;
-}
-
 .simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
   height: 60px;

src/lib/components/Keyboard.js

@@ -27,7 +27,16 @@ class SimpleKeyboard {
     /**
      * Initializing Utilities
      */
-    this.utilities = new Utilities(this);
+    this.utilities = new Utilities({
+      getOptions: this.getOptions,
+      getCaretPosition: this.getCaretPosition,
+      dispatch: this.dispatch
+    });
+
+    /**
+     * Caret position
+     */
+    this.caretPosition = null;
 
     /**
      * Processing options
@@ -42,6 +51,7 @@ class SimpleKeyboard {
      * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
      * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
      * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
+     * @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
      * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
      * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
      * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
@@ -64,6 +74,9 @@ class SimpleKeyboard {
      * @property {boolean} useTouchEvents Instructs simple-keyboard to use touch events instead of click events.
      * @property {boolean} autoUseTouchEvents Enable useTouchEvents automatically when touch device is detected.
      * @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
+     * @property {function} destroy Clears keyboard listeners and DOM elements.
+     * @property {boolean} disableButtonHold Disable button hold action.
+     * @property {function} onKeyReleased Executes the callback function on key release.
      */
     this.options = options;
     this.options.layoutName = this.options.layoutName || "default";
@@ -110,16 +123,7 @@ class SimpleKeyboard {
     this.buttonElements = {};
 
     /**
-     * Rendering keyboard
-     */
-    if (this.keyboardDOM) this.render();
-    else {
-      console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
-      throw new Error("KEYBOARD_DOM_ERROR");
-    }
-
-    /**
-     * Saving instance
+     * Simple-keyboard Instances
      * This enables multiple simple-keyboard support with easier management
      */
     if (!window["SimpleKeyboardInstances"])
@@ -129,10 +133,31 @@ class SimpleKeyboard {
       this.utilities.camelCase(this.keyboardDOMClass)
     ] = this;
 
+    /**
+     * Instance vars
+     */
+    this.allKeyboardInstances = window["SimpleKeyboardInstances"];
+    this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
+    this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
+    this.isFirstKeyboardInstance =
+      this.keyboardInstanceNames[0] === this.currentInstanceName;
+
     /**
      * Physical Keyboard support
      */
-    this.physicalKeyboardInterface = new PhysicalKeyboard(this);
+    this.physicalKeyboard = new PhysicalKeyboard({
+      dispatch: this.dispatch,
+      getOptions: this.getOptions
+    });
+
+    /**
+     * Rendering keyboard
+     */
+    if (this.keyboardDOM) this.render();
+    else {
+      console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
+      throw new Error("KEYBOARD_DOM_ERROR");
+    }
 
     /**
      * Modules
@@ -141,6 +166,12 @@ class SimpleKeyboard {
     this.loadModules();
   }
 
+  /**
+   * Getters
+   */
+  getOptions = () => this.options;
+  getCaretPosition = () => this.caretPosition;
+
   /**
    * Handles clicks made to keyboard buttons
    * @param  {string} button The button's layout name.
@@ -165,7 +196,6 @@ class SimpleKeyboard {
     let updatedInput = this.utilities.getUpdatedInput(
       button,
       this.input[this.options.inputName],
-      this.options,
       this.caretPosition
     );
 
@@ -183,7 +213,7 @@ class SimpleKeyboard {
        */
       if (
         this.options.maxLength &&
-        this.utilities.handleMaxLength(this.input, this.options, updatedInput)
+        this.utilities.handleMaxLength(this.input, updatedInput)
       ) {
         return false;
       }
@@ -191,7 +221,6 @@ class SimpleKeyboard {
       this.input[this.options.inputName] = this.utilities.getUpdatedInput(
         button,
         this.input[this.options.inputName],
-        this.options,
         this.caretPosition,
         true
       );
@@ -244,30 +273,38 @@ class SimpleKeyboard {
     /**
      * @type {object} Time to wait until a key hold is detected
      */
-    this.holdTimeout = setTimeout(() => {
-      if (
-        this.isMouseHold &&
-        ((!button.includes("{") && !button.includes("}")) ||
-          button === "{delete}" ||
-          button === "{backspace}" ||
-          button === "{bksp}" ||
-          button === "{space}" ||
-          button === "{tab}")
-      ) {
-        if (this.options.debug) console.log("Button held:", button);
+    if (!this.options.disableButtonHold) {
+      this.holdTimeout = setTimeout(() => {
+        if (
+          this.isMouseHold &&
+          ((!button.includes("{") && !button.includes("}")) ||
+            button === "{delete}" ||
+            button === "{backspace}" ||
+            button === "{bksp}" ||
+            button === "{space}" ||
+            button === "{tab}")
+        ) {
+          if (this.options.debug) console.log("Button held:", button);
 
-        this.handleButtonHold(button, e);
-      }
-      clearTimeout(this.holdTimeout);
-    }, 500);
+          this.handleButtonHold(button, e);
+        }
+        clearTimeout(this.holdTimeout);
+      }, 500);
+    }
   }
 
   /**
    * Handles button mouseup
    */
-  handleButtonMouseUp() {
+  handleButtonMouseUp(button) {
     this.isMouseHold = false;
     if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
+
+    /**
+     * Calling onKeyReleased
+     */
+    if (button && typeof this.options.onKeyReleased === "function")
+      this.options.onKeyReleased(button);
   }
 
   /**
@@ -296,6 +333,7 @@ class SimpleKeyboard {
   syncInstanceInputs() {
     this.dispatch(instance => {
       instance.replaceInput(this.input);
+      instance.caretPosition = this.caretPosition;
     });
   }
 
@@ -307,6 +345,11 @@ class SimpleKeyboard {
     inputName = inputName || this.options.inputName;
     this.input[inputName] = "";
 
+    /**
+     * Reset caretPosition
+     */
+    this.caretPosition = 0;
+
     /**
      * Enforce syncInstanceInputs, if set
      */
@@ -353,13 +396,39 @@ class SimpleKeyboard {
 
   /**
    * Set new option or modify existing ones after initialization.
-   * @param  {object} option The option to set
+   * @param  {object} options The options to set
    */
-  setOptions = option => {
-    option = option || {};
-    this.options = Object.assign(this.options, option);
+  setOptions(options) {
+    options = options || {};
+    this.options = Object.assign(this.options, options);
+
+    /**
+     * Some option changes require adjustments before re-render
+     */
+    this.onSetOptions(options);
+
+    /**
+     * Rendering
+     */
     this.render();
-  };
+  }
+
+  /**
+   * Executing actions depending on changed options
+   * @param  {object} options The options to set
+   */
+  onSetOptions(options) {
+    if (options.inputName) {
+      /**
+       * inputName changed. This requires a caretPosition reset
+       */
+      if (this.options.debug) {
+        console.log("inputName changed. caretPosition reset.");
+      }
+
+      this.caretPosition = null;
+    }
+  }
 
   /**
    * Remove all keyboard rows and reset keyboard values.
@@ -548,33 +617,63 @@ class SimpleKeyboard {
   }
 
   /**
-   * Retrieves the current cursor position within a input or textarea (if any)
+   * Handles simple-keyboard event listeners
    */
-  handleCaret() {
+  setEventListeners() {
     /**
-     * Only first instance should insall the caret handling events
+     * Only first instance should set the event listeners
      */
-    this.caretPosition = null;
-    let simpleKeyboardInstances = window["SimpleKeyboardInstances"];
-
-    if (
-      (simpleKeyboardInstances &&
-        Object.keys(simpleKeyboardInstances)[0] ===
-          this.utilities.camelCase(this.keyboardDOMClass)) ||
-      !simpleKeyboardInstances
-    ) {
+    if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {
       if (this.options.debug) {
         console.log(`Caret handling started (${this.keyboardDOMClass})`);
       }
 
-      document.addEventListener("keyup", this.caretEventHandler);
-      document.addEventListener("mouseup", this.caretEventHandler);
-      document.addEventListener("touchend", this.caretEventHandler);
+      /**
+       * Event Listeners
+       */
+      document.addEventListener("keyup", this.handleKeyUp);
+      document.addEventListener("keydown", this.handleKeyDown);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.addEventListener("touchend", this.handleTouchEnd);
     }
   }
 
   /**
-   * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
+   * Event Handler: KeyUp
+   */
+  handleKeyUp(event) {
+    this.caretEventHandler(event);
+
+    if (this.options.physicalKeyboardHighlight) {
+      this.physicalKeyboard.handleHighlightKeyUp(event);
+    }
+  }
+
+  /**
+   * Event Handler: KeyDown
+   */
+  handleKeyDown(event) {
+    if (this.options.physicalKeyboardHighlight) {
+      this.physicalKeyboard.handleHighlightKeyDown(event);
+    }
+  }
+
+  /**
+   * Event Handler: MouseUp
+   */
+  handleMouseUp(event) {
+    this.caretEventHandler(event);
+  }
+
+  /**
+   * Event Handler: TouchEnd
+   */
+  handleTouchEnd(event) {
+    this.caretEventHandler(event);
+  }
+
+  /**
+   * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event) {
     let targetTagName;
@@ -614,50 +713,83 @@ class SimpleKeyboard {
     });
   }
 
+  /**
+   * Destroy keyboard listeners and DOM elements
+   */
+  destroy() {
+    /**
+     * Remove listeners
+     */
+    document.removeEventListener("keyup", this.handleKeyUp);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("touchend", this.handleTouchEnd);
+
+    /**
+     * Clear DOM
+     */
+    this.clear();
+  }
+
   /**
    * Process buttonTheme option
    */
-  getButtonTheme() {
-    let buttonThemesParsed = {};
+  getButtonThemeClasses(button) {
+    let buttonTheme = this.options.buttonTheme;
+    let buttonClasses = [];
 
-    this.options.buttonTheme.forEach(themeObj => {
-      if (themeObj.buttons && themeObj.class) {
-        let themeButtons;
+    if (Array.isArray(buttonTheme)) {
+      buttonTheme.forEach(themeObj => {
+        if (
+          themeObj.class &&
+          typeof themeObj.class === "string" &&
+          (themeObj.buttons && typeof themeObj.buttons === "string")
+        ) {
+          let themeObjClasses = themeObj.class.split(" ");
+          let themeObjButtons = themeObj.buttons.split(" ");
 
-        if (typeof themeObj.buttons === "string") {
-          themeButtons = themeObj.buttons.split(" ");
+          if (themeObjButtons.includes(button)) {
+            buttonClasses = [...buttonClasses, ...themeObjClasses];
+          }
+        } else {
+          console.warn(
+            `Incorrect "buttonTheme". Please check the documentation.`,
+            themeObj
+          );
         }
+      });
+    }
 
-        if (themeButtons) {
-          themeButtons.forEach(themeButton => {
-            let themeParsed = buttonThemesParsed[themeButton];
+    return buttonClasses;
+  }
 
-            // If the button has already been added
-            if (themeParsed) {
-              // Making sure we don't add duplicate classes, even when buttonTheme has duplicates
-              if (
-                !this.utilities.countInArray(
-                  themeParsed.split(" "),
-                  themeObj.class
-                )
-              ) {
-                buttonThemesParsed[themeButton] = `${themeParsed} ${
-                  themeObj.class
-                }`;
-              }
-            } else {
-              buttonThemesParsed[themeButton] = themeObj.class;
-            }
-          });
+  /**
+   * Process buttonAttributes option
+   */
+  setDOMButtonAttributes(button, callback) {
+    let buttonAttributes = this.options.buttonAttributes;
+
+    if (Array.isArray(buttonAttributes)) {
+      buttonAttributes.forEach(attrObj => {
+        if (
+          attrObj.attribute &&
+          typeof attrObj.attribute === "string" &&
+          (attrObj.value && typeof attrObj.value === "string") &&
+          (attrObj.buttons && typeof attrObj.buttons === "string")
+        ) {
+          let attrObjButtons = attrObj.buttons.split(" ");
+
+          if (attrObjButtons.includes(button)) {
+            callback(attrObj.attribute, attrObj.value);
+          }
+        } else {
+          console.warn(
+            `Incorrect "buttonAttributes". Please check the documentation.`,
+            attrObj
+          );
         }
-      } else {
-        console.warn(
-          `buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`
-        );
-      }
-    });
-
-    return buttonThemesParsed;
+      });
+    }
   }
 
   onTouchDeviceDetected() {
@@ -710,9 +842,9 @@ class SimpleKeyboard {
     }
 
     /**
-     * Caret handling
+     * setEventListeners
      */
-    this.handleCaret();
+    this.setEventListeners();
 
     if (typeof this.options.onInit === "function") this.options.onInit();
   }
@@ -735,6 +867,7 @@ class SimpleKeyboard {
      * Notify about PointerEvents usage
      */
     if (
+      this.isFirstKeyboardInstance &&
       this.utilities.pointerEventsSupported() &&
       !this.options.useTouchEvents &&
       !this.options.useMouseEvents
@@ -869,9 +1002,7 @@ class SimpleKeyboard {
          */
         let containerDOM = document.createElement("div");
         containerDOM.className += "hg-button-container";
-        let containerUID = `${
-          this.options.layoutName
-        }-r${rowIndex}c${arrIndex}`;
+        let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
         containerDOM.setAttribute("data-skUID", containerUID);
 
         /**
@@ -946,19 +1077,10 @@ class SimpleKeyboard {
     let useMouseEvents = this.options.useMouseEvents || false;
     let disableRowButtonContainers = this.options.disableRowButtonContainers;
 
-    /**
-     * Account for buttonTheme, if set
-     */
-    let buttonThemesParsed = Array.isArray(this.options.buttonTheme)
-      ? this.getButtonTheme()
-      : {};
-
     /**
      * Adding themeClass, layoutClass to keyboardDOM
      */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${
-      this.keyboardPluginClasses
-    } ${useTouchEventsClass}`;
+    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;
 
     /**
      * Iterating through each row
@@ -1019,7 +1141,6 @@ class SimpleKeyboard {
          * Processing button options
          */
         let fctBtnClass = this.utilities.getButtonClass(button);
-        let buttonThemeClass = buttonThemesParsed[button];
         let buttonDisplayName = this.utilities.getButtonDisplayName(
           button,
           this.options.display,
@@ -1031,9 +1152,19 @@ class SimpleKeyboard {
          */
         let buttonType = this.options.useButtonTag ? "button" : "div";
         let buttonDOM = document.createElement(buttonType);
-        buttonDOM.className += `hg-button ${fctBtnClass}${
-          buttonThemeClass ? " " + buttonThemeClass : ""
-        }`;
+        buttonDOM.className += `hg-button ${fctBtnClass}`;
+
+        /**
+         * Adding buttonTheme
+         */
+        buttonDOM.classList.add(...this.getButtonThemeClasses(button));
+
+        /**
+         * Adding buttonAttributes
+         */
+        this.setDOMButtonAttributes(button, (attribute, value) => {
+          buttonDOM.setAttribute(attribute, value);
+        });
 
         /**
          * Handle button click event
@@ -1051,10 +1182,8 @@ class SimpleKeyboard {
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = e => {
-            this.handleButtonMouseUp();
-          };
-          buttonDOM.onpointercancel = e => this.handleButtonMouseUp();
+          buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
+          buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
         } else {
           /**
            * Fallback for browsers not supporting PointerEvents
@@ -1067,8 +1196,8 @@ class SimpleKeyboard {
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = e => this.handleButtonMouseUp();
-            buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
+            buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
+            buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
           } else {
             /**
              * Handle mouse events
@@ -1077,9 +1206,8 @@ class SimpleKeyboard {
               this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
-            buttonDOM.onmousedown = e => {
-              this.handleButtonMouseDown(button, e);
-            };
+            buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
+            buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
           }
         }
 
@@ -1095,11 +1223,6 @@ class SimpleKeyboard {
         let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
         buttonDOM.setAttribute("data-skBtnUID", buttonUID);
 
-        /**
-         * Adding display label
-         */
-        buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
-
         /**
          * Adding button label to button
          */
@@ -1148,9 +1271,25 @@ class SimpleKeyboard {
       this.initialized = true;
 
       /**
-       * Handling mouseup
+       * Handling onpointerup
        */
-      if (!useTouchEvents) {
+      /* istanbul ignore next */
+      if (
+        this.utilities.pointerEventsSupported() &&
+        !useTouchEvents &&
+        !useMouseEvents
+      ) {
+        document.onpointerup = () => this.handleButtonMouseUp();
+      } else if (useTouchEvents) {
+        /**
+         * Handling ontouchend, ontouchcancel
+         */
+        document.ontouchend = () => this.handleButtonMouseUp();
+        document.ontouchcancel = () => this.handleButtonMouseUp();
+      } else if (!useTouchEvents) {
+        /**
+         * Handling mouseup
+         */
         document.onmouseup = () => this.handleButtonMouseUp();
       }
 

src/lib/components/tests/Keyboard.test.js

@@ -1,5 +1,5 @@
 import Keyboard from '../Keyboard';
-import TestUtility from '../../tests/TestUtility';
+import TestUtility from '../../../utils/TestUtility';
 
 let testUtil = new TestUtility();
 
@@ -168,6 +168,26 @@ it('Keyboard syncInstanceInputs will work', () => {
   keyboard1.getButtonElement("q").onclick();
 
   expect(keyboard2.getInput()).toBe("q");
+
+  /**
+   * Test cursor syncing...
+   * Reinit keyboards
+   */
+  keyboard1 = new Keyboard(".keyboard1", sharedOptions);
+  keyboard2 = new Keyboard(".keyboard2", sharedOptions);
+
+  keyboard1.getButtonElement("1").onclick();
+  keyboard1.getButtonElement("5").onclick();
+  keyboard1.getButtonElement("6").onclick();
+
+  keyboard1.caretPosition = 1;
+
+  keyboard1.getButtonElement("2").onclick();
+  keyboard1.getButtonElement("3").onclick();
+  keyboard1.getButtonElement("4").onclick();
+
+  expect(keyboard1.getInput()).toBe("123456");
+  expect(keyboard2.getInput()).toBe("123456");
 });
 
 it('Keyboard onChange will work', () => {
@@ -178,7 +198,8 @@ it('Keyboard onChange will work', () => {
   let keyboard = new Keyboard({
     onChange: (input) => {
       output = input;
-    }
+    },
+    useMouseEvents: true
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -194,7 +215,8 @@ it('Keyboard onChangeAll will work', () => {
   let keyboard = new Keyboard({
     onChangeAll: (input) => {
       output = input ? input.default : null;
-    }
+    },
+    useMouseEvents: true
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -959,7 +981,8 @@ it('Keyboard inputPattern will work globally', () => {
   testUtil.setDOM();
 
   let keyboard = new Keyboard({
-    inputPattern: /^\d+$/
+    inputPattern: /^\d+$/,
+    useMouseEvents: true
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -979,7 +1002,8 @@ it('Keyboard inputPattern will work by input name', () => {
     inputName: "test1",
     inputPattern: {
       test1: /^\d+$/
-    }
+    },
+    useMouseEvents: true
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -1175,4 +1199,130 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
   let containers = Array.from(document.querySelectorAll(".hg-button-container"));
 
   expect(containers.length).toBe(0);
+});
+
+it('Keyboard inputName change will trigget caretPosition reset', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+
+  keyboard.caretPosition = 0;
+
+  keyboard.getButtonElement("q").onpointerdown();
+  keyboard.getButtonElement("1").onpointerdown();
+
+  expect(keyboard.caretPosition).toBe(2);
+
+  keyboard.setOptions({
+    inputName: "myInput"
+  });
+
+  keyboard.getButtonElement("q").onpointerdown();
+  keyboard.getButtonElement("1").onpointerdown();
+  keyboard.getButtonElement("b").onpointerdown();
+
+  expect(keyboard.caretPosition).toBe(null);
+});
+
+it('Keyboard destroy will work', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+
+  keyboard.destroy();
+
+  expect(keyboard.keyboardDOM.innerHTML).toBeFalsy();
+});
+
+it('Keyboard disableButtonHold will work', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    disableButtonHold: true
+  });
+
+  expect(keyboard.options.disableButtonHold).toBe(true);
+});
+
+it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    disableCaretPositioning: true
+  });
+
+  keyboard.caretPosition = 6;
+
+  document.dispatchEvent(new MouseEvent('mouseup', {
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(keyboard.caretPosition).toBe(null);
+
+  keyboard.setOptions({
+    disableCaretPositioning: false
+  })
+
+  keyboard.caretPosition = 10;
+
+  document.dispatchEvent(new TouchEvent('touchend', {
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(keyboard.caretPosition).toBe(10);
+});
+
+it('Keyboard onKeyReleased will work', () => {
+  testUtil.setDOM();
+
+  let pressed = false;
+  let firedTimes = 0;
+  let buttonPressed;
+
+  let keyboard = new Keyboard({
+    onKeyReleased: button => {
+      pressed = true;
+      buttonPressed = button;
+      firedTimes++;
+    },
+    debug: true
+  });
+
+  keyboard.getButtonElement("q").onpointerdown();
+  keyboard.getButtonElement("q").onpointerup();
+
+  expect(pressed).toBeTruthy();
+  expect(firedTimes).toBe(1);
+  expect(buttonPressed).toBe("q");
+});
+
+it('Keyboard buttonAttribute will work', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    buttonAttributes: [
+      {
+        attribute: "aria-label",
+        value: "bee",
+        buttons: "b B"
+      }
+    ]
+  });
+});
+
+it('Keyboard buttonAttribute will warn about invalid entries', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard({
+    buttonAttributes: [
+      {
+        attribute: false,
+        value: null
+      }
+    ]
+  });
 });