# SplitButton

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

Botão composto com ação principal e dropdown de opções adicionais. Ao clicar no botão principal emite `buttonClicked`; ao clicar no ícone de seta abre ou fecha o dropdown com a lista de `options`.

## Quando usar

- Ação dominante (ex.: Adicionar) com variantes relacionadas (Atualizar, Alterar, Remover)
- Toolbars com uma ação principal e ações secundárias no mesmo botão
- Exportação de dados em múltiplos formatos (PDF, Excel, CSV)

## Quando não usar

- Todas as ações têm igual relevância — prefira múltiplos botões separados
- Há uma única ação — prefira um `Button` simples
- As ações secundárias são navigacionais — prefira `TieredMenu` separado

## Instalação

```typescript
import { SplitButtonModule } from '@seniorsistemas/angular-components/split-button';

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

## Uso básico

```html
<s-split-button
  label="Adicionar"
  iconClass="far fa-plus"
  [options]="opcoes"
  (buttonClicked)="onAdicionar()"
/>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `label` | `string` | — | Sim | Rótulo do botão principal |
| `iconClass` | `string` | — | Sim | Classe Font Awesome do ícone exibido no botão principal |
| `options` | `SplitButtonOption[]` | — | Sim | Lista de opções exibidas no dropdown |
| `type` | `SplitButtonType` | `'primary'` | Não | Estilo visual do botão: `'primary'`, `'secondary'` ou `'default'` |
| `disabled` | `boolean` | `false` | Não | Desabilita o botão principal e o dropdown |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `buttonClicked` | `EventEmitter<void>` | Emitido quando o usuário clica no botão principal (não no dropdown) |

### Tipos

```typescript
interface SplitButtonOption {
  title: string;       // Texto exibido no dropdown
  action: () => void;  // Função executada ao clicar na opção
}

type SplitButtonType = 'primary' | 'secondary' | 'default';
```

## Exemplos

### Botão primário com operações CRUD

```html
<s-split-button
  label="Adicionar"
  iconClass="far fa-plus"
  type="primary"
  [options]="opcoesCrud"
  (buttonClicked)="onAdicionar()"
></s-split-button>
```

```typescript
opcoesCrud: SplitButtonOption[] = [
  { title: 'Atualizar', action: () => this.atualizar() },
  { title: 'Alterar', action: () => this.alterar() },
  { title: 'Remover', action: () => this.remover() },
];
```

### Exportação em múltiplos formatos

```html
<s-split-button
  label="Exportar"
  iconClass="fa fa-download"
  type="primary"
  [options]="opcoesExportar"
></s-split-button>
```

```typescript
opcoesExportar: SplitButtonOption[] = [
  { title: 'Exportar PDF', action: () => this.exportarPDF() },
  { title: 'Exportar Excel', action: () => this.exportarExcel() },
  { title: 'Exportar CSV', action: () => this.exportarCSV() },
];
```

### Visão geral dos tipos

```html
<s-split-button label="Adicionar" iconClass="far fa-plus" type="primary" [options]="opcoes"></s-split-button>
<s-split-button label="Alterar" iconClass="far fa-pencil" type="secondary" [options]="opcoes"></s-split-button>
<s-split-button label="Remover" iconClass="far fa-trash" type="default" [options]="opcoes"></s-split-button>
```

## Acessibilidade

- O botão principal é focável via teclado e pode ser acionado com `Enter` ou `Espaço`
- Clicar fora do componente fecha o dropdown automaticamente via `HostListener`
- O estado desabilitado impede interação tanto no botão principal quanto no dropdown e nas opções

## Componentes relacionados

- [`Button`](../button/README.md) — botão de ação individual com suporte a menu via `menuOptions`
- [`TieredMenu`](../tiered-menu/README.md) — menu dropdown com submenus aninhados