# InfoSign

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

Diretiva estrutural que exibe um ícone de informação (ⓘ) ao lado do elemento hospedeiro. Ao interagir com o ícone, um tooltip com a mensagem configurada é exibido temporariamente.

## Quando usar

- Labels de campos de formulário com regras de preenchimento específicas (CPF, CNPJ, CEP)
- Títulos de seções que necessitam de explicação adicional
- Qualquer elemento de texto que precise de contexto sem sobrecarregar o layout

## Quando não usar

- Quando a informação é crítica e deve estar sempre visível — use texto de ajuda abaixo do campo
- Para ações com conteúdo rico (listas, links, templates) — prefira [`HelpPopover`](../help-popover/README.md)

## Instalação

```typescript
import { InfoSignModule } from '@seniorsistemas/angular-components/info-sign';

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

## Uso básico

Como diretiva estrutural, substitui o elemento hospedeiro por um wrapper com o ícone ⓘ ao lado:

```html
<label *sInfoSign="'Informe o CPF sem pontos e traços'">CPF</label>
```

## API

### Inputs

| Propriedade | Sintaxe no template | Tipo | Padrão | Obrigatório | Descrição |
|-------------|---------------------|------|--------|:-----------:|-----------|
| `sInfoSign` | `*sInfoSign="'mensagem'"` | `string` | — | Sim | Mensagem exibida no tooltip. Aceita HTML. |
| `sInfoSignDisplayTime` | `; displayTime: 5000` | `number` | `5000` | Não | Tempo em ms que o tooltip permanece visível após ser exibido. |
| `sInfoSignFocusedInputRef` | `; focusedInputRef: ref` | `HTMLInputElement \| HTMLElement \| null` | `null` | Não | Referência a um input. O tooltip aparece ao focar o input quando fornecido. |
| `sInfoSignUseFocusedInputRef` | `; useFocusedInputRef: true` | `boolean` | `true` | Não | Quando `true`, usa `focusedInputRef` para calcular o posicionamento do ícone. |

## Exemplos

### Em um label de formulário

```html
<div style="display: flex; flex-direction: column; gap: 4px;">
    <label *sInfoSign="'Informe o CPF sem pontos e traços. Apenas números.'">
        CPF
    </label>
    <input type="text" placeholder="000.000.000-00" />
</div>
```

### Com tempo de exibição customizado

```html
<span *sInfoSign="'Esta mensagem some em 2 segundos.'; displayTime: 2000">
    Passe o mouse no ícone
</span>
```

### Com conteúdo HTML no tooltip

```html
<label *sInfoSign="'<strong>Requisitos:</strong><br>• Mínimo 8 caracteres<br>• Letras e números'; displayTime: 8000">
    Senha
</label>
```

### Com referência a um input (tooltip ao focar)

```html
<label *sInfoSign="'Dica do campo'; focusedInputRef: meuInput">
    Campo com foco
</label>
<input #meuInput type="text" />
```

### Em múltiplos campos de formulário

```html
<div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
        <label *sInfoSign="'Informe o CPF sem pontos e traços.'">CPF</label>
        <input type="text" placeholder="000.000.000-00" />
    </div>
    <div>
        <label *sInfoSign="'Data no formato DD/MM/AAAA.'">Data de nascimento</label>
        <input type="text" placeholder="DD/MM/AAAA" />
    </div>
</div>
```

## Acessibilidade

- É uma diretiva estrutural — o elemento hospedeiro é envolvido por um wrapper com o ícone ao lado
- O tooltip aparece ao passar o mouse sobre o ícone (padrão) ou ao focar o input referenciado
- O tooltip some automaticamente após `displayTime` ms (padrão: 5000ms)
- Aceita HTML no conteúdo do tooltip para mensagens formatadas

## Componentes relacionados

- [`HelpPopover`](../help-popover/README.md) — popover de ajuda com mais opções de conteúdo (header, footer, template)
- [`Tooltip`](../tooltip/README.md) — tooltip standalone aplicado diretamente em qualquer elemento