# InputGroup

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

Componente de layout que envolve um `<input sInputText>` e adiciona botões internos à esquerda e/ou à direita do campo.

## Quando usar

- Campos de busca com botão de lupa integrado
- Campos com ação de limpar, copiar ou alternar visibilidade (ex.: senha) dentro do próprio input
- Qualquer `<input sInputText>` que precise de uma ou duas ações contextuais coladas ao campo

## Quando não usar

- Para campos do `DynamicForm` — os campos `text`/`number`/`bignumber` já suportam `leftAddon`/`rightAddon` nativamente via configuração do campo
- Quando a ação não tem relação direta com o conteúdo do input — use um botão normal ao lado do campo, fora do `InputGroup`

## Instalação

```typescript
import { InputGroupComponent } from '@seniorsistemas/angular-components/input-group';
import { InputTextDirective } from '@seniorsistemas/angular-components/input-text';

@Component({
    standalone: true,
    imports: [InputGroupComponent, InputTextDirective, ReactiveFormsModule],
})
export class MeuComponente {
    control = new FormControl('');
}
```

## Uso básico

```html
<s-input-group [leftAddon]="{ icon: 'pi pi-search', callback: buscar }">
    <input sInputText [formControl]="control" placeholder="Buscar..." />
</s-input-group>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `leftAddon` | `InputGroupAddon` | `undefined` | Não | Configuração do botão exibido à esquerda do input |
| `rightAddon` | `InputGroupAddon` | `undefined` | Não | Configuração do botão exibido à direita do input |

### Tipos

```typescript
interface InputGroupAddon {
    label?: string;
    icon?: string;
    callback?: VoidFunction;
    disabled?: (() => boolean) | boolean;
}
```

## Exemplos

### Botão de busca à esquerda

```html
<s-input-group [leftAddon]="{ icon: 'pi pi-search', callback: buscar }">
    <input sInputText [formControl]="nome" placeholder="Buscar..." />
</s-input-group>
```

### Botão de limpar à direita, desabilitado quando o campo está vazio

```html
<s-input-group [rightAddon]="{ icon: 'pi pi-times', callback: limpar, disabled: campoVazio }">
    <input sInputText [formControl]="nome" />
</s-input-group>
```

### Botões dos dois lados

```html
<s-input-group
    [leftAddon]="{ icon: 'pi pi-search', callback: buscar }"
    [rightAddon]="{ icon: 'pi pi-times', callback: limpar }"
>
    <input sInputText [formControl]="nome" />
</s-input-group>
```

### Botão desabilitado a partir do estado do form

```html
<s-input-group [rightAddon]="{ icon: 'pi pi-times', callback: limpar, disabled: () => nome.disabled }">
    <input sInputText [formControl]="nome" />
</s-input-group>
```

## Acessibilidade

- Os botões internos são `<button type="button">` nativos — recebem foco via teclado (Tab) normalmente
- Quando `disabled` (fixo ou via função) é verdadeiro, o atributo `disabled` nativo é aplicado ao botão

## Componentes relacionados

- [`InputText`](../input-text/README.md) — diretiva de estilo aplicada ao `<input>` projetado dentro do `InputGroup`
- [`DynamicForm`](../dynamic-form/README.md) — campos de formulário completos que já suportam addons nativamente, sem precisar do `InputGroup`