# MouseEvents

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

Módulo com duas diretivas para eventos de mouse avançados: `sLongPress` (pressão longa) e `sDoubleClick` (duplo clique). Permitem detectar gestos específicos que o DOM nativo não suporta nativamente de forma consistente.

## Quando usar

- Ações de contexto em dispositivos touch via `sLongPress` (equivalente ao clique direito)
- Edição inline acionada por duplo clique via `sDoubleClick`
- Seleção múltipla ao pressionar e arrastar (combinado com long press)
- Evitar acionamentos acidentais exigindo gestos deliberados

## Quando não usar

- Quando o clique simples é suficiente — use `(click)` nativo
- Quando a acessibilidade via teclado é necessária — combine com [`InteractiveContent`](../interactive-content/README.md)

## Instalação

```typescript
import { MouseEventsModule } from '@seniorsistemas/angular-components/mouse-events';

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

## Uso básico

```html
<!-- Long Press -->
<div [sLongPressDelay]="500" (sLongPress)="onLongPress($event)">
    Pressione e segure
</div>

<!-- Double Click -->
<div sDoubleClick (doubleClicked)="onDoubleClick($event)">
    Clique duas vezes
</div>
```

## API

### Diretiva `sLongPress`

#### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `sLongPressDelay` | `number` | `500` | Não | Tempo em milissegundos para disparar o long press após pressionar o elemento. |

#### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `sLongPress` | `EventEmitter<MouseEvent>` | Emitido quando o elemento é pressionado por mais de `sLongPressDelay` ms sem soltar. |

### Diretiva `sDoubleClick`

#### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `doubleClicked` | `EventEmitter<PointerEvent>` | Emitido quando dois cliques ocorrem dentro de 500ms. |

## Exemplos

### Long Press para menu de contexto

```html
<div
    [sLongPressDelay]="800"
    (sLongPress)="abrirMenuContexto($event)"
    style="padding: 16px; cursor: pointer; user-select: none;"
>
    Pressione e segure para opções
</div>
```

### Long Press com delay customizado

```html
<div
    sLongPress
    [sLongPressDelay]="1000"
    (sLongPress)="onLongPress()"
    style="width: 200px; height: 100px; background: #6366f1; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; user-select: none;"
>
    Segure por 1 segundo
</div>
```

### Double Click para edição inline

```html
<div
    sDoubleClick
    (doubleClicked)="ativarEdicao(item)"
    style="padding: 8px; cursor: text;"
>
    @if (!editando) {
        <span>{{ item.valor }}</span>
    } @else {
        <input [(ngModel)]="item.valor" (blur)="salvar(item)" />
    }
</div>
```

### Uso combinado (long press + double click)

```html
<div
    sDoubleClick
    (doubleClicked)="onDoubleClick(item)"
    [sLongPressDelay]="600"
    (sLongPress)="onLongPress(item)"
    style="padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; user-select: none;"
>
    {{ item.titulo }}
</div>
```

### Visão geral lado a lado

```html
<div style="display: flex; gap: 24px;">
    <div
        sLongPress
        [sLongPressDelay]="500"
        (sLongPress)="longPressCount = longPressCount + 1"
        style="padding: 16px; background: #7892a1; color: white; border-radius: 8px; cursor: pointer; user-select: none;"
    >
        Pressione e segure ({{ longPressCount }})
    </div>

    <div
        sDoubleClick
        (doubleClicked)="doubleClickCount = doubleClickCount + 1"
        style="padding: 16px; background: #059669; color: white; border-radius: 8px; cursor: pointer; user-select: none;"
    >
        Clique duas vezes ({{ doubleClickCount }})
    </div>
</div>
```

## Acessibilidade

- `sLongPress` detecta eventos `mousedown`/`mouseup` e `touchstart`/`touchend` — funciona em dispositivos touch
- `sDoubleClick` usa intervalo de 500ms entre cliques — não conflita com o evento `dblclick` nativo
- Para garantir acessibilidade via teclado em elementos com essas diretivas, combine com [`InteractiveContent`](../interactive-content/README.md)

## Componentes relacionados

- [`InteractiveContent`](../interactive-content/README.md) — acessibilidade via teclado para elementos customizados
- [`Button`](../button/README.md) — botão nativo com acessibilidade integrada; prefira quando a semântica de botão é adequada