angular-otp-box
Version:
Angular otp input field component for web applications. Easy to integrate and use.
32 lines • 4.27 kB
JavaScript
import { Directive, Input, Output, EventEmitter } from '@angular/core';
import { Subject, Subscription, timer } from 'rxjs';
import { switchMap, take, tap } from 'rxjs/operators';
export class CounterDirective {
constructor() {
this._counterSource$ = new Subject();
this._subscription = Subscription.EMPTY;
this.interval = 1000;
this.value = new EventEmitter();
this._subscription = this._counterSource$.pipe(switchMap(({ interval, count }) => timer(0, interval).pipe(take(count), tap(() => this.value.emit(--count))))).subscribe();
}
ngOnChanges(changes) {
this.startTimer();
}
startTimer() {
this._counterSource$.next({ count: this.counter, interval: this.interval });
}
ngOnDestroy() {
this._subscription.unsubscribe();
}
}
CounterDirective.decorators = [
{ type: Directive, args: [{
selector: '[counter]'
},] }
];
CounterDirective.ctorParameters = () => [];
CounterDirective.propDecorators = {
counter: [{ type: Input }],
value: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1vdHAtYm94L3NyYy9saWIvZGlyZWN0aXZlcy90aW1lci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBdUMsTUFBTSxlQUFlLENBQUM7QUFFNUcsT0FBTyxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3BELE9BQU8sRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBS3RELE1BQU0sT0FBTyxnQkFBZ0I7SUFRekI7UUFQUSxvQkFBZSxHQUFHLElBQUksT0FBTyxFQUFPLENBQUM7UUFDckMsa0JBQWEsR0FBRyxZQUFZLENBQUMsS0FBSyxDQUFDO1FBRzNDLGFBQVEsR0FBVyxJQUFJLENBQUM7UUFDZCxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUd6QyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUMxQyxTQUFTLENBQUMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQzlCLEtBQUssQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUNuQixJQUFJLENBQUMsS0FBSyxDQUFDLEVBQ1gsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDdEMsQ0FDSixDQUNKLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVNLFVBQVU7UUFDYixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckMsQ0FBQzs7O1lBaENKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVzthQUN4Qjs7OztzQkFLSSxLQUFLO29CQUVMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU3ViamVjdCwgU3Vic2NyaXB0aW9uLCB0aW1lciB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgc3dpdGNoTWFwLCB0YWtlLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW2NvdW50ZXJdJ1xufSlcbmV4cG9ydCBjbGFzcyBDb3VudGVyRGlyZWN0aXZlIGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICAgIHByaXZhdGUgX2NvdW50ZXJTb3VyY2UkID0gbmV3IFN1YmplY3Q8YW55PigpO1xuICAgIHByaXZhdGUgX3N1YnNjcmlwdGlvbiA9IFN1YnNjcmlwdGlvbi5FTVBUWTtcblxuICAgIEBJbnB1dCgpIGNvdW50ZXI6IG51bWJlcjtcbiAgICBpbnRlcnZhbDogbnVtYmVyID0gMTAwMDtcbiAgICBAT3V0cHV0KCkgdmFsdWUgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLl9zdWJzY3JpcHRpb24gPSB0aGlzLl9jb3VudGVyU291cmNlJC5waXBlKFxuICAgICAgICAgICAgc3dpdGNoTWFwKCh7IGludGVydmFsLCBjb3VudCB9KSA9PlxuICAgICAgICAgICAgICAgIHRpbWVyKDAsIGludGVydmFsKS5waXBlKFxuICAgICAgICAgICAgICAgICAgICB0YWtlKGNvdW50KSxcbiAgICAgICAgICAgICAgICAgICAgdGFwKCgpID0+IHRoaXMudmFsdWUuZW1pdCgtLWNvdW50KSlcbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICApXG4gICAgICAgICkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgc3RhcnRUaW1lcigpIHtcbiAgICAgICAgdGhpcy5fY291bnRlclNvdXJjZSQubmV4dCh7IGNvdW50OiB0aGlzLmNvdW50ZXIsIGludGVydmFsOiB0aGlzLmludGVydmFsIH0pO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG59Il19