# EditableOverlay

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

Diretiva aplicada a um `p-table` do PrimeNG para corrigir o comportamento de clique fora da célula editável. Evita que cliques em overlays internos (dropdowns, modais, lookups) fechem indevidamente o modo de edição da célula da tabela.

## Quando usar

- Tabelas PrimeNG (`p-table`) com células editáveis que contêm dropdowns, selects ou modais
- Quando o modo de edição da célula fecha ao interagir com overlays internos, impedindo a seleção de valores

## Quando não usar

- Tabelas sem modo de edição inline — a diretiva não tem efeito nesse cenário
- Tabelas que não são do PrimeNG — a diretiva sobrescreve métodos internos do `p-table`

## Instalação

```typescript
import { EditableOverlayModule } from '@seniorsistemas/angular-components/editable-overlay';

@Component({ standalone: true, imports: [EditableOverlayModule] })
export class MeuComponent {}
```

## Uso básico

Aplique `sEditableOverlay` no elemento `p-table` e passe a referência da tabela via `[table]`:

```html
<p-table sEditableOverlay [table]="dt" #dt>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <p-dropdown [options]="opcoes" [(ngModel)]="row.tipo"></p-dropdown>
          </ng-template>
          <ng-template pTemplate="output">
            {{ row.tipo }}
          </ng-template>
        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>
```

## API

### Inputs (na diretiva `sEditableOverlay`)

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `table` | `any` | — | Sim | Referência direta à instância do `p-table` (mesmo que a template reference variable `#dt`) |

## Exemplos

### Tabela com dropdown em célula editável

```html
<p-table [value]="dados" sEditableOverlay [table]="dt" #dt>
  <ng-template pTemplate="header">
    <tr>
      <th>Nome</th>
      <th>Categoria</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.nome }}</td>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <p-dropdown
              [options]="categorias"
              [(ngModel)]="item.categoria"
              appendTo="body"
            ></p-dropdown>
          </ng-template>
          <ng-template pTemplate="output">
            {{ item.categoria }}
          </ng-template>
        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>
```

## Acessibilidade

- A diretiva não altera atributos ARIA — a acessibilidade da tabela editável depende da configuração do `p-table` do PrimeNG
- O comportamento de foco e teclado permanece o mesmo do `p-table`

## Componentes relacionados

- [`Select`](../select/README.md) — dropdown de seleção usado em células editáveis