fn-input 0.0.12 → 0.0.13

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.
Files changed (2) hide show
  1. package/README.md +74 -36
  2. package/package.json +5 -2
package/README.md CHANGED
@@ -8,40 +8,43 @@
8
8
 
9
9
  - **Unified Solution**: Combines label, input, icons, and validation messages.
10
10
  - **Standalone**: No project-level modules required.
11
- - **Dynamic Icons**: Supports SVG icons with variant and size configurations.
11
+ - **Dynamic Icons**: Supports SVG icons with variant and size configurations via `@arpudhabotupload/fn-icon-angular`.
12
12
  - **Intelligent Validation**: Automatic error and helper message rendering based on `FormControl` status.
13
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.
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.
17
28
 
18
29
  ---
19
30
 
20
31
  ## 📦 Installation
21
32
 
22
- Install the library in your Angular project:
33
+ Install the library and its peer dependencies:
23
34
 
24
35
  ```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
36
+ npm install fn-input fn-label @arpudhabotupload/fn-icon-angular @ngx-translate/core rxjs
34
37
  ```
35
38
 
36
39
  ---
37
40
 
38
41
  ## ⚙️ Configuration
39
42
 
40
- Ensure you provide `HttpClient` and `TranslateService` in your application configuration.
43
+ Ensure you provide `HttpClient`, `TranslateService`, and necessary icons in your application configuration.
41
44
 
42
45
  ```typescript
43
46
  import { provideHttpClient } from '@angular/common/http';
44
- import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
47
+ import { TranslateModule } from '@ngx-translate/core';
45
48
 
46
49
  // ... in your bootstrap providers
47
50
  providers: [
@@ -57,7 +60,15 @@ providers: [
57
60
  ### Simple Text Input
58
61
 
59
62
  ```html
60
- <fn-input [field]="{ name: 'username', label: 'User Name', type: 'text' }" [form]="myFormGroup">
63
+ <fn-input
64
+ [field]="{
65
+ name: 'username',
66
+ label: 'User Name',
67
+ type: 'text',
68
+ isAlphanumeric: true
69
+ }"
70
+ [form]="myFormGroup"
71
+ >
61
72
  </fn-input>
62
73
  ```
63
74
 
@@ -96,32 +107,59 @@ providers: [
96
107
 
97
108
  ## 📄 API Reference
98
109
 
99
- ### Input Properties
110
+ ### Input Properties (`field` object)
111
+
112
+ The `field` input accepts a configuration object based on `FNInputBase`, which can be one of:
113
+
114
+ - `FNTextInputProps` (for `text`, `email`, `textarea`, `hidden`)
115
+ - `FNPasswordProps`
116
+ - `FNInputNumberProps`
117
+
118
+ #### Common Properties
119
+
120
+ | Property | Type | Default | Description |
121
+ | :---------------- | :------------- | :----------- | :----------------------------------------------------------- |
122
+ | `name` | `string` | **Required** | Key in the `FormGroup`. |
123
+ | `label` | `string` | **Required** | Display label. |
124
+ | `type` | `string` | `text` | `text`, `email`, `textarea`, `number`, `password`. |
125
+ | `placeholder` | `string` | `undefined` | Optional placeholder text. |
126
+ | `required` | `boolean` | `false` | Shows asterisk on label. |
127
+ | `disabled` | `boolean` | `false` | Disables the input control. |
128
+ | `hidden` | `boolean` | `false` | Completely hides the component. |
129
+ | `isAlphanumeric` | `boolean` | `true` | Enables alphanumeric filtering. |
130
+ | `isAddressLine` | `boolean` | `false` | Allows additional characters `( ) / ,` in alphanumeric mode. |
131
+ | `rows` | `number` | `1` | Default rows for `textarea`. |
132
+ | `helperText` | `string` | `undefined` | Persistent helper message below input. |
133
+ | `prefix`/`suffix` | `FNInputAffix` | `undefined` | Icon or text to show at start/end of input. |
134
+
135
+ #### Number & Currency Properties (`type: 'number'`)
136
+
137
+ | Property | Type | Default | Description |
138
+ | :------------ | :-------- | :------ | :---------------------------------- |
139
+ | `isCurrency` | `boolean` | `false` | Enables currency formatting. |
140
+ | `currency` | `string` | `'USD'` | Currency code (e.g., 'MYR', 'EUR'). |
141
+ | `maxDecimals` | `number` | `2` | Max decimal places allowed. |
142
+ | `useGrouping` | `boolean` | `true` | Use comma separators. |
143
+
144
+ ---
100
145
 
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. |
146
+ ## 🛠️ Injection Tokens
108
147
 
109
- ### Output Events
148
+ For global configuration, you can use the following injection tokens:
110
149
 
111
- | Output | Description |
112
- | :------------ | :----------------------------------------------- |
113
- | `valueChange` | Emitted when the input value changes. |
114
- | `fieldBlur` | Emitted when the input field loses focus (blur). |
150
+ | Token | Type | Description |
151
+ | :----------------- | :------------- | :----------------------------------------------------- |
152
+ | `FN_TOAST_SERVICE` | `FNInputToast` | Provide a global toast service for clipboard feedback. |
115
153
 
116
154
  ---
117
155
 
118
156
  ## 🎨 UI Customization
119
157
 
120
- The component uses CSS variables for easy styling:
158
+ The component uses CSS variables for theme integration:
121
159
 
122
- - `--fn-sys-color-on-surface-variant`
123
- - `--fn-sys-color-error`
124
- - `--fn-sys-color-success`
125
- - `--fn-sys-font-family-base`
160
+ - `--fn-sys-color-on-surface-variant`: Default text/icon color.
161
+ - `--fn-sys-color-error`: Validation error color.
162
+ - `--fn-sys-color-success`: Success state color.
163
+ - `--fn-sys-font-family-base`: Primary font family.
126
164
 
127
- Detailed styles can be overridden by targeting classes like `.fn-label-text` or `.fn-field-message-text`.
165
+ Detailed styles can be overridden by targeting classes like `.fn-input-container` or `.fn-field-wrapper`.
package/package.json CHANGED
@@ -1,12 +1,15 @@
1
1
  {
2
2
  "name": "fn-input",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "description": "Reusable Angular standalone component for rendering field validation and helper messages.",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
7
7
  "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
8
+ "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
9
+ "@ngx-translate/core": "^14.0.0 || ^15.0.0 || ^16.0.0",
8
10
  "@arpudhabotupload/fn-icon-angular": "^1.0.0",
9
- "fn-label": "^0.0.16"
11
+ "fn-label": "^0.0.16",
12
+ "rxjs": "^6.6.0 || ^7.0.0"
10
13
  },
11
14
  "dependencies": {
12
15
  "tslib": "^2.3.0"