\n
\n ","styles":["\n .close {\n position: relative;\n float: right;\n top: -16px;\n right: 0;\n margin-bottom: -40px;\n }\n \n .mat-input-container {\n margin: -16px 0;\n font-size: 32px;\n }\n \n .mat-input-element:disabled {\n color: currentColor;\n }\n\n :host /deep/ .mat-input-placeholder {\n top: 10px !important;\n font-size: 24px !important;\n }\n "]}]}],"members":{"keyboardInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":69,"character":3},"arguments":["keyboardInput",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatDialogRef","line":114,"character":22,"arguments":[{"__symbolic":"reference","name":"VirtualKeyboardComponent"}]},{"__symbolic":"reference","module":"./virtual-keyboard.service","name":"VirtualKeyboardService","line":115,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"updateCaretPosition":[{"__symbolic":"method"}],"keyPress":[{"__symbolic":"method"}],"checkDisabled":[{"__symbolic":"method"}],"handleNormalKey":[{"__symbolic":"method"}],"handleSpecialKey":[{"__symbolic":"method"}],"dispatchEvents":[{"__symbolic":"method"}]}}}}]
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@protacon/ng-virtual-keyboard",
3 | "version": "0.12.0",
4 | "description": "Virtual Keyboard for Angular applications",
5 | "main": "dist/ng-virtual-keyboard.umd.js",
6 | "module": "dist/index.js",
7 | "typings": "dist/index.d.ts",
8 | "scripts": {
9 | "start": "cross-env NODE_ENV=dev webpack serve --progress --mode production --port 4200 --host 0.0.0.0 --content-base app --config app/webpack.config --open",
10 | "lint": "eslint 'src/**/*.ts' 'app/**/*.ts'",
11 | "clean": "rimraf dist",
12 | "build": "npm-run-all --serial clean build:ngc build:umd build:app build:gh-pages",
13 | "build:ngc": "ngc -p tsconfig.ngc.json",
14 | "build:umd": "cross-env NODE_ENV=prod webpack --progress --mode production",
15 | "build:app": "cross-env NODE_ENV=prod webpack --progress --mode production --config app/webpack.config",
16 | "build:gh-pages": "cp app/index.html docs && cp app/favicon.png docs && cp -r app/build docs"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/protacon/ng-virtual-keyboard.git"
21 | },
22 | "keywords": [
23 | "Angular"
24 | ],
25 | "author": "Protacon",
26 | "license": "MIT",
27 | "bugs": {
28 | "url": "https://github.com/protacon/ng-virtual-keyboard/issues"
29 | },
30 | "homepage": "https://github.com/protacon/ng-virtual-keyboard#readme",
31 | "prefer-stable": true,
32 | "dependencies": {
33 | "@angular/animations": "^8.2.0",
34 | "@angular/cdk": "^8.2.0",
35 | "@angular/flex-layout": "^8.0.0-beta.27",
36 | "@angular/material": "^8.2.0",
37 | "hammerjs": "^2.0.0"
38 | },
39 | "devDependencies": {
40 | "@angular/common": "^8.2.0",
41 | "@angular/compiler": "^8.2.0",
42 | "@angular/compiler-cli": "^8.2.0",
43 | "@angular/core": "^8.2.0",
44 | "@angular/forms": "^8.2.0",
45 | "@angular/platform-browser": "^8.2.0",
46 | "@angular/platform-browser-dynamic": "^8.2.0",
47 | "@angular/router": "^8.2.0",
48 | "@types/node": "^7.10.7",
49 | "@typescript-eslint/eslint-plugin": "^4.29.0",
50 | "@typescript-eslint/parser": "^4.29.0",
51 | "angular2-template-loader": "^0.6.2",
52 | "core-js": "^2.6.9",
53 | "cross-env": "^5.2.1",
54 | "css-loader": "^1.0.0",
55 | "eslint": "^7.32.0",
56 | "node-sass": "^4.12.0",
57 | "npm-run-all": "^4.1.5",
58 | "raw-loader": "^1.0.0",
59 | "rimraf": "^2.7.1",
60 | "rxjs": "^6.5.3",
61 | "rxjs-compat": "^6.5.3",
62 | "sass-loader": "^6.0.3",
63 | "strip-loader": "^0.1.2",
64 | "style-loader": "^0.16.1",
65 | "ts-loader": "^4.4.2",
66 | "typescript": "~3.4.0",
67 | "webpack": "^4.0.0",
68 | "webpack-cli": "^4.7.2",
69 | "webpack-dev-server": "^3.11.1",
70 | "zone.js": "^0.9.1"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ng-virtual-keyboard
2 | [](LICENSE)
3 | [](https://badge.fury.io/js/%40protacon%2Fng-virtual-keyboard)
4 | [](https://www.npmjs.com/package/@protacon/ng-virtual-keyboard)
5 | [](https://david-dm.org/protacon/ng-virtual-keyboard)
6 | [](https://david-dm.org/protacon/ng-virtual-keyboard#info=devDependencies)
7 |
8 | ## What is this?
9 | Virtual Keyboard for Angular applications
10 |
11 | [See CHANGELOG.md](CHANGELOG.md)
12 |
13 | ## Install
14 | ### Step 1: Install @protacon/ng-virtual-keyboard
15 | ```bash
16 | $ npm install --save @protacon/ng-virtual-keyboard
17 | ```
18 |
19 | ### Step 2: Import the module
20 | Add `NgVirtualKeyboardModule` as an import in your app's root NgModule.
21 | ```typescript
22 | import { NgVirtualKeyboardModule } from '@protacon/ng-virtual-keyboard';
23 |
24 | @NgModule({
25 | ...
26 | imports: [
27 | ...
28 | NgVirtualKeyboardModule,
29 | ],
30 | ...
31 | })
32 | export class AppModule { }
33 | ```
34 |
35 | ## Usage
36 | Simple usage example
37 | ```html
38 |
44 | ```
45 |
46 | | Attribute | Description |
47 | | --- | --- |
48 | | `ng-virtual-keyboard` | Required to initialize Virtual Keyboard to specified input |
49 | | `ng-virtual-keyboard-layout` | Used layout on keyboard, following keyboards are defaults that you can use `alphanumeric, alphanumericNordic, extended, extendedNordic, numeric, phone` |
50 | | `ng-virtual-keyboard-placeholder` | Override placeholder text, if input has not any - or you want to override input placeholder value |
51 | | `ng-virtual-keyboard-close` | Listener for keyboard closing event |
52 |
53 | ## Demo
54 | https://by-pinja.github.io/ng-virtual-keyboard/
55 |
56 | ## Local development
57 |
58 | For easier local development, Docker can be used for compiling and testing the
59 | keyboard. To run virtual keyboard from local docker environment, execute following:
60 |
61 | ```bash
62 | docker-compose up
63 | ```
64 |
65 | After this is ready, navigate to [http://localhost:4200/](http://localhost:4200/)
66 |
67 | To avoid installing node etc. locally, `execute.sh` can be used
68 | to exceute command with current version of supported container.
69 |
70 | Lint example:
71 |
72 | ```bash
73 | bash execute.sh yarn lint
74 | ```
75 |
76 | Basically this is just a shorthand for `docker run -it --rm -w /app -v ${PWD}/:/app node:12-alpine3.14 "$@"`
77 |
78 | ## License
79 | [The MIT License (MIT)](LICENSE)
80 |
81 | Copyright (c) 2017 Protacon
82 |
--------------------------------------------------------------------------------
/dist/virtual-keyboard.service.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | Object.defineProperty(exports, "__esModule", { value: true });
9 | var core_1 = require("@angular/core");
10 | var ReplaySubject_1 = require("rxjs/internal/ReplaySubject");
11 | var VirtualKeyboardService = /** @class */ (function () {
12 | function VirtualKeyboardService() {
13 | this.shift$ = new ReplaySubject_1.ReplaySubject(1);
14 | this.capsLock$ = new ReplaySubject_1.ReplaySubject(1);
15 | this.caretPosition$ = new ReplaySubject_1.ReplaySubject(1);
16 | this.capsLock = false;
17 | this.shift = false;
18 | }
19 | /**
20 | * Setter for Shift value, note that this also sets CapsLock value.
21 | *
22 | * @param {boolean} value
23 | */
24 | VirtualKeyboardService.prototype.setShift = function (value) {
25 | this.shift = value;
26 | this.shift$.next(this.shift);
27 | this.setCapsLock(this.shift);
28 | };
29 | /**
30 | * Setter for CapsLock value
31 | *
32 | * @param {boolean} value
33 | */
34 | VirtualKeyboardService.prototype.setCapsLock = function (value) {
35 | this.capsLock = value;
36 | this.capsLock$.next(value);
37 | };
38 | /**
39 | * Toggle for Shift, note that this also toggles CapsLock
40 | */
41 | VirtualKeyboardService.prototype.toggleShift = function () {
42 | this.shift = !this.shift;
43 | this.shift$.next(this.shift);
44 | this.setCapsLock(this.shift);
45 | };
46 | /**
47 | * Toggle for CapsLock
48 | */
49 | VirtualKeyboardService.prototype.toggleCapsLock = function () {
50 | this.capsLock = !this.capsLock;
51 | this.capsLock$.next(this.capsLock);
52 | };
53 | /**
54 | * Setter for caret position value.
55 | *
56 | * @param {number} position
57 | */
58 | VirtualKeyboardService.prototype.setCaretPosition = function (position) {
59 | this.caretPosition$.next(position);
60 | };
61 | /**
62 | * Method to reset Shift and CapsLock values to default ones.
63 | */
64 | VirtualKeyboardService.prototype.reset = function () {
65 | this.setShift(false);
66 | };
67 | VirtualKeyboardService = __decorate([
68 | core_1.Injectable()
69 | ], VirtualKeyboardService);
70 | return VirtualKeyboardService;
71 | }());
72 | exports.VirtualKeyboardService = VirtualKeyboardService;
73 | //# sourceMappingURL=virtual-keyboard.service.js.map
--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core'
2 |
3 | @Component({
4 | selector: 'my-app',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss'],
7 | encapsulation: ViewEncapsulation.None
8 | })
9 |
10 | export class AppComponent {
11 | public layouts = [
12 | {
13 | name: 'Alphanumeric',
14 | layout: 'alphanumeric',
15 | placeholder: 'placeholder 1',
16 | placeholderCustom: 'custom placeholder 1',
17 | },
18 | {
19 | name: 'Alphanumeric - Nordic',
20 | layout: 'alphanumericNordic',
21 | placeholder: 'placeholder 2',
22 | placeholderCustom: 'custom placeholder 2',
23 | },
24 | {
25 | name: 'Extended',
26 | layout: 'extended',
27 | placeholder: 'placeholder 3',
28 | placeholderCustom: 'custom placeholder 3',
29 | },
30 | {
31 | name: 'Extended - Nordic',
32 | layout: 'extendedNordic',
33 | placeholder: 'placeholder 4',
34 | placeholderCustom: 'custom placeholder 4',
35 | },
36 | {
37 | name: 'Numeric',
38 | layout: 'numeric',
39 | placeholder: 'placeholder 5',
40 | placeholderCustom: 'custom placeholder 5',
41 | },
42 | {
43 | name: 'Phone',
44 | layout: 'phone',
45 | placeholder: 'placeholder 6',
46 | placeholderCustom: 'custom placeholder 6',
47 | },
48 | ];
49 |
50 | public badges = [
51 | {
52 | img: 'https://img.shields.io/badge/license-MIT-blue.svg',
53 | link: 'https://github.com/protacon/ng-virtual-keyboard/blob/master/LICENSE',
54 | },
55 | {
56 | img: 'https://badge.fury.io/js/%40protacon%2Fng-virtual-keyboard.svg',
57 | link: 'https://badge.fury.io/js/%40protacon%2Fng-virtual-keyboard',
58 | },
59 | {
60 | img: 'https://travis-ci.org/protacon/ng-virtual-keyboard.png?branch=master',
61 | link: 'https://travis-ci.org/protacon/ng-virtual-keyboard',
62 | },
63 | {
64 | img: 'https://codecov.io/gh/protacon/ng-virtual-keyboard/branch/master/graph/badge.svg',
65 | link: 'https://codecov.io/gh/protacon/ng-virtual-keyboard',
66 | },
67 | {
68 | img: 'https://david-dm.org/protacon/ng-virtual-keyboard.svg',
69 | link: 'https://david-dm.org/protacon/ng-virtual-keyboard',
70 | },
71 | {
72 | img: 'https://david-dm.org/protacon/ng-virtual-keyboard/dev-status.svg',
73 | link: 'https://david-dm.org/protacon/ng-virtual-keyboard#info=devDependencies',
74 | },
75 | ];
76 |
77 | public customLayout = [
78 | ['a', 'b:2', 'Backspace:3'],
79 | ['c:1.33', 'd:1.67', 'Shift:3'],
80 | ];
81 |
82 | public invalid = false;
83 |
84 | get customLayoutValue() {
85 | return JSON.stringify(this.customLayout, null, 2);
86 | }
87 |
88 | set customLayoutValue(value) {
89 | try {
90 | this.customLayout = JSON.parse(value);
91 |
92 | this.invalid = false;
93 | } catch (error) {
94 | this.invalid = true;
95 | }
96 | }
97 |
98 | onClose() {
99 | console.log('Keyboard was closed');
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/virtual-keyboard-key.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 |
3 | import { KeyPressInterface } from './key-press.interface';
4 | import { isSpacer, isSpecial, notDisabledSpecialKeys, specialKeyIcons, specialKeyTexts } from './layouts';
5 |
6 | @Component({
7 | selector: 'virtual-keyboard-key',
8 | template: `
9 |
25 | `,
26 | styles: [`
27 | .mat-button,
28 | .mat-icon-button,
29 | .mat-raised-button {
30 | min-width: 64px;
31 | min-height: 64px;
32 | padding: 0;
33 | margin: 2px;
34 | font-size: 32px;
35 | line-height: 32px;
36 | }
37 |
38 | .mat-button.spacer,
39 | .mat-icon-button.spacer,
40 | .mat-raised-button.spacer {
41 | background-color: transparent;
42 | }
43 | `]
44 | })
45 |
46 | export class VirtualKeyboardKeyComponent implements OnInit {
47 | @Input() key: string;
48 | @Input() disabled: boolean;
49 | @Output() keyPress = new EventEmitter\n \n \n \n \n \n \n
\n \n \n
\n
2 |
175 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
3 |
174 |
4 |
10 |
11 | @protacon/ng-virtual-keyboard
5 | 6 |
7 | ![]()
8 |
9 |
12 |
18 |
19 | What is this?
13 | 14 |15 | Virtual Keyboard for Angular applications. 16 |
17 |
20 |
46 |
47 | Install
21 | 22 |Step 1: Install @protacon/ng-virtual-keyboard
23 | 24 |
25 | $ npm install --save @protacon/ng-virtual-keyboard
26 |
27 | Step 2: Import the module
28 | 29 |
30 | Add NgVirtualKeyboardModule as an import in your app's root NgModule.
31 |
34 | import {{ '{' }} NgVirtualKeyboardModule {{ '}' }} from '@protacon/ng-virtual-keyboard';
35 |
36 | @NgModule({{ '{' }}
37 | ...
38 | imports: [
39 | ...
40 | NgVirtualKeyboardModule,
41 | ],
42 | ...
43 | {{ '}' }})
44 | export class AppModule {{ '{' }} {{ '}' }}
45 |
48 |
62 |
63 | Usage
49 | 50 |51 | Simple usage example 52 |
53 | 54 |
55 | <input type="text" value=""
56 | ng-virtual-keyboard
57 | ng-virtual-keyboard-layout="alphanumeric"
58 | ng-virtual-keyboard-placeholder="Custom placeholder text"
59 | (ng-virtual-keyboard-close)="onClose()"
60 | />
61 |
64 |
173 | Demos
65 | 66 |
67 |
93 |
94 |
68 |
72 |
73 |
74 | Minimal
75 |
76 |
77 |
78 | With placeholder
79 |
80 |
81 |
82 | With custom placeholder
83 |
84 |
85 |
86 | With maxlength="5"
87 |
88 |
89 |
90 | Type Password
91 |
92 | 69 | Layout/Info 70 |
71 |
95 |
147 |
148 |
96 | {{ layout.name }}
97 |
98 |
99 |
105 |
106 |
107 |
108 |
114 |
115 |
116 |
117 |
124 |
125 |
126 |
127 |
133 |
134 |
135 |
136 |
144 |
145 |
146 |
149 | Custom Layout
150 |
151 |
152 |
158 |
159 |
160 |
161 |
162 | Custom layout definition
163 |
164 |
165 |
166 |
167 |
168 | Given layout is not valid JSON - use
170 |
171 |
172 | Array<Array<string>> format
169 | 
123 |
124 |
125 |
128 |
130 |
131 |
138 |
139 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Loading...
129 |
123 |
124 |
125 |
128 |
130 |
131 |
138 |
139 |
--------------------------------------------------------------------------------
/dist/virtual-keyboard.directive.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | Object.defineProperty(exports, "__esModule", { value: true });
12 | var core_1 = require("@angular/core");
13 | var material_1 = require("@angular/material");
14 | var virtual_keyboard_component_1 = require("./virtual-keyboard.component");
15 | var layouts_1 = require("./layouts");
16 | var NgVirtualKeyboardDirective = /** @class */ (function () {
17 | /**
18 | * Constructor of the class.
19 | *
20 | * @param {ElementRef} element
21 | * @param {MatDialog} dialog
22 | */
23 | function NgVirtualKeyboardDirective(element, dialog) {
24 | this.element = element;
25 | this.dialog = dialog;
26 | this.opened = false;
27 | this.focus = true;
28 | this.keyboardClose = new core_1.EventEmitter();
29 | }
30 | NgVirtualKeyboardDirective.prototype.onWindowBlur = function () {
31 | this.focus = false;
32 | };
33 | NgVirtualKeyboardDirective.prototype.onWindowFocus = function () {
34 | var _this = this;
35 | setTimeout(function () {
36 | _this.focus = true;
37 | }, 0);
38 | };
39 | NgVirtualKeyboardDirective.prototype.onFocus = function () {
40 | this.openKeyboard();
41 | };
42 | NgVirtualKeyboardDirective.prototype.onClick = function () {
43 | this.openKeyboard();
44 | };
45 | /**
46 | * Method to open virtual keyboard
47 | */
48 | NgVirtualKeyboardDirective.prototype.openKeyboard = function () {
49 | var _this = this;
50 | if (!this.opened && this.focus) {
51 | this.opened = true;
52 | var dialogRef = void 0;
53 | dialogRef = this.dialog.open(virtual_keyboard_component_1.VirtualKeyboardComponent);
54 | dialogRef.componentInstance.inputElement = this.element;
55 | dialogRef.componentInstance.layout = this.getLayout();
56 | dialogRef.componentInstance.placeholder = this.getPlaceHolder();
57 | dialogRef.componentInstance.type = this.getType();
58 | dialogRef
59 | .afterClosed()
60 | .subscribe(function () {
61 | _this.keyboardClose.emit();
62 | setTimeout(function () {
63 | _this.opened = false;
64 | }, 0);
65 | });
66 | }
67 | };
68 | /**
69 | * Getter for used keyboard layout.
70 | *
71 | * @returns {KeyboardLayout}
72 | */
73 | NgVirtualKeyboardDirective.prototype.getLayout = function () {
74 | var layout;
75 | switch (this.layout) {
76 | case 'alphanumeric':
77 | layout = layouts_1.alphanumericKeyboard;
78 | break;
79 | case 'alphanumericNordic':
80 | layout = layouts_1.alphanumericNordicKeyboard;
81 | break;
82 | case 'extended':
83 | layout = layouts_1.extendedKeyboard;
84 | break;
85 | case 'extendedNordic':
86 | layout = layouts_1.extendedNordicKeyboard;
87 | break;
88 | case 'numeric':
89 | layout = layouts_1.numericKeyboard;
90 | break;
91 | case 'phone':
92 | layout = layouts_1.phoneKeyboard;
93 | break;
94 | default:
95 | layout = this.layout;
96 | break;
97 | }
98 | return layout;
99 | };
100 | /**
101 | * Getter for used placeholder for virtual keyboard input field.
102 | *
103 | * @returns {string}
104 | */
105 | NgVirtualKeyboardDirective.prototype.getPlaceHolder = function () {
106 | return this.placeholder ? this.placeholder : this.element.nativeElement.placeholder;
107 | };
108 | /**
109 | * Getter for used type for virtual keyboard input field.
110 | *
111 | * @return {string}
112 | */
113 | NgVirtualKeyboardDirective.prototype.getType = function () {
114 | return this.type ? this.type : this.element.nativeElement.type;
115 | };
116 | __decorate([
117 | core_1.Input('ng-virtual-keyboard-layout'),
118 | __metadata("design:type", Object)
119 | ], NgVirtualKeyboardDirective.prototype, "layout", void 0);
120 | __decorate([
121 | core_1.Input('ng-virtual-keyboard-placeholder'),
122 | __metadata("design:type", String)
123 | ], NgVirtualKeyboardDirective.prototype, "placeholder", void 0);
124 | __decorate([
125 | core_1.Input('ng-virtual-keyboard-type'),
126 | __metadata("design:type", String)
127 | ], NgVirtualKeyboardDirective.prototype, "type", void 0);
128 | __decorate([
129 | core_1.Output('ng-virtual-keyboard-close'),
130 | __metadata("design:type", core_1.EventEmitter)
131 | ], NgVirtualKeyboardDirective.prototype, "keyboardClose", void 0);
132 | __decorate([
133 | core_1.HostListener('window:blur'),
134 | __metadata("design:type", Function),
135 | __metadata("design:paramtypes", []),
136 | __metadata("design:returntype", void 0)
137 | ], NgVirtualKeyboardDirective.prototype, "onWindowBlur", null);
138 | __decorate([
139 | core_1.HostListener('window:focus'),
140 | __metadata("design:type", Function),
141 | __metadata("design:paramtypes", []),
142 | __metadata("design:returntype", void 0)
143 | ], NgVirtualKeyboardDirective.prototype, "onWindowFocus", null);
144 | __decorate([
145 | core_1.HostListener('focus'),
146 | __metadata("design:type", Function),
147 | __metadata("design:paramtypes", []),
148 | __metadata("design:returntype", void 0)
149 | ], NgVirtualKeyboardDirective.prototype, "onFocus", null);
150 | __decorate([
151 | core_1.HostListener('click'),
152 | __metadata("design:type", Function),
153 | __metadata("design:paramtypes", []),
154 | __metadata("design:returntype", void 0)
155 | ], NgVirtualKeyboardDirective.prototype, "onClick", null);
156 | NgVirtualKeyboardDirective = __decorate([
157 | core_1.Directive({
158 | selector: '[ng-virtual-keyboard]'
159 | }),
160 | __metadata("design:paramtypes", [core_1.ElementRef,
161 | material_1.MatDialog])
162 | ], NgVirtualKeyboardDirective);
163 | return NgVirtualKeyboardDirective;
164 | }());
165 | exports.NgVirtualKeyboardDirective = NgVirtualKeyboardDirective;
166 | //# sourceMappingURL=virtual-keyboard.directive.js.map
--------------------------------------------------------------------------------
/src/virtual-keyboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
2 | import { MatDialogRef } from '@angular/material';
3 |
4 | import { keyboardCapsLockLayout, KeyboardLayout } from './layouts';
5 | import { VirtualKeyboardService } from './virtual-keyboard.service';
6 | import { KeyPressInterface } from './key-press.interface';
7 |
8 | @Component({
9 | selector: 'virtual-keyboard',
10 | template: `
11 | Loading...
129 |
12 |
43 | `,
44 | styles: [`
45 | .close {
46 | position: relative;
47 | float: right;
48 | top: -16px;
49 | right: 0;
50 | margin-bottom: -40px;
51 | }
52 |
53 | .mat-input-container {
54 | margin: -16px 0;
55 | font-size: 32px;
56 | }
57 |
58 | .mat-input-element:disabled {
59 | color: currentColor;
60 | }
61 |
62 | :host /deep/ .mat-input-placeholder {
63 | top: 10px !important;
64 | font-size: 24px !important;
65 | }
66 | `]
67 | })
68 |
69 | export class VirtualKeyboardComponent implements OnInit, OnDestroy {
70 | @ViewChild('keyboardInput', { static: true }) keyboardInput: ElementRef;
71 |
72 | public inputElement: ElementRef;
73 | public layout: KeyboardLayout;
74 | public placeholder: string;
75 | public type: string;
76 | public disabled: boolean;
77 | public maxLength: number | string;
78 |
79 | private caretPosition: number;
80 | private shift = false;
81 |
82 | /**
83 | * Helper method to set cursor in input to correct place.
84 | *
85 | * @param {HTMLInputElement|HTMLTextAreaElement} input
86 | * @param {number} start
87 | * @param {number} end
88 | */
89 | private static setSelectionRange(
90 | input: any,
91 | start: number,
92 | end: number
93 | ): void {
94 | if (input.setSelectionRange) {
95 | input.focus();
96 | input.setSelectionRange(start, end);
97 |
98 | } else if (input.createTextRange) {
99 | const range = input.createTextRange();
100 |
101 | range.collapse(true);
102 | range.moveEnd('character', end);
103 | range.moveStart('character', start);
104 | range.select();
105 | }
106 | }
107 |
108 | /**
109 | * Constructor of the class.
110 | *
111 | * @param {MatDialogRef
13 |
14 |
19 |
20 |
27 |
28 |
29 |
42 |
33 |
41 | \n
\n ",
237 | styles: ["\n .close {\n position: relative;\n float: right;\n top: -16px;\n right: 0;\n margin-bottom: -40px;\n }\n \n .mat-input-container {\n margin: -16px 0;\n font-size: 32px;\n }\n \n .mat-input-element:disabled {\n color: currentColor;\n }\n\n :host /deep/ .mat-input-placeholder {\n top: 10px !important;\n font-size: 24px !important;\n }\n "]
238 | }),
239 | __metadata("design:paramtypes", [material_1.MatDialogRef,
240 | virtual_keyboard_service_1.VirtualKeyboardService])
241 | ], VirtualKeyboardComponent);
242 | return VirtualKeyboardComponent;
243 | }());
244 | exports.VirtualKeyboardComponent = VirtualKeyboardComponent;
245 | //# sourceMappingURL=virtual-keyboard.component.js.map
--------------------------------------------------------------------------------
/dist/ng-virtual-keyboard.umd.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/material"),require("rxjs/internal/ReplaySubject"),require("@angular/common"),require("@angular/forms"),require("@angular/flex-layout")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/material","rxjs/internal/ReplaySubject","@angular/common","@angular/forms","@angular/flex-layout"],t):"object"==typeof exports?exports["ng-virtual-keyboard"]=t(require("@angular/core"),require("@angular/material"),require("rxjs/internal/ReplaySubject"),require("@angular/common"),require("@angular/forms"),require("@angular/flex-layout")):e["ng-virtual-keyboard"]=t(e["@angular/core"],e["@angular/material"],e["rxjs/internal/ReplaySubject"],e["@angular/common"],e["@angular/forms"],e["@angular/flex-layout"])}(window,(function(e,t,n,i,o,a){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function i(e){return e.length>1&&!!t.specialKeys.filter((function(t){return new RegExp("^("+t+")(:(\\d+(\\.\\d+)?))?$","g").test(e)})).length}Object.defineProperty(t,"__esModule",{value:!0}),t.alphanumericKeyboard=[["1","2","3","4","5","6","7","8","9","0","Backspace:2"],["q","w","e","r","t","y","u","i","o","p","CapsLock:2"],["a","s","d","f","g","h","j","k","l","Spacer","Shift:2"],["z","x","c","v","b","n","m","Spacer:5"]],t.alphanumericNordicKeyboard=[["1","2","3","4","5","6","7","8","9","0","Spacer","Backspace:2"],["q","w","e","r","t","y","u","i","o","p","å","CapsLock:2"],["a","s","d","f","g","h","j","k","l","ö","ä","Shift:2"],["z","x","c","v","b","n","m","Spacer:6"]],t.extendedKeyboard=[["1","2","3","4","5","6","7","8","9","0","Backspace:2"],["q","w","e","r","t","y","u","i","o","p","CapsLock:2"],["a","s","d","f","g","h","j","k","l","Spacer","Shift:2"],["z","x","c","v","b","n","m",",",".","-","_","+"],["Spacer","@","SpaceBar:7","#","Spacer:2"]],t.extendedNordicKeyboard=[["1","2","3","4","5","6","7","8","9","0","+","Backspace:2"],["q","w","e","r","t","y","u","i","o","p","å","CapsLock:2"],["a","s","d","f","g","h","j","k","l","ö","ä","Shift:2"],["z","x","c","v","b","n","m",",",".","-","_","Spacer:2"],["Spacer","@","SpaceBar:7","#","Spacer:3"]],t.numericKeyboard=[["1","2","3","Backspace:2"],["4","5","6","Spacer:2"],["7","8","9","Spacer:2"],["Spacer","0","Spacer:3"]],t.phoneKeyboard=[["1","2","3","Backspace:2"],["4","5","6","Spacer:2"],["7","8","9","Spacer:2"],["-","0","+","Spacer:2"]],t.specialKeys=["Enter","Backspace","Escape","CapsLock","SpaceBar","Spacer","Shift"],t.specialKeyIcons={Enter:"keyboard_return",Backspace:"backspace",Escape:"close",SpaceBar:"space_bar",Shift:"keyboard_capslock"},t.specialKeyTexts={CapsLock:"Caps"},t.notDisabledSpecialKeys=["Enter","Backspace","Escape"],t.isSpacer=function(e){return e.length>1&&/^Spacer(:(\d+(\.\d+)?))?$/g.test(e)},t.isSpecial=i,t.keyboardCapsLockLayout=function(e,t){return e.map((function(e){return e.map((function(e){return i(e)?e:t?e.toUpperCase():e.toLowerCase()}))}))}},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var a=n(0),r=n(1),s=n(4),c=n(2),l=function(){function e(e,t){this.element=e,this.dialog=t,this.opened=!1,this.focus=!0,this.keyboardClose=new a.EventEmitter}return e.prototype.onWindowBlur=function(){this.focus=!1},e.prototype.onWindowFocus=function(){var e=this;setTimeout((function(){e.focus=!0}),0)},e.prototype.onFocus=function(){this.openKeyboard()},e.prototype.onClick=function(){this.openKeyboard()},e.prototype.openKeyboard=function(){var e=this;if(!this.opened&&this.focus){this.opened=!0;var t=void 0;(t=this.dialog.open(s.VirtualKeyboardComponent)).componentInstance.inputElement=this.element,t.componentInstance.layout=this.getLayout(),t.componentInstance.placeholder=this.getPlaceHolder(),t.componentInstance.type=this.getType(),t.afterClosed().subscribe((function(){e.keyboardClose.emit(),setTimeout((function(){e.opened=!1}),0)}))}},e.prototype.getLayout=function(){var e;switch(this.layout){case"alphanumeric":e=c.alphanumericKeyboard;break;case"alphanumericNordic":e=c.alphanumericNordicKeyboard;break;case"extended":e=c.extendedKeyboard;break;case"extendedNordic":e=c.extendedNordicKeyboard;break;case"numeric":e=c.numericKeyboard;break;case"phone":e=c.phoneKeyboard;break;default:e=this.layout}return e},e.prototype.getPlaceHolder=function(){return this.placeholder?this.placeholder:this.element.nativeElement.placeholder},e.prototype.getType=function(){return this.type?this.type:this.element.nativeElement.type},i([a.Input("ng-virtual-keyboard-layout"),o("design:type",Object)],e.prototype,"layout",void 0),i([a.Input("ng-virtual-keyboard-placeholder"),o("design:type",String)],e.prototype,"placeholder",void 0),i([a.Input("ng-virtual-keyboard-type"),o("design:type",String)],e.prototype,"type",void 0),i([a.Output("ng-virtual-keyboard-close"),o("design:type",a.EventEmitter)],e.prototype,"keyboardClose",void 0),i([a.HostListener("window:blur"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onWindowBlur",null),i([a.HostListener("window:focus"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onWindowFocus",null),i([a.HostListener("focus"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onFocus",null),i([a.HostListener("click"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onClick",null),e=i([a.Directive({selector:"[ng-virtual-keyboard]"}),o("design:paramtypes",[a.ElementRef,r.MatDialog])],e)}();t.NgVirtualKeyboardDirective=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var a=n(0),r=n(1),s=n(2),c=n(5),l=function(){function e(e,t){this.dialogRef=e,this.virtualKeyboardService=t,this.shift=!1}var t;return t=e,e.setSelectionRange=function(e,t,n){if(e.setSelectionRange)e.focus(),e.setSelectionRange(t,n);else if(e.createTextRange){var i=e.createTextRange();i.collapse(!0),i.moveEnd("character",n),i.moveStart("character",t),i.select()}},e.prototype.ngOnInit=function(){var e=this;setTimeout((function(){e.keyboardInput.nativeElement.focus()}),0),this.virtualKeyboardService.shift$.subscribe((function(t){e.shift=t})),this.virtualKeyboardService.capsLock$.subscribe((function(t){e.layout=s.keyboardCapsLockLayout(e.layout,t)})),this.virtualKeyboardService.caretPosition$.subscribe((function(n){e.caretPosition=n,setTimeout((function(){t.setSelectionRange(e.keyboardInput.nativeElement,n,n)}),0)})),this.inputElement.nativeElement.value.length&&this.virtualKeyboardService.setCaretPosition(this.inputElement.nativeElement.value.length),this.maxLength=this.inputElement.nativeElement.maxLength>0?this.inputElement.nativeElement.maxLength:"",this.checkDisabled()},e.prototype.ngOnDestroy=function(){this.virtualKeyboardService.reset()},e.prototype.close=function(){this.dialogRef.close()},e.prototype.updateCaretPosition=function(){this.virtualKeyboardService.setCaretPosition(this.keyboardInput.nativeElement.selectionStart)},e.prototype.keyPress=function(e){e.special?this.handleSpecialKey(e):(this.handleNormalKey(e.keyValue),this.dispatchEvents(e),this.shift&&this.virtualKeyboardService.toggleShift()),this.checkDisabled()},e.prototype.checkDisabled=function(){var e=this.inputElement.nativeElement.maxLength,t=this.inputElement.nativeElement.value.length;this.disabled=e>0&&t>=e},e.prototype.handleNormalKey=function(e){var t="";isNaN(this.caretPosition)?t=""+this.inputElement.nativeElement.value+e:(t=[this.inputElement.nativeElement.value.slice(0,this.caretPosition),e,this.inputElement.nativeElement.value.slice(this.caretPosition)].join(""),this.virtualKeyboardService.setCaretPosition(this.caretPosition+1)),this.inputElement.nativeElement.value=t},e.prototype.handleSpecialKey=function(e){switch(e.keyValue){case"Enter":case"Escape":this.close();break;case"Backspace":var t=this.inputElement.nativeElement.value;if(isNaN(this.caretPosition))this.inputElement.nativeElement.value=t.substring(0,t.length-1);else if(this.caretPosition>0){var n=t.slice(0,this.caretPosition-1),i=t.slice(this.caretPosition);this.inputElement.nativeElement.value=""+n+i,this.virtualKeyboardService.setCaretPosition(this.caretPosition-1)}this.dispatchEvents(e),this.keyboardInput.nativeElement.focus();break;case"CapsLock":this.virtualKeyboardService.toggleCapsLock();break;case"Shift":this.virtualKeyboardService.toggleShift();break;case"SpaceBar":this.handleNormalKey(" ")}},e.prototype.dispatchEvents=function(e){var t={bubbles:!0,cancelable:!0,shiftKey:this.shift,key:e.keyValue,code:"Key"+e.keyValue.toUpperCase()+"}",location:0};this.inputElement.nativeElement.dispatchEvent(new KeyboardEvent("keydown",t)),this.inputElement.nativeElement.dispatchEvent(new KeyboardEvent("keypress",t)),this.inputElement.nativeElement.dispatchEvent(new Event("input",{bubbles:!0})),this.inputElement.nativeElement.dispatchEvent(new KeyboardEvent("keyup",t)),this.keyboardInput.nativeElement.focus()},i([a.ViewChild("keyboardInput",{static:!0}),o("design:type",a.ElementRef)],e.prototype,"keyboardInput",void 0),e=t=i([a.Component({selector:"virtual-keyboard",template:'\n \n \n \n \n \n \n \n
\n \n \n
\n \n
\n ',styles:["\n .close {\n position: relative;\n float: right;\n top: -16px;\n right: 0;\n margin-bottom: -40px;\n }\n \n .mat-input-container {\n margin: -16px 0;\n font-size: 32px;\n }\n \n .mat-input-element:disabled {\n color: currentColor;\n }\n\n :host /deep/ .mat-input-placeholder {\n top: 10px !important;\n font-size: 24px !important;\n }\n "]}),o("design:paramtypes",[r.MatDialogRef,c.VirtualKeyboardService])],e)}();t.VirtualKeyboardComponent=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),a=n(7),r=function(){function e(){this.shift$=new a.ReplaySubject(1),this.capsLock$=new a.ReplaySubject(1),this.caretPosition$=new a.ReplaySubject(1),this.capsLock=!1,this.shift=!1}return e.prototype.setShift=function(e){this.shift=e,this.shift$.next(this.shift),this.setCapsLock(this.shift)},e.prototype.setCapsLock=function(e){this.capsLock=e,this.capsLock$.next(e)},e.prototype.toggleShift=function(){this.shift=!this.shift,this.shift$.next(this.shift),this.setCapsLock(this.shift)},e.prototype.toggleCapsLock=function(){this.capsLock=!this.capsLock,this.capsLock$.next(this.capsLock)},e.prototype.setCaretPosition=function(e){this.caretPosition$.next(e)},e.prototype.reset=function(){this.setShift(!1)},e=i([o.Injectable()],e)}();t.VirtualKeyboardService=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(3);t.NgVirtualKeyboardDirective=i.NgVirtualKeyboardDirective;var o=n(8);t.NgVirtualKeyboardModule=o.NgVirtualKeyboardModule},function(e,t){e.exports=n},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),a=n(9),r=n(10),s=n(1),c=n(11),l=n(3),p=n(4),u=n(12),d=n(5),y=function(){function e(){}return e=i([o.NgModule({declarations:[l.NgVirtualKeyboardDirective,p.VirtualKeyboardComponent,u.VirtualKeyboardKeyComponent],providers:[d.VirtualKeyboardService],imports:[a.CommonModule,r.FormsModule,r.ReactiveFormsModule,c.FlexLayoutModule,s.MatButtonModule,s.MatDialogModule,s.MatIconModule,s.MatInputModule],entryComponents:[p.VirtualKeyboardComponent],exports:[l.NgVirtualKeyboardDirective]})],e)}();t.NgVirtualKeyboardModule=y},function(e,t){e.exports=i},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var a=n(0),r=n(2),s=function(){function e(){this.keyPress=new a.EventEmitter,this.special=!1,this.spacer=!1}return e.prototype.ngOnInit=function(){var e=1,t=0;if(this.key.length>1){this.spacer=r.isSpacer(this.key),this.special=r.isSpecial(this.key);var n=/^(\w+)(:(\d+(\.\d+)?))?$/g.exec(this.key);this.keyValue=n[1],n[3]&&(t=4*((e=parseFloat(n[3]))-1))}else this.keyValue=this.key;this.special&&(r.specialKeyIcons.hasOwnProperty(this.keyValue)?this.icon=r.specialKeyIcons[this.keyValue]:r.specialKeyTexts.hasOwnProperty(this.keyValue)&&(this.text=r.specialKeyTexts[this.keyValue])),this.flexValue=64*e+t+"px"},e.prototype.isDisabled=function(){return!!this.spacer||(!this.disabled||-1===r.notDisabledSpecialKeys.indexOf(this.keyValue))&&this.disabled},e.prototype.onKeyPress=function(){this.keyPress.emit({special:this.special,keyValue:this.keyValue,key:this.key})},i([a.Input(),o("design:type",String)],e.prototype,"key",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"disabled",void 0),i([a.Output(),o("design:type",Object)],e.prototype,"keyPress",void 0),e=i([a.Component({selector:"virtual-keyboard-key",template:'\n \n \n \n \n \n \n \n
\n \n \n
\n \n
\n `,\n styles: [`\n .close {\n position: relative;\n float: right;\n top: -16px;\n right: 0;\n margin-bottom: -40px;\n }\n \n .mat-input-container {\n margin: -16px 0;\n font-size: 32px;\n }\n \n .mat-input-element:disabled {\n color: currentColor;\n }\n\n :host /deep/ .mat-input-placeholder {\n top: 10px !important;\n font-size: 24px !important;\n }\n `]\n})\n\nexport class VirtualKeyboardComponent implements OnInit, OnDestroy {\n @ViewChild('keyboardInput', { static: true }) keyboardInput: ElementRef;\n\n public inputElement: ElementRef;\n public layout: KeyboardLayout;\n public placeholder: string;\n public type: string;\n public disabled: boolean;\n public maxLength: number | string;\n\n private caretPosition: number;\n private shift = false;\n\n /**\n * Helper method to set cursor in input to correct place.\n *\n * @param {HTMLInputElement|HTMLTextAreaElement} input\n * @param {number} start\n * @param {number} end\n */\n private static setSelectionRange(\n input: any,\n start: number,\n end: number\n ): void {\n if (input.setSelectionRange) {\n input.focus();\n input.setSelectionRange(start, end);\n\n } else if (input.createTextRange) {\n const range = input.createTextRange();\n\n range.collapse(true);\n range.moveEnd('character', end);\n range.moveStart('character', start);\n range.select();\n }\n }\n\n /**\n * Constructor of the class.\n *\n * @param {MatDialogRef\n \n \n \n \n \n \n
\n \n \n
\n