# EuiMaxLengthDirective

A comprehensive Angular directive that adds maximum length functionality to input and textarea elements with visual feedback and character counting.

## Features

### Core Functionality
- **Character Limit Enforcement**: Automatically restricts input length to specified maximum
- **Visual Character Counter**: Displays remaining characters count in real-time
- **Form Integration**: Works seamlessly with Angular reactive forms and template-driven forms
- **Multiple Element Support**: Compatible with `input`, `textarea`, and form control elements

### Advanced Capabilities
- **Custom Length Calculation**: Configurable length calculation function for specialized counting logic
- **Paste Handling**: Intelligent paste event handling that respects character limits
- **Dynamic Configuration**: Runtime updates to max length and visibility settings
- **Error State Management**: Visual feedback when character limit is exceeded
- **Event Emission**: Notifies when character limit is reached or exceeded

## Behavior

### Character Counting
- Updates counter in real-time as user types
- Shows remaining characters (e.g., "25" when 25 characters remaining)
- Displays "0" when limit is reached or exceeded

### Visual Feedback
- Adds CSS class `eui-input-maxlength--invalid` when limit exceeded
- Wraps input in `eui-input-maxlength-wrapper` container
- Counter element has class `eui-input-maxlength`

### Input Restriction
- Automatically truncates input when limit exceeded
- Handles paste operations intelligently
- Works with both direct input and programmatic value changes

### Form Integration
- Respects form control `updateOn` strategy
- Subscribes to form control value changes
- Maintains form validation state

## Error Handling

- Throws error if `euiMaxlength` is set to negative value
- Gracefully handles `null` and `undefined` values
- Safely manages DOM manipulation and cleanup

## CSS Classes

| Class | Applied To | Purpose |
|-------|------------|---------|
| `eui-input-maxlength-wrapper` | Container div | Wraps input and counter |
| `eui-input-maxlength` | Counter span | Styles the character counter |
| `eui-input-maxlength--invalid` | Counter span | Applied when limit exceeded |