# InlineEdit

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

Componente de edição inline que renderiza dinamicamente campos editáveis a partir de uma lista de configurações. Cada campo exibe o valor atual e permite edição ao clicar, integrando-se a um `FormGroup` Angular.

## Quando usar

- Formulários de detalhes onde o usuário edita campos individualmente sem abrir modal
- Telas de visualização com edição rápida diretamente no contexto
- Painéis de configuração onde poucos campos precisam ser editados por vez

## Quando não usar

- Formulários completos com muitos campos obrigatórios simultâneos — use um formulário convencional
- Quando todos os campos são editados ao mesmo tempo — prefira Dynamic Form

## Instalação

```typescript
import { InlineEditModule } from '@seniorsistemas/angular-components/inline-edit';

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

## Uso básico

```html
<s-inline-edit [formGroup]="form" [fields]="campos" />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `formGroup` | `FormGroup` | `new FormGroup({})` | Não | `FormGroup` Angular ao qual os campos inline serão vinculados. |
| `fields` | `InlineEditField[]` | `[]` | Não | Lista de configurações dos campos inline a serem renderizados. |
| `errorMessages` | `any` | `undefined` | Não | Mapa de mensagens de erro customizadas por nome de validador. |

### Tipos

```typescript
// Classe base — todos os tipos de campo estendem InlineEditField
abstract class InlineEditField {
    label: string;        // Rótulo exibido ao lado do campo
    name: string;         // Nome do FormControl correspondente no FormGroup
    tooltip?: string;     // Tooltip exibido ao passar o mouse sobre o rótulo
    errorMessages?: {} | (() => {});  // Mensagens de erro customizadas
}

// Tipos de campo disponíveis:
class InlineEditTextField extends InlineEditField {}         // Campo de texto simples
class InlineEditNumberField extends InlineEditField {}       // Campo numérico
class InlineEditTextAreaField extends InlineEditField {}     // Área de texto multilinha
class InlineEditCalendarField extends InlineEditField {}     // Seletor de data
class InlineEditLookupField extends InlineEditField {}       // Campo de busca avançada
class InlineEditContentGeneratorField extends InlineEditField {} // Gerador de conteúdo com IA
```

## Exemplos

### Campos de texto, número e área de texto

```typescript
import {
    InlineEditTextField,
    InlineEditNumberField,
    InlineEditTextAreaField,
} from '@seniorsistemas/angular-components/inline-edit';

@Component({ ... })
export class MeuComponent implements OnInit {
    form!: FormGroup;
    campos: InlineEditField[] = [];

    ngOnInit() {
        this.form = new FormGroup({
            nome: new FormControl('João Silva'),
            valor: new FormControl(1500),
            observacao: new FormControl('Observação inicial'),
        });

        this.campos = [
            new InlineEditTextField({ name: 'nome', label: 'Nome', tooltip: 'Nome completo' }),
            new InlineEditNumberField({ name: 'valor', label: 'Valor', tooltip: 'Valor numérico' }),
            new InlineEditTextAreaField({ name: 'observacao', label: 'Observação' }),
        ];
    }
}
```

```html
<s-inline-edit [formGroup]="form" [fields]="campos"></s-inline-edit>
```

### Com campo de data

```typescript
import { InlineEditCalendarField } from '@seniorsistemas/angular-components/inline-edit';

this.form = new FormGroup({
    dataAdmissao: new FormControl(new Date()),
});

this.campos = [
    new InlineEditCalendarField({ name: 'dataAdmissao', label: 'Data de admissão' }),
];
```

### Com mensagens de erro customizadas

```typescript
this.campos = [
    new InlineEditTextField({
        name: 'email',
        label: 'E-mail',
        errorMessages: {
            required: 'O e-mail é obrigatório.',
            email: 'Informe um e-mail válido.',
        },
    }),
];
```

## Acessibilidade

- Cada campo exibe seu rótulo (`label`) visualmente associado ao controle
- O `tooltip` opcional fornece contexto adicional ao passar o mouse
- A edição é ativada por clique e confirmada com Enter ou clique fora do campo
- Mensagens de validação são exibidas abaixo do campo em caso de erro

## Componentes relacionados

- [`DynamicForm`](../dynamic-form/README.md) — formulário dinâmico completo com todos os campos habilitados simultaneamente