ngx-touch-keyboard 2.0.0

package/README.md

@@ -0,0 +1,86 @@
+# AngularTouchKeyboard
+[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![npm version](https://badge.fury.io/js/ngx-touch-keyboard.svg)](http://badge.fury.io/js/ngx-touch-keyboard)
+
+## What is this?
+Virtual Keyboard for Angular applications.
+
+<img src="src/assets/images/angularTouchKeyboard.png" alt="angular touch keyboard"/>
+
+## Demo
+https://mohsen77sk.github.io/angular-touch-keyboard/
+
+## Install
+
+### Step 1: Install ngx-touch-keyboard
+```sh
+$ npm install ngx-touch-keyboard
+```
+
+### Step 2: Import the module
+Add `ngxTouchKeyboardModule` as an import in your app's root NgModule.
+```typescript
+import { ngxTouchKeyboardModule }  from 'ngx-touch-keyboard';
+@NgModule({
+  ...
+  imports: [
+    ...
+    ngxTouchKeyboardModule,
+  ],
+  ...
+})
+export class AppModule { }
+```
+
+## Usage
+Simple usage example
+```html
+<input
+  type="text"
+  ngxTouchKeyboard
+  #touchKeyboard="ngxTouchKeyboard"
+  (focus)="touchKeyboard.openPanel()"
+/>
+```
+Material usage example
+```html
+<mat-form-field>
+  <mat-label>Default</mat-label>
+  <input
+    matInput
+    type="text"
+    ngxTouchKeyboard
+    #touchKeyboard="ngxTouchKeyboard"
+  />
+  <button
+    mat-icon-button
+    matSuffix
+    type="button"
+    (click)="touchKeyboard.togglePanel()"
+  >
+    <mat-icon> keyboard </mat-icon>
+  </button>
+</mat-form-field>
+```
+### Methods
+
+| Methods | Description |
+| --- | --- |
+| `openPanel`   | Open keyboard panel   |
+| `closePanel`  | Close keyboard panel  |
+| `togglePanel` | Toggle keyboard panel |
+
+### Layouts
+
+| inputmode | screenshot |
+| --- | --- |
+| `inputmode='text'`    | <img src="src/assets/images/text.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='search'`  | <img src="src/assets/images/search.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='email'`   | <img src="src/assets/images/email.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='url'`     | <img src="src/assets/images/url.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='numeric'` | <img src="src/assets/images/number.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='decimal'` | <img src="src/assets/images/decimal.png" alt="angular touch keyboard" width="260"/> |
+| `inputmode='tel'`     | <img src="src/assets/images/tel.png" alt="angular touch keyboard" width="260"/> |
+
+## License
+[The MIT License (MIT)](LICENSE)

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-touch-keyboard'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-touch-keyboard",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "ngx-touch-keyboard",
+  "version": "2.0.0",
+  "description": "Virtual Keyboard for Angular applications",
+  "peerDependencies": {
+    "@angular/common": ">=10.0.0",
+    "@angular/core": ">=10.0.0",
+    "@angular/cdk": ">=10.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "private": false,
+  "keywords": [
+    "Angular",
+    "Material",
+    "Touch",
+    "Virtual",
+    "Keyboard",
+    "onscreen"
+  ],
+  "author": {
+    "name": "Mohsen Sohrabi",
+    "url": "https://github.com/mohsen77sk"
+  },
+  "homepage": "https://github.com/mohsen77sk/angular-touch-keyboard#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mohsen77sk/angular-touch-keyboard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mohsen77sk/angular-touch-keyboard/issues"
+  },
+  "license": "MIT"
+}

package/src/lib/layouts/index.ts

@@ -0,0 +1,132 @@
+import { KeyboardLayout, KeyboardDisplay } from './layouts.type';
+
+export const getDefaultLayout = (): KeyboardLayout => {
+  return {
+    text_default: [
+      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      ['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '{backspace}'],
+      ['{numbers}', '{space}', '{ent}'],
+    ],
+    text_shift: [
+      ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      ['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '{backspace}'],
+      ['{numbers}', '{space}', '{ent}'],
+    ],
+    text_numbers: [
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+      ['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
+      ['{extends}', '.', ',', '?', '!', "'", '{backspace}'],
+      ['{abc}', '{space}', '{ent}'],
+    ],
+    text_extends: [
+      ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
+      ['_', '\\', '|', '~', '<', '>', '€', '£', '¥', '•'],
+      ['{numbers}', '.', ',', '?', '!', "'", '{backspace}'],
+      ['{abc}', '{space}', '{ent}'],
+    ],
+    search_default: [
+      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      ['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '{backspace}'],
+      ['{numbers}', '{space}', '{ent}'],
+    ],
+    search_shift: [
+      ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      ['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '{backspace}'],
+      ['{numbers}', '{space}', '{ent}'],
+    ],
+    search_numbers: [
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+      ['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
+      ['{extends}', '.', ',', '?', '!', "'", '{backspace}'],
+      ['{abc}', '{space}', '{ent}'],
+    ],
+    search_extends: [
+      ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
+      ['_', '\\', '|', '~', '<', '>', '€', '£', '¥', '•'],
+      ['{numbers}', '.', ',', '?', '!', "'", '{backspace}'],
+      ['{abc}', '{space}', '{ent}'],
+    ],
+    email_default: [
+      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      ['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '{backspace}'],
+      ['{numbers}', '@', '{space}', '.', '{ent}'],
+    ],
+    email_shift: [
+      ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      ['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '{backspace}'],
+      ['{numbers}', '@', '{space}', '.', '{ent}'],
+    ],
+    email_numbers: [
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+      ['$', '!', '~', '&', '=', '#', '[', ']'],
+      ['{extends}', '.', '_', '-', '+', '{backspace}'],
+      ['{abc}', '@', '{space}', '.', '{ent}'],
+    ],
+    email_extends: [
+      ['`', '|', '{', '}', '?', '%', '^', '*', '/', "'"],
+      ['$', '!', '~', '&', '=', '#', '[', ']'],
+      ['{numbers}', '.', '_', '-', '+', '{backspace}'],
+      ['{abc}', '@', '{space}', '.', '{ent}'],
+    ],
+    url_default: [
+      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      ['{shift}', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '{backspace}'],
+      ['{numbers}', '/', '.com', '.', '{ent}'],
+    ],
+    url_shift: [
+      ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      ['{shift}', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '{backspace}'],
+      ['{numbers}', '/', '.com', '.', '{ent}'],
+    ],
+    url_numbers: [
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+      ['@', '&', '%', '?', ',', '=', '[', ']'],
+      ['{extends}', '_', ':', '-', '+', '{backspace}'],
+      ['{abc}', '/', '.com', '.', '{ent}'],
+    ],
+    url_extends: [
+      ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+      ['*', '$', '#', '!', "'", '^', '[', ']'],
+      ['{numbers}', '~', ';', '(', ')', '{backspace}'],
+      ['{abc}', '/', '.com', '.', '{ent}'],
+    ],
+    numeric_default: [
+      ['1', '2', '3'],
+      ['4', '5', '6'],
+      ['7', '8', '9'],
+      ['0', '{backspace}'],
+    ],
+    decimal_default: [
+      ['1', '2', '3'],
+      ['4', '5', '6'],
+      ['7', '8', '9'],
+      ['.', '0', '{backspace}'],
+    ],
+    tel_default: [
+      ['1', '2', '3', '*'],
+      ['4', '5', '6', '#'],
+      ['7', '8', '9', '+'],
+      ['0', '{backspace}'],
+    ],
+  };
+};
+
+export const getDefaultDisplay = (): KeyboardDisplay => {
+  return {
+    '{shift}': '⇧',
+    '{backspace}': '⌫',
+    '{abc}': 'ABC',
+    '{numbers}': '123',
+    '{extends}': '#+=',
+    '{ent}': 'return',
+    '{space}': ' ',
+  };
+};

