# 🎯 CheckboxGroupedComponent

Componente de checkboxes organizados por grupos colapsáveis/expansíveis, seguindo os padrões do framework PraFrota.

## ✨ Funcionalidades

- ✅ **Grupos colapsáveis** com ícones personalizáveis
- ✅ **ControlValueAccessor** - Integração nativa com Angular Forms
- ✅ **Sistema de temas** - Suporte automático tema claro/escuro
- ✅ **Responsivo** - Layout adaptável para mobile
- ✅ **Acessível** - Conformidade WCAG 2.1
- ✅ **Animações suaves** - Transições fluidas
- ✅ **Hide Label** - Ocultar título do campo quando necessário

## 🎨 Estrutura de Dados

### Interfaces

```typescript
interface CheckboxGroupItem {
  id: string | number;
  name: string;
  value: boolean;
}

interface CheckboxGroup {
  id: string;
  label: string;
  icon?: string;
  expanded?: boolean;
  items: CheckboxGroupItem[];
}
```

### Valor de Retorno

```typescript
// Estrutura do valor emitido pelo componente
{
  security: {
    1: true,   // Airbag selecionado
    2: false,  // Freios ABS não selecionado
    3: true    // Alarme antifurto selecionado
  },
  comfort: {
    51: true,  // Ar-condicionado selecionado
    52: false  // Direção elétrica não selecionado
  }
}
```

## 🚀 Uso no TabFormConfig

```typescript
{
  key: 'options',
  label: 'Acessórios do Veículo',
  type: 'checkbox-grouped',
  hideLabel: true, // 🎯 NOVO: Oculta o label do campo
  groups: [
    {
      id: 'security',
      label: 'Segurança',
      icon: 'fa-shield-alt',
      expanded: true, // Opcional, padrão é true
      items: [
        { id: 1, name: 'Airbag', value: false },
        { id: 2, name: 'Freios ABS', value: false },
        { id: 3, name: 'Alarme antifurto', value: false }
      ]
    },
    {
      id: 'comfort',
      label: 'Conforto',
      icon: 'fa-couch',
      expanded: false, // Grupo inicialmente colapsado
      items: [
        { id: 51, name: 'Ar-condicionado', value: false },
        { id: 52, name: 'Direção elétrica', value: false }
      ]
    }
  ]
}
```

## 🎨 Propriedades CSS Personalizáveis

O componente usa as variáveis CSS do sistema PraFrota:

```scss
// Cores principais
--idt-primary-color       // Cor dos ícones e checkboxes
--surface                 // Fundo dos grupos
--surface-variant         // Fundo dos cabeçalhos
--text-primary           // Texto principal
--text-secondary         // Texto secundário
--divider                // Bordas

// Estados
--hover-bg               // Fundo no hover
--surface-variant-subtle // Fundo sutil no hover dos itens
```

## 📱 Responsividade

- **Desktop**: Grid de 3-4 colunas por grupo
- **Tablet**: Grid de 2 colunas
- **Mobile**: Uma coluna

## ♿ Acessibilidade

- **Contraste alto**: Suporte para `prefers-contrast: high`
- **Movimento reduzido**: Suporte para `prefers-reduced-motion: reduce`
- **Focus management**: Outline com cores do sistema
- **Screen readers**: Estrutura semântica adequada

## 🔧 Integração com Backend

O valor pode ser enviado diretamente para o backend ou processado:

```typescript
// Processamento do valor para envio
const processSelectedOptions = (formValue: any) => {
  const selected = [];
  
  Object.keys(formValue.options || {}).forEach(groupId => {
    const group = formValue.options[groupId];
    Object.keys(group).forEach(itemId => {
      if (group[itemId]) {
        selected.push(parseInt(itemId));
      }
    });
  });
  
  return selected; // [1, 3, 51] - IDs dos itens selecionados
};
```

## 🎯 Exemplo Completo

Veja a implementação completa no `VehiclesComponent` em:
`projects/idt_app/src/app/domain/vehicles/vehicles.component.ts`

## 🎛️ Propriedades Especiais

### **hideLabel** (Opcional)
```typescript
{
  key: 'options',
  label: 'Acessórios', // Mantém o label para referência
  type: 'checkbox-grouped',
  hideLabel: true, // ✨ Oculta o label visualmente
  groups: [...]
}
```

**Quando usar:**
- ✅ Quando o título da sub-aba já é suficiente
- ✅ Para layouts mais limpos
- ✅ Quando os grupos são auto-explicativos

**Resultado:**
- 🔸 **Com hideLabel: false** → "Acessórios" + Grupos
- 🔹 **Com hideLabel: true** → Apenas Grupos

## 🚀 Extensões Futuras

- [ ] **Busca/filtro** dentro dos grupos
- [ ] **Seleção em massa** por grupo
- [ ] **Drag & drop** para reordenar itens
- [ ] **Grupos aninhados** (sub-grupos)
- [ ] **Estados customizados** (indeterminado, loading) 