longPress

Paquete: @tiendana/ngx-core/ui

Directiva que detecta pulsaciones largas (long press) en elementos. Soporta mouse y touch con threshold configurable. Útil para acciones de eliminación, menús contextuales, etc.

Características

✅ Detección de mouse y touch events
✅ Threshold configurable (default 1000ms)
✅ Signal longPressing para estados intermedios
✅ 4 eventos: onShortPress, onLongPress, onLongPressing, onLongPressEnd
✅ En touch, cancela el long press si el dedo se mueve
✅ Añade la clase longpress al elemento mientras dura la pulsación larga

API

Inputs

Input	Tipo	Default	Descripción
tresshold	InputSignal<number>	1000	Milisegundos para considerar long press

Signals

Signal	Tipo	Descripción
longPressing	Signal<boolean>	true mientras se mantiene presionado después del threshold

Outputs

Output	Tipo	Descripción
onShortPress	OutputEmitterRef<any>	Emite el evento nativo si se suelta antes del threshold
onLongPress	OutputEmitterRef<any>	Emite el evento nativo cuando se cumple el threshold
onLongPressing	OutputEmitterRef<any>	Emite el evento nativo una vez, al cumplirse el threshold, junto con onLongPress
onLongPressEnd	OutputEmitterRef<any>	Emite el evento nativo cuando se suelta después de un long press

Ejemplos y Demos

Uso Básico

Cargando demo...

Ver código

Con Threshold Personalizado

Cargando demo...

Ver código

Casos de Uso

Eliminar con Confirmación

<button
  longPress
  [tresshold]="1500"
  (onLongPress)="deleteItem()"
  (onShortPress)="showTooltip()"
>
  Mantén para eliminar
</button>

Menú Contextual

<div 
  longPress
  [tresshold]="800"
  (onLongPress)="showContextMenu()"
>
  <img [src]="image" />
</div>

Implementación Interna

Usa RxJS para manejar eventos de mouse (solo clic izquierdo, sin teclas modificadoras) y touch:

merge(mousedown, mouseup, touchstart, touchEnd, touchMove).pipe(
  switchMap(e => e.state === 'up' ? timer(this.tresshold()).pipe(map(() => e)) : of(e))
)

El temporizador se reinicia o se cancela con cualquier evento posterior:

• mouseup o touchend
• touchmove (el dedo se mueve)

Un touchend sin movimiento llama a preventDefault() y stopPropagation() sobre el evento.

Accesibilidad

• Proporciona feedback visual durante long press
• Considera alternativas para usuarios con dificultades motoras
• Documenta el comportamiento esperado en la UI