# 💰 Currency Input Component

Componente standalone para entrada de valores monetários com formatação automática e validação integrada ao Angular Reactive Forms.

## 🎯 Características

- ✅ **Formatação automática** em tempo real (R$, USD, EUR, etc.)
- ✅ **Máscara inteligente** que facilita a digitação
- ✅ **Validação integrada** com min/max values
- ✅ **Suporte multi-moeda** (BRL, USD, EUR, GBP)
- ✅ **Reactive Forms** compatível com ControlValueAccessor
- ✅ **Estados visuais** (focus, disabled, readonly, error)
- ✅ **Responsivo** e acessível
- ✅ **TypeScript** com tipagem forte

## 📦 Instalação

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

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

## 🚀 Uso Básico

### Exemplo Simples

```html
<app-currency-input
  [field]="{
    key: 'valor',
    label: 'Valor',
    required: true
  }"
  formControlName="valor">
</app-currency-input>
```

### Exemplo Avançado

```html
<app-currency-input
  [field]="{
    key: 'preco',
    label: 'Preço do Produto',
    placeholder: 'Informe o preço',
    required: true,
    min: 0.01,
    max: 999999.99,
    currency: 'BRL',
    locale: 'pt-BR'
  }"
  formControlName="preco">
</app-currency-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 |
| `min` | `number` | ❌ | `0.01` | Valor mínimo permitido |
| `max` | `number` | ❌ | `999999.99` | Valor máximo permitido |
| `required` | `boolean` | ❌ | `false` | Campo obrigatório |
| `disabled` | `boolean` | ❌ | `false` | Campo desabilitado |
| `readOnly` | `boolean` | ❌ | `false` | Campo somente leitura |
| `currency` | `string` | ❌ | `'BRL'` | Código da moeda |
| `locale` | `string` | ❌ | `'pt-BR'` | Locale para formatação |

## 💱 Moedas Suportadas

| Código | Nome | Símbolo | Locale |
|--------|------|---------|--------|
| `BRL` | Real Brasileiro | R$ | pt-BR |
| `USD` | Dólar Americano | $ | en-US |
| `EUR` | Euro | € | de-DE |
| `GBP` | Libra Esterlina | £ | en-GB |

## 📝 Validação com Reactive Forms

```typescript
// No componente TypeScript
this.form = this.fb.group({
  valor: [null, [
    Validators.required,
    Validators.min(0.01),
    Validators.max(999999.99)
  ]],
  preco: [1500.75], // Valor inicial
  total: [{ value: 0, disabled: true }] // Campo calculado
});
```

## 🎨 Estados Visuais

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

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

### Estado Readonly
```html
<app-currency-input [field]="{ key: 'readonly', label: 'Total', readOnly: true }">
```

### Estado Desabilitado
```html
<app-currency-input [field]="{ key: 'disabled', label: 'Valor', disabled: true }">
```

## 🔧 Métodos Públicos

```typescript
// Obter valor formatado para exibição
getFormattedValue(): string

// Obter valor numérico para cálculos
getNumericValue(): number

// Formatar valor customizado
formatCurrency(value: number): string
```

## 💡 Exemplos Práticos

### 1. Campo de Preço com Validação

```typescript
// Component
this.produtoForm = this.fb.group({
  preco: [null, [
    Validators.required,
    Validators.min(0.01),
    Validators.max(99999.99)
  ]]
});
```

```html
<!-- Template -->
<app-currency-input
  [field]="{
    key: 'preco',
    label: 'Preço do Produto',
    required: true,
    min: 0.01,
    max: 99999.99
  }"
  formControlName="preco">
</app-currency-input>
```

### 2. Campo de Total Calculado

```typescript
// Component
ngOnInit() {
  // Calcular total automaticamente
  this.form.get('quantidade')?.valueChanges.subscribe(() => this.calcularTotal());
  this.form.get('preco')?.valueChanges.subscribe(() => this.calcularTotal());
}

private calcularTotal(): void {
  const quantidade = this.form.get('quantidade')?.value || 0;
  const preco = this.form.get('preco')?.value || 0;
  const total = quantidade * preco;
  
  this.form.get('total')?.setValue(total, { emitEvent: false });
}
```

```html
<!-- Campo readonly para exibir total -->
<app-currency-input
  [field]="{
    key: 'total',
    label: 'Total',
    readOnly: true
  }"
  formControlName="total">
</app-currency-input>
```

### 3. Múltiplas Moedas

```html
<!-- Real Brasileiro -->
<app-currency-input
  [field]="{
    key: 'valorBrl',
    label: 'Valor em Reais',
    currency: 'BRL',
    locale: 'pt-BR'
  }"
  formControlName="valorBrl">
</app-currency-input>

<!-- Dólar Americano -->
<app-currency-input
  [field]="{
    key: 'valorUsd',
    label: 'Valor em Dólares',
    currency: 'USD',
    locale: 'en-US'
  }"
  formControlName="valorUsd">
</app-currency-input>
```

## 🎭 Comportamento da Interface

### Durante a Digitação (onFocus)
- Remove formatação de moeda
- Mostra apenas números e vírgula/ponto
- Facilita a edição do valor

### Após a Digitação (onBlur)
- Aplica formatação completa de moeda
- Exibe símbolo da moeda (R$, $, €, £)
- Formata com separadores de milhares

### Exemplo Visual
```
onFocus:  "1500,75"
onBlur:   "R$ 1.500,75"
```

## 🔍 Debugging

Para debugar o componente, use o console do navegador:

```typescript
// Ver valor interno (em centavos)
console.log('Valor interno:', component.internalValue);

// Ver valor formatado
console.log('Valor formatado:', component.getFormattedValue());

// Ver valor numérico
console.log('Valor numérico:', component.getNumericValue());
```

## 🐛 Troubleshooting

### Problema: Valor não está sendo formatado
**Solução:** Verifique se o locale e currency estão corretos.

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

### Problema: Valor está sendo perdido
**Solução:** Verifique se o FormControl está configurado corretamente no FormGroup.

## 📚 Arquivos do Componente

```
currency-input/
├── currency-input.component.ts      # Lógica principal
├── currency-input.component.html    # Template
├── currency-input.component.scss    # Estilos
├── currency-input.example.ts        # Exemplos de uso
├── index.ts                         # Exportações
└── README.md                        # Esta documentação
```

## 🚀 Roadmap

- [ ] Suporte a mais moedas
- [ ] Validação personalizada
- [ ] Temas customizáveis
- [ ] Suporte a criptomoedas
- [ ] Internacionalização completa

---

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