# Badge

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

Componente para exibir rótulos visuais compactos, tags, status, categorias e contadores. Suporta múltiplas cores, ícones e interatividade.

## Quando usar

- Indicar o status de um registro (ativo, inativo, pendente, erro)
- Exibir tags ou categorias associadas a um item
- Mostrar contadores ou indicadores numéricos compactos
- Criar filtros clicáveis em listas e tabelas

## Quando não usar

- Para notificações de contador sobrepostas a outros elementos — use o `badge` embutido no `Button`
- Para botões de ação — mesmo que visual seja semelhante, use `Button` para garantir acessibilidade
- Para exibir textos longos — o badge é destinado a rótulos curtos; use outro componente para descrições

## Instalação

```typescript
import { BadgeModule } from '@seniorsistemas/angular-components/badge';

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

## Uso básico

```html
<s-badge color="blue" type="pill" text="Ativo" />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `text` | `string` | `undefined` | não | Texto principal exibido dentro do badge |
| `title` | `string` | `undefined` | não | Rótulo exibido antes do texto (com dois pontos) |
| `type` | `BadgeTypes` | `'pill'` | não | Estilo visual: `'pill'` (arredondado) ou `'chip'` (retangular) |
| `color` | `BadgeColors` | `'blue'` | não | Cor do badge |
| `iconClass` | `string` | `undefined` | não | Classe do ícone exibido no badge (ex.: `'fa fa-check'`) |
| `iconPosition` | `'left' \| 'right'` | `'left'` | não | Posição do ícone em relação ao texto |
| `selectable` | `boolean` | `false` | não | Habilita modo clicável — emite `selected` ao clicar |
| `enableTruncateText` | `boolean` | `false` | não | Trunca texto longo com reticências e exibe tooltip |
| `infoSign` | `{ text: string; displayTime?: number }` | `undefined` | não | Ícone de informação com tooltip ao lado do badge |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `selected` | `EventEmitter<string>` | Emitido ao clicar no badge, enviando o valor de `text` |

### Tipos

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

type BadgeTypes = 'pill' | 'chip';
```

## Exemplos

### Cores disponíveis

```html
<s-badge text="Sucesso" color="green" iconClass="fa fa-check-circle"></s-badge>
<s-badge text="Erro" color="red" iconClass="fa fa-times"></s-badge>
<s-badge text="Atenção" color="orange" iconClass="fa fa-exclamation-triangle"></s-badge>
<s-badge text="Pendente" color="yellow" iconClass="fa fa-clock"></s-badge>
<s-badge text="Informação" color="blue" iconClass="fa fa-info-circle"></s-badge>
<s-badge text="Inativo" color="gray"></s-badge>
```

### Com título (par rótulo:valor)

```html
<s-badge title="Status" text="Ativo" color="green"></s-badge>
<s-badge title="Prioridade" text="Alta" color="red"></s-badge>
```

### Badge clicável (filtro)

```html
<s-badge
  text="Angular"
  color="blue"
  [selectable]="true"
  (selected)="filtrarPorTag($event)">
</s-badge>
```

### Texto truncado com tooltip

```html
<s-badge
  text="Este é um texto muito longo que será truncado automaticamente"
  color="blue"
  [enableTruncateText]="true">
</s-badge>
```

### Com ícone de informação

```html
<s-badge
  text="Premium"
  color="blue"
  [infoSign]="{ text: 'Plano com acesso completo a todos os recursos', displayTime: 3000 }">
</s-badge>
```

## Acessibilidade

- Quando `selectable` está ativo, o elemento recebe foco e emite evento ao clicar
- Use `title` para fornecer contexto semântico ao rótulo (ex.: "Status: Ativo")
- Quando `enableTruncateText` está ativo, o tooltip exibe o texto completo para leitores de tela

## Componentes relacionados

- [`Button`](../button/README.md) — quando a ação clicável precisa ser claramente comunicada como botão