# 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              |
| `badgeConfig`                | `{ text: string; color: BadgeColors }` | `undefined`                   |     não     | Badge exibido no cabeçalho, à direita do título    |
| `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';

type BadgeColors = 'red' | 'orange' | 'yellow' | 'blue' | 'green' | 'gray';
```

## 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 badge no cabeçalho

O `badgeConfig` exibe um `BadgeComponent` à direita do título, útil para indicar contagens, status ou alertas por seção.

```html
<s-accordion>
    <s-accordion-panel
        header="Notificações"
        [badgeConfig]="{ text: '3', color: 'red' }"
    >
        <div class="p-4">Você tem 3 notificações não lidas.</div>
    </s-accordion-panel>
    <s-accordion-panel
        header="Tarefas Atribuídas"
        [badgeConfig]="{ text: 'Novo', color: 'blue' }"
    >
        <div class="p-4">Novas tarefas atribuídas a você.</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