ngx-onscreen-twelvekeyboard
Version:
A twelve key (0-9, * and #) keypad on-screen touch keyboard for Angular applications.
435 lines (425 loc) • 21.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, Directive, Optional, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/forms';
const german_ger = {
iso639_1: 'de',
iso639_2b: 'deu',
iso639_2t: 'ger',
iso639_3: 'deu',
isoName: 'German',
keys: {
'1': [
'\u0020',
'\u002e',
'\u002c',
'\u003f',
'\u0021',
'\u0031',
'\u0040',
'\u0027',
'\u0022',
'\u002d',
'\u0028',
'\u0029',
'\u002f',
'\u003a',
'\u005f',
'\u003b',
'\u002b',
'\u0026',
'\u0025',
'\u002a',
'\u003d',
'\u003c',
'\u003e',
'\u20ac',
'\u00a3',
'\u0024',
'\u00a5',
'\u00a4',
'\u005b',
'\u005d',
'\u007b',
'\u007d',
'\u005c',
'\u007e',
'\u005e',
'\u008f',
'\u00a1',
'\u00a7',
'\u0023',
],
'2': ['\u0061', '\u0062', '\u0063', '\u0032', '\u00e4', '\u00e0', '\u00e5', '\u0101'],
'3': ['\u0064', '\u0065', '\u0066', '\u0033', '\u0111', '\u00e9', '\u0113'],
'4': ['\u0067', '\u0068', '\u0069', '\u0034'],
'5': ['\u006a', '\u006b', '\u006c', '\u0035'],
'6': ['\u006d', '\u006e', '\u006f', '\u0036', '\u00f6'],
'7': ['\u0070', '\u0071', '\u0072', '\u0073', '\u0037', '\u00df'],
'8': ['\u0074', '\u0075', '\u0076', '\u0038', '\u00fc'],
'9': ['\u0077', '\u0078', '\u0079', '\u007a', '\u0039'],
'*': ['\u002a'],
'0': ['\u0030'],
'#': ['\u0023'],
},
};
const english_eng = {
iso639_1: 'en',
iso639_2b: 'eng',
iso639_2t: 'eng',
iso639_3: 'eng',
isoName: 'English',
keys: {
'1': [
'\u0020',
'\u002e',
'\u002c',
'\u003f',
'\u0021',
'\u0031',
'\u0040',
'\u0027',
'\u0022',
'\u002d',
'\u0028',
'\u0029',
'\u002f',
'\u003a',
'\u005f',
'\u003b',
'\u002b',
'\u0026',
'\u0025',
'\u002a',
'\u003d',
'\u003c',
'\u003e',
'\u20ac',
'\u00a3',
'\u0024',
'\u00a5',
'\u00a4',
'\u005b',
'\u005d',
'\u007b',
'\u007d',
'\u005c',
'\u007e',
'\u005e',
'\u008f',
'\u00a1',
'\u00a7',
'\u0023',
],
'2': ['\u0061', '\u0062', '\u0063', '\u0032', '\u00e0', '\u00e2', '\u00e6', '\u00e7'],
'3': ['\u0064', '\u0065', '\u0066', '\u0033', '\u00e9', '\u00e8', '\u00ea', '\u00eb'],
'4': ['\u0067', '\u0068', '\u0069', '\u0034', '\u00ee', '\u00ef'],
'5': ['\u006a', '\u006b', '\u006c', '\u0035'],
'6': ['\u006d', '\u006e', '\u006f', '\u0036', '\u00f1', '\u00f4', '\u00f6', '\u0153'],
'7': ['\u0070', '\u0071', '\u0072', '\u0073', '\u0037'],
'8': ['\u0074', '\u0075', '\u0076', '\u0038', '\u00fb'],
'9': ['\u0077', '\u0078', '\u0079', '\u007a', '\u0039', '\u0175', '\u0177'],
'*': ['\u002a'],
'0': ['\u0030'],
'#': ['\u0023'],
},
};
const keyAssignments = {
'ger': german_ger,
'eng': english_eng,
};
class KeypadComponent {
constructor() {
this.languageAssignment = keyAssignments['eng'];
this.timeoutDuration = 2000;
this.value = '';
this.backspaceEnabled = false;
this.clearEnabled = false;
this.shift = false;
this.shiftChange = new EventEmitter();
this.valueChange = new EventEmitter();
this.vanityChange = new EventEmitter();
this.pressedKeysChange = new EventEmitter();
this.inputFocusChange = new EventEmitter();
this._pressedKeys = '';
this._keyAssignmentIndex = -1;
this._inputTimeout = 0;
}
get pressedKeys() {
return this._pressedKeys;
}
set pressedKeys(value) {
this._pressedKeys = value;
}
get keyAssignmentIndex() {
return this._keyAssignmentIndex;
}
set keyAssignmentIndex(index) {
this._keyAssignmentIndex = index;
}
get inputTimeout() {
return this._inputTimeout;
}
set inputTimeout(inputTimeout) {
this._inputTimeout = inputTimeout;
}
get setButton() {
return this._setButton;
}
set setButton(button) {
this._setButton = button;
}
ngOnInit() {
if (!(this.language && this.language in keyAssignments)) {
console.error(`Given language "${this.language}" is not supported yet.`);
}
else {
this.languageAssignment = keyAssignments[this.language];
}
}
ngOnDestroy() {
this.clearTimeout();
}
getButtonClickFunction(button) {
return (event) => this.onButtonClick(button, event);
}
onButtonClick(button, event) {
event.preventDefault();
if (this.backspaceEnabled && button === '*') {
this.handleBackspace();
}
else if (this.clearEnabled && button === '#') {
this.handleClear();
}
else {
if (button !== this.setButton) {
this.updateValue();
this.keyAssignmentIndex = 0;
}
else {
this.keyAssignmentIndex = (this.keyAssignmentIndex + 1) %
this.languageAssignment.keys[button].length;
}
this.setButton = button;
this.setPressedKeys(this.pressedKeys += button);
}
this.resetTimeout();
}
reset() {
this.pressedKeys = '';
this.value = '';
this.keyAssignmentIndex = -1;
this.setButton = void 0;
}
emitInputFocusEvent(value) {
this.inputFocusChange.emit(value);
}
handleBackspace() {
this.setPressedKeys(this.pressedKeys.substring(0, this.pressedKeys.length - 1));
this.setValue(this.value.substring(0, this.value.length - 1));
this.setButton = void 0;
}
handleClear() {
this.setPressedKeys('');
this.setValue('');
this.setButton = void 0;
}
updateVanity() {
let vanity = '^';
for (const pressedKey of this.pressedKeys) {
vanity += `(${this.languageAssignment.keys[pressedKey].join('|')})`;
}
this.vanityChange.emit(vanity);
}
resetTimeout() {
window.clearTimeout(this._inputTimeout);
this._inputTimeout = window.setTimeout(() => {
if (this.setButton) {
this.updateValue();
}
this.setButton = void 0;
this.inputTimeout = 0;
this.keyAssignmentIndex = -1;
}, this.timeoutDuration);
}
setPressedKeys(pressedKeys) {
this.pressedKeys = pressedKeys;
this.pressedKeysChange.emit(this.pressedKeys);
this.updateVanity();
}
setShift(value) {
this.shift = value;
this.shiftChange.emit(value);
}
updateValue() {
if (this.setButton) {
const newCharacter = this.languageAssignment.keys[this.setButton][this.keyAssignmentIndex];
this.setValue(this.value +
(this.shift ? newCharacter.toUpperCase() : newCharacter));
this.setShift(false);
}
}
clearTimeout() {
window.clearTimeout(this._inputTimeout);
}
setValue(value) {
this.value = value;
this.valueChange.emit(this.value);
}
}
KeypadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeypadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
KeypadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KeypadComponent, selector: "osk-keypad", inputs: { buttonTemplate: "buttonTemplate", backspaceTemplate: "backspaceTemplate", clearTemplate: "clearTemplate", language: "language", timeoutDuration: "timeoutDuration", value: "value", backspaceEnabled: "backspaceEnabled", clearEnabled: "clearEnabled", shift: "shift" }, outputs: { shiftChange: "shiftChange", valueChange: "valueChange", vanityChange: "vanity", pressedKeysChange: "pressedKeys", inputFocusChange: "inputFocus" }, ngImport: i0, template: "<ng-template #defaultButtonTemplate let-click=\"click\" let-content=\"content\">\n <button (mousedown)=\"click($event)\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n</ng-template>\n\n<ng-template #defaultBackspaceTemplate>\n <span><-</span>\n</ng-template>\n\n<ng-template #defaultClearTemplate>\n <span>x</span>\n</ng-template>\n\n<div class=\"button-container\">\n <div class=\"button-row\">\n <ng-container [ngTemplateOutletContext]=\"{content: buttonOneContent, click: getButtonClickFunction('1')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonOneContent>\n <span>1<br>\n .@&</span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonTwoContent, click: getButtonClickFunction('2')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonTwoContent>\n <span>2<br>\n <ng-container *ngIf=\"shift; else twoElse\">ABC</ng-container>\n <ng-template #twoElse>abc</ng-template></span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonThreeContent, click: getButtonClickFunction('3')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonThreeContent>\n <span>3<br>\n <ng-container *ngIf=\"shift; else threeElse\">DEF</ng-container>\n <ng-template #threeElse>def</ng-template></span>\n </ng-template>\n </ng-container>\n </div>\n <div class=\"button-row\">\n <ng-container [ngTemplateOutletContext]=\"{content: buttonFourContent, click: getButtonClickFunction('4')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonFourContent>\n <span>4<br>\n <ng-container *ngIf=\"shift; else fourElse\">GHI</ng-container>\n <ng-template #fourElse>ghi</ng-template></span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonFiveContent, click: getButtonClickFunction('5')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonFiveContent>\n <span>5<br>\n <ng-container *ngIf=\"shift; else fiveElse\">JKL</ng-container>\n <ng-template #fiveElse>jkl</ng-template></span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonSixContent, click: getButtonClickFunction('6')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonSixContent>\n <span>6<br>\n <ng-container *ngIf=\"shift; else sixElse\">MNO</ng-container>\n <ng-template #sixElse>mno</ng-template></span>\n </ng-template>\n </ng-container>\n </div>\n <div class=\"button-row\">\n <ng-container [ngTemplateOutletContext]=\"{content: buttonSevenContent, click: getButtonClickFunction('7')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonSevenContent>\n <span>7<br>\n <ng-container *ngIf=\"shift; else sevenElse\">PQRS</ng-container>\n <ng-template #sevenElse>pqrs</ng-template></span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonEightContent, click: getButtonClickFunction('8')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonEightContent>\n <span>8<br>\n <ng-container *ngIf=\"shift; else eightElse\">TUV</ng-container>\n <ng-template #eightElse>tuv</ng-template></span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonNineContent, click: getButtonClickFunction('9')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonNineContent>\n <span>9<br>\n <ng-container *ngIf=\"shift; else nineElse\">WXYZ</ng-container>\n <ng-template #nineElse>wxyz</ng-template></span>\n </ng-template>\n </ng-container>\n </div>\n <div class=\"button-row\">\n <ng-container [ngTemplateOutletContext]=\"{content: buttonTenContent, click: getButtonClickFunction('*')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonTenContent>\n <ng-container *ngIf=\"backspaceEnabled; else backspaceElse\"\n [ngTemplateOutlet]=\"backspaceTemplate || defaultBackspaceTemplate\">\n </ng-container>\n <ng-template #backspaceElse>\n <span>*</span>\n </ng-template>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonElevenContent, click: getButtonClickFunction('0')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonElevenContent>\n <span>0</span>\n </ng-template>\n </ng-container>\n <ng-container [ngTemplateOutletContext]=\"{content: buttonTwelveContent, click: getButtonClickFunction('#')}\"\n [ngTemplateOutlet]=\"buttonTemplate || defaultButtonTemplate\">\n <ng-template #buttonTwelveContent>\n <ng-container *ngIf=\"clearEnabled; else clearElse\"\n [ngTemplateOutlet]=\"clearTemplate || defaultClearTemplate\">\n </ng-container>\n <ng-template #clearElse>\n <span>#</span>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: [".button-container{display:flex;flex-direction:column;grid-row-gap:var(--osk-row-gap);row-gap:var(--osk-row-gap)}.button-row{display:flex;flex-direction:row;grid-column-gap:var(--osk-col-gap);column-gap:var(--osk-col-gap)}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeypadComponent, decorators: [{
type: Component,
args: [{
selector: 'osk-keypad',
templateUrl: './keypad.component.html',
styleUrls: ['./keypad.component.scss'],
}]
}], propDecorators: { buttonTemplate: [{
type: Input
}], backspaceTemplate: [{
type: Input
}], clearTemplate: [{
type: Input
}], language: [{
type: Input
}], timeoutDuration: [{
type: Input
}], value: [{
type: Input
}], backspaceEnabled: [{
type: Input
}], clearEnabled: [{
type: Input
}], shift: [{
type: Input
}], shiftChange: [{
type: Output
}], valueChange: [{
type: Output
}], vanityChange: [{
type: Output,
args: ['vanity']
}], pressedKeysChange: [{
type: Output,
args: ['pressedKeys']
}], inputFocusChange: [{
type: Output,
args: ['inputFocus']
}] } });
class KeypadBindingDirective {
constructor(ngControl, formControlName) {
this.ngControl = ngControl;
this.formControlName = formControlName;
this.keypadFocusChange = new EventEmitter();
this.focused = false;
}
get formControl() {
if (this.formControlName) {
return this.formControlName.control;
}
else if (this.ngControl) {
return this.ngControl.control;
}
else {
return void 0;
}
}
ngAfterViewInit() {
this.setupBoundControl();
}
onHostFocus() {
this.keypadBinding.emitInputFocusEvent(true);
this.keypadFocusChange.emit(true);
this.focused = true;
this.setInternalStateToBoundControl();
}
onHostBlur() {
this.keypadBinding.emitInputFocusEvent(false);
this.keypadFocusChange.emit(false);
this.focused = false;
}
setInternalStateToBoundControl() {
var _a;
this.keypadBinding.value = (_a = this.control) === null || _a === void 0 ? void 0 : _a.value;
}
setupBoundControl() {
var _a;
const control = this.formControl;
if (control) {
this.control = control;
(_a = control.valueChanges) === null || _a === void 0 ? void 0 : _a.subscribe((value) => {
if (this.focused) {
this.keypadBinding.value = value;
}
});
this.keypadBinding.valueChange.subscribe((value) => {
if (this.focused) {
control.setValue(value);
}
});
}
else {
console.warn('Keypad not bound to form control. No control could be found.');
}
}
}
KeypadBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeypadBindingDirective, deps: [{ token: i1$1.NgControl, optional: true }, { token: i1$1.FormControlName, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
KeypadBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: KeypadBindingDirective, selector: "[keypadBinding]", inputs: { keypadBinding: "keypadBinding" }, outputs: { keypadFocusChange: "keypadFocus" }, host: { listeners: { "focus": "onHostFocus()", "blur": "onHostBlur()" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeypadBindingDirective, decorators: [{
type: Directive,
args: [{
selector: '[keypadBinding]',
}]
}], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
type: Optional
}] }, { type: i1$1.FormControlName, decorators: [{
type: Optional
}] }]; }, propDecorators: { keypadBinding: [{
type: Input
}], keypadFocusChange: [{
type: Output,
args: ['keypadFocus']
}], onHostFocus: [{
type: HostListener,
args: ['focus']
}], onHostBlur: [{
type: HostListener,
args: ['blur']
}] } });
class TwelveKeyOskbModule {
}
TwelveKeyOskbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TwelveKeyOskbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TwelveKeyOskbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TwelveKeyOskbModule, declarations: [KeypadComponent,
KeypadBindingDirective], imports: [CommonModule], exports: [KeypadComponent,
KeypadBindingDirective] });
TwelveKeyOskbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TwelveKeyOskbModule, providers: [], imports: [[
CommonModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TwelveKeyOskbModule, decorators: [{
type: NgModule,
args: [{
declarations: [
KeypadComponent,
KeypadBindingDirective,
],
imports: [
CommonModule,
],
providers: [],
exports: [
KeypadComponent,
KeypadBindingDirective,
],
}]
}] });
/*
* Public API Surface of ngx-onscreen-twelvekeyboard
*/
/**
* Generated bundle index. Do not edit.
*/
export { KeypadBindingDirective, KeypadComponent, TwelveKeyOskbModule, keyAssignments };
//# sourceMappingURL=ngx-onscreen-twelvekeyboard.js.map