fn-input 0.0.11 → 0.0.13

package/README.md

@@ -8,40 +8,43 @@
 
 - **Unified Solution**: Combines label, input, icons, and validation messages.
 - **Standalone**: No project-level modules required.
-- **Dynamic Icons**: Supports SVG icons with variant and size configurations.
+- **Dynamic Icons**: Supports SVG icons with variant and size configurations via `@arpudhabotupload/fn-icon-angular`.
 - **Intelligent Validation**: Automatic error and helper message rendering based on `FormControl` status.
 - **Advanced Input Types**:
-  - **Text & Textarea**: With alphanumeric filtering and auto-resize.
-  - **Number**: With currency formatting, locale support, and increment/decrement buttons.
-  - **Password**: With strength indicators, masking toggle, and copy-to-clipboard functionality.
+  - **Text & Textarea**:
+    - **Alphanumeric Filtering**: Restrict input to alphanumeric characters with custom patterns (e.g., address lines).
+    - **Auto-resize**: Textareas automatically adjust height based on content.
+    - **Case Enforcement**: Optional lowercase enforcement for specific fields.
+  - **Email**: Robust email handling with automatic case correction and character filtering.
+  - **Number & Currency**:
+    - **Locale-aware Formatting**: Support for multiple currencies and locales (USD, MYR, EUR, GBP, JPY, CNY, INR).
+    - **Smart Input**: Prevents non-numeric characters and enforces decimal limits.
+    - **Group Separators**: Automatic comma insertion for readability.
+  - **Password**:
+    - **Strength Indicators**: Built-in logic for weak, medium, and strong password validation.
+    - **Masking Toggle**: Easy visibility switching.
+- **Visibility Logic**: Conditionally show/hide fields based on other form control values.
+- **Copy to Clipboard**: Built-in support for copy buttons with toast feedback.
 
 ---
 
 ## 📦 Installation
 
-Install the library in your Angular project:
+Install the library and its peer dependencies:
 
 ```bash
-npm install fn-input
-```
-
-### 🛠️ Required Dependencies
-
-This library uses `@ngx-translate/core` for translations and `@angular/common/http` for SVG loading.
-
-```bash
-npm install @ngx-translate/core @ngx-translate/http-loader
+npm install fn-input fn-label @arpudhabotupload/fn-icon-angular @ngx-translate/core rxjs
 ```
 
 ---
 
 ## ⚙️ Configuration
 
-Ensure you provide `HttpClient` and `TranslateService` in your application configuration.
+Ensure you provide `HttpClient`, `TranslateService`, and necessary icons in your application configuration.
 
 ```typescript
 import { provideHttpClient } from '@angular/common/http';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 // ... in your bootstrap providers
 providers: [
@@ -57,7 +60,15 @@ providers: [
 ### Simple Text Input
 
 ```html
-<fn-input [field]="{ name: 'username', label: 'User Name', type: 'text' }" [form]="myFormGroup">
+<fn-input
+  [field]="{ 
+    name: 'username', 
+    label: 'User Name', 
+    type: 'text',
+    isAlphanumeric: true 
+  }"
+  [form]="myFormGroup"
+>
 </fn-input>
 ```
 
@@ -96,32 +107,59 @@ providers: [
 
 ## 📄 API Reference
 
-### Input Properties
+### Input Properties (`field` object)
+
+The `field` input accepts a configuration object based on `FNInputBase`, which can be one of:
+
+- `FNTextInputProps` (for `text`, `email`, `textarea`, `hidden`)
+- `FNPasswordProps`
+- `FNInputNumberProps`
+
+#### Common Properties
+
+| Property          | Type           | Default      | Description                                                  |
+| :---------------- | :------------- | :----------- | :----------------------------------------------------------- |
+| `name`            | `string`       | **Required** | Key in the `FormGroup`.                                      |
+| `label`           | `string`       | **Required** | Display label.                                               |
+| `type`            | `string`       | `text`       | `text`, `email`, `textarea`, `number`, `password`.           |
+| `placeholder`     | `string`       | `undefined`  | Optional placeholder text.                                   |
+| `required`        | `boolean`      | `false`      | Shows asterisk on label.                                     |
+| `disabled`        | `boolean`      | `false`      | Disables the input control.                                  |
+| `hidden`          | `boolean`      | `false`      | Completely hides the component.                              |
+| `isAlphanumeric`  | `boolean`      | `true`       | Enables alphanumeric filtering.                              |
+| `isAddressLine`   | `boolean`      | `false`      | Allows additional characters `( ) / ,` in alphanumeric mode. |
+| `rows`            | `number`       | `1`          | Default rows for `textarea`.                                 |
+| `helperText`      | `string`       | `undefined`  | Persistent helper message below input.                       |
+| `prefix`/`suffix` | `FNInputAffix` | `undefined`  | Icon or text to show at start/end of input.                  |
+
+#### Number & Currency Properties (`type: 'number'`)
+
+| Property      | Type      | Default | Description                         |
+| :------------ | :-------- | :------ | :---------------------------------- |
+| `isCurrency`  | `boolean` | `false` | Enables currency formatting.        |
+| `currency`    | `string`  | `'USD'` | Currency code (e.g., 'MYR', 'EUR'). |
+| `maxDecimals` | `number`  | `2`     | Max decimal places allowed.         |
+| `useGrouping` | `boolean` | `true`  | Use comma separators.               |
+
+---
 
-| Input          | Type            | Default     | Description                                          |
-| :------------- | :-------------- | :---------- | :--------------------------------------------------- |
-| `field`        | `FNInputBase`   | `{}`        | Main configuration object for the input field.       |
-| `form`         | `FormGroup`     | `undefined` | The parent FormGroup containing the field's control. |
-| `helperHandle` | `FNInputHelper` | `undefined` | Custom logic for showing/hiding field messages.      |
-| `toastService` | `FNInputToast`  | `undefined` | Optional service for copy-to-clipboard feedback.     |
-| `currencyMeta` | `Array`         | `[...]`     | Custom currency-to-locale mapping configuration.     |
+## 🛠️ Injection Tokens
 
-### Output Events
+For global configuration, you can use the following injection tokens:
 
-| Output        | Description                                      |
-| :------------ | :----------------------------------------------- |
-| `valueChange` | Emitted when the input value changes.            |
-| `fieldBlur`   | Emitted when the input field loses focus (blur). |
+| Token              | Type           | Description                                            |
+| :----------------- | :------------- | :----------------------------------------------------- |
+| `FN_TOAST_SERVICE` | `FNInputToast` | Provide a global toast service for clipboard feedback. |
 
 ---
 
 ## 🎨 UI Customization
 
-The component uses CSS variables for easy styling:
+The component uses CSS variables for theme integration:
 
-- `--fn-sys-color-on-surface-variant`
-- `--fn-sys-color-error`
-- `--fn-sys-color-success`
-- `--fn-sys-font-family-base`
+- `--fn-sys-color-on-surface-variant`: Default text/icon color.
+- `--fn-sys-color-error`: Validation error color.
+- `--fn-sys-color-success`: Success state color.
+- `--fn-sys-font-family-base`: Primary font family.
 
-Detailed styles can be overridden by targeting classes like `.fn-label-text` or `.fn-field-message-text`.
+Detailed styles can be overridden by targeting classes like `.fn-input-container` or `.fn-field-wrapper`.