# 📝 Textarea Input Component

Componente standalone avançado para entrada de texto multilinha com auto-redimensionamento, contador de caracteres e validação integrada ao Angular Reactive Forms.

## 🎯 Características

- ✅ **Auto-redimensionamento** baseado no conteúdo
- ✅ **Contador de caracteres** com barra de progresso visual
- ✅ **Validação integrada** com min/max length
- ✅ **Botão de limpeza** quando há conteúdo
- ✅ **Estados visuais** (focus, disabled, readonly, warning, error)
- ✅ **Dicas contextuais** quando focado
- ✅ **Reactive Forms** compatível com ControlValueAccessor
- ✅ **Responsivo** e acessível
- ✅ **TypeScript** com tipagem forte

## 📦 Instalação

```typescript
// Importar o componente
import { TextareaInputComponent } from '@shared/components/inputs/textarea-input';

// Adicionar aos imports do componente
@Component({
  imports: [TextareaInputComponent, ReactiveFormsModule, CommonModule]
})
```

## 🚀 Uso Básico

### Exemplo Simples

```html
<app-textarea-input
  [field]="{
    key: 'observacoes',
    label: 'Observações',
    required: true
  }"
  formControlName="observacoes">
</app-textarea-input>
```

### Exemplo Avançado

```html
<app-textarea-input
  [field]="{
    key: 'notas',
    label: 'Notas Internas',
    placeholder: 'Adicione suas notas aqui...',
    required: true,
    maxLength: 1000,
    minLength: 10,
    rows: 6,
    autoResize: true,
    showCharCounter: true,
    resizable: true
  }"
  formControlName="notas">
</app-textarea-input>
```

## ⚙️ Propriedades

| Propriedade | Tipo | Obrigatório | Default | Descrição |
|------------|------|-------------|---------|-----------|
| `key` | `string` | ✅ | - | ID único do campo |
| `label` | `string` | ✅ | - | Label do campo |
| `placeholder` | `string` | ❌ | - | Texto de placeholder |
| `required` | `boolean` | ❌ | `false` | Campo obrigatório |
| `disabled` | `boolean` | ❌ | `false` | Campo desabilitado |
| `readOnly` | `boolean` | ❌ | `false` | Campo somente leitura |
| `maxLength` | `number` | ❌ | `1000` | Máximo de caracteres |
| `minLength` | `number` | ❌ | - | Mínimo de caracteres |
| `rows` | `number` | ❌ | `4` | Número de linhas inicial |
| `autoResize` | `boolean` | ❌ | `true` | Auto-redimensionar baseado no conteúdo |
| `showCharCounter` | `boolean` | ❌ | `true` | Mostrar contador de caracteres |
| `resizable` | `boolean` | ❌ | `true` | Permitir redimensionamento manual |

## 📝 Presets Predefinidos

```typescript
import { TEXTAREA_PRESETS } from '@shared/components/inputs/textarea-input';

// Para notas gerais
[field]="{ ...TEXTAREA_PRESETS.NOTES, key: 'notas', label: 'Notas' }"

// Para observações detalhadas
[field]="{ ...TEXTAREA_PRESETS.OBSERVATIONS, key: 'obs', label: 'Observações' }"

// Para comentários breves
[field]="{ ...TEXTAREA_PRESETS.COMMENTS, key: 'comentarios', label: 'Comentários' }"

// Para descrições longas
[field]="{ ...TEXTAREA_PRESETS.DESCRIPTION, key: 'descricao', label: 'Descrição' }"

// Para texto compacto
[field]="{ ...TEXTAREA_PRESETS.COMPACT, key: 'resumo', label: 'Resumo' }"
```

## 📝 Validação com Reactive Forms

```typescript
// No componente TypeScript
this.form = this.fb.group({
  observacoes: ['', [
    Validators.required,
    Validators.maxLength(500),
    Validators.minLength(10)
  ]],
  notas: [''], // Opcional
  comentarios: ['', [Validators.maxLength(200)]]
});
```

## 🎨 Estados Visuais

### Estado Normal
```html
<app-textarea-input [field]="{ key: 'normal', label: 'Texto Normal' }">
```

### Estado Obrigatório
```html
<app-textarea-input [field]="{ key: 'required', label: 'Texto', required: true }">
```

### Estado Readonly
```html
<app-textarea-input [field]="{ key: 'readonly', label: 'Descrição', readOnly: true }">
```

### Estado Compacto
```html
<app-textarea-input [field]="{ key: 'compact', label: 'Comentário', rows: 2, resizable: false }">
```

## 🔧 Métodos Públicos

```typescript
// Limpar conteúdo
clearContent(): void

// Obter texto formatado
getFormattedText(): string

// Verificar se é válido
isValid(): boolean

// Obter mensagem de erro
getErrorMessage(): string

// Contadores
get characterCount(): number
get charactersRemaining(): number
get isNearLimit(): boolean  // 80% do limite
get isOverLimit(): boolean  // Excedeu o limite
```

## 💡 Exemplos Práticos

### 1. Campo de Observações para Veículos

```typescript
// Component
this.vehicleForm = this.fb.group({
  observacoes: ['', [
    Validators.maxLength(500)
  ]]
});
```

