ng-otp-input/ng-otp-input.metadata.json

A fully customizable, one-time password input component for the web built with Angular.

{"__symbolic":"module","version":4,"metadata":{"NgOtpInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵa"}],"providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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}}"]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"onInputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getControlName":[{"__symbolic":"method"}],"ifLeftArrow":[{"__symbolic":"method"}],"ifRightArrow":[{"__symbolic":"method"}],"ifBackspaceOrDelete":[{"__symbolic":"method"}],"ifKeyCode":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method"}],"onKeyUp":[{"__symbolic":"method"}],"appendKey":[{"__symbolic":"method"}],"setSelected":[{"__symbolic":"method"}],"ifValidEntry":[{"__symbolic":"method"}],"focusTo":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"rebuildValue":[{"__symbolic":"method"}],"getInputType":[{"__symbolic":"method"}],"handlePaste":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"keys"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[numberOnly]"}]}],"members":{"disabledNumberOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":7,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":7,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"NgOtpInputModule":"./lib/ng-otp-input.module","ɵa":"./lib/components/ng-otp-input/ng-otp-input.component","ɵb":"./lib/pipes/keys.pipe","ɵc":"./lib/directives/number-only.directive"},"importAs":"ng-otp-input"}