ngx-onscreen-twelvekeyboard
Version:
A twelve key (0-9, * and #) keypad on-screen touch keyboard for Angular applications.
84 lines • 9.11 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Optional, Output, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export 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.NgControl, optional: true }, { token: i1.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.NgControl, decorators: [{
type: Optional
}] }, { type: i1.FormControlName, decorators: [{
type: Optional
}] }]; }, propDecorators: { keypadBinding: [{
type: Input
}], keypadFocusChange: [{
type: Output,
args: ['keypadFocus']
}], onHostFocus: [{
type: HostListener,
args: ['focus']
}], onHostBlur: [{
type: HostListener,
args: ['blur']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2V5cGFkLWJpbmRpbmcuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW9uc2NyZWVuLXR3ZWx2ZWtleWJvYXJkL3NyYy9saWIva2V5cGFkL2tleXBhZC1iaW5kaW5nL2tleXBhZC1iaW5kaW5nLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLFFBQVEsRUFDUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQU92QixNQUFNLE9BQU8sc0JBQXNCO0lBWWpDLFlBQWdDLFNBQW9CLEVBQ3BCLGVBQWdDO1FBRGhDLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFDcEIsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBUHpELHNCQUFpQixHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBRXRFLFlBQU8sR0FBWSxLQUFLLENBQUM7SUFNakMsQ0FBQztJQUVELElBQVksV0FBVztRQUNyQixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEIsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQztTQUNyQzthQUFNLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUN6QixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDO1NBQy9CO2FBQU07WUFDTCxPQUFPLEtBQUssQ0FBQyxDQUFDO1NBQ2Y7SUFDSCxDQUFDO0lBRU0sZUFBZTtRQUNwQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBR00sV0FBVztRQUNoQixJQUFJLENBQUMsYUFBYSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDcEIsSUFBSSxDQUFDLDhCQUE4QixFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUdNLFVBQVU7UUFDZixJQUFJLENBQUMsYUFBYSxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUVPLDhCQUE4Qjs7UUFDcEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsTUFBQSxJQUFJLENBQUMsT0FBTywwQ0FBRSxLQUFLLENBQUM7SUFDakQsQ0FBQztJQUVPLGlCQUFpQjs7UUFDdkIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUVqQyxJQUFJLE9BQU8sRUFBRTtZQUNYLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBRXZCLE1BQUEsT0FBTyxDQUFDLFlBQVksMENBQUUsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ3hDLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtvQkFDaEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO2lCQUNsQztZQUNILENBQUMsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ2pELElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtvQkFDaEIsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztpQkFDekI7WUFDSCxDQUFDLENBQUMsQ0FBQztTQUNKO2FBQU07WUFDTCxPQUFPLENBQUMsSUFBSSxDQUFDLDhEQUE4RCxDQUFDLENBQUM7U0FDOUU7SUFDSCxDQUFDOztvSEFwRVUsc0JBQXNCO3dHQUF0QixzQkFBc0I7NEZBQXRCLHNCQUFzQjtrQkFIbEMsU0FBUzttQkFBQztvQkFDRSxRQUFRLEVBQUUsaUJBQWlCO2lCQUM1Qjs7MEJBYUcsUUFBUTs7MEJBQ1IsUUFBUTs0Q0FWZCxhQUFhO3NCQURuQixLQUFLO2dCQUlDLGlCQUFpQjtzQkFEdkIsTUFBTTt1QkFBQyxhQUFhO2dCQTBCZCxXQUFXO3NCQURqQixZQUFZO3VCQUFDLE9BQU87Z0JBU2QsVUFBVTtzQkFEaEIsWUFBWTt1QkFBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgRGlyZWN0aXZlLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtLZXlwYWRDb21wb25lbnR9IGZyb20gJy4uL2tleXBhZC5jb21wb25lbnQnO1xuaW1wb3J0IHtBYnN0cmFjdENvbnRyb2wsIEZvcm1Db250cm9sTmFtZSwgTmdDb250cm9sfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBEaXJlY3RpdmUoe1xuICAgICAgICAgICAgIHNlbGVjdG9yOiAnW2tleXBhZEJpbmRpbmddJyxcbiAgICAgICAgICAgfSlcbmV4cG9ydCBjbGFzcyBLZXlwYWRCaW5kaW5nRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgQElucHV0KClcbiAgcHVibGljIGtleXBhZEJpbmRpbmchOiBLZXlwYWRDb21wb25lbnQ7XG5cbiAgQE91dHB1dCgna2V5cGFkRm9jdXMnKVxuICBwdWJsaWMga2V5cGFkRm9jdXNDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBwcml2YXRlIGZvY3VzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwcml2YXRlIGNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCB8IHVuZGVmaW5lZDtcblxuICBjb25zdHJ1Y3RvcihAT3B0aW9uYWwoKSBwcml2YXRlIG5nQ29udHJvbDogTmdDb250cm9sLFxuICAgICAgICAgICAgICBAT3B0aW9uYWwoKSBwcml2YXRlIGZvcm1Db250cm9sTmFtZTogRm9ybUNvbnRyb2xOYW1lKSB7XG4gIH1cblxuICBwcml2YXRlIGdldCBmb3JtQ29udHJvbCgpOiBBYnN0cmFjdENvbnRyb2wgfCB1bmRlZmluZWQgfCBudWxsIHtcbiAgICBpZiAodGhpcy5mb3JtQ29udHJvbE5hbWUpIHtcbiAgICAgIHJldHVybiB0aGlzLmZvcm1Db250cm9sTmFtZS5jb250cm9sO1xuICAgIH0gZWxzZSBpZiAodGhpcy5uZ0NvbnRyb2wpIHtcbiAgICAgIHJldHVybiB0aGlzLm5nQ29udHJvbC5jb250cm9sO1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdm9pZCAwO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXR1cEJvdW5kQ29udHJvbCgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZm9jdXMnKVxuICBwdWJsaWMgb25Ib3N0Rm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5rZXlwYWRCaW5kaW5nLmVtaXRJbnB1dEZvY3VzRXZlbnQodHJ1ZSk7XG4gICAgdGhpcy5rZXlwYWRGb2N1c0NoYW5nZS5lbWl0KHRydWUpO1xuICAgIHRoaXMuZm9jdXNlZCA9IHRydWU7XG4gICAgdGhpcy5zZXRJbnRlcm5hbFN0YXRlVG9Cb3VuZENvbnRyb2woKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKVxuICBwdWJsaWMgb25Ib3N0Qmx1cigpOiB2b2lkIHtcbiAgICB0aGlzLmtleXBhZEJpbmRpbmcuZW1pdElucHV0Rm9jdXNFdmVudChmYWxzZSk7XG4gICAgdGhpcy5rZXlwYWRGb2N1c0NoYW5nZS5lbWl0KGZhbHNlKTtcbiAgICB0aGlzLmZvY3VzZWQgPSBmYWxzZTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0SW50ZXJuYWxTdGF0ZVRvQm91bmRDb250cm9sKCk6IHZvaWQge1xuICAgIHRoaXMua2V5cGFkQmluZGluZy52YWx1ZSA9IHRoaXMuY29udHJvbD8udmFsdWU7XG4gIH1cblxuICBwcml2YXRlIHNldHVwQm91bmRDb250cm9sKCk6IHZvaWQge1xuICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmZvcm1Db250cm9sO1xuXG4gICAgaWYgKGNvbnRyb2wpIHtcbiAgICAgIHRoaXMuY29udHJvbCA9IGNvbnRyb2w7XG5cbiAgICAgIGNvbnRyb2wudmFsdWVDaGFuZ2VzPy5zdWJzY3JpYmUoKHZhbHVlKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLmZvY3VzZWQpIHtcbiAgICAgICAgICB0aGlzLmtleXBhZEJpbmRpbmcudmFsdWUgPSB2YWx1ZTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgICB0aGlzLmtleXBhZEJpbmRpbmcudmFsdWVDaGFuZ2Uuc3Vic2NyaWJlKCh2YWx1ZSkgPT4ge1xuICAgICAgICBpZiAodGhpcy5mb2N1c2VkKSB7XG4gICAgICAgICAgY29udHJvbC5zZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0tleXBhZCBub3QgYm91bmQgdG8gZm9ybSBjb250cm9sLiBObyBjb250cm9sIGNvdWxkIGJlIGZvdW5kLicpO1xuICAgIH1cbiAgfVxufVxuIl19