fn-input 0.0.1
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 +127 -0
- package/fesm2022/fn-input.mjs +1106 -0
- package/fesm2022/fn-input.mjs.map +1 -0
- package/package.json +25 -0
- package/types/fn-input.d.ts +290 -0
- package/types/fn-input.d.ts.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,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.
|
|
12
|
+
- **Intelligent Validation**: Automatic error and helper message rendering based on `FormControl` status.
|
|
13
|
+
- **Advanced Input Types**:
|
|
14
|
+
- **Text & Textarea**: With alphanumeric filtering and auto-resize.
|
|
15
|
+
- **Number**: With currency formatting, locale support, and increment/decrement buttons.
|
|
16
|
+
- **Password**: With strength indicators, masking toggle, and copy-to-clipboard functionality.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 📦 Installation
|
|
21
|
+
|
|
22
|
+
Install the library in your Angular project:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install fn-input
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 🛠️ Required Dependencies
|
|
29
|
+
|
|
30
|
+
This library uses `@ngx-translate/core` for translations and `@angular/common/http` for SVG loading.
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install @ngx-translate/core @ngx-translate/http-loader
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## ⚙️ Configuration
|
|
39
|
+
|
|
40
|
+
Ensure you provide `HttpClient` and `TranslateService` in your application configuration.
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { provideHttpClient } from '@angular/common/http';
|
|
44
|
+
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
|
45
|
+
|
|
46
|
+
// ... in your bootstrap providers
|
|
47
|
+
providers: [
|
|
48
|
+
provideHttpClient(),
|
|
49
|
+
importProvidersFrom(TranslateModule.forRoot({...}))
|
|
50
|
+
]
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 🚀 Usage
|
|
56
|
+
|
|
57
|
+
### Simple Text Input
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<fn-input [field]="{ name: 'username', label: 'User Name', type: 'text' }" [form]="myFormGroup">
|
|
61
|
+
</fn-input>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Currency Input
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<fn-input
|
|
68
|
+
[field]="{
|
|
69
|
+
name: 'amount',
|
|
70
|
+
label: 'Amount',
|
|
71
|
+
type: 'number',
|
|
72
|
+
isCurrency: true,
|
|
73
|
+
currency: 'MYR'
|
|
74
|
+
}"
|
|
75
|
+
[form]="myFormGroup"
|
|
76
|
+
>
|
|
77
|
+
</fn-input>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Password with Strength Indicator
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<fn-input
|
|
84
|
+
[field]="{
|
|
85
|
+
name: 'password',
|
|
86
|
+
label: 'Password',
|
|
87
|
+
type: 'password',
|
|
88
|
+
feedback: true
|
|
89
|
+
}"
|
|
90
|
+
[form]="myFormGroup"
|
|
91
|
+
>
|
|
92
|
+
</fn-input>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 📄 API Reference
|
|
98
|
+
|
|
99
|
+
### Input Properties
|
|
100
|
+
|
|
101
|
+
| Input | Type | Default | Description |
|
|
102
|
+
| :------------- | :-------------- | :---------- | :--------------------------------------------------- |
|
|
103
|
+
| `field` | `FNInputBase` | `{}` | Main configuration object for the input field. |
|
|
104
|
+
| `form` | `FormGroup` | `undefined` | The parent FormGroup containing the field's control. |
|
|
105
|
+
| `helperHandle` | `FNInputHelper` | `undefined` | Custom logic for showing/hiding field messages. |
|
|
106
|
+
| `toastService` | `FNInputToast` | `undefined` | Optional service for copy-to-clipboard feedback. |
|
|
107
|
+
| `currencyMeta` | `Array` | `[...]` | Custom currency-to-locale mapping configuration. |
|
|
108
|
+
|
|
109
|
+
### Output Events
|
|
110
|
+
|
|
111
|
+
| Output | Description |
|
|
112
|
+
| :------------ | :----------------------------------------------- |
|
|
113
|
+
| `valueChange` | Emitted when the input value changes. |
|
|
114
|
+
| `fieldBlur` | Emitted when the input field loses focus (blur). |
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 🎨 UI Customization
|
|
119
|
+
|
|
120
|
+
The component uses CSS variables for easy styling:
|
|
121
|
+
|
|
122
|
+
- `--fn-sys-color-on-surface-variant`
|
|
123
|
+
- `--fn-sys-color-error`
|
|
124
|
+
- `--fn-sys-color-success`
|
|
125
|
+
- `--fn-sys-font-family-base`
|
|
126
|
+
|
|
127
|
+
Detailed styles can be overridden by targeting classes like `.fn-label-text` or `.fn-field-message-text`.
|