fn-input 0.0.12 → 0.0.14
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 +212 -127
- package/fesm2022/fn-input.mjs +6 -35
- package/fesm2022/fn-input.mjs.map +1 -1
- package/lib/fn-input.component.d.ts +0 -5
- package/lib/fn-input.component.d.ts.map +1 -1
- package/lib/fn-input.types.d.ts +2 -13
- package/lib/fn-input.types.d.ts.map +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,127 +1,212 @@
|
|
|
1
|
-
# FNInput
|
|
2
|
-
|
|
3
|
-
`FNInput` is a comprehensive, standalone Angular component library that provides a unified input solution. It consolidates labels, icons, and validation messages into a single, highly configurable component.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## 🌟 Features
|
|
8
|
-
|
|
9
|
-
- **Unified Solution**: Combines label, input, icons, and validation messages.
|
|
10
|
-
- **Standalone**: No project-level modules required.
|
|
11
|
-
- **Dynamic Icons**: Supports SVG icons with variant and size configurations
|
|
12
|
-
- **Intelligent Validation**: Automatic error and helper message rendering based on `FormControl` status.
|
|
13
|
-
- **Advanced Input Types**:
|
|
14
|
-
- **Text & Textarea**:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
1
|
+
# FNInput
|
|
2
|
+
|
|
3
|
+
`FNInput` is a comprehensive, standalone Angular component library that provides a unified input solution. It consolidates labels, icons, and validation messages into a single, highly configurable component.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🌟 Features
|
|
8
|
+
|
|
9
|
+
- **Unified Solution**: Combines label, input, icons, and validation messages.
|
|
10
|
+
- **Standalone**: No project-level modules required.
|
|
11
|
+
- **Dynamic Icons**: Supports SVG icons with variant and size configurations via `@arpudhabotupload/fn-icon-angular`.
|
|
12
|
+
- **Intelligent Validation**: Automatic error and helper message rendering based on `FormControl` status.
|
|
13
|
+
- **Advanced Input Types**:
|
|
14
|
+
- **Text & Textarea**:
|
|
15
|
+
- **Alphanumeric Filtering**: Restrict input to alphanumeric characters with custom patterns (e.g., address lines).
|
|
16
|
+
- **Auto-resize**: Textareas automatically adjust height based on content.
|
|
17
|
+
- **Case Enforcement**: Optional lowercase enforcement for specific fields.
|
|
18
|
+
- **Email**: Robust email handling with automatic case correction and character filtering.
|
|
19
|
+
- **Number & Currency**:
|
|
20
|
+
- **Locale-aware Formatting**: Support for multiple currencies and locales (USD, MYR, EUR, GBP, JPY, CNY, INR).
|
|
21
|
+
- **Smart Input**: Prevents non-numeric characters and enforces decimal limits.
|
|
22
|
+
- **Group Separators**: Automatic comma insertion for readability.
|
|
23
|
+
- **Password**:
|
|
24
|
+
- **Strength Indicators**: Built-in logic for weak, medium, and strong password validation.
|
|
25
|
+
- **Masking Toggle**: Easy visibility switching.
|
|
26
|
+
- **Visibility Logic**: Conditionally show/hide fields based on other form control values.
|
|
27
|
+
- **Copy to Clipboard**: Built-in support for copy buttons with toast feedback using `fn-toast`.
|
|
28
|
+
- **Float Label Variants**: Support for 'in', 'over', and 'on' label placements.
|
|
29
|
+
- **Customizable Aesthetics**: Extensive use of CSS variables for theming.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## 📦 Installation
|
|
34
|
+
|
|
35
|
+
Install the library and its peer dependencies:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install fn-input fn-label fn-toast @arpudhabotupload/fn-icon-angular @ngx-translate/core rxjs
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## ⚙️ Configuration
|
|
44
|
+
|
|
45
|
+
Ensure you provide `HttpClient`, `TranslateService`, and necessary icons in your application configuration.
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { provideHttpClient } from '@angular/common/http';
|
|
49
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
50
|
+
|
|
51
|
+
// ... in your bootstrap providers
|
|
52
|
+
providers: [
|
|
53
|
+
provideHttpClient(),
|
|
54
|
+
importProvidersFrom(TranslateModule.forRoot({...}))
|
|
55
|
+
]
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 🚀 Usage
|
|
61
|
+
|
|
62
|
+
### Simple Text Input
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<fn-input
|
|
66
|
+
[field]="{
|
|
67
|
+
name: 'username',
|
|
68
|
+
label: 'User Name',
|
|
69
|
+
type: 'text',
|
|
70
|
+
isAlphanumeric: true
|
|
71
|
+
}"
|
|
72
|
+
[form]="myFormGroup"
|
|
73
|
+
>
|
|
74
|
+
</fn-input>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Currency Input with Custom Locale
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<fn-input
|
|
81
|
+
[field]="{
|
|
82
|
+
name: 'amount',
|
|
83
|
+
label: 'Amount',
|
|
84
|
+
type: 'number',
|
|
85
|
+
isCurrency: true,
|
|
86
|
+
currency: 'INR',
|
|
87
|
+
locale: 'en-IN'
|
|
88
|
+
}"
|
|
89
|
+
[form]="myFormGroup"
|
|
90
|
+
>
|
|
91
|
+
</fn-input>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Password with Strength Indicator
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<fn-input
|
|
98
|
+
[field]="{
|
|
99
|
+
name: 'password',
|
|
100
|
+
label: 'Password',
|
|
101
|
+
type: 'password',
|
|
102
|
+
feedback: true,
|
|
103
|
+
weakLabel: 'Weak Password',
|
|
104
|
+
mediumLabel: 'Medium Password',
|
|
105
|
+
strongLabel: 'Strong Password'
|
|
106
|
+
}"
|
|
107
|
+
[form]="myFormGroup"
|
|
108
|
+
>
|
|
109
|
+
</fn-input>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Copy to Clipboard
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<fn-input
|
|
116
|
+
[field]="{
|
|
117
|
+
name: 'referralCode',
|
|
118
|
+
label: 'Referral Code',
|
|
119
|
+
type: 'text',
|
|
120
|
+
isCopyText: true
|
|
121
|
+
}"
|
|
122
|
+
[form]="myFormGroup"
|
|
123
|
+
>
|
|
124
|
+
</fn-input>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## 📄 API Reference
|
|
130
|
+
|
|
131
|
+
### Input Properties (`field` object)
|
|
132
|
+
|
|
133
|
+
The `field` input accepts a configuration object based on `FNInputBase`.
|
|
134
|
+
|
|
135
|
+
#### Common Properties (`FNInputCommonProps`)
|
|
136
|
+
|
|
137
|
+
| Property | Type | Default | Description |
|
|
138
|
+
| :-------------------- | :--------------------------- | :----------- | :----------------------------------------------------------- |
|
|
139
|
+
| `name` | `string` | **Required** | Key in the `FormGroup`. |
|
|
140
|
+
| `label` | `string` | **Required** | Display label. |
|
|
141
|
+
| `type` | `string` | `text` | `text`, `email`, `textarea`, `number`, `password`, `hidden`. |
|
|
142
|
+
| `placeholder` | `string` | `undefined` | Optional placeholder text. |
|
|
143
|
+
| `required` | `boolean` | `false` | Shows asterisk on label. |
|
|
144
|
+
| `disabled` | `boolean` | `false` | Disables the input control. |
|
|
145
|
+
| `hidden` | `boolean` | `false` | Completely hides the component. |
|
|
146
|
+
| `readOnly` | `boolean` | `false` | Sets the input to read-only. |
|
|
147
|
+
| `floatLabelVariant` | `'in' \| 'over' \| 'on'` | `'over'` | Label placement strategy. |
|
|
148
|
+
| `validators` | `ValidatorFn[]` | `[]` | Angular validators to apply. |
|
|
149
|
+
| `errors` | `{ [key: string]: string }` | `{}` | Custom error messages for validators. |
|
|
150
|
+
| `rows` | `number` | `1` | Default rows for `textarea`. |
|
|
151
|
+
| `prefix` | `FNInputAffix` | `undefined` | Icon or text at the start. |
|
|
152
|
+
| `suffix` | `FNInputAffix` | `undefined` | Icon or text at the end. |
|
|
153
|
+
| `helperText` | `string` | `undefined` | Persistent helper message. |
|
|
154
|
+
| `isAlphanumeric` | `boolean` | `false` | Enables alphanumeric filtering. |
|
|
155
|
+
| `isAddressLine` | `boolean` | `false` | Allows `( ) / ,` in alphanumeric mode. |
|
|
156
|
+
| `isCopyText` | `boolean` | `false` | Adds a copy button. |
|
|
157
|
+
| `visibilityCondition` | `FNInputVisibilityCondition` | `undefined` | Logic to show/hide based on other fields. |
|
|
158
|
+
| `labelVariant` | `TypeLabelVariant` | `undefined` | Custom label typography variant. |
|
|
159
|
+
| `statusLabel` | `TypeStatusLabel` | `'Standard'` | Label status color variant. |
|
|
160
|
+
|
|
161
|
+
#### Text & Email Properties (`FNTextInputProps`)
|
|
162
|
+
|
|
163
|
+
Extends `FNInputCommonProps`.
|
|
164
|
+
|
|
165
|
+
| Property | Type | Default | Description |
|
|
166
|
+
| :---------- | :------- | :---------- | :--------------------------------------------- |
|
|
167
|
+
| `maxLength` | `number` | `undefined` | Maximum characters allowed. |
|
|
168
|
+
| `icon` | `object` | `undefined` | Main icon configuration (name, variant, size). |
|
|
169
|
+
|
|
170
|
+
#### Password Properties (`FNPasswordProps`)
|
|
171
|
+
|
|
172
|
+
Extends `FNInputCommonProps`.
|
|
173
|
+
|
|
174
|
+
| Property | Type | Default | Description |
|
|
175
|
+
| :------------ | :-------- | :--------- | :-------------------------------- |
|
|
176
|
+
| `toggleMask` | `boolean` | `true` | Show/hide password toggle. |
|
|
177
|
+
| `feedback` | `boolean` | `false` | Show password strength indicator. |
|
|
178
|
+
| `weakLabel` | `string` | `'Weak'` | Label for weak strength. |
|
|
179
|
+
| `mediumLabel` | `string` | `'Medium'` | Label for medium strength. |
|
|
180
|
+
| `strongLabel` | `string` | `'Strong'` | Label for strong strength. |
|
|
181
|
+
|
|
182
|
+
#### Number & Currency Properties (`FNInputNumberProps`)
|
|
183
|
+
|
|
184
|
+
| Property | Type | Default | Description |
|
|
185
|
+
| :------------------ | :-------- | :-------- | :---------------------------------- |
|
|
186
|
+
| `isCurrency` | `boolean` | `false` | Enables currency formatting. |
|
|
187
|
+
| `currency` | `string` | `'USD'` | Currency code (e.g., 'MYR', 'INR'). |
|
|
188
|
+
| `locale` | `string` | `'en-US'` | Locale for formatting. |
|
|
189
|
+
| `minFractionDigits` | `number` | `2` | Min decimal places. |
|
|
190
|
+
| `maxFractionDigits` | `number` | `2` | Max decimal places. |
|
|
191
|
+
| `useGrouping` | `boolean` | `true` | Use group separators (commas). |
|
|
192
|
+
| `maxIntegerDigits` | `number` | `12` | Max integer digits allowed. |
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## 🛠️ Injection Tokens
|
|
197
|
+
|
|
198
|
+
| Token | Type | Description |
|
|
199
|
+
| :----------------- | :------------- | :--------------------------------------------------------- |
|
|
200
|
+
| `FN_TOAST_SERVICE` | `FNInputToast` | Provide a global `FNToast` service for clipboard feedback. |
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## 🎨 UI Customization
|
|
205
|
+
|
|
206
|
+
The component integrates with the `shared-ui` design system via CSS variables:
|
|
207
|
+
|
|
208
|
+
- `--fn-sys-color-on-surface-variant`: Icon/Text color.
|
|
209
|
+
- `--fn-sys-color-error`: Error state color.
|
|
210
|
+
- `--fn-sys-color-success`: Success/Valid color.
|
|
211
|
+
- `--fn-sys-font-family-base`: Primary typography.
|
|
212
|
+
- `--fn-sys-color-outline`: Input border color.
|