npm package: @raunakdev/otp-input-custom
Description: A customizable OTP input library built with Angular, designed to offer flexibility in styling and functionality. This library is ideal for implementing OTP verification screens in Angular projects.
Latest version: 1.0.9

# @raunakdev/otp-input

A customizable OTP input library built with Angular, designed to offer flexibility in styling and functionality. This library is ideal for implementing OTP verification screens in Angular projects.

## Features

Customizable Input Box: Fully customizable box size, font size, font weight, colors, and borders.
Separator Support: Add separators between OTP inputs with custom styles.
Masking Options: Hide input characters for password-like behavior.
Error Handling: Visual feedback for invalid inputs.
Event Emission: Emits the complete OTP when all boxes are filled.
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

## Installation

Install the package via npm:

```bash
npm install @raunakdev/otp-input
```

### Usage

1. Import the OtpInputModule in your Angular standalone component:

```bash
=========== For NgModule =========
import { OtpInputModule } from '@raunakdev/otp-input';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, OtpInputModule],
bootstrap: [AppComponent],
})
export class AppModule {}

=========== For Standalone Compoenent =========
import { OtpInputModule } from '@raunakdev/otp-input';
@Component({
  selector: 'app-root',
  imports: [OtpInputComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
```

2. Add the component to your template:

   ```bash
   <lib-otp-input
   [otpLength]="6"
   [boxSize]="'50px'"
   [placeholder]="'*'"
   [inputStyles]="{ borderBottom: '2px solid #007bff' }"
   [separator]="'-'"
   [separatorStyle]="{ color: '#007bff', fontSize: '20px' }"
   [mask]="true"
   [showIcon]="'path/to/show-icon.png'"
   [hideIcon]="'path/to/hide-icon.png'"
   (otpComplete)="handleOtp($event)"
   ></lib-otp-input>
   ```

## Inputs

| Input            | Type                     | Description                                                                  |
| ---------------- | ------------------------ | ---------------------------------------------------------------------------- |
| `otpLength`      | `number`                 | Number of OTP boxes (default: `6`).                                          |
| `boxSize`        | `string`                 | Size of each input box (e.g., `50px`).                                       |
| `placeholder`    | `string`                 | Placeholder text for each input box.                                         |
| `inputStyles`    | `Record<string, string>` | Custom styles for the input boxes (e.g.,`{ borderBottom: '2px solid red' }`) |
| `separator`      | `string`                 | Separator text between OTP inputs (e.g., `'-'`).                             |
| `separatorStyle` | `Record<string, string>` | Custom styles for the separator text.                                        |
| `mask`           | `boolean`                | Masks input characters for password-like fields.                             |
| `showIcon`       | `string`                 | Path to the icon for showing masked characters.                              |
| `hideIcon`       | `string`                 | Path to the icon for hiding masked characters.                               |

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Customization

You can fully customize the library using the provided inputs for styles and functionality, such as adjusting border types, colors, and separators.

## Contributing

Contributions are welcome! Please follow these steps:
Fork the repository.
Create a new branch for your feature or bug fix.
Commit your changes and push the branch.
Open a pull request.

## License

This project is licensed under the MIT License. See the LICENSE file for details.

## Author

Developed by Chaudhary Raunak Raj.

## Support

If you encounter any issues or have feature requests, please open an issue on the GitHub repository.