package/src/lib/layouts/layouts.type.ts

@@ -0,0 +1,7 @@
+export interface KeyboardLayout {
+  [key: string]: Array<Array<string>>;
+}
+
+export interface KeyboardDisplay {
+  [key: string]: string;
+}

package/src/lib/ngx-touch-keyboard.component.html

@@ -0,0 +1,26 @@
+<div dir="ltr" class="touch-keyboard" [ngClass]="'layout-' + layoutName">
+  <ng-container
+    *ngFor="
+      let row of layout[layoutMode + '_' + layoutName];
+      let rowIndex = index
+    "
+  >
+    <div class="touch-keyboard-row">
+      <ng-container *ngFor="let key of row; let keyIndex = index">
+        <button
+          [name]="key"
+          class="touch-keyboard-key"
+          [ngClass]="[getButtonClass(key)]"
+          [attr.data-layout]="layoutName"
+          (pointerdown)="
+            handleButtonClicked(key, $event); handleButtonMouseDown(key, $event)
+          "
+          (pointerup)="handleButtonMouseUp(key, $event)"
+          (pointercancel)="handleButtonMouseUp(key, $event)"
+        >
+          {{ getButtonDisplayName(key) }}
+        </button>
+      </ng-container>
+    </div>
+  </ng-container>
+</div>