```html
<!-- Template -->
<app-textarea-input
  [field]="{
    key: 'observacoes',
    label: 'Observações do Veículo',
    placeholder: 'Descreva o estado geral, problemas identificados, etc.',
    maxLength: 500,
    rows: 4,
    autoResize: true,
    showCharCounter: true
  }"
  formControlName="observacoes">
</app-textarea-input>
```

### 2. Campo de Notas Internas

```typescript
// Component com validação personalizada
noteValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (value && value.length > 0 && value.length < 20) {
    return { tooShort: { minLength: 20, actualLength: value.length } };
  }
  return null;
}

this.form = this.fb.group({
  notasInternas: ['', [this.noteValidator]]
});
```

```html
<!-- Template -->
<app-textarea-input
  [field]="{
    key: 'notasInternas',
    label: 'Notas Internas',
    placeholder: 'Adicione informações relevantes para a equipe...',
    maxLength: 1000,
    minLength: 20,
    rows: 6,
    autoResize: true,
    showCharCounter: true,
    resizable: true
  }"
  formControlName="notasInternas">
</app-textarea-input>
```

### 3. Campo Readonly para Descrições do Sistema

```html
<app-textarea-input
  [field]="{
    key: 'descricaoSistema',
    label: 'Descrição do Sistema',
    readOnly: true,
    rows: 3,
    showCharCounter: false,
    autoResize: false,
    resizable: false
  }"
  formControlName="descricaoSistema">
</app-textarea-input>
```

### 4. Campo de Comentários com Limite Baixo

```html
<app-textarea-input
  [field]="{
    key: 'comentarioRapido',
    label: 'Comentário Rápido',
    placeholder: 'Adicione um comentário breve...',
    maxLength: 150,
    rows: 2,
    autoResize: true,
    showCharCounter: true,
    resizable: false
  }"
  formControlName="comentarioRapido">
</app-textarea-input>
```

## 🎭 Comportamento da Interface

### Durante o Foco
- Exibe dicas contextuais sobre funcionalidades
- Mostra contador de caracteres (se habilitado)
- Aplica auto-redimensionamento (se habilitado)
- Exibe botão de limpeza (se houver conteúdo)

### Durante a Digitação
- Conta caracteres em tempo real
- Aplica validação de comprimento
- Redimensiona automaticamente (se habilitado)
- Indica visualmente quando próximo do limite (80%)
- Indica erro quando excede o limite

### Estados de Validação
- **Normal**: Borda azul
- **Warning** (80% do limite): Contador amarelo
- **Error** (excedeu limite): Borda vermelha, contador vermelho
- **Success**: Borda verde (quando válido após erro)

## 🔍 Debugging

Para debugar o componente:

```typescript
// Ver estado atual
console.log('Valor:', component.value);
console.log('Caracteres:', component.characterCount);
console.log('É válido:', component.isValid());
console.log('Erro:', component.getErrorMessage());
```

## 🐛 Troubleshooting

### Problema: Auto-resize não funciona
**Solução:** Verifique se `autoResize: true` está definido no field config.

### Problema: Contador não aparece
**Solução:** Verifique se `showCharCounter: true` e `maxLength` está definido.

### Problema: Não aceita quebras de linha
**Solução:** O componente suporta quebras de linha nativamente com `\n`.

### Problema: Validação não funciona
**Solução:** Certifique-se de usar Validators do Angular no FormControl.

## 📚 Integração com TabFormConfig

```typescript
// Em qualquer component que estende BaseDomainComponent
getFormConfig(): TabFormConfig {
  return {
    subTabs: [
      {
        id: 'dados',
        label: 'Dados Principais',
        fields: [
          {
            key: 'observacoes',
            label: 'Observações',
            type: 'textarea-input',  // ← USAR ESTE TIPO
            required: true,
            maxLength: 500,
            rows: 4,
            placeholder: 'Digite suas observações...'
          }
        ]
      }
    ]
  };
}
```

## 📁 Arquivos do Componente

```
textarea-input/
├── textarea-input.component.ts      # Lógica principal
├── textarea-input.component.html    # Template
├── textarea-input.component.scss    # Estilos
├── textarea-input.example.ts        # Exemplos práticos
├── index.ts                         # Exportações e presets
└── README.md                        # Esta documentação
```

## 🚀 Roadmap

- [ ] Suporte a markdown preview
- [ ] Auto-complete para tags/menções
- [ ] Modo de escrita focada (distraction-free)
- [ ] Integração com spell checker
- [ ] Templates de texto pré-definidos

## 🎯 Casos de Uso Comuns

### **Gestão de Frota**
- Observações sobre veículos
- Relatórios de viagem
- Notas de manutenção
- Instruções para motoristas

### **Administrativo**
- Comentários em documentos
- Observações em contratos
- Notas de reuniões
- Feedback de processos

### **Técnico**
- Descrições de problemas
- Logs de atividades
- Instruções técnicas
- Relatórios de incidentes

---

**Desenvolvido para o projeto PraFrota** 🚛  
*Seguindo os padrões de componentes standalone do Angular 19+* 