# Alert

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

Componente para exibir mensagens de feedback contextual ao usuário, com diferentes níveis de severidade: informação, sucesso, aviso e erro.

## Quando usar

- Confirmar ações realizadas com sucesso (ex.: "Dados salvos com sucesso")
- Alertar o usuário sobre situações que requerem atenção antes de prosseguir
- Reportar erros ou falhas em operações
- Comunicar atualizações ou avisos permanentes do sistema

## Quando não usar

- Para notificações efêmeras que somem automaticamente — use `Toast` em vez disso
- Para estados vazios de listas ou telas — use `Empty State`
- Para mensagens de validação de campos individuais de formulário — use mensagens inline

## Instalação

```typescript
import { AlertComponent } from '@seniorsistemas/angular-components/alert';

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

## Uso básico

```html
<s-alert severity="info" summary="Informação" detail="Esta é uma mensagem informativa." />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `severity` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | não | Nível de severidade — define cor e ícone |
| `summary` | `string` | — | **sim** | Título principal exibido em destaque |
| `detail` | `string` | — | **sim** | Mensagem detalhada exibida abaixo do título |
| `closable` | `boolean` | `true` | não | Exibe botão para fechar o alerta |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `closed` | `EventEmitter<void>` | Emitido quando o usuário fecha o alerta |

## Exemplos

### Tipos de severidade

```html
<s-alert severity="info" summary="Informação" detail="Mensagem informativa ao usuário." [closable]="false"></s-alert>
<s-alert severity="success" summary="Sucesso" detail="Operação realizada com sucesso." [closable]="false"></s-alert>
<s-alert severity="warning" summary="Atenção" detail="Esta ação requer atenção." [closable]="false"></s-alert>
<s-alert severity="error" summary="Erro" detail="Ocorreu um erro ao processar." [closable]="false"></s-alert>
```

### Alerta não fechável (permanente)

```html
<s-alert
  severity="warning"
  summary="Manutenção Programada"
  detail="O sistema entrará em manutenção às 22h. Salve seu trabalho."
  [closable]="false">
</s-alert>
```

### Reagindo ao fechamento

```html
<s-alert
  severity="success"
  summary="Salvo"
  detail="Suas alterações foram salvas."
  (closed)="onAlertClosed()">
</s-alert>
```

## Acessibilidade

- O botão de fechar possui `aria-label` adequado para leitores de tela
- A severidade é comunicada visualmente por cor e ícone; use `summary` e `detail` descritivos para garantir que a informação seja acessível sem depender apenas da cor

## Componentes relacionados

- [`Toast`](../toast/README.md) — notificações efêmeras que aparecem na borda da tela e somem automaticamente