ng-otp-input
Version:
A fully customizable, one-time password input component for the web built with Angular.
2 lines • 5.75 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-otp-input",["exports","@angular/core","@angular/forms","@angular/common"],t):t((e=e||self)["ng-otp-input"]={},e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,t,o,n){"use strict";var r=function(){function e(){}return e.prototype.transform=function(e){return Object.keys(e)},e.decorators=[{type:t.Pipe,args:[{name:"keys"}]}],e}();var i=function(){function e(e){this.keysPipe=e,this.config={length:4},this.onInputChange=new t.EventEmitter,this.inputControls=new Array(this.config.length),this.componentKey=Math.random().toString(36).substring(2)+(new Date).getTime().toString(36)}return e.prototype.ngOnInit=function(){this.otpForm=new o.FormGroup({});for(var e=0;e<this.config.length;e++)this.otpForm.addControl(this.getControlName(e),new o.FormControl);this.inputType=this.getInputType()},e.prototype.ngAfterViewInit=function(){var e=this;if(!this.config.disableAutoFocus){var t=document.getElementById("c_"+this.componentKey);if(t){t.addEventListener("paste",(function(t){return e.handlePaste(t)}));var o=t.getElementsByClassName("otp-input")[0];o&&o.focus&&o.focus()}}},e.prototype.getControlName=function(e){return"ctrl_"+e},e.prototype.ifLeftArrow=function(e){return this.ifKeyCode(e,37)},e.prototype.ifRightArrow=function(e){return this.ifKeyCode(e,39)},e.prototype.ifBackspaceOrDelete=function(e){return"Backspace"===e.key||"Delete"===e.key||this.ifKeyCode(e,8)||this.ifKeyCode(e,46)},e.prototype.ifKeyCode=function(e,t){return(e.keyCode||e.charCode)==t},e.prototype.onKeyDown=function(e){if(this.ifKeyCode(e,32))return!1},e.prototype.onKeyUp=function(e,t){var o=this.appendKey("otp_"+(t+1)),n=this.appendKey("otp_"+(t-1));if(this.ifRightArrow(e))this.setSelected(o);else if(this.ifLeftArrow(e))this.setSelected(n);else{if(this.ifBackspaceOrDelete(e)&&!e.target.value)return this.setSelected(n),void this.rebuildValue();e.target.value&&(this.ifValidEntry(e)&&this.setSelected(o),this.rebuildValue())}},e.prototype.appendKey=function(e){return e+"_"+this.componentKey},e.prototype.setSelected=function(e){this.focusTo(e);var t=document.getElementById(e);t&&t.setSelectionRange&&setTimeout((function(){t.setSelectionRange(0,1)}),0)},e.prototype.ifValidEntry=function(e){var t=String.fromCharCode(e.keyCode);return/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)||/[a-zA-Z0-9-_]/.test(t)||this.config.allowKeyCodes&&this.config.allowKeyCodes.includes(e.keyCode)||e.keyCode>=96&&e.keyCode<=105},e.prototype.focusTo=function(e){var t=document.getElementById(e);t&&t.focus()},e.prototype.setValue=function(e){var t=this;if(!this.config.allowNumbersOnly||!isNaN(e))if(this.otpForm.reset(),e){if(e=e.toString().replace(/\s/g,""),Array.from(e).forEach((function(e,o){t.otpForm.get(t.getControlName(o))&&t.otpForm.get(t.getControlName(o)).setValue(e)})),!this.config.disableAutoFocus){var o=document.getElementById("c_"+this.componentKey),n=e.length<this.config.length?e.length:this.config.length-1,r=o.getElementsByClassName("otp-input")[n];r&&r.focus&&r.focus()}this.rebuildValue()}else this.rebuildValue()},e.prototype.rebuildValue=function(){var e=this,t="";this.keysPipe.transform(this.otpForm.controls).forEach((function(o){e.otpForm.controls[o].value&&(t+=e.otpForm.controls[o].value)})),this.onInputChange.emit(t)},e.prototype.getInputType=function(){return this.config.isPasswordInput?"password":this.config.allowNumbersOnly?"tel":"text"},e.prototype.handlePaste=function(e){var t=e.clipboardData||window.clipboardData;if(t)var o=t.getData("Text");e.stopPropagation(),e.preventDefault(),o&&this.setValue(o)},e.decorators=[{type:t.Component,args:[{selector:"ng-otp-input",template:'<div class="wrapper {{config.containerClass}}" id="c_{{componentKey}}" *ngIf="otpForm?.controls"\r\n [ngStyle]="config.containerStyles">\r\n <input [pattern]="config.allowNumbersOnly ? \'\\\\d*\' : \'\'" [type]="inputType" numberOnly [placeholder]="config?.placeholder || \'\'"\r\n [disabledNumberOnly]="!config.allowNumbersOnly" [ngStyle]="config.inputStyles" maxlength="1"\r\n class="otp-input {{config.inputClass}}" autocomplete="off" *ngFor="let item of otpForm?.controls | keys;let i=index"\r\n [formControl]="otpForm.controls[item]" id="otp_{{i}}_{{componentKey}}" (keydown)="onKeyDown($event)"\r\n (keyup)="onKeyUp($event,i)">\r\n</div>',styles:[".otp-input{width:50px;height:50px;border-radius:4px;border:1px solid #c5c5c5;text-align:center;font-size:32px}.wrapper .otp-input:not(:last-child){margin-right:8px}@media screen and (max-width:767px){.otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width:420px){.otp-input{width:30px;font-size:18px;height:30px}}"]}]}],e.ctorParameters=function(){return[{type:r}]},e.propDecorators={config:[{type:t.Input}],onInputChange:[{type:t.Output}]},e}();var s=function(){function e(e,t){this._elRef=e,this._renderer=t}return e.prototype.ngOnInit=function(){this.disabledNumberOnly||this._renderer.setAttribute(this._elRef.nativeElement,"onkeypress","return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 0")},e.decorators=[{type:t.Directive,args:[{selector:"[numberOnly]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},e.propDecorators={disabledNumberOnly:[{type:t.Input}]},e}();var p=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,o.ReactiveFormsModule],declarations:[i,r,s],exports:[i],providers:[r]}]}],e}();e.NgOtpInputModule=p,e.ɵa=i,e.ɵb=r,e.ɵc=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-otp-input.umd.min.js.map