# EmptyState

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

Componente de estado vazio para exibição padronizada de mensagens quando não há conteúdo a ser exibido. Apresenta ícone, título, descrição opcional e até dois botões de ação (primário e secundário), com suporte a menu de múltiplas opções no botão primário.

## Quando usar

- Listagens sem registros onde o usuário deve ser orientado sobre a próxima ação
- Telas de busca sem resultados
- Páginas de erro ou acesso negado onde o usuário deve ser redirecionado

## Quando não usar

- Estados de carregamento — use um skeleton ou spinner
- Mensagens de feedback sobre ações recém executadas — use [`Alert`](../alert/README.md)
- Erros de formulário — use [`ControlErrors`](../control-errors/README.md)

## Instalação

```typescript
import { EmptyStateModule } from '@seniorsistemas/angular-components/empty-state';

@Component({ standalone: true, imports: [EmptyStateModule] })
export class MeuComponent {}
```

## Uso básico

```html
<s-empty-state
  title="Nenhum registro encontrado"
  (primaryAction)="onCreate()"
/>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `title` | `string` | — | Sim | Título principal exibido no estado vazio |
| `iconClass` | `string` | `'fa fa-inbox'` | — | Classe CSS do ícone (ex: `'fa fa-search'`) |
| `description` | `string` | — | — | Texto descritivo exibido abaixo do título |
| `showPrimaryAction` | `boolean` | `true` | — | Controla a visibilidade do botão de ação primária |
| `showSecondaryAction` | `boolean` | `true` | — | Controla a visibilidade do botão de ação secundária |
| `primaryActionLabel` | `string` | — | — | Texto do botão de ação primária |
| `secondaryActionLabel` | `string` | — | — | Texto do botão de ação secundária |
| `primaryModel` | `TieredMenuItemData[]` | `[]` | — | Itens do menu do botão primário. Quando fornecido, transforma o botão em split-button |
| `id` | `string` | `s-empty-state-{n}` | — | Identificador único do componente |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `primaryAction` | `EventEmitter<void>` | Emitido ao clicar no botão primário (quando `primaryModel` está vazio) |
| `secondaryAction` | `EventEmitter<void>` | Emitido ao clicar no botão secundário |

## Exemplos

### Estado vazio simples

```html
<s-empty-state
  title="Nenhum registro encontrado"
  [showPrimaryAction]="false"
  [showSecondaryAction]="false"
></s-empty-state>
```

### Com descrição e ação primária

```html
<s-empty-state
  title="Nenhum registro encontrado"
  description="Clique no botão abaixo para adicionar um novo registro."
  iconClass="fa fa-inbox"
  [showPrimaryAction]="true"
  primaryActionLabel="Adicionar"
  [showSecondaryAction]="false"
  (primaryAction)="onCreate()"
></s-empty-state>
```

### Com ambas as ações

```html
<s-empty-state
  title="Nenhum registro encontrado"
  description="Adicione um novo registro ou cancele para voltar."
  [showPrimaryAction]="true"
  primaryActionLabel="Adicionar"
  [showSecondaryAction]="true"
  secondaryActionLabel="Cancelar"
  (primaryAction)="onCreate()"
  (secondaryAction)="onCancel()"
></s-empty-state>
```

### Com menu de opções no botão primário

```html
<s-empty-state
  title="Nenhum registro encontrado"
  [showPrimaryAction]="true"
  primaryActionLabel="Adicionar"
  [primaryModel]="[
    { label: 'Adicionar manualmente', iconClass: 'fa fa-plus' },
    { label: 'Importar arquivo', iconClass: 'fa fa-upload' }
  ]"
></s-empty-state>
```

### Componente auxiliar para redirecionamento ao portal

```html
<s-empty-state-go-back
  title="Acesso não autorizado"
  description="Você não tem permissão para acessar esta página."
  iconClass="fa fa-exclamation-triangle"
  primaryActionLabel="Voltar ao portal"
></s-empty-state-go-back>
```

## Acessibilidade

- O ícone é puramente decorativo e não possui texto alternativo obrigatório
- Os botões de ação são elementos `<button>` com labels visíveis
- O título deve descrever claramente o estado vazio para leitores de tela

## Componentes relacionados

- [`Button`](../button/README.md) — botões de ação primária e secundária usados internamente