@seniorsistemas/angular-components 19.3.2 → 19.3.3-fix-sds-513-cdb1ad53

package/accordion/README.md

@@ -0,0 +1,166 @@
+# Accordion
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de acordeão para organizar conteúdo em painéis expansíveis e colapsáveis. Suporta modo de painel único ou múltiplos painéis abertos simultaneamente.
+
+## Quando usar
+
+- Organizar conteúdo relacionado em seções para economizar espaço vertical
+- Guiar o usuário por etapas sequenciais em um fluxo
+- Comparar informações entre seções quando usado no modo múltiplo
+- Exibir configurações agrupadas por categoria
+
+## Quando não usar
+
+- Quando todo o conteúdo precisa estar sempre visível — use seções simples com separadores
+- Para navegação entre páginas — prefira abas (`Tab`) ou roteamento Angular
+- Quando há apenas uma seção expansível — use `CollapseLink` em vez disso
+
+## Instalação
+
+```typescript
+import { AccordionModule } from '@seniorsistemas/angular-components/accordion';
+
+@NgModule({
+  imports: [AccordionModule],
+})
+export class MeuModule {}
+```
+
+## Uso básico
+
+```html
+<s-accordion>
+  <s-accordion-panel header="Seção 1">Conteúdo 1</s-accordion-panel>
+  <s-accordion-panel header="Seção 2">Conteúdo 2</s-accordion-panel>
+</s-accordion>
+```
+
+## API
+
+### s-accordion — Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `multiple` | `boolean` | `false` | não | Permite múltiplos painéis abertos ao mesmo tempo |
+| `activeIndex` | `number \| number[]` | `undefined` | não | Índice(s) do(s) painel(is) que devem iniciar abertos |
+
+### s-accordion-panel — Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `header` | `string` | — | **sim** | Título exibido no cabeçalho do painel |
+| `disabled` | `boolean` | `false` | não | Impede abertura e fechamento do painel |
+| `buttons` | `AccordionButtonSettings[]` | `undefined` | não | Botões de ação exibidos no cabeçalho |
+| `switchControl` | `UntypedFormControl` | `undefined` | não | FormControl vinculado a um switch no cabeçalho |
+| `validationMessage` | `string` | `undefined` | não | Mensagem de validação exibida abaixo do cabeçalho |
+| `validationMessageIcon` | `string` | `'fas fa-exclamation-circle'` | não | Classe do ícone da mensagem de validação |
+| `validationMessageIconColor` | `ValidationMessageIconColor` | `'Red'` | não | Cor do ícone da mensagem de validação |
+| `cache` | `boolean` | `false` | não | Mantém o conteúdo no DOM quando o painel é fechado |
+
+### s-accordion-panel — Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `panelOpened` | `EventEmitter<void>` | Emitido quando o painel é aberto |
+| `panelClosed` | `EventEmitter<void>` | Emitido quando o painel é fechado |
+
+### Tipos
+
+```typescript
+interface AccordionButtonSettings {
+  icon: string;
+  onClick: VoidFunction;
+}
+
+type ValidationMessageIconColor = 'Red' | 'Orange' | 'Yellow' | 'Green' | 'Blue';
+```
+
+## Exemplos
+
+### Modo padrão (painel único)
+
+```html
+<s-accordion [multiple]="false" [activeIndex]="0">
+  <s-accordion-panel header="Informações Pessoais">
+    <div class="p-4">
+      <p>Nome completo, data de nascimento, CPF e outros dados pessoais.</p>
+    </div>
+  </s-accordion-panel>
+  <s-accordion-panel header="Endereço">
+    <div class="p-4">
+      <p>Rua, número, complemento, cidade, estado e CEP.</p>
+    </div>
+  </s-accordion-panel>
+</s-accordion>
+```
+
+### Modo múltiplo
+
+```html
+<s-accordion [multiple]="true" [activeIndex]="[0, 1]">
+  <s-accordion-panel header="Configurações Gerais">
+    <div class="p-4">Idioma, tema e notificações.</div>
+  </s-accordion-panel>
+  <s-accordion-panel header="Configurações de Privacidade">
+    <div class="p-4">Visibilidade do perfil e compartilhamento.</div>
+  </s-accordion-panel>
+</s-accordion>
+```
+
+### Com botões de ação no cabeçalho
+
+```html
+<s-accordion>
+  <s-accordion-panel header="Projeto Alpha" [buttons]="buttons">
+    <div class="p-4">Descrição e detalhes do Projeto Alpha.</div>
+  </s-accordion-panel>
+</s-accordion>
+```
+
+```typescript
+buttons = [
+  { icon: 'fas fa-edit', onClick: () => this.editar() },
+  { icon: 'fas fa-trash', onClick: () => this.excluir() },
+];
+```
+
+### Com switch e mensagem de validação
+
+```html
+<s-accordion>
+  <s-accordion-panel
+    header="Notificações por E-mail"
+    [switchControl]="switchControl"
+    validationMessage="Preencha todos os campos obrigatórios"
+    validationMessageIcon="fas fa-exclamation-circle"
+    validationMessageIconColor="Red">
+    <div class="p-4">Receba atualizações por e-mail.</div>
+  </s-accordion-panel>
+</s-accordion>
+```
+
+### Com painel desabilitado
+
+```html
+<s-accordion>
+  <s-accordion-panel header="Etapa 1 - Concluída">
+    Conteúdo disponível.
+  </s-accordion-panel>
+  <s-accordion-panel header="Etapa 2 - Bloqueada" [disabled]="true">
+    Disponível após concluir a etapa 1.
+  </s-accordion-panel>
+</s-accordion>
+```
+
+## Acessibilidade
+
+- Os cabeçalhos dos painéis são renderizados como `<button>`, sendo acessíveis via teclado
+- Use **Tab** para navegar entre os cabeçalhos dos painéis
+- Use **Enter** ou **Space** para abrir e fechar painéis
+- O estado aberto/fechado é comunicado via `aria-expanded`
+
+## Componentes relacionados
+
+- [`CollapseLink`](../collapse-link/README.md) — quando há apenas uma seção expansível simples, sem cabeçalho estruturado

