UNPKG

ngx-otp-code-input

Version:

ngx-otp-code-input is an Angular component for OTP (One-Time Password) input. This component is highly customizable, allowing for various configurations such as masking, integer-only input, autofocus, and more.

1 lines 14.4 kB
{"version":3,"file":"ngx-otp-code-input.mjs","sources":["../../../projects/ngx-otp-code-input/src/lib/ngx-otp-code-input.service.ts","../../../projects/ngx-otp-code-input/src/lib/ngx-otp-code-input.component.ts","../../../projects/ngx-otp-code-input/src/lib/ngx-otp-code-input.component.html","../../../projects/ngx-otp-code-input/src/lib/ngx-otp-code-input.module.ts","../../../projects/ngx-otp-code-input/src/public-api.ts","../../../projects/ngx-otp-code-input/src/ngx-otp-code-input.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class NgxOtpCodeInputService {\r\n\r\n constructor() { }\r\n}\r\n","import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChildren } from '@angular/core';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\n@Component({\n selector: 'ngx-otp-code-input',\n templateUrl: './ngx-otp-code-input.component.html',\n styleUrls: ['./ngx-otp-code-input.component.scss'],\n standalone: false\n})\r\nexport class NgxOtpCodeInputComponent implements OnInit, OnChanges, AfterViewInit {\r\n @ViewChildren('otpInput') otpInput!: QueryList<ElementRef>;\r\n\r\n @Input() disabled: boolean = false;\r\n @Input() readonly: boolean = false;\r\n @Input() autofocus: boolean = true; // * true by default\r\n @Input() mask: boolean = false; // * Essentially used to hide the value, similar to how it is done for password inputs.\r\n @Input() integerOnly: boolean = false; // * The input will only accept integer values; any other characters will be ignored.\r\n @Input() tabIndex: boolean = false;\r\n @Input() animationConfig: { type: string, duration: string } = { type: 'fade', duration: '0.3s' };\r\n @Input() status: 'success' | 'failed' | null = null;\r\n @Input() successIcon: string = 'check_circle';\r\n @Input() failureIcon: string = 'cancel';\r\n\r\n @Input() length: number = 4; // or 6\r\n\r\n @Input() inputClass: string = '';\r\n @Input() variant: MatFormFieldAppearance = 'outline';\r\n @Input() regex: string = '';\r\n\r\n // Emitters\r\n @Output() otpChange: EventEmitter<string> = new EventEmitter<string>();\r\n @Output() otpComplete: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n otpControls: Array<any> = new Array(4).fill(null);\r\n\r\n constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['animationConfig']) {\r\n this.renderer.setStyle(document.documentElement, '--animation-duration', this.animationConfig.duration);\r\n }\r\n } \r\n\r\n ngOnInit(): void {\r\n this.otpControls = new Array(this.length).fill(null);\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.autofocus) {\r\n this.otpInput.first.nativeElement.focus();\r\n this.cdr.detectChanges();\r\n }\r\n }\r\n\r\n getAnimationClass(): string {\r\n return `animate-${this.animationConfig.type}`;\r\n } \r\n\r\n onInputChange(event: any) {\r\n const input = event.target as HTMLInputElement;\r\n const index = Number(input.getAttribute('data-index'));\r\n\r\n // * If integerOnly is true then if user try to enetered non integer value make the field empty\r\n if (this.integerOnly) {\r\n input.value = input.value.replace(/\\D/g, '');\r\n }\r\n\r\n if (input.value.length > 0) {\r\n if (index < this.otpControls.length - 1) {\r\n this.otpInput.toArray()[index + 1].nativeElement.focus();\r\n }\r\n }\r\n\r\n this.updateOtpValue();\r\n }\r\n\r\n onKeyDown(event: KeyboardEvent): void {\r\n const input = event.target as HTMLInputElement;\r\n const index = Number(input.getAttribute('data-index'));\r\n \r\n // Prevent non-integer keys if integerOnly is true\r\n // if (this.integerOnly && !/^[0-9]$/.test(event.key) && event.key !== 'Backspace') {\r\n // event.preventDefault();\r\n // }\r\n\r\n if (event.key === 'Backspace' && !input.value && index > 0) {\r\n this.otpInput.toArray()[index - 1].nativeElement.focus();\r\n }\r\n }\r\n\r\n onPaste(event: ClipboardEvent): void {\r\n let pasteData = event.clipboardData?.getData('text').trim() || '';\r\n console.log('pasteData', pasteData)\r\n // * If integerOnly is true, filter out non-numeric characters\r\n if (this.integerOnly && pasteData) {\r\n pasteData = pasteData.replace(/\\D/g, '');\r\n }\r\n \r\n if (pasteData && pasteData.length === this.otpControls.length) {\r\n this.otpControls.forEach((_, index) => {\r\n const input = this.otpInput.toArray()[index].nativeElement;\r\n input.value = pasteData[index];\r\n });\r\n \r\n this.updateOtpValue();\r\n \r\n // * Focus on the next input after the last filled input\r\n const lastIndex = this.otpControls.length - 1;\r\n this.otpInput.toArray()[lastIndex].nativeElement.focus();\r\n }\r\n \r\n event.preventDefault();\r\n } \r\n\r\n updateOtpValue(): void {\r\n const otpValue = this.otpInput.toArray().map(input => input.nativeElement.value).join('');\r\n this.otpChange.emit(otpValue); // Emit the OTP value\r\n\r\n // * Check if the OTP is complete\r\n if (otpValue.length === this.otpControls.length) {\r\n this.otpComplete.emit(otpValue);\r\n }\r\n }\r\n}\r\n","<div class=\"otp-container\">\r\n <ng-container *ngFor=\"let otpValue of otpControls; let i = index\">\r\n <mat-form-field [appearance]=\"variant\" class=\"otp-input\" [id]=\"'otp_input_' + i\" [ngClass]=\"{\r\n 'otp-success': status === 'success',\r\n 'otp-failed': status === 'failed'\r\n }\">\r\n <input\r\n matInput\r\n [type]=\"mask ? 'password' : 'text'\"\r\n [class]=\"inputClass\"\r\n [attr.tabindex]=\"tabIndex ? i : -1\"\r\n [readonly]=\"readonly ? true : null\"\r\n [disabled]=\"disabled\"\r\n [attr.data-index]=\"i\"\r\n (input)=\"onInputChange($event)\"\r\n [ngClass]=\"getAnimationClass()\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (paste)=\"onPaste($event)\"\r\n maxlength=\"1\"\r\n #otpInput\r\n [id]=\"'my_input_' + i\"\r\n [pattern]=\"integerOnly ? '\\\\d*' : ''\"\r\n />\r\n <!-- Add status indicator -->\r\n <mat-icon *ngIf=\"status === 'success'\" class=\"status-icon success\">check_circle</mat-icon>\r\n <mat-icon *ngIf=\"status === 'failed'\" class=\"status-icon failed\">cancel</mat-icon>\r\n </mat-form-field>\r\n </ng-container>\r\n</div>\r\n ","import { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { CommonModule } from '@angular/common';\r\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\r\nimport { NgxOtpCodeInputComponent } from './ngx-otp-code-input.component';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n@NgModule({\r\n declarations: [\r\n NgxOtpCodeInputComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n BrowserAnimationsModule,\r\n BrowserModule,\r\n\r\n MatInputModule,\r\n MatFormFieldModule,\r\n MatIconModule\r\n ],\r\n exports: [\r\n NgxOtpCodeInputComponent\r\n ]\r\n})\r\nexport class NgxOtpCodeInputModule { }\r\n","/*\r\n * Public API Surface of ngx-otp-code-input\r\n */\r\n\r\nexport * from './lib/ngx-otp-code-input.service';\r\nexport * from './lib/ngx-otp-code-input.component';\r\nexport * from './lib/ngx-otp-code-input.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}