ng-otp-box 0.0.1 → 0.0.2

package/README.md

@@ -1,24 +1,74 @@
 # NgOtpBox
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
+ng-otp-box is a flexible, reusable OTP (One-Time Password) input component for Angular applications.
+It supports numeric, text, mixed, and password OTP, with built-in validation, paste handling, masking/unmasking, and Angular Reactive Forms support.
 
-## Code scaffolding
+## Installation
 
-Run `ng generate component component-name --project ng-otp-box` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-otp-box`.
-> Note: Don't forget to add `--project ng-otp-box` or else it will be added to the default project in your `angular.json` file. 
+#### This library supports Angular version 15 and above
+```bash
+npm install --save ng-otp-box
+```
 
-## Build
+## Usage
 
-Run `ng build ng-otp-box` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Import the Module
 
-## Publishing
+For **Modules**:
 
-After building your library with `ng build ng-otp-box`, go to the dist folder `cd dist/ng-otp-box` and run `npm publish`.
+```typescript
+import { NgOtpBoxModule } from 'ng-otp-box';
 
-## Running unit tests
+@NgModule({
+  imports: [
+    ...otherModules,
+    NgOtpBoxModule,
+  ],
+})
+export class AppModule {}
+```
 
-Run `ng test ng-otp-box` to execute the unit tests via [Karma](https://karma-runner.github.io).
+For **Standalone Components**:
 
-## Further help
+```typescript
+import { NgOtpBoxComponent } from 'ng-otp-box';
+
+@Component({
+  standalone: true,
+  imports: [NgOtpBoxComponent],
+})
+export class YourComponent {}
+```
+
+```html
+<ng-otp-input (otpChange)="onOtpChange($event)" [otpLength]="6" type="masked"></ng-otp-input>
+```
+
+
+## Component Inputs/Outputs
+
+Name            | Type     | Required | Default | Description                                                                 |
+|-----------------|----------|----------|---------|-----------------------------------------------------------------------------|
+| `onOtpChange`   | `Output` | No       | --      | Emits the OTP value on change it will give your message value and otp form valid state so. Not required if using `formControl`
+| `pastValue`      | function | No       | --      | Allows to paste the value.                        |
+| `config`        | object   | NO      | `6` | Configuration object for customization it will take default otp length as 6 (see **Config Options** below). |
+
+
+## Config Options
+
+Name            | Type     | Required | Default | Description                                                                 |
+|-----------------|----------|----------|---------|-----------------------------------------------------------------------------|
+| `otpLength`      | number | No       | 6      | Number of OTP input fields.                       |
+| `inputType`      |'number' | 'text' | 'mixed' | 'masked' | No       | `number`      | Determines the allowed input type:-
+`• number → digits only
+• text → uppercase letters
+• mixed → alphanumeric
+• masked → password/masked input with checkbox to unmask`                       |
+| `pasteAllowed`      | boolean | No       | 6      | Allows pasting a full OTP value.                       |
+
+
+
+## Contributing
+
+Show your support by starring the repo!
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-otp-box",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^15.1.0",
     "@angular/core": "^15.1.0",
@@ -30,4 +30,4 @@
       "default": "./fesm2020/ng-otp-box.mjs"
     }
   }
-}
+}