@ruc-lib/input-otp 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,19 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
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
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation Guide
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
Install RUC Library.
|
|
7
|
+
To use the Input OTP component, you can install the entire RUC library or just this specific component.
|
|
9
8
|
|
|
10
|
-
To install the entire RUC library:
|
|
11
9
|
|
|
12
|
-
`npm install @uxpractice/ruc-lib`
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
### Install the Entire Library
|
|
12
|
+
```bash
|
|
13
|
+
npm install @uxpractice/ruc-lib
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
### Install Individual Component
|
|
17
|
+
If you only need the Input OTP component:
|
|
18
|
+
```bash
|
|
19
|
+
npm install @ruc-lib/input-otp`
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
```
|
|
18
22
|
|
|
19
23
|
After installing the the required package successfully, we have to import the CSS in our style.scss file in following way.
|
|
20
24
|
|
|
@@ -31,55 +35,84 @@ for seperate package
|
|
|
31
35
|
`@import "../node_modules/primeng/resources/themes/lara-light-indigo/theme.css";`
|
|
32
36
|
`@import "../node_modules/primeng/resources/primeng.min.css";`
|
|
33
37
|
|
|
34
|
-
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
### 1. Import the Module
|
|
41
|
+
In your Angular module file (e.g., `app.module.ts`), import the `RuclibInputOtpModule`:
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
// For Complete Library
|
|
45
|
+
import { RuclibInputOtpModule } from '@uxpractice/ruc-lib/input-otp';
|
|
46
|
+
|
|
47
|
+
// For Individual Package
|
|
48
|
+
import { RuclibInputOtpModule } from '@ruc-lib/input-otp';
|
|
49
|
+
import { AppComponent } from './app.component';
|
|
50
|
+
import { NgModule } from '@angular/core';
|
|
51
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
52
|
+
|
|
53
|
+
@NgModule({
|
|
54
|
+
declarations: [AppComponent],
|
|
55
|
+
imports: [
|
|
56
|
+
BrowserModule,
|
|
57
|
+
RuclibInputOtpModule
|
|
58
|
+
],
|
|
59
|
+
providers: [],
|
|
60
|
+
bootstrap: [AppComponent]
|
|
61
|
+
})
|
|
62
|
+
export class AppModule {}
|
|
63
|
+
```
|
|
64
|
+
### 2. Use the Component
|
|
65
|
+
In your component's template, use the `<uxp-input-otp>` selector and pass the configuration object to the `rucInputData` input.
|
|
35
66
|
|
|
36
|
-
|
|
67
|
+
```html
|
|
68
|
+
<uxp-input-otp [customTheme]="customTheme" [rucInputData]="inputObjectDataInputOtp"></uxp-input-otp>
|
|
69
|
+
```
|
|
37
70
|
|
|
38
|
-
|
|
71
|
+
## API Reference
|
|
39
72
|
|
|
40
|
-
|
|
73
|
+
### Component Inputs
|
|
41
74
|
|
|
42
|
-
|
|
75
|
+
| Input | Type | Description |
|
|
76
|
+
|----------------|--------------------|----------------------------------------------|
|
|
77
|
+
| `rucInputData` | `InputOtpConfig` | The main configuration object for the component. |
|
|
78
|
+
| `customTheme` | `string` | An optional CSS class for custom theming. |
|
|
43
79
|
|
|
44
|
-
`import { RuclibInputOtpModule } from '@ruc-lib/carousel'`
|
|
45
80
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
User can have Masking support
|
|
49
|
-
User can have Sizing functionality
|
|
50
|
-
User can Integer only support
|
|
51
|
-
User can have Custom OTP length
|
|
52
|
-
User can have Auto focus and auto jump
|
|
53
|
-
User can have Paste support
|
|
54
|
-
User can have Auto Submit on Complete
|
|
55
|
-
User can have Input Timeout/Expiry
|
|
56
|
-
User should enter the Otp input within the specified time limit (optional)
|
|
57
|
-
User can have custom templates/ Layouts (circle, rectangle and underscore lines ) for the Input OTP
|
|
58
|
-
User can validate input otp validation if the OTP is correct or not
|
|
59
|
-
User can have Copy and Paste Protection
|
|
81
|
+
### `InputOtpConfig`
|
|
82
|
+
This is the main configuration object for the Input OTP.
|
|
60
83
|
|
|
61
|
-
|
|
84
|
+
| Property | Type | Description |
|
|
85
|
+
|-----------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------|
|
|
86
|
+
| `length` | `number` | Number of OTP digits |
|
|
87
|
+
| `mask` | `boolean` | Mask input as password |
|
|
88
|
+
| `size` | `'small' \| 'medium' \| 'large'` | Sizes: small, medium, large |
|
|
89
|
+
| `integerOnly` | `boolean` | Only allow integers 0-9 |
|
|
90
|
+
| `autoFocus` | `boolean` | auto focus and auto jump |
|
|
91
|
+
| `autoSubmit` | `boolean` | Auto Submit |
|
|
92
|
+
| `timeLimit` | `number` | Optional Time linit in seconds |
|
|
93
|
+
| `copyProtection` | `boolean` | /copy and paste protection |
|
|
94
|
+
| `templateType` | `'rectangle' \| 'circle' \| 'underscore'` | template style |
|
|
95
|
+
| `validationState` | `'valid' \| 'invalid' \| 'undefined'` | Validation state for visual feedback |
|
|
62
96
|
|
|
63
|
-
```
|
|
64
|
-
<uxp-input-otp (rucEvent)="passEvent($event)" [rucInputData]="inputObjectDataInputOtp"></uxp-input-otp>
|
|
65
97
|
|
|
98
|
+
## Example Configuration
|
|
66
99
|
|
|
67
|
-
|
|
100
|
+
Here's an example of how to configure the Input OTP in your component's TypeScript file.
|
|
68
101
|
|
|
69
|
-
|
|
102
|
+
```typescript
|
|
103
|
+
import { Component } from '@angular/core';
|
|
104
|
+
// For Complete Library
|
|
105
|
+
import { InputOtpConfig } from '@uxpractice/ruc-lib/input-otp';
|
|
70
106
|
|
|
71
|
-
|
|
72
|
-
|
|
107
|
+
// For Individual package
|
|
108
|
+
import { InputOtpConfig } from '@ruc-lib/input-otp';
|
|
73
109
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
const defaultConfig = {
|
|
110
|
+
@Component({
|
|
111
|
+
selector: 'app-root',
|
|
112
|
+
templateUrl: './app.component.html',
|
|
113
|
+
})
|
|
114
|
+
export class AppComponent {
|
|
115
|
+
const defaultConfig : InputOtpConfig = {
|
|
83
116
|
length: 6,
|
|
84
117
|
autoFocus: true,
|
|
85
118
|
integerOnly: true,
|
|
@@ -91,14 +124,25 @@ const defaultConfig = {
|
|
|
91
124
|
validationState: undefined,
|
|
92
125
|
timeLimit: undefined,
|
|
93
126
|
};
|
|
94
|
-
|
|
95
|
-
export const Default: Story = {
|
|
96
|
-
args: {
|
|
97
|
-
rucInputData: { ...defaultConfig },
|
|
98
|
-
},
|
|
99
|
-
};
|
|
127
|
+
}
|
|
100
128
|
```
|
|
101
129
|
|
|
130
|
+
# Features
|
|
131
|
+
User can have Basic Input
|
|
132
|
+
User can have Masking support
|
|
133
|
+
User can have Sizing functionality
|
|
134
|
+
User can Integer only support
|
|
135
|
+
User can have Custom OTP length
|
|
136
|
+
User can have Auto focus and auto jump
|
|
137
|
+
User can have Paste support
|
|
138
|
+
User can have Auto Submit on Complete
|
|
139
|
+
User can have Input Timeout/Expiry
|
|
140
|
+
User should enter the Otp input within the specified time limit (optional)
|
|
141
|
+
User can have custom templates/ Layouts (circle, rectangle and underscore lines ) for the Input OTP
|
|
142
|
+
User can validate input otp validation if the OTP is correct or not
|
|
143
|
+
User can have Copy and Paste Protection
|
|
144
|
+
|
|
145
|
+
|
|
102
146
|
# Contribution
|
|
103
147
|
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
|
|
104
148
|
|