ngx-otp-input
Version:
One Time Password input library for Angular (14+)
78 lines • 9.72 kB
JavaScript
import { ContentChildren, Directive, EventEmitter, HostListener, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
export class InputNavigationsDirective {
constructor() {
this.inputsArray = [];
this.valueChange = new EventEmitter();
}
ngAfterContentInit() {
this.inputsArray = this.inputs.toArray();
}
findInputIndex(target) {
return this.inputsArray.findIndex((input) => input.nativeElement === target);
}
setFocus(index) {
if (index >= 0 && index < this.inputs.length) {
this.inputsArray[index].nativeElement.focus();
}
}
onArrowLeft(event) {
const index = this.findInputIndex(event.target);
if (index > 0) {
this.setFocus(index - 1);
}
}
onArrowRight(event) {
const index = this.findInputIndex(event.target);
if (index < this.inputs.length - 1) {
this.setFocus(index + 1);
}
}
onBackspace(event) {
const index = this.findInputIndex(event.target);
if (index >= 0) {
this.valueChange.emit([index, '']);
this.setFocus(index - 1);
event.preventDefault();
}
}
onKeyUp(event) {
const index = this.findInputIndex(event.target);
if (event.target.value?.match(this.regexp)) {
this.valueChange.emit([index, event.target.value]);
this.setFocus(index + 1);
}
else {
this.inputsArray[index].nativeElement.value = '';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InputNavigationsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: InputNavigationsDirective, isStandalone: true, selector: "[ngxInputNavigations]", inputs: { regexp: "regexp" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.arrowLeft": "onArrowLeft($event)", "keydown.arrowRight": "onArrowRight($event)", "keydown.backspace": "onBackspace($event)", "input": "onKeyUp($event)" } }, queries: [{ propertyName: "inputs", predicate: ["otpInputElement"], descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InputNavigationsDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[ngxInputNavigations]',
}]
}], propDecorators: { inputs: [{
type: ContentChildren,
args: ['otpInputElement', { descendants: true }]
}], regexp: [{
type: Input
}], valueChange: [{
type: Output
}], onArrowLeft: [{
type: HostListener,
args: ['keydown.arrowLeft', ['$event']]
}], onArrowRight: [{
type: HostListener,
args: ['keydown.arrowRight', ['$event']]
}], onBackspace: [{
type: HostListener,
args: ['keydown.backspace', ['$event']]
}], onKeyUp: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXROYXZpZ2F0aW9ucy5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb3RwLWlucHV0L3NyYy9saWIvZGlyZWN0aXZlcy9pbnB1dE5hdmlnYXRpb25zLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsZUFBZSxFQUNmLFNBQVMsRUFFVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBRVAsTUFBTSxlQUFlLENBQUM7O0FBUXZCLE1BQU0sT0FBTyx5QkFBeUI7SUFKdEM7UUFLVSxnQkFBVyxHQUFtQyxFQUFFLENBQUM7UUFPL0MsZ0JBQVcsR0FDbkIsSUFBSSxZQUFZLEVBQXVCLENBQUM7S0FzRDNDO0lBcERDLGtCQUFrQjtRQUNoQixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDM0MsQ0FBQztJQUVPLGNBQWMsQ0FBQyxNQUFtQjtRQUN4QyxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUMvQixDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLGFBQWEsS0FBSyxNQUFNLENBQzFDLENBQUM7SUFDSixDQUFDO0lBRU8sUUFBUSxDQUFDLEtBQWE7UUFDNUIsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQzdDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2hELENBQUM7SUFDSCxDQUFDO0lBR0QsV0FBVyxDQUFDLEtBQW9CO1FBQzlCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLE1BQXFCLENBQUMsQ0FBQztRQUMvRCxJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNkLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzNCLENBQUM7SUFDSCxDQUFDO0lBR0QsWUFBWSxDQUFDLEtBQW9CO1FBQy9CLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLE1BQXFCLENBQUMsQ0FBQztRQUMvRCxJQUFJLEtBQUssR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMzQixDQUFDO0lBQ0gsQ0FBQztJQUdELFdBQVcsQ0FBQyxLQUFvQjtRQUM5QixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxNQUFxQixDQUFDLENBQUM7UUFDL0QsSUFBSSxLQUFLLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO1lBQ25DLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3pCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN6QixDQUFDO0lBQ0gsQ0FBQztJQUdELE9BQU8sQ0FBQyxLQUFpQjtRQUN2QixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxNQUFxQixDQUFDLENBQUM7UUFDL0QsSUFBSyxLQUFLLENBQUMsTUFBMkIsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDO1lBQ2pFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxFQUFHLEtBQUssQ0FBQyxNQUEyQixDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDekUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDM0IsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ25ELENBQUM7SUFDSCxDQUFDOzhHQTlEVSx5QkFBeUI7a0dBQXpCLHlCQUF5Qjs7MkZBQXpCLHlCQUF5QjtrQkFKckMsU0FBUzttQkFBQztvQkFDVCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLHVCQUF1QjtpQkFDbEM7OEJBS0MsTUFBTTtzQkFETCxlQUFlO3VCQUFDLGlCQUFpQixFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRTtnQkFHaEQsTUFBTTtzQkFBZCxLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU07Z0JBb0JQLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxtQkFBbUIsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFTN0MsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLG9CQUFvQixFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVM5QyxXQUFXO3NCQURWLFlBQVk7dUJBQUMsbUJBQW1CLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBVzdDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCB0eXBlIE90cFZhbHVlQ2hhbmdlRXZlbnQgPSBbbnVtYmVyLCBzdHJpbmddO1xuXG5ARGlyZWN0aXZlKHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdbbmd4SW5wdXROYXZpZ2F0aW9uc10nLFxufSlcbmV4cG9ydCBjbGFzcyBJbnB1dE5hdmlnYXRpb25zRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIHByaXZhdGUgaW5wdXRzQXJyYXk6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD5bXSA9IFtdO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oJ290cElucHV0RWxlbWVudCcsIHsgZGVzY2VuZGFudHM6IHRydWUgfSlcbiAgaW5wdXRzITogUXVlcnlMaXN0PEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD4+O1xuXG4gIEBJbnB1dCgpIHJlZ2V4cCE6IFJlZ0V4cDtcblxuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxPdHBWYWx1ZUNoYW5nZUV2ZW50PiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxPdHBWYWx1ZUNoYW5nZUV2ZW50PigpO1xuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICB0aGlzLmlucHV0c0FycmF5ID0gdGhpcy5pbnB1dHMudG9BcnJheSgpO1xuICB9XG5cbiAgcHJpdmF0ZSBmaW5kSW5wdXRJbmRleCh0YXJnZXQ6IEhUTUxFbGVtZW50KTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5pbnB1dHNBcnJheS5maW5kSW5kZXgoXG4gICAgICAoaW5wdXQpID0+IGlucHV0Lm5hdGl2ZUVsZW1lbnQgPT09IHRhcmdldCxcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRGb2N1cyhpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKGluZGV4ID49IDAgJiYgaW5kZXggPCB0aGlzLmlucHV0cy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuaW5wdXRzQXJyYXlbaW5kZXhdLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93TGVmdCcsIFsnJGV2ZW50J10pXG4gIG9uQXJyb3dMZWZ0KGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaW5kZXggPSB0aGlzLmZpbmRJbnB1dEluZGV4KGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudCk7XG4gICAgaWYgKGluZGV4ID4gMCkge1xuICAgICAgdGhpcy5zZXRGb2N1cyhpbmRleCAtIDEpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uYXJyb3dSaWdodCcsIFsnJGV2ZW50J10pXG4gIG9uQXJyb3dSaWdodChldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGluZGV4ID0gdGhpcy5maW5kSW5wdXRJbmRleChldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQpO1xuICAgIGlmIChpbmRleCA8IHRoaXMuaW5wdXRzLmxlbmd0aCAtIDEpIHtcbiAgICAgIHRoaXMuc2V0Rm9jdXMoaW5kZXggKyAxKTtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmJhY2tzcGFjZScsIFsnJGV2ZW50J10pXG4gIG9uQmFja3NwYWNlKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgaW5kZXggPSB0aGlzLmZpbmRJbnB1dEluZGV4KGV2ZW50LnRhcmdldCBhcyBIVE1MRWxlbWVudCk7XG4gICAgaWYgKGluZGV4ID49IDApIHtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdChbaW5kZXgsICcnXSk7XG4gICAgICB0aGlzLnNldEZvY3VzKGluZGV4IC0gMSk7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2lucHV0JywgWyckZXZlbnQnXSlcbiAgb25LZXlVcChldmVudDogSW5wdXRFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IGluZGV4ID0gdGhpcy5maW5kSW5wdXRJbmRleChldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQpO1xuICAgIGlmICgoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlPy5tYXRjaCh0aGlzLnJlZ2V4cCkpIHtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdChbaW5kZXgsIChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWVdKTtcbiAgICAgIHRoaXMuc2V0Rm9jdXMoaW5kZXggKyAxKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5pbnB1dHNBcnJheVtpbmRleF0ubmF0aXZlRWxlbWVudC52YWx1ZSA9ICcnO1xuICAgIH1cbiAgfVxufVxuIl19