angular7-pincode/bundles/angular7-pincode.umd.js

a simple directive for otp input template like on mobile otp input template

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
  typeof define === 'function' && define.amd ? define('angular7-pincode', ['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["angular7-pincode"] = {}, global.ng.core, global.ng.common, global.ng.forms));
})(this, (function (exports, core, common, forms) { 'use strict';

  var Angular7PincodeComponent = /** @class */ (function () {
      function Angular7PincodeComponent() {
          this.onFullFill = new core.EventEmitter();
          this.size = 4;
          this.class = "";
          this.isOnlyNumeric = false;
          this.pin = [];
          this.pinCode = "";
          this.currentIndex = 0;
      }
      Angular7PincodeComponent.prototype.ngOnInit = function () {
          if (this.isOnlyNumeric) {
              this.otpRegex = new RegExp(/[0-9]/);
          }
          else {
              this.otpRegex = new RegExp(/[a-zA-Z0-9]/);
          }
          this.getPin();
      };
      Angular7PincodeComponent.prototype.getPin = function () {
          for (var i = 0; i < this.size; i++) {
              this.pin.push("");
          }
      };
      Angular7PincodeComponent.prototype.onKeyUp = function (event, index) {
          var _this = this;
          var key = event.keyCode || event.which;
          if (!this.otpRegex.test(event.key)) {
              event.preventDefault();
              this.pin[index] = "";
              return false;
          }
          if (key !== 8 && index != this.size - 1) {
              this.currentIndex = index + 1;
              setTimeout(function () {
                  _this.allOtpInputs.toArray()[index + 1].nativeElement.focus();
              }, 100);
          }
          this.pinCode = this.pin.join('');
          if (this.pinCode.length == this.size) {
              setTimeout(function () {
                  _this.onFullFill.emit(_this.pinCode);
              });
          }
      };
      Angular7PincodeComponent.prototype.onKeyDown = function (event, index) {
          var _this = this;
          var key = event.keyCode || event.which;
          if (key === 8 && index != 0) {
              setTimeout(function () {
                  _this.currentIndex = index - 1;
              }, 10);
              setTimeout(function () {
                  _this.allOtpInputs.toArray()[index - 1].nativeElement.focus();
                  _this.onFullFill.emit(null);
              }, 100);
          }
      };
      Angular7PincodeComponent.prototype.trackByFn = function (index) {
          return index;
      };
      return Angular7PincodeComponent;
  }());
  Angular7PincodeComponent.decorators = [
      { type: core.Component, args: [{
                  selector: 'angular7-pincode',
                  template: "\n   <div class=\"otp-container\">\n    <input class=\"otp-input {{class}}\" *ngFor=\"let pininput of pin;let i = index;trackBy: trackByFn\" #otpInput name='otpInput{{i}}' [(ngModel)]=\"pin[i]\" autocomplete='off' maxlength=\"1\" [disabled]=\"currentIndex!=i\" (keyup)=\"onKeyUp($event,i)\" (keydown)=\"onKeyDown($event,i)\"/>\n   </div>\n  ",
                  encapsulation: core.ViewEncapsulation.None,
                  styles: ["\n    .otp-container{\n      width:100%;\n      text-align:left;\n    }\n    .otp-input{\n      padding: 5px;\n      margin: 0px;\n      border: 1px solid #ddd;\n      border-right: none;\n      text-align: center;\n      max-width:50px;\n    }\n    .otp-input:last-child{\n      border-right: 1px solid #ddd;\n    }\n    "]
              },] }
  ];
  Angular7PincodeComponent.ctorParameters = function () { return []; };
  Angular7PincodeComponent.propDecorators = {
      allOtpInputs: [{ type: core.ViewChildren, args: ['otpInput',] }],
      onFullFill: [{ type: core.Output }],
      size: [{ type: core.Input }],
      class: [{ type: core.Input }],
      isOnlyNumeric: [{ type: core.Input }]
  };

  var Angular7PincodeModule = /** @class */ (function () {
      function Angular7PincodeModule() {
      }
      return Angular7PincodeModule;
  }());
  Angular7PincodeModule.decorators = [
      { type: core.NgModule, args: [{
                  declarations: [Angular7PincodeComponent],
                  imports: [common.CommonModule, forms.FormsModule],
                  exports: [Angular7PincodeComponent]
              },] }
  ];

  /*
   * Public API Surface of angular7-pincode
   */

  /**
   * Generated bundle index. Do not edit.
   */

  exports.Angular7PincodeComponent = Angular7PincodeComponent;
  exports.Angular7PincodeModule = Angular7PincodeModule;

  Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=angular7-pincode.umd.js.map