# Accordion

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de acordeão para organizar conteúdo em painéis expansíveis e colapsáveis. Suporta modo de painel único ou múltiplos painéis abertos simultaneamente.

## Quando usar

- Organizar conteúdo relacionado em seções para economizar espaço vertical
- Guiar o usuário por etapas sequenciais em um fluxo
- Comparar informações entre seções quando usado no modo múltiplo
- Exibir configurações agrupadas por categoria

## Quando não usar

- Quando todo o conteúdo precisa estar sempre visível — use seções simples com separadores
- Para navegação entre páginas — prefira abas (`Tab`) ou roteamento Angular
- Quando há apenas uma seção expansível — use `CollapseLink` em vez disso

## Instalação

```typescript
import { AccordionModule } from '@seniorsistemas/angular-components/accordion';

@NgModule({
  imports: [AccordionModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-accordion>
  <s-accordion-panel header="Seção 1">Conteúdo 1</s-accordion-panel>
  <s-accordion-panel header="Seção 2">Conteúdo 2</s-accordion-panel>
</s-accordion>
```

## API

### s-accordion — Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `multiple` | `boolean` | `false` | não | Permite múltiplos painéis abertos ao mesmo tempo |
| `activeIndex` | `number \| number[]` | `undefined` | não | Índice(s) do(s) painel(is) que devem iniciar abertos |

### s-accordion-panel — Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `header` | `string` | — | **sim** | Título exibido no cabeçalho do painel |
| `disabled` | `boolean` | `false` | não | Impede abertura e fechamento do painel |
| `buttons` | `AccordionButtonSettings[]` | `undefined` | não | Botões de ação exibidos no cabeçalho |
| `switchControl` | `UntypedFormControl` | `undefined` | não | FormControl vinculado a um switch no cabeçalho |
| `validationMessage` | `string` | `undefined` | não | Mensagem de validação exibida abaixo do cabeçalho |
| `validationMessageIcon` | `string` | `'fas fa-exclamation-circle'` | não | Classe do ícone da mensagem de validação |
| `validationMessageIconColor` | `ValidationMessageIconColor` | `'Red'` | não | Cor do ícone da mensagem de validação |
| `cache` | `boolean` | `false` | não | Mantém o conteúdo no DOM quando o painel é fechado |

### s-accordion-panel — Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `panelOpened` | `EventEmitter<void>` | Emitido quando o painel é aberto |
| `panelClosed` | `EventEmitter<void>` | Emitido quando o painel é fechado |

### Tipos

```typescript
interface AccordionButtonSettings {
  icon: string;
  onClick: VoidFunction;
}

type ValidationMessageIconColor = 'Red' | 'Orange' | 'Yellow' | 'Green' | 'Blue';
```

## Exemplos

### Modo padrão (painel único)

```html
<s-accordion [multiple]="false" [activeIndex]="0">
  <s-accordion-panel header="Informações Pessoais">
    <div class="p-4">
      <p>Nome completo, data de nascimento, CPF e outros dados pessoais.</p>
    </div>
  </s-accordion-panel>
  <s-accordion-panel header="Endereço">
    <div class="p-4">
      <p>Rua, número, complemento, cidade, estado e CEP.</p>
    </div>
  </s-accordion-panel>
</s-accordion>
```

### Modo múltiplo

```html
<s-accordion [multiple]="true" [activeIndex]="[0, 1]">
  <s-accordion-panel header="Configurações Gerais">
    <div class="p-4">Idioma, tema e notificações.</div>
  </s-accordion-panel>
  <s-accordion-panel header="Configurações de Privacidade">
    <div class="p-4">Visibilidade do perfil e compartilhamento.</div>
  </s-accordion-panel>
</s-accordion>
```

### Com botões de ação no cabeçalho

```html
<s-accordion>
  <s-accordion-panel header="Projeto Alpha" [buttons]="buttons">
    <div class="p-4">Descrição e detalhes do Projeto Alpha.</div>
  </s-accordion-panel>
</s-accordion>
```

```typescript
buttons = [
  { icon: 'fas fa-edit', onClick: () => this.editar() },
  { icon: 'fas fa-trash', onClick: () => this.excluir() },
];
```

### Com switch e mensagem de validação

```html
<s-accordion>
  <s-accordion-panel
    header="Notificações por E-mail"
    [switchControl]="switchControl"
    validationMessage="Preencha todos os campos obrigatórios"
    validationMessageIcon="fas fa-exclamation-circle"
    validationMessageIconColor="Red">
    <div class="p-4">Receba atualizações por e-mail.</div>
  </s-accordion-panel>
</s-accordion>
```

### Com painel desabilitado

```html
<s-accordion>
  <s-accordion-panel header="Etapa 1 - Concluída">
    Conteúdo disponível.
  </s-accordion-panel>
  <s-accordion-panel header="Etapa 2 - Bloqueada" [disabled]="true">
    Disponível após concluir a etapa 1.
  </s-accordion-panel>
</s-accordion>
```

## Acessibilidade

- Os cabeçalhos dos painéis são renderizados como `<button>`, sendo acessíveis via teclado
- Use **Tab** para navegar entre os cabeçalhos dos painéis
- Use **Enter** ou **Space** para abrir e fechar painéis
- O estado aberto/fechado é comunicado via `aria-expanded`

## Componentes relacionados

- [`CollapseLink`](../collapse-link/README.md) — quando há apenas uma seção expansível simples, sem cabeçalho estruturado