package/alert/README.md

@@ -0,0 +1,92 @@
+# 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

package/autocomplete/README.md

@@ -0,0 +1,162 @@
+# Autocomplete
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de autocompletar com sugestões dinâmicas. Suporta seleção simples e múltipla (chips), carregamento lazy, virtualização de lista e acessibilidade ARIA completa. Implementa `ControlValueAccessor` para integração com Angular Forms.
+
+## Quando usar
+
+- Campos de busca onde o usuário precisa selecionar um valor de uma lista grande
+- Seleção de países, cidades, categorias ou qualquer entidade com muitas opções
+- Campos onde o usuário pode adicionar múltiplos itens (modo múltiplo com chips)
+- Quando a lista é carregada de uma API e não é viável trazê-la completa de uma vez (modo lazy)
+
+## Quando não usar
+
+- Quando há poucas opções fixas e conhecidas — use `Select` em vez disso, que é mais simples e acessível
+- Quando o usuário não precisa digitar para filtrar — use `Dropdown` com lista completa
+- Quando a entrada é livre (qualquer texto) — use `Input` simples
+
+## Instalação
+
+```typescript
+import { AutocompleteComponent } from '@seniorsistemas/angular-components/autocomplete';
+
+@Component({ standalone: true, imports: [AutocompleteComponent] })
+export class MeuComponent {}
+```
+
+## Uso básico
+
+```html
+<s-autocomplete
+  formControlName="pais"
+  [suggestions]="sugestoesFiltradas"
+  suggestionLabel="nome"
+  placeholder="Buscar país..."
+  (completeMethod)="filtrar($event)">
+</s-autocomplete>
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `suggestions` | `T[]` | `[]` | não | Lista estática de sugestões exibidas no dropdown |
+| `placeholder` | `string` | `undefined` | não | Texto de placeholder do campo |
+| `suggestionLabel` | `keyof T` | `undefined` | não | Chave do objeto usada como texto de exibição |
+| `suggestionValue` | `keyof T` | `undefined` | não | Chave do objeto cujo valor é emitido ao formulário |
+| `delay` | `number` | `300` | não | Debounce em ms antes de acionar a busca |
+| `minLengthToSearch` | `number` | `1` | não | Mínimo de caracteres para acionar a busca |
+| `forceSelection` | `boolean` | `false` | não | Exige que o valor seja uma das sugestões |
+| `multiple` | `boolean` | `false` | não | Habilita seleção de múltiplos itens como chips |
+| `dropdown` | `boolean` | `false` | não | Exibe botão de seta para abrir a lista sem digitar |
+| `checkmark` | `boolean` | `false` | não | Exibe ícone de check na opção selecionada |
+| `lazy` | `boolean` | `false` | não | Ativa carregamento assíncrono via output `lazyLoad` |
+| `virtualScroll` | `boolean` | `false` | não | Virtualiza a lista para melhor performance |
+| `virtualScrollItemSize` | `number` | `37` | não | Altura em pixels de cada item no virtual scroll |
+| `readonly` | `boolean` | `false` | não | Torna o campo somente leitura |
+| `invalid` | `boolean` | `false` | não | Exibe estado de erro visual |
+| `emptyMessage` | `string` | `undefined` | não | Mensagem quando nenhuma sugestão é encontrada |
+| `dataKey` | `keyof T` | `undefined` | não | Chave para comparação de identidade entre opções |
+| `inputClass` | `string` | `''` | não | Classe CSS adicional no `<input>` interno |
+| `value` | `T \| null` | `undefined` | não | Valor selecionado (two-way binding, modo simples) |
+| `values` | `T[]` | `[]` | não | Valores selecionados (two-way binding, modo múltiplo) |
+| `disabled` | `boolean` | `false` | não | Estado desabilitado (two-way binding) |
+
+### Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `completeMethod` | `OutputEmitterRef<{ query: string }>` | Emitido ao digitar — use para filtrar sugestões localmente |
+| `lazyLoad` | `OutputEmitterRef<{ query: string; response: (data: T[]) => void }>` | Emitido no modo lazy — chame `response(data)` para fornecer os dados |
+| `selected` | `OutputEmitterRef<T>` | Emitido ao selecionar uma sugestão |
+| `unselected` | `OutputEmitterRef<T>` | Emitido ao remover uma sugestão (modo múltiplo) |
+| `blurred` | `OutputEmitterRef<Event>` | Emitido quando o campo perde foco |
+| `focused` | `OutputEmitterRef<Event>` | Emitido quando o campo recebe foco |
+| `cleared` | `OutputEmitterRef<void>` | Emitido quando o campo é limpo |
+| `keyUp` | `OutputEmitterRef<Event>` | Emitido a cada tecla pressionada |
+
+## Exemplos
+
+### Seleção simples com filtragem local
+
+```html
+<form [formGroup]="form">
+  <s-autocomplete
+    formControlName="pais"
+    [suggestions]="sugestoesFiltradas"
+    suggestionLabel="nome"
+    placeholder="Buscar país..."
+    (completeMethod)="filtrar($event)">
+  </s-autocomplete>
+</form>
+```
+
+```typescript
+filtrar(event: { query: string }) {
+  this.sugestoesFiltradas = this.paises.filter(p =>
+    p.nome.toLowerCase().includes(event.query.toLowerCase())
+  );
+}
+```
+
+### Seleção múltipla (chips)
+
+```html
+<s-autocomplete
+  formControlName="paises"
+  [suggestions]="sugestoesFiltradas"
+  suggestionLabel="nome"
+  dataKey="codigo"
+  [multiple]="true"
+  [checkmark]="true"
+  placeholder="Adicionar países..."
+  (completeMethod)="filtrar($event)">
+</s-autocomplete>
+```
+
+### Lazy loading (dados de API)
+
+```html
+<s-autocomplete
+  formControlName="pais"
+  [suggestions]="sugestoes"
+  suggestionLabel="nome"
+  [lazy]="true"
+  placeholder="Buscar país..."
+  (lazyLoad)="onLazyLoad($event)">
+</s-autocomplete>
+```
+
+```typescript
+onLazyLoad(event: { query: string; response: (data: Pais[]) => void }) {
+  this.apiService.buscar(event.query).subscribe(data => event.response(data));
+}
+```
+
+### Com dropdown (lista sem digitar)
+
+```html
+<s-autocomplete
+  formControlName="pais"
+  [suggestions]="paises"
+  suggestionLabel="nome"
+  [dropdown]="true"
+  placeholder="Selecione um país...">
+</s-autocomplete>
+```
+
+## Acessibilidade
+
+- O elemento host recebe `role="combobox"` com `aria-expanded` e `aria-haspopup="listbox"`
+- Navegação com **Seta para baixo/cima** move o foco entre as sugestões
+- **Enter** ou **Tab** confirma a sugestão em foco
+- **Escape** fecha a lista sem selecionar
+- O dropdown é associado ao input via `aria-owns`
+
+## Componentes relacionados
+
+- [`Chips`](../chips/README.md) — entrada de múltiplos valores em formato de tags sem sugestões de busca

package/badge/README.md

@@ -0,0 +1,126 @@
+# 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

package/bignumber-input/README.md

@@ -0,0 +1,122 @@
+# BignumberInput
+
+![Status](https://img.shields.io/badge/status-deprecated-red)
+
+> **Descontinuado** — Use a diretiva [`sNumericMask`](../numeric-mask/README.md) em novos projetos.
+
+Diretiva de máscara para campos de entrada de números de grande precisão. Permite configurar precisão total, casas decimais, separadores e sinal negativo.
+
+## Quando usar
+
+- Manutenção de formulários legados que já utilizam `sBignumberInput`
+
+## Quando não usar
+
+- Em novos desenvolvimentos — use `sNumericMask` que é a diretiva recomendada e mantida ativamente
+- Quando não há necessidade de controle de precisão total de dígitos — `sNumericMask` com `maxDecimalPlaces` atende a maioria dos casos
+
+## Migração
+
+```html
+<!-- Antes -->
+<input sBignumberInput [precision]="15" [scale]="2" [(ngModel)]="value" />
+
+<!-- Depois -->
+<input sNumericMask [maxDecimalPlaces]="2" [(ngModel)]="value" />
+```
+
+## Instalação (legado)
+
+```typescript
+import { BignumberInputModule } from '@seniorsistemas/angular-components/bignumber-input';
+
+@NgModule({
+  imports: [BignumberInputModule],
+})
+export class MeuModule {}
+```
+
+## Uso básico
+
+```html
+<input sBignumberInput [precision]="15" [scale]="2" [allowNegative]="false" [(ngModel)]="valor" />
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `precision` | `number` | `15` | não | Total de dígitos significativos aceitos (parte inteira + decimal) |
+| `scale` | `number` | `0` | não | **Descontinuado** — use `minDecimalPlaces`/`maxDecimalPlaces`. Casas decimais |
+| `minDecimalPlaces` | `number` | `0` | não | Mínimo de casas decimais exibidas |
+| `maxDecimalPlaces` | `number` | `0` | não | Máximo de casas decimais aceitas |
+| `allowNegative` | `boolean` | `true` | não | Permite entrada de valores negativos |
+| `decimalSeparator` | `string` | locale | não | Separador decimal personalizado |
+| `thousandSeparator` | `string` | locale | não | Separador de milhar (preferir `thousandSeparator`) |
+| `thousandsSeparator` | `string` | `undefined` | não | **Descontinuado** — use `thousandSeparator` |
+| `placeholder` | `string` | `undefined` | não | Texto de placeholder do campo |
+| `alignTo` | `'left' \| 'right'` | `'right'` | não | **Descontinuado** — não tem mais efeito; alinhamento é sempre `right` |
+
+### Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `pasteRejected` | `OutputEmitterRef<string>` | Emitido quando uma colagem é rejeitada por exceder `precision` |
+
+### Tipos
+
+```typescript
+/** @deprecated */
+enum BignumberAlignmentOption {
+  RIGHT = 'right',
+  LEFT = 'left',
+}
+```
+
+## Exemplos
+
+### Campo inteiro
+
+```html
+<input
+  sBignumberInput
+  [precision]="15"
+  [scale]="0"
+  [(ngModel)]="valor"
+/>
+```
+
+### Campo com 2 casas decimais
+
+```html
+<input
+  sBignumberInput
+  [precision]="15"
+  [scale]="2"
+  [(ngModel)]="valor"
+/>
+```
+
+### Somente positivos, sem separador de milhar
+
+```html
+<input
+  sBignumberInput
+  [precision]="10"
+  [scale]="2"
+  [allowNegative]="false"
+  thousandsSeparator=""
+  [(ngModel)]="valor"
+/>
+```
+
+## Acessibilidade
+
+- A diretiva se aplica a um `<input>` nativo — certifique-se de associar um `<label>` via `for` ou `aria-label`
+- O campo recebe `type="tel"` automaticamente para exibir teclado numérico em dispositivos móveis
+
+## Componentes relacionados
+
+- [`sNumericMask`](../numeric-mask/README.md) — substituto recomendado, ativamente mantido