@ruc-lib/input-otp 3.2.0 → 4.0.0

package/README.md

@@ -14,63 +14,74 @@ npm install @uxpractice/ruc-lib
 ```
 
 ### Install Individual Component
-If you only need the Input OTP component:
-```bash
-npm install @ruc-lib/input-otp`
 
+If you only need the InputOtp component:
+
+**For Angular 15:**
+```bash
+npm install @ruc-lib/input-otp@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
 ```
 
-After installing the the required package successfully, we have to import the CSS in our style.scss file in following way.
+**For Angular 16:**
+```bash
+npm install @ruc-lib/input-otp@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
 
-`@import "../../../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";`
-`@import "../../../node_modules/primeng/resources/primeng.min.css";`
+**For Angular 17:**
+```bash
+npm install @ruc-lib/input-otp@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
 
-here path of the scss file is subject to change as per choice of the installation
+**For Angular 18:**
+```bash
+npm install @ruc-lib/input-otp@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
 
-for library
-`@import "../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";`
-`@import "../node_modules/primeng/resources/primeng.min.css";`
+**For Angular 19:**
+```bash
+npm install @ruc-lib/input-otp@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
 
-for seperate package
-`@import "../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";`
-`@import "../node_modules/primeng/resources/primeng.min.css";`
+**For Angular 20:**
+```bash
+npm install @ruc-lib/input-otp@4.0.0
+```
 
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
 
-# Version Compatibility
+### 📦 Version Compatibility
 
-Please ensure you install the correct version of `@ruc-lib/input-otp` based on your Angular version.
- 
 | Angular Version    | Compatible `@ruc-lib/input-otp` Version     |
 |--------------------|---------------------------------------------|
 | 15.x.x             | `npm install @ruc-lib/input-otp@^3.2.0`     |
 | 16.x.x             | `npm install @ruc-lib/input-otp@^3.2.0`     |
-
+| 17.x.x             | `npm install @ruc-lib/input-otp@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/input-otp@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/input-otp@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/input-otp@^4.0.0`     |
 
 ## Usage
 
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibInputOtpModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibInputOtpComponent`:
 
 ```typescript
+import { Component } from '@angular/core';
+
 // For Complete Library
-import { RuclibInputOtpModule } from '@uxpractice/ruc-lib/input-otp';
+import { RuclibInputOtpComponent } from '@uxpractice/ruc-lib/input-otp';
 
 // For Individual Package
-import { RuclibInputOtpModule } from '@ruc-lib/input-otp';
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibInputOtpModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { RuclibInputOtpComponent } from '@ruc-lib/input-otp';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibInputOtpComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 ### 2. Use the Component
 In your component's template, use the `<uxp-ruclib-input-otp>` selector and pass the configuration object to the `rucInputData` input.
@@ -175,5 +186,4 @@ When implementing **custom themes**, such as:
 Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
 
 # Acknowledgements
-Thank you for choosing the Input OTP Component Library. If you have any feedback or suggestions, please let us know!
-
+Thank you for choosing the Input OTP Component Library. If you have any feedback or suggestions, please let us know!

package/fesm2022/ruc-lib-input-otp.mjs

@@ -0,0 +1,153 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChildren, Input, Output, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+const BACKSPACE_KEY = "Backspace";
+
+class RuclibInputOtpComponent {
+    constructor() {
+        this.DEFAULT_OTP_LENGTH = 6;
+        this.TIME_LEFT = "Time left";
+        this.EXPIRED_MSG = "OTP expired. Please request a new one.";
+        this.rucEvent = new EventEmitter();
+        this.rucInputData = {};
+        this.timeLeft = 0;
+        this.timerId = null;
+        this.otpValues = [];
+    }
+    ngOnInit() {
+        this.otpValues = Array(this.rucInputData.length || 6).fill('');
+        if (this.rucInputData.timeLimit) {
+            this.timeLeft = this.rucInputData.timeLimit;
+        }
+        // Set default for copyProtection
+        if (this.rucInputData.copyProtection === undefined) {
+            this.rucInputData.copyProtection = true;
+        }
+    }
+    ngAfterViewInit() {
+        // Merge input config with defaults
+        this.otpValues = Array(this.rucInputData.length || 6).fill('');
+        if (this.rucInputData.autoFocus) {
+            setTimeout(() => this.inputs.first?.nativeElement.focus(), 0); // Auto-focus first input
+        }
+        if (this.rucInputData.timeLimit) {
+            this.timeLeft = this.rucInputData.timeLimit;
+            this.timerId = setInterval(() => {
+                this.timeLeft--;
+                if (this.timeLeft <= 0) {
+                    clearInterval(this.timerId);
+                    this.disableAllInputs();
+                    this.rucEvent.emit({ eventName: 'timeout', eventOutput: null });
+                }
+            }, 1000);
+        }
+    }
+    // Handle OTP input
+    handleInput(event, index) {
+        const input = event.target;
+        const value = input.value;
+        if (this.rucInputData.integerOnly && !/^\d*$/.test(value)) {
+            input.value = ''; // Allow integers only
+            this.otpValues[index] = '';
+            return;
+        }
+        this.otpValues[index] = value.slice(-1); // Take last digit
+        input.value = this.otpValues[index];
+        // Auto-jump to next input
+        if (value && index < (this.rucInputData.length || 6) - 1 && this.rucInputData.autoFocus) {
+            this.inputs.toArray()[index + 1].nativeElement.focus();
+        }
+        // Auto-submit on complete
+        if (this.rucInputData.autoSubmit && this.isOtpComplete(this.otpValues)) {
+            if (this.timerId) {
+                clearInterval(this.timerId);
+                this.timerId = null;
+            }
+            this.rucEvent.emit({ eventName: 'completed', eventOutput: this.otpValues.join('') });
+        }
+    }
+    // Handle Keyboard navigation
+    handleKeyDown(event, index) {
+        const input = event.target;
+        if (event.key === BACKSPACE_KEY && !input.value && index > 0 && this.rucInputData.autoFocus) {
+            this.inputs.toArray()[index - 1].nativeElement.focus();
+        }
+        else if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            this.inputs.toArray()[index - 1].nativeElement.focus();
+        }
+        else if (event.key === 'ArrowRight' && index < (this.rucInputData.length || 6) - 1) {
+            event.preventDefault();
+            this.inputs.toArray()[index + 1].nativeElement.focus();
+        }
+    }
+    //Handle Paste Event
+    handlePaste(event) {
+        event.preventDefault();
+        let pasteData = event.clipboardData?.getData('text');
+        if (this.rucInputData.integerOnly) {
+            pasteData = pasteData?.replace(/\D/g, ''); // Extract digits only
+        }
+        if (!pasteData)
+            return;
+        const pasteLength = Math.min(pasteData.length, this.rucInputData.length || 6);
+        for (let i = 0; i < pasteLength; i++) {
+            this.otpValues[i] = pasteData[i];
+            this.inputs.toArray()[i].nativeElement.value = pasteData[i];
+        }
+        // Focus last filled input or last input
+        const focusIndex = pasteLength < (this.rucInputData.length || 6) ? pasteLength : (this.rucInputData.length || 6) - 1;
+        this.inputs.toArray()[focusIndex].nativeElement.focus();
+        // Auto-submit if complete
+        if (this.rucInputData.autoSubmit && this.isOtpComplete(this.otpValues)) {
+            if (this.timerId) {
+                clearInterval(this.timerId);
+                this.timerId = null;
+            }
+            this.rucEvent.emit({ eventName: 'completed', eventOutput: this.otpValues.join('') });
+        }
+    }
+    //Check if OTP is completed
+    isOtpComplete(otpArray) {
+        return otpArray.every(val => val.trim() !== '');
+    }
+    // Disable inputs
+    disableAllInputs() {
+        this.inputs.forEach((inputRef) => {
+            inputRef.nativeElement.disabled = true;
+        });
+    }
+    //Clear Interval
+    ngOnDestroy() {
+        if (this.timerId) {
+            clearInterval(this.timerId);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibInputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibInputOtpComponent, isStandalone: true, selector: "uxp-ruclib-input-otp", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, outputs: { rucEvent: "rucEvent" }, viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], ngImport: i0, template: "<div class=\"{{customTheme}} otp-container\" [ngClass]=\"rucInputData.size || 'medium'\" (paste)=\"handlePaste($event)\">\r\n  @for (_ of [].constructor(rucInputData.length || DEFAULT_OTP_LENGTH); track _; let i = $index) {\r\n    <input\r\n      #otpInput\r\n      [type]=\"rucInputData.mask ? 'password' : 'text'\"\r\n         [ngClass]=\"[\r\n        'otp-input',\r\n        rucInputData.templateType || 'rectangle',\r\n        rucInputData.validationState === 'valid' ? 'is-valid' : '',\r\n        rucInputData.validationState === 'invalid' ? 'is-invalid' : ''\r\n      ]\"\r\n      maxlength=\"1\"\r\n      [(ngModel)]=\"otpValues[i]\"\r\n      (input)=\"handleInput($event, i)\"\r\n      (copy)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (paste)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (contextmenu)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (keydown)=\"handleKeyDown($event, i)\"\r\n      [attr.inputmode]=\"rucInputData.integerOnly ? 'numeric' : 'text'\"\r\n      [pattern]=\"rucInputData.integerOnly ? '[0-9]*' : '.*'\"\r\n      autocomplete=\"one-time-code\">\r\n  }\r\n</div>\r\n<!-- Timer -->\r\n@if (rucInputData.timeLimit) {\r\n  <div class=\"otp-timer\">\r\n    {{TIME_LEFT}}: {{ timeLeft }}s\r\n  </div>\r\n}\r\n<!-- Timeout message -->\r\n@if (rucInputData.timeLimit && timeLeft === 0) {\r\n  <div class=\"otp-timeout-message\">\r\n    {{EXPIRED_MSG}}\r\n  </div>\r\n}\r\n\r\n", styles: [".otp-container{display:flex;gap:10px;justify-content:center}.otp-input{text-align:center;font-size:18px;border:1px solid #ccc;border-radius:4px;outline:none;transition:border-color .2s}.otp-input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.otp-input::-webkit-outer-spin-button,.otp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.otp-input[type=number]{-moz-appearance:textfield}.small .otp-input{width:30px;height:30px;font-size:14px}.medium .otp-input{width:40px;height:40px;font-size:18px}.large .otp-input{width:50px;height:50px;font-size:22px}.otp-timer{text-align:center;font-size:.9rem;color:#d9534f;font-weight:700}.otp-timeout-message{text-align:center;color:#d9534f;font-size:.9rem;margin-top:.5rem}.otp-input.rectangle{border-radius:8px}.otp-input.circle{border-radius:50%}.otp-input.underscore{border:none;border-bottom:2px solid #ccc;border-radius:0;background-color:transparent}.otp-input.is-valid{border-color:#28a745;background-color:#e6ffed}.otp-input.is-invalid{border-color:#dc3545;background-color:#ffe6e6}.dark-theme .otp-input:not(.is-invalid){color:#fff;background-color:#333}.light-theme .otp-input:not(.is-invalid){color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibInputOtpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-input-otp', imports: [CommonModule, MatIconModule, FormsModule], template: "<div class=\"{{customTheme}} otp-container\" [ngClass]=\"rucInputData.size || 'medium'\" (paste)=\"handlePaste($event)\">\r\n  @for (_ of [].constructor(rucInputData.length || DEFAULT_OTP_LENGTH); track _; let i = $index) {\r\n    <input\r\n      #otpInput\r\n      [type]=\"rucInputData.mask ? 'password' : 'text'\"\r\n         [ngClass]=\"[\r\n        'otp-input',\r\n        rucInputData.templateType || 'rectangle',\r\n        rucInputData.validationState === 'valid' ? 'is-valid' : '',\r\n        rucInputData.validationState === 'invalid' ? 'is-invalid' : ''\r\n      ]\"\r\n      maxlength=\"1\"\r\n      [(ngModel)]=\"otpValues[i]\"\r\n      (input)=\"handleInput($event, i)\"\r\n      (copy)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (paste)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (contextmenu)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (keydown)=\"handleKeyDown($event, i)\"\r\n      [attr.inputmode]=\"rucInputData.integerOnly ? 'numeric' : 'text'\"\r\n      [pattern]=\"rucInputData.integerOnly ? '[0-9]*' : '.*'\"\r\n      autocomplete=\"one-time-code\">\r\n  }\r\n</div>\r\n<!-- Timer -->\r\n@if (rucInputData.timeLimit) {\r\n  <div class=\"otp-timer\">\r\n    {{TIME_LEFT}}: {{ timeLeft }}s\r\n  </div>\r\n}\r\n<!-- Timeout message -->\r\n@if (rucInputData.timeLimit && timeLeft === 0) {\r\n  <div class=\"otp-timeout-message\">\r\n    {{EXPIRED_MSG}}\r\n  </div>\r\n}\r\n\r\n", styles: [".otp-container{display:flex;gap:10px;justify-content:center}.otp-input{text-align:center;font-size:18px;border:1px solid #ccc;border-radius:4px;outline:none;transition:border-color .2s}.otp-input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.otp-input::-webkit-outer-spin-button,.otp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.otp-input[type=number]{-moz-appearance:textfield}.small .otp-input{width:30px;height:30px;font-size:14px}.medium .otp-input{width:40px;height:40px;font-size:18px}.large .otp-input{width:50px;height:50px;font-size:22px}.otp-timer{text-align:center;font-size:.9rem;color:#d9534f;font-weight:700}.otp-timeout-message{text-align:center;color:#d9534f;font-size:.9rem;margin-top:.5rem}.otp-input.rectangle{border-radius:8px}.otp-input.circle{border-radius:50%}.otp-input.underscore{border:none;border-bottom:2px solid #ccc;border-radius:0;background-color:transparent}.otp-input.is-valid{border-color:#28a745;background-color:#e6ffed}.otp-input.is-invalid{border-color:#dc3545;background-color:#ffe6e6}.dark-theme .otp-input:not(.is-invalid){color:#fff;background-color:#333}.light-theme .otp-input:not(.is-invalid){color:#000}\n"] }]
+        }], propDecorators: { rucEvent: [{
+                type: Output
+            }], customTheme: [{
+                type: Input
+            }], rucInputData: [{
+                type: Input
+            }], inputs: [{
+                type: ViewChildren,
+                args: ['otpInput']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibInputOtpComponent };
+//# sourceMappingURL=ruc-lib-input-otp.mjs.map

package/fesm2022/ruc-lib-input-otp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-input-otp.mjs","sources":["../../src/modal/constants.ts","../../src/lib/ruclib-input-otp/ruclib-input-otp.component.ts","../../src/lib/ruclib-input-otp/ruclib-input-otp.component.html","../../src/ruc-lib-input-otp.ts"],"sourcesContent":["export const BACKSPACE_KEY = \"Backspace\"","import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, ViewChildren } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { InputOtpConfig } from '../../modal/input-otp-config';\r\nimport { BACKSPACE_KEY } from '../../modal/constants';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-input-otp',\r\n    imports: [CommonModule, MatIconModule, FormsModule],\r\n    templateUrl: './ruclib-input-otp.component.html',\r\n    styleUrl: './ruclib-input-otp.component.scss'\r\n})\r\nexport class RuclibInputOtpComponent implements OnInit, AfterViewInit, OnDestroy {\r\n  readonly DEFAULT_OTP_LENGTH  = 6;\r\n  readonly TIME_LEFT = \"Time left\";\r\n  readonly EXPIRED_MSG = \"OTP expired. Please request a new one.\"\r\n\r\n  @Output() rucEvent = new EventEmitter<any>();\r\n  @Input() customTheme?: string;\r\n\r\n  @Input() rucInputData: InputOtpConfig = {};\r\n  timeLeft = 0;\r\n  timerId: any = null;\r\n\r\n  @ViewChildren('otpInput') inputs!: QueryList<ElementRef<HTMLInputElement>>;\r\n\r\n  otpValues: string[] = [];\r\n\r\n  ngOnInit(): void {\r\n    this.otpValues = Array(this.rucInputData.length || 6).fill('');\r\n    if (this.rucInputData.timeLimit) {\r\n      this.timeLeft = this.rucInputData.timeLimit;\r\n    }\r\n\r\n  // Set default for copyProtection\r\n  if (this.rucInputData.copyProtection === undefined) {\r\n    this.rucInputData.copyProtection = true;\r\n  }\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    // Merge input config with defaults\r\n    this.otpValues = Array(this.rucInputData.length || 6).fill('');\r\n    if (this.rucInputData.autoFocus) {\r\n      setTimeout(() => this.inputs.first?.nativeElement.focus(), 0); // Auto-focus first input\r\n    }\r\n\r\n    if (this.rucInputData.timeLimit) {\r\n      this.timeLeft = this.rucInputData.timeLimit;\r\n      this.timerId = setInterval(() => {\r\n        this.timeLeft--;\r\n        if (this.timeLeft <= 0) {\r\n          clearInterval(this.timerId);\r\n          this.disableAllInputs();\r\n          this.rucEvent.emit({ eventName: 'timeout', eventOutput: null });\r\n        }\r\n      }, 1000);\r\n    }\r\n  }\r\n// Handle OTP input\r\n  handleInput(event: Event, index: number): void {\r\n    const input = event.target as HTMLInputElement;\r\n    const value = input.value;\r\n\r\n    if (this.rucInputData.integerOnly && !/^\\d*$/.test(value)) {\r\n      input.value = ''; // Allow integers only\r\n      this.otpValues[index] = '';\r\n      return;\r\n    }\r\n\r\n    this.otpValues[index] = value.slice(-1); // Take last digit\r\n    input.value = this.otpValues[index];\r\n\r\n    // Auto-jump to next input\r\n    if (value && index < (this.rucInputData.length || 6) - 1 && this.rucInputData.autoFocus) {\r\n      this.inputs.toArray()[index + 1].nativeElement.focus();\r\n    }\r\n\r\n    // Auto-submit on complete\r\n    if (this.rucInputData.autoSubmit && this.isOtpComplete(this.otpValues)) {\r\n      if (this.timerId) {\r\n        clearInterval(this.timerId);\r\n        this.timerId = null;\r\n      }\r\n      this.rucEvent.emit({ eventName: 'completed', eventOutput: this.otpValues.join('') });\r\n    }\r\n  }\r\n\r\n// Handle Keyboard navigation\r\n  handleKeyDown(event: KeyboardEvent, index: number): void {\r\n    const input = event.target as HTMLInputElement;\r\n\r\n    if (event.key === BACKSPACE_KEY && !input.value && index > 0 && this.rucInputData.autoFocus) {\r\n      this.inputs.toArray()[index - 1].nativeElement.focus();\r\n    } else if (event.key === 'ArrowLeft' && index > 0) {\r\n      event.preventDefault();\r\n      this.inputs.toArray()[index - 1].nativeElement.focus();\r\n    } else if (event.key === 'ArrowRight' && index < (this.rucInputData.length || 6) - 1) {\r\n      event.preventDefault();\r\n      this.inputs.toArray()[index + 1].nativeElement.focus();\r\n    }\r\n  }\r\n\r\n//Handle Paste Event\r\n  handlePaste(event: ClipboardEvent): void {\r\n    event.preventDefault();\r\n    let pasteData = event.clipboardData?.getData('text');\r\n    if (this.rucInputData.integerOnly) {\r\n      pasteData = pasteData?.replace(/\\D/g, ''); // Extract digits only\r\n    }\r\n    if (!pasteData) return;\r\n\r\n    const pasteLength = Math.min(pasteData.length, this.rucInputData.length || 6);\r\n    for (let i = 0; i < pasteLength; i++) {\r\n      this.otpValues[i] = pasteData[i];\r\n      this.inputs.toArray()[i].nativeElement.value = pasteData[i];\r\n    }\r\n\r\n    // Focus last filled input or last input\r\n    const focusIndex = pasteLength < (this.rucInputData.length || 6) ? pasteLength : (this.rucInputData.length || 6) - 1;\r\n    this.inputs.toArray()[focusIndex].nativeElement.focus();\r\n\r\n    // Auto-submit if complete\r\n    if (this.rucInputData.autoSubmit && this.isOtpComplete(this.otpValues)) {\r\n      if (this.timerId) {\r\n        clearInterval(this.timerId);\r\n        this.timerId = null;\r\n      }\r\n      this.rucEvent.emit({ eventName: 'completed', eventOutput: this.otpValues.join('') });\r\n    }\r\n  }\r\n\r\n  //Check if OTP is completed\r\n  private isOtpComplete(otpArray: string[]): boolean {\r\n    return otpArray.every(val => val.trim() !== '');\r\n  }\r\n\r\n// Disable inputs\r\n  private disableAllInputs(): void {\r\n    this.inputs.forEach((inputRef) => {\r\n      inputRef.nativeElement.disabled = true;\r\n    });\r\n  }\r\n\r\n  //Clear Interval\r\n  ngOnDestroy(): void {\r\n    if (this.timerId) {\r\n      clearInterval(this.timerId);\r\n    }\r\n  }\r\n}\r\n\r\n","<div class=\"{{customTheme}} otp-container\" [ngClass]=\"rucInputData.size || 'medium'\" (paste)=\"handlePaste($event)\">\r\n  @for (_ of [].constructor(rucInputData.length || DEFAULT_OTP_LENGTH); track _; let i = $index) {\r\n    <input\r\n      #otpInput\r\n      [type]=\"rucInputData.mask ? 'password' : 'text'\"\r\n         [ngClass]=\"[\r\n        'otp-input',\r\n        rucInputData.templateType || 'rectangle',\r\n        rucInputData.validationState === 'valid' ? 'is-valid' : '',\r\n        rucInputData.validationState === 'invalid' ? 'is-invalid' : ''\r\n      ]\"\r\n      maxlength=\"1\"\r\n      [(ngModel)]=\"otpValues[i]\"\r\n      (input)=\"handleInput($event, i)\"\r\n      (copy)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (paste)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (contextmenu)=\"rucInputData.copyProtection && $event.preventDefault()\"\r\n      (keydown)=\"handleKeyDown($event, i)\"\r\n      [attr.inputmode]=\"rucInputData.integerOnly ? 'numeric' : 'text'\"\r\n      [pattern]=\"rucInputData.integerOnly ? '[0-9]*' : '.*'\"\r\n      autocomplete=\"one-time-code\">\r\n  }\r\n</div>\r\n<!-- Timer -->\r\n@if (rucInputData.timeLimit) {\r\n  <div class=\"otp-timer\">\r\n    {{TIME_LEFT}}: {{ timeLeft }}s\r\n  </div>\r\n}\r\n<!-- Timeout message -->\r\n@if (rucInputData.timeLimit && timeLeft === 0) {\r\n  <div class=\"otp-timeout-message\">\r\n    {{EXPIRED_MSG}}\r\n  </div>\r\n}\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,3 +1,47 @@
-export * from './lib/ruclib-input-otp.module';
-export * from './lib/input-otp/input-otp.component';
-export * from './modal/input-otp-config';
+import * as i0 from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, EventEmitter, QueryList, ElementRef } from '@angular/core';
+
+interface InputOtpConfig {
+    /** Number of OTP digits */
+    length?: number;
+    /** Mask input as password */
+    mask?: boolean;
+    /** Sizes: small, medium, large */
+    size?: 'small' | 'medium' | 'large';
+    /** Only allow integers 0-9 */
+    integerOnly?: boolean;
+    /** Autofocus and auto-jump */
+    autoFocus?: boolean;
+    autoSubmit?: boolean;
+    timeLimit?: number;
+    copyProtection?: boolean;
+    templateType?: 'rectangle' | 'circle' | 'underscore';
+    /** Validation state for visual feedback */
+    validationState?: 'valid' | 'invalid' | undefined;
+}
+
+declare class RuclibInputOtpComponent implements OnInit, AfterViewInit, OnDestroy {
+    readonly DEFAULT_OTP_LENGTH = 6;
+    readonly TIME_LEFT = "Time left";
+    readonly EXPIRED_MSG = "OTP expired. Please request a new one.";
+    rucEvent: EventEmitter<any>;
+    customTheme?: string;
+    rucInputData: InputOtpConfig;
+    timeLeft: number;
+    timerId: any;
+    inputs: QueryList<ElementRef<HTMLInputElement>>;
+    otpValues: string[];
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    handleInput(event: Event, index: number): void;
+    handleKeyDown(event: KeyboardEvent, index: number): void;
+    handlePaste(event: ClipboardEvent): void;
+    private isOtpComplete;
+    private disableAllInputs;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibInputOtpComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibInputOtpComponent, "uxp-ruclib-input-otp", never, { "customTheme": { "alias": "customTheme"; "required": false; }; "rucInputData": { "alias": "rucInputData"; "required": false; }; }, { "rucEvent": "rucEvent"; }, never, never, true, never>;
+}
+
+export { RuclibInputOtpComponent };
+export type { InputOtpConfig };

package/package.json

@@ -1,24 +1,16 @@
 {
   "name": "@ruc-lib/input-otp",
-  "version": "3.2.0",
-  "license": "MIT",
+  "version": "4.0.0",
   "peerDependencies": {
-    "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0",
-    "@angular/core": "^17.0.0 || ^16.0.0 || ^15.0.0",
-    "@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0"
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "sideEffects": false,
-  "module": "fesm2015/ruc-lib-input-otp.mjs",
-  "es2020": "fesm2020/ruc-lib-input-otp.mjs",
-  "esm2020": "esm2020/ruc-lib-input-otp.mjs",
-  "fesm2020": "fesm2020/ruc-lib-input-otp.mjs",
-  "fesm2015": "fesm2015/ruc-lib-input-otp.mjs",
+  "module": "fesm2022/ruc-lib-input-otp.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -26,11 +18,7 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ruc-lib-input-otp.mjs",
-      "es2020": "./fesm2020/ruc-lib-input-otp.mjs",
-      "es2015": "./fesm2015/ruc-lib-input-otp.mjs",
-      "node": "./fesm2015/ruc-lib-input-otp.mjs",
-      "default": "./fesm2020/ruc-lib-input-otp.mjs"
+      "default": "./fesm2022/ruc-lib-input-otp.mjs"
     }
   }
 }

package/esm2020/index.mjs

@@ -1,4 +0,0 @@
-export * from './lib/ruclib-input-otp.module';
-export * from './lib/input-otp/input-otp.component';
-export * from './modal/input-otp-config';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsMEJBQTBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9ydWNsaWItaW5wdXQtb3RwLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lucHV0LW90cC9pbnB1dC1vdHAuY29tcG9uZW50JztcclxuZXhwb3J0ICogZnJvbSAnLi9tb2RhbC9pbnB1dC1vdHAtY29uZmlnJztcclxuIl19