package/src/lib/ngx-touch-keyboard.component.scss

@@ -0,0 +1,103 @@
+:root {
+  --touch-keyboard-text: #27272a;
+  --touch-keyboard-background: rgba(238, 238, 238, 0.87);
+  --touch-keyboard-button: rgba(255, 255, 255, 0.96);
+  --touch-keyboard-button-fn: rgba(255, 255, 255, 0.5);
+  --touch-keyboard-button-active: rgba(0, 0, 0, 0.04);
+}
+
+.dark {
+  --touch-keyboard-text: #ffffff;
+  --touch-keyboard-background: rgba(33, 33, 33, 0.87);
+  --touch-keyboard-button: rgba(66, 66, 66, 0.96);
+  --touch-keyboard-button-fn: rgba(66, 66, 66, 0.5);
+  --touch-keyboard-button-active: rgba(255, 255, 255, 0.2);
+}
+
+ngx-touch-keyboard {
+  width: 100%;
+  padding: 0.25rem;
+  padding-bottom: 0.375rem;
+  border-radius: 0.375rem;
+  touch-action: manipulation;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  backdrop-filter: blur(8px);
+  background-color: var(--touch-keyboard-background);
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+}
+
+.touch-keyboard {
+  flex: 1 1 auto;
+  max-width: 860px;
+
+  .touch-keyboard-row {
+    display: flex;
+    flex-direction: row;
+
+    &:not(:last-child) {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  .touch-keyboard-key {
+    width: 20px;
+    box-sizing: border-box;
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    text-align: center;
+    margin: 0;
+    line-height: 32px;
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    color: var(--touch-keyboard-text);
+    background-color: var(--touch-keyboard-button);
+    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+      0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+
+    &.function-key:not(.space-key) {
+      background-color: var(--touch-keyboard-button-fn);
+    }
+
+    &.active {
+      background-color: var(--touch-keyboard-button-active) !important;
+    }
+
+    &.ent-key,
+    &.abc-key,
+    &.numbers-key,
+    &.extends-key {
+      max-width: 8rem;
+    }
+
+    &.space-key {
+      min-width: 50%;
+    }
+
+    &[data-layout="numeric"],
+    &[data-layout="decimal"],
+    &[data-layout="tel"] {
+      width: 33%;
+      max-width: none;
+    }
+
+    &:not(:last-child) {
+      margin-right: 0.25rem;
+    }
+  }
+}

package/src/lib/ngx-touch-keyboard.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxTouchKeyboardComponent } from './ngx-touch-keyboard.component';
+
+describe('NgxTouchKeyboardComponent', () => {
+  let component: NgxTouchKeyboardComponent;
+  let fixture: ComponentFixture<NgxTouchKeyboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NgxTouchKeyboardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NgxTouchKeyboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});