# CollapseLink

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

Componente de link de expansão/recolhimento com animação suave. Exibe um botão que alterna entre recolhido e expandido, controlando a visibilidade do conteúdo projetado via `ng-content`. Suporta labels personalizados para cada estado e controle programático.

## Quando usar

- Seções de conteúdo extenso que podem ser ocultadas por padrão (ex.: descrição longa, detalhes adicionais)
- FAQ com respostas que expandem ao clicar
- Filtros avançados que ficam ocultos até o usuário solicitar
- Formulários com campos opcionais agrupados e recolhíveis

## Quando não usar

- Para painéis com cabeçalho independente e múltiplos itens — use `Accordion`
- Para ocultar/exibir conteúdo sem animação ou sem um botão de toggle visível
- Quando o conteúdo nunca deve ser recolhido

## Instalação

```typescript
import { CollapseLinkModule } from '@seniorsistemas/angular-components/collapse-link';

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

## Uso básico

```html
<s-collapse-link>
  <p>Conteúdo que será expandido ou recolhido ao clicar no link.</p>
</s-collapse-link>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `buttonId` | `string` | `s-collapse-button-{n}` | não | ID do botão de toggle (gerado automaticamente se omitido) |
| `expandedLabel` | `string` | `'Mostrar menos'` | não | Texto exibido quando o conteúdo está expandido |
| `collapsedLabel` | `string` | `'Mostrar mais'` | não | Texto exibido quando o conteúdo está recolhido |
| `disabled` | `boolean` | `false` | não | Desabilita o botão impedindo a alternância de estado |
| `collapse` | `boolean` | `true` | não | Estado atual — `true` = recolhido, `false` = expandido |

## Exemplos

### Padrão (recolhido inicialmente)

```html
<s-collapse-link>
  <p>Este conteúdo fica oculto até o usuário clicar em "Mostrar mais".</p>
  <p>Pode conter qualquer conteúdo HTML projetado via ng-content.</p>
</s-collapse-link>
```

### Iniciando expandido

```html
<s-collapse-link [collapse]="false">
  <p>Este conteúdo já aparece visível ao carregar a página.</p>
</s-collapse-link>
```

### Com labels personalizados

```html
<s-collapse-link
  collapsedLabel="Ver detalhes completos"
  expandedLabel="Ocultar detalhes">
  <p>Detalhes adicionais do produto...</p>
</s-collapse-link>
```

### Desabilitado

```html
<s-collapse-link [disabled]="true" [collapse]="false">
  <p>Conteúdo visível, mas o botão não permite recolher.</p>
</s-collapse-link>
```

### Controle programático

```html
<button (click)="recolhido = !recolhido">Alternar externamente</button>

<s-collapse-link [collapse]="recolhido">
  <p>Conteúdo controlado pelo componente pai.</p>
</s-collapse-link>
```

```typescript
recolhido = true;
```

### Em formulário com campos opcionais

```html
<form [formGroup]="form">
  <s-collapse-link collapsedLabel="Mostrar campos opcionais" expandedLabel="Ocultar campos opcionais">
    <div formGroupName="opcionais">
      <label for="apelido">Apelido</label>
      <input id="apelido" formControlName="apelido" />

      <label for="site">Site pessoal</label>
      <input id="site" formControlName="site" />
    </div>
  </s-collapse-link>
</form>
```

## Acessibilidade

- O botão de toggle possui `aria-expanded` refletindo o estado atual (`true` quando expandido)
- O botão recebe `aria-controls` apontando para a região do conteúdo projetado
- Totalmente acessível por teclado: **Tab** para focar o botão, **Enter** ou **Space** para alternar
- Quando `disabled`, o botão recebe o atributo `disabled` nativo, impedindo interação por teclado e mouse
- A animação de 400ms usa `cubic-bezier` para transição suave sem comprometer a acessibilidade

## Componentes relacionados

- [`Accordion`](../accordion/README.md) — quando há múltiplos painéis com cabeçalhos independentes e suporte a abertura múltipla ou exclusiva