uxp-ruclib-input-otp

This library provides a flexible and customizable Input OTP component for your Angular applications. Users can integrate the Input OTP component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details

Installation Guide

To use the Input OTP component, you can install the entire RUC library or just this specific component.

$3

``bash
npm install @uxpractice/ruc-lib
`

$3

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
`

For Angular 16:
`bash
npm install @ruc-lib/input-otp@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
`

For Angular 17:
`bash
npm install @ruc-lib/input-otp@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
`

For Angular 18:
`bash
npm install @ruc-lib/input-otp@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
`

For Angular 19:
`bash
npm install @ruc-lib/input-otp@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
`

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.

$3

| 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

$3

In your Angular component file (e.g., app.component.ts), import the RuclibInputOtpComponent:

`typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibInputOtpComponent } from '@uxpractice/ruc-lib/input-otp';

// For Individual Package
import { RuclibInputOtpComponent } from '@ruc-lib/input-otp';

@Component({
selector: 'app-root',
imports: [RuclibInputOtpComponent],
templateUrl: './app.component.html',
})
export class AppComponent {
// Component code here
}
`

$3

In your component's template, use the selector and pass the configuration object to the rucInputData input.

`html

`

API Reference

$3

| Input | Type | Description |
|----------------|--------------------|----------------------------------------------|
| rucInputData | InputOtpConfig | The main configuration object for the component. |
| customTheme | string | An optional CSS class for custom theming. |

$3

This is the main configuration object for the Input OTP.

| Property | Type | Description |
|-----------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| length | number | Number of OTP digits |
| mask | boolean | Mask input as password |
| size | 'small' \| 'medium' \| 'large' | Sizes: small, medium, large |
| integerOnly | boolean | Only allow integers 0-9 |
| autoFocus | boolean | auto focus and auto jump |
| autoSubmit | boolean | Auto Submit |
| timeLimit | number | Optional Time linit in seconds |
| copyProtection | boolean | /copy and paste protection |
| templateType | 'rectangle' \| 'circle' \| 'underscore' | template style |
| validationState | 'valid' \| 'invalid' \| 'undefined' | Validation state for visual feedback |

Example Configuration

Here's an example of how to configure the Input OTP in your component's TypeScript file.

`typescript
import { Component } from '@angular/core';
// For Complete Library
import { InputOtpConfig } from '@uxpractice/ruc-lib/input-otp';

// For Individual package
import { InputOtpConfig } from '@ruc-lib/input-otp';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
const defaultConfig : InputOtpConfig = {
length: 6,
autoFocus: true,
integerOnly: true,
autoSubmit: true,
mask: false,
size: 'medium', // 'medium' as literal
copyProtection: true,
templateType: 'rectangle', // as literal
validationState: undefined,
timeLimit: undefined,
};
}
`

Features

User can have Basic Input
User can have Masking support
User can have Sizing functionality
User can Integer only support
User can have Custom OTP length
User can have Auto focus and auto jump
User can have Paste support
User can have Auto Submit on Complete
User can have Input Timeout/Expiry
User should enter the Otp input within the specified time limit (optional)
User can have custom templates/ Layouts (circle, rectangle and underscore lines ) for the Input OTP
User can validate input otp validation if the OTP is correct or not
User can have Copy and Paste Protection


> ⚠️ IMPORTANT: Custom Theme Usage in Angular Material

When implementing custom themes, such as:

`scss
.custom-theme-1 {
@include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
@include angular-material-theme($custom-theme);
@include mat.typography-level($theme-custom-typography-name, body-1);
}
``

Contribution

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!