🧩 @vanshasomani/generic-input

A reusable, highly-configurable Angular Material Input Component that supports all input types, password toggle, custom validation, and beautiful error handling.

🚀 Features

• Supports all common input types: text, password, email, textarea, select, checkbox, radio
• Password toggle with eye icon
• Custom validators and error messages
• Reactive Forms integration
• Dynamic label, hint, and icon support
• Required asterisk * indicator with showRequiredStar
• Minimal, clean Material Design

📦 Installation

npm install @vanshasomani/generic-input


🔧 Usage
✅ Import in Standalone Component
ts
Copy
Edit
import { GenericInput } from '@vanshasomani/generic-input';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [GenericInput, ReactiveFormsModule],
  templateUrl: './login.component.html'
})
export class LoginComponent {
  // ...
}

📋 Template Usage
html
Copy
Edit
<lib-generic-input
  [config]="emailConfig"
  [formControl]="loginForm.get('email')">
</lib-generic-input>

🧠 Component Setup
ts
Copy
Edit
import { FormBuilder, Validators } from '@angular/forms';
import { GenericInputInterface } from '@vanshasomani/generic-input';

loginForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]]
});

emailConfig: GenericInputInterface = {
  type: 'email',
  label: 'Email Address',
  placeholder: 'Enter your email',
  appearance: 'outline',
  id: 'email',
  name: 'email',
  icon: 'mail',
  showRequiredStar: true, // 👈 shows red asterisk if required validator exists
  customErrorMessages: {
    required: 'Email is required',
    email: 'Please enter a valid email'
  }
};

GenericInputInterface {
  appearance: 'outline' | 'fill';
  type: string;
  placeholder: string;
  showRequiredStar?: boolean;
  value?: string;
  id: string;
  name: string;
  icon?: string | null;
  label: string;
  hint?: string | null;
  disabled?: boolean;
  options?: { value: string; label: string }[];
  class?: string;
  customValidators?: ((control: AbstractControl) => ValidationErrors | null)[];
  customErrorMessages?: { [key: string]: string };
}

🧾 GenericInputInterface

| Property               | Type                                                         | Description                                                                        |
| ---------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
| `type`                 | `string`                                                     | Input type: `text`, `email`, `password`, `select`, `radio`, `checkbox`, `textarea` |
| `label`                | `string`                                                     | Field label                                                                        |
| `placeholder`          | `string`                                                     | Placeholder text                                                                   |
| `appearance`           | `'outline' \| 'fill'`                                        | Material appearance                                                                |
| `id`                   | `string`                                                     | Input element ID                                                                   |
| `name`                 | `string`                                                     | Input name                                                                         |
| `icon?`                | `string`                                                     | Optional Material icon                                                             |
| `hint?`                | `string`                                                     | Hint shown below input                                                             |
| `disabled?`            | `boolean`                                                    | Disable the input                                                                  |
| `options?`             | `{ value: string; label: string }[]`                         | For `select`, `radio` inputs                                                       |
| `class?`               | `string`                                                     | Extra CSS class                                                                    |
| `showRequiredStar?`    | `boolean`                                                    | Show `*` if field is required                                                      |
| `customValidators?`    | `((control: AbstractControl) => ValidationErrors \| null)[]` | Custom validators                                                                  |
| `customErrorMessages?` | `{ [key: string]: string }`                                  | Error key → message map                                                            |


🔐 Password Toggle
Automatically enabled when type: 'password'. Toggles between password and text with a visibility icon.