ngx-otp-pin-input/fesm2022/ngx-otp-pin-input.mjs.map

An Angular library for OTP input fields, providing a customizable and user-friendly way to handle one-time passwords.

{"version":3,"file":"ngx-otp-pin-input.mjs","sources":["../../../projects/otp-input/src/default.config.ts","../../../projects/otp-input/src/lib/components/otp-input/otp-input.component.ts","../../../projects/otp-input/src/lib/components/otp-input/otp-input.component.html","../../../projects/otp-input/src/lib/ngx-otp-input.module.ts","../../../projects/otp-input/src/public-api.ts","../../../projects/otp-input/src/ngx-otp-pin-input.ts"],"sourcesContent":["export const DEFAULT_CONFIG = {\r\n    length: 4,\r\n    className: 'input',\r\n    style: {\r\n        width: 40,\r\n        height: 40,\r\n        fontSize: 26,\r\n        spacing: 12,\r\n        borderWidth: 2,\r\n        borderRadius: 4,\r\n        borderColor: '#BDBDBD',\r\n        borderFocusColor: '#3700B3'\r\n    }\r\n}","import { Component, EventEmitter, forwardRef, Input, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { OtpInputConfig } from '../../../config.interface';\r\nimport { DEFAULT_CONFIG } from '../../../default.config';\r\n\r\n@Component({\r\n  selector: 'ngx-otp-input',\r\n  templateUrl: './otp-input.component.html',\r\n  styleUrl: './otp-input.component.css',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => OtpInputComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class OtpInputComponent implements ControlValueAccessor {\r\n\r\n  @Input() config: OtpInputConfig = {\r\n    length: 4,\r\n    className: 'input',\r\n    style: {\r\n      width: 40,\r\n      height: 40,\r\n      fontSize: 26,\r\n      spacing: 12,\r\n      borderWidth: 2,\r\n      borderRadius: 4,\r\n      borderColor: '#BDBDBD',\r\n      borderFocusColor: '#3700B3'\r\n    }\r\n  };\r\n  @Input() disabled: boolean = false;\r\n  @Output() onOtpChange = new EventEmitter<string>();\r\n\r\n  defaultConfig = DEFAULT_CONFIG;\r\n\r\n  controls = Array.from({ length: this.config.length || this.defaultConfig.length }, () => '');\r\n  currentIndex = 0;\r\n\r\n  @ViewChildren('otpInput') otpInputs: QueryList<any> = new QueryList<any>();\r\n\r\n  private onChange: (_: any) => void = () => { };\r\n  private onTouched: () => void = () => { };\r\n  private value: string = '';\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['config']) {\r\n      this.controls = Array.from({ length: this.config.length || this.defaultConfig.length }, () => '');\r\n      this.config = { ...this.defaultConfig, ...this.config };\r\n    }\r\n  }\r\n\r\n  writeValue(value: string): void {\r\n    this.value = value?.toString() || '';\r\n    this.otpInputs.forEach((input, index) => {\r\n      input.nativeElement.value = this.value[index] || '';\r\n    });\r\n  }\r\n\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n  }\r\n\r\n  onInput(event: Event): void {\r\n    if (this.disabled) return;\r\n    const target = event.target as HTMLInputElement;\r\n    const val = target.value;\r\n\r\n    if (isNaN(Number(val))) {\r\n      target.value = '';\r\n      return;\r\n    }\r\n\r\n    if (val !== '') {\r\n      const next = target.nextElementSibling as HTMLInputElement;\r\n      if (next) {\r\n        next.focus();\r\n      }\r\n      this.emitOtpChange();\r\n    }\r\n  }\r\n\r\n  onKeyup(event: KeyboardEvent): void {\r\n    if (this.disabled) return;\r\n    const target = event.target as HTMLInputElement;\r\n    const key = event.key.toLowerCase();\r\n\r\n    if (key === 'backspace' || key === 'delete') {\r\n      target.value = '';\r\n      const prev = target.previousElementSibling as HTMLInputElement;\r\n      if (prev) {\r\n        prev.focus();\r\n      }\r\n      this.emitOtpChange();\r\n      return;\r\n    }\r\n    else if (key === 'arrowleft') {\r\n      const prev = target.previousElementSibling as HTMLInputElement;\r\n      if (prev) {\r\n        prev.focus();\r\n      }\r\n      return;\r\n    }\r\n    else if (key === 'arrowright') {\r\n      const next = target.nextElementSibling as HTMLInputElement;\r\n      if (next) {\r\n        next.focus();\r\n      }\r\n      return;\r\n    }\r\n  }\r\n\r\n  onPaste(event: ClipboardEvent): void {\r\n    if (this.disabled) return;\r\n    const clipboardData = event.clipboardData;\r\n    if (!clipboardData) return;\r\n\r\n    const pastedData = clipboardData.getData('text');\r\n    if (!/^\\d+$/.test(pastedData)) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    this.otpInputs.forEach((input, index) => {\r\n      if (index < pastedData.length) {\r\n        input.nativeElement.value = pastedData[index];\r\n      }\r\n      else {\r\n        input.nativeElement.value = '';\r\n      }\r\n      input.nativeElement.dispatchEvent(new Event('input'));\r\n    });\r\n    this.emitOtpChange();\r\n  }\r\n\r\n  inputStyle(index: number): { [key: string]: string } {\r\n    return {\r\n      'width': `${this.config?.style?.width ?? this.defaultConfig.style.width}px`,\r\n      'height': `${this.config?.style?.height ?? this.defaultConfig.style.height}px`,\r\n      'font-size': `${this.config?.style?.fontSize ?? this.defaultConfig.style.fontSize}px`,\r\n      'border-width': `${this.config?.style?.borderWidth ?? this.defaultConfig.style.borderWidth}px`,\r\n      'border-radius': `${this.config?.style?.borderRadius ?? this.defaultConfig.style.borderRadius}px`,\r\n      'border-color': !this.disabled && this.currentIndex == index\r\n        ? (this.config?.style?.borderFocusColor ?? this.defaultConfig.style.borderFocusColor)\r\n        : (this.config?.style?.borderColor ?? this.defaultConfig.style.borderColor),\r\n    };\r\n  }\r\n\r\n  emitOtpChange(): void {\r\n    if (this.disabled) return;\r\n    let otp = '';\r\n    this.otpInputs.forEach((input, index) => {\r\n      otp += input.nativeElement.value;\r\n    });\r\n    this.value = otp;\r\n    this.onOtpChange.emit(otp);\r\n    this.onChange(otp);\r\n  }\r\n\r\n}","<div class=\"inputs\" [style.gap.px]=\"config.style?.spacing || defaultConfig.style.spacing\">\r\n    @for (input of controls;let i = $index; track i) {\r\n    <input (input)=\"onInput($event)\" (keyup)=\"onKeyup($event)\" (paste)=\"onPaste($event)\" (focus)=\"currentIndex = i\"\r\n        type=\"text\" inputmode=\"numeric\" maxlength=\"1\" class=\"input {{config.className}}\" [style]=\"inputStyle(i)\"\r\n        [disabled]=\"disabled\" #otpInput />\r\n    }\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { OtpInputComponent } from './components/otp-input/otp-input.component';\r\n\r\n@NgModule({\r\n    declarations: [OtpInputComponent],\r\n    exports: [OtpInputComponent]\r\n})\r\nexport class NgxOtpInput { }\r\n","/*\r\n * Public API Surface of otp-input\r\n */\r\n\r\nexport * from './lib/ngx-otp-input.module';\r\nexport * from './lib/components/otp-input/otp-input.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAO,MAAM,cAAc,GAAG;AAC1B,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,SAAS,EAAE,OAAO;AAClB,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,gBAAgB,EAAE;AACrB;CACJ;;MCIY,iBAAiB,CAAA;AAZ9B,IAAA,WAAA,GAAA;AAcW,QAAA,IAAA,CAAA,MAAM,GAAmB;AAChC,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,SAAS,EAAE,OAAO;AAClB,YAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,EAAE;AACT,gBAAA,MAAM,EAAE,EAAE;AACV,gBAAA,QAAQ,EAAE,EAAE;AACZ,gBAAA,OAAO,EAAE,EAAE;AACX,gBAAA,WAAW,EAAE,CAAC;AACd,gBAAA,YAAY,EAAE,CAAC;AACf,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,gBAAgB,EAAE;AACnB;SACF;QACQ,IAAQ,CAAA,QAAA,GAAY,KAAK;AACxB,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAU;QAElD,IAAa,CAAA,aAAA,GAAG,cAAc;QAE9B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC;QAC5F,IAAY,CAAA,YAAA,GAAG,CAAC;AAEU,QAAA,IAAA,CAAA,SAAS,GAAmB,IAAI,SAAS,EAAO;AAElE,QAAA,IAAA,CAAA,QAAQ,GAAqB,MAAK,GAAI;AACtC,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,GAAI;QACjC,IAAK,CAAA,KAAA,GAAW,EAAE;AA4H3B;AA1HC,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC;AACjG,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;;;AAI3D,IAAA,UAAU,CAAC,KAAa,EAAA;QACtB,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;QACpC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AACtC,YAAA,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE;AACrD,SAAC,CAAC;;AAGJ,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAGpB,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGrB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;AAG5B,IAAA,OAAO,CAAC,KAAY,EAAA;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK;QAExB,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE;AACtB,YAAA,MAAM,CAAC,KAAK,GAAG,EAAE;YACjB;;AAGF,QAAA,IAAI,GAAG,KAAK,EAAE,EAAE;AACd,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAsC;YAC1D,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,EAAE;;YAEd,IAAI,CAAC,aAAa,EAAE;;;AAIxB,IAAA,OAAO,CAAC,KAAoB,EAAA;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;QAC/C,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;QAEnC,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,QAAQ,EAAE;AAC3C,YAAA,MAAM,CAAC,KAAK,GAAG,EAAE;AACjB,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,sBAA0C;YAC9D,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,EAAE;;YAEd,IAAI,CAAC,aAAa,EAAE;YACpB;;AAEG,aAAA,IAAI,GAAG,KAAK,WAAW,EAAE;AAC5B,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,sBAA0C;YAC9D,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,EAAE;;YAEd;;AAEG,aAAA,IAAI,GAAG,KAAK,YAAY,EAAE;AAC7B,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAsC;YAC1D,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,EAAE;;YAEd;;;AAIJ,IAAA,OAAO,CAAC,KAAqB,EAAA;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa;AACzC,QAAA,IAAI,CAAC,aAAa;YAAE;QAEpB,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;QAChD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YAC7B,KAAK,CAAC,cAAc,EAAE;YACtB;;QAGF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AACtC,YAAA,IAAI,KAAK,GAAG,UAAU,CAAC,MAAM,EAAE;gBAC7B,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;;iBAE1C;AACH,gBAAA,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE;;YAEhC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;AACvD,SAAC,CAAC;QACF,IAAI,CAAC,aAAa,EAAE;;AAGtB,IAAA,UAAU,CAAC,KAAa,EAAA;QACtB,OAAO;AACL,YAAA,OAAO,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAI,EAAA,CAAA;AAC3E,YAAA,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAI,EAAA,CAAA;AAC9E,YAAA,WAAW,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAI,EAAA,CAAA;AACrF,YAAA,cAAc,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAI,EAAA,CAAA;AAC9F,YAAA,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,YAAY,CAAI,EAAA,CAAA;YACjG,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI;AACrD,mBAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,gBAAgB;AACpF,mBAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC;SAC9E;;IAGH,aAAa,GAAA;QACX,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,GAAG,GAAG,EAAE;QACZ,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AACtC,YAAA,GAAG,IAAI,KAAK,CAAC,aAAa,CAAC,KAAK;AAClC,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;AAChB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;+GArJT,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EARjB,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfH,0dAMM,EAAA,MAAA,EAAA,CAAA,qGAAA,CAAA,EAAA,CAAA,CAAA;;4FDWO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAGd,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE;AACR;AACF,qBAAA,EAAA,QAAA,EAAA,0dAAA,EAAA,MAAA,EAAA,CAAA,qGAAA,CAAA,EAAA;8BAIQ,MAAM,EAAA,CAAA;sBAAd;gBAcQ,QAAQ,EAAA,CAAA;sBAAhB;gBACS,WAAW,EAAA,CAAA;sBAApB;gBAOyB,SAAS,EAAA,CAAA;sBAAlC,YAAY;uBAAC,UAAU;;;MElCb,WAAW,CAAA;+GAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAX,WAAW,EAAA,YAAA,EAAA,CAHL,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACtB,iBAAiB,CAAA,EAAA,CAAA,CAAA;gHAElB,WAAW,EAAA,CAAA,CAAA;;4FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAJvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,iBAAiB;AAC9B,iBAAA;;;ACND;;AAEG;;ACFH;;AAEG;;;;"}