FNInput

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.

🌟 Features

• 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 via @arpudhabotupload/fn-icon-angular.
• Intelligent Validation: Automatic error and helper message rendering managed by the fn-field-message component.
• Advanced Input Types:
  • 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 using fn-toast.
• Float Label Variants: Support for 'in', 'over', and 'on' label placements.
• Customizable Aesthetics: Extensive use of CSS variables for theming.

📦 Installation

Install the library and its peer dependencies:

npm install fn-input fn-label fn-toast fn-field-message @arpudhabotupload/fn-icon-angular @ngx-translate/core rxjs

⚙️ Configuration

Ensure you provide HttpClient, TranslateService, and necessary icons in your application configuration.

import { provideHttpClient } from '@angular/common/http';
import { TranslateModule } from '@ngx-translate/core';

// ... in your bootstrap providers
providers: [
  provideHttpClient(),
  importProvidersFrom(TranslateModule.forRoot({...}))
]

🚀 Usage

Simple Text Input

<fn-input
  [field]="{ 
    name: 'username', 
    label: 'User Name', 
    type: 'text',
    isAlphanumeric: true 
  }"
  [form]="myFormGroup"
>
</fn-input>

Currency Input with Custom Locale

<fn-input
  [field]="{ 
    name: 'amount', 
    label: 'Amount', 
    type: 'number', 
    isCurrency: true, 
    currency: 'INR',
    locale: 'en-IN'
  }"
  [form]="myFormGroup"
>
</fn-input>

Password with Strength Indicator

<fn-input
  [field]="{ 
    name: 'password', 
    label: 'Password', 
    type: 'password', 
    feedback: true,
    weakLabel: 'Weak Password',
    mediumLabel: 'Medium Password',
    strongLabel: 'Strong Password'
  }"
  [form]="myFormGroup"
>
</fn-input>

Copy to Clipboard

<fn-input
  [field]="{ 
    name: 'referralCode', 
    label: 'Referral Code', 
    type: 'text',
    isCopyText: true
  }"
  [form]="myFormGroup"
>
</fn-input>

📄 API Reference

Input Properties (field object)

The field input accepts a configuration object based on FNInputBase.

Common Properties (FNInputCommonProps)

| Property | Type | Default | Description | | :-------------------- | :--------------------------- | :----------- | :----------------------------------------------------------- | | name | string | Required | Key in the FormGroup. | | label | string | Required | Display label. | | type | string | text | text, email, textarea, number, password, hidden. | | 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. | | readOnly | boolean | false | Sets the input to read-only. | | floatLabelVariant | 'in' \| 'over' \| 'on' | 'over' | Label placement strategy. | | validators | ValidatorFn[] | [] | Angular validators to apply. | | errors | { [key: string]: string } | {} | Custom error messages for validators. | | rows | number | 1 | Default rows for textarea. | | prefix | FNInputAffix | undefined | Icon or text at the start. | | suffix | FNInputAffix | undefined | Icon or text at the end. | | helperText | string | undefined | Persistent helper message. | | isAlphanumeric | boolean | false | Enables alphanumeric filtering. | | isAddressLine | boolean | false | Allows ( ) / , in alphanumeric mode. | | isCopyText | boolean | false | Adds a copy button. | | visibilityCondition | FNInputVisibilityCondition | undefined | Logic to show/hide based on other fields. | | labelVariant | TypeLabelVariant | undefined | Custom label typography variant. | | statusLabel | TypeStatusLabel | 'Standard' | Label status color variant. |

Text & Email Properties (FNTextInputProps)

Extends FNInputCommonProps.

| Property | Type | Default | Description | | :---------- | :------- | :---------- | :--------------------------------------------- | | maxLength | number | undefined | Maximum characters allowed. | | icon | object | undefined | Main icon configuration (name, variant, size). |

Password Properties (FNPasswordProps)

Extends FNInputCommonProps.

| Property | Type | Default | Description | | :------------ | :-------- | :--------- | :-------------------------------- | | toggleMask | boolean | true | Show/hide password toggle. | | feedback | boolean | false | Show password strength indicator. | | weakLabel | string | 'Weak' | Label for weak strength. | | mediumLabel | string | 'Medium' | Label for medium strength. | | strongLabel | string | 'Strong' | Label for strong strength. |

Number & Currency Properties (FNInputNumberProps)

| Property | Type | Default | Description | | :------------------ | :-------- | :-------- | :---------------------------------- | | isCurrency | boolean | false | Enables currency formatting. | | currency | string | 'USD' | Currency code (e.g., 'MYR', 'INR'). | | locale | string | 'en-US' | Locale for formatting. | | minFractionDigits | number | 2 | Min decimal places. | | maxFractionDigits | number | 2 | Max decimal places. | | useGrouping | boolean | true | Use group separators (commas). | | maxIntegerDigits | number | 12 | Max integer digits allowed. |

🛠️ Injection Tokens

| Token | Type | Description | | :----------------- | :------------- | :--------------------------------------------------------- | | FN_TOAST_SERVICE | FNInputToast | Provide a global FNToast service for clipboard feedback. |

🎨 UI Customization

The component integrates with the shared-ui design system via CSS variables:

• --fn-sys-color-on-surface-variant: Icon/Text color.
• --fn-sys-color-error: Error state color.
• --fn-sys-color-success: Success/Valid color.
• --fn-sys-font-family-base: Primary typography.
• --fn-sys-color-outline: Input border color.