# 🎯 MultiSelectComponent

Um componente multi-select customizado com design moderno, similar ao Material Design, que permite seleção múltipla de opções com uma interface intuitiva.

## ✨ Características

- **Design Moderno**: Interface similar ao Material Design
- **Seleção Múltipla**: Permite selecionar várias opções
- **Controle Reativo**: Implementa `ControlValueAccessor` para reactive forms
- **Responsivo**: Adapta-se a mobile com modal bottom-sheet
- **Acessibilidade**: Suporte completo a navegação por teclado
- **Customizável**: Placeholder, label, limite de seleções, etc.

## 🚀 Uso Básico

### No Formulário Reativo
```typescript
// Component
export class MyComponent {
  form = this.fb.group({
    categories: [['A', 'B']] // Valor inicial como array
  });

  options = [
    { value: 'A', label: 'Categoria A' },
    { value: 'B', label: 'Categoria B' },
    { value: 'C', label: 'Categoria C' }
  ];
}
```

```html
<!-- Template -->
<app-multi-select
  [formControl]="form.get('categories')"
  [options]="options"
  label="Selecione as categorias"
  placeholder="Escolha uma ou mais opções..."
  [maxSelections]="3"
  (selectionChange)="onSelectionChange($event)">
</app-multi-select>
```

### No Generic Tab Form
```typescript
{
  key: 'driver_license_category',
  label: 'Categorias da CNH',
  type: 'multi-select',
  required: false,
  placeholder: 'Selecione as categorias da CNH...',
  max: 5, // Limite máximo de seleções
  options: [
    { value: 'A', label: 'A - Motocicletas' },
    { value: 'B', label: 'B - Carros' },
    { value: 'C', label: 'C - Caminhões' }
  ]
}
```

## 📝 Props/Inputs

| Propriedade | Tipo | Padrão | Descrição |
|-------------|------|--------|-----------|
| `options` | `MultiSelectOption[]` | `[]` | Array de opções disponíveis |
| `placeholder` | `string` | `"Selecione..."` | Texto exibido quando nada está selecionado |
| `label` | `string` | `""` | Label do campo |
| `disabled` | `boolean` | `false` | Se o campo está desabilitado |
| `required` | `boolean` | `false` | Se o campo é obrigatório |
| `maxSelections` | `number` | `undefined` | Número máximo de seleções |

## 🎪 Eventos/Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `selectionChange` | `any[]` | Emitido quando a seleção muda |

## 🏗️ Interface MultiSelectOption

```typescript
interface MultiSelectOption {
  value: any;        // Valor da opção
  label: string;     // Texto exibido
  disabled?: boolean; // Se a opção está desabilitada
}
```

## 🎨 Features da UI

### Desktop
- **Dropdown elegante**: Posicionamento inteligente
- **Hover states**: Feedback visual em todos os elementos
- **Ações rápidas**: Botões "Selecionar Todos" e "Limpar"
- **Contador**: Mostra quantos itens estão selecionados

### Mobile
- **Bottom Sheet**: Modal que sobe da parte inferior
- **Touch friendly**: Elementos maiores para toque
- **Backdrop**: Fundo escuro para foco

### Recursos Avançados
- **Busca**: Filtragem de opções (futuro)
- **Grupos**: Agrupamento de opções (futuro)
- **Async loading**: Carregamento dinâmico (futuro)

## 🎯 Exemplo Completo (Drivers)

O componente está sendo usado no formulário de motoristas para seleção de categorias de CNH:

```typescript
// drivers.component.ts
{
  key: 'driver_license_category',
  label: 'Categorias da CNH',
  type: 'multi-select',
  required: false,
  placeholder: 'Selecione as categorias da CNH...',
  options: [
    { value: 'A', label: 'A - Motocicletas' },
    { value: 'B', label: 'B - Carros' },
    { value: 'C', label: 'C - Caminhões' },
    { value: 'D', label: 'D - Ônibus' },
    { value: 'E', label: 'E - Carretas' }
  ]
}
```

### Tratamento de Dados
- **Input**: Recebe array de strings da API: `["A", "B"]`
- **Output**: Envia array de strings para a API: `["A", "B"]`
- **No Form**: Trabalha diretamente com array de strings

## 🔧 Customização

O componente utiliza CSS custom properties para fácil customização:

```scss
app-multi-select {
  --primary-color: #3b82f6;
  --border-radius: 0.75rem;
  --font-family: 'Inter', sans-serif;
}
```

## 📱 Responsividade

- **Desktop**: Dropdown normal com posicionamento inteligente
- **Tablet**: Dropdown adaptado com elementos maiores
- **Mobile**: Bottom sheet modal para melhor UX

## ♿ Acessibilidade

- Navegação completa por teclado
- ARIA labels apropriados
- Suporte a screen readers
- Estados de foco visíveis
- Contraste adequado

---

**Criado para o projeto PraFrota** 🚛 