npm package: @libs-ui/components-device-support
Description: > Directive hỗ trợ xử lý sự kiện click đa thiết bị (desktop/mobile/touch), tự động chọn event phù hợp (click, touchstart, pointerdown) dựa trên loại thiết bị.
Latest version: 0.2.356-23

# Device Support Handle Click

> Directive hỗ trợ xử lý sự kiện click đa thiết bị (desktop/mobile/touch), tự động chọn event phù hợp (click, touchstart, pointerdown) dựa trên loại thiết bị.

## Version

`0.2.355-14`

## Khi nào sử dụng

- Khi cần xử lý click event hoạt động đúng trên cả desktop và mobile/touch devices
- Khi cần tự động phát hiện loại thiết bị và chọn event phù hợp (click vs touchstart vs pointerdown)
- Khi cần stopPropagation tự động cho click events
- Khi cần gắn click handler vào một element cụ thể (window, document, hoặc element tùy chỉnh)

## Lưu ý quan trọng

- Directive tự động chọn event type: `click` cho desktop, `touchstart` cho mobile, `pointerdown` cho touch devices
- Mặc định `stopPropagation` được bật - sử dụng `[ignoreStopPropagation]="true"` để tắt
- Có thể gắn vào element khác thông qua `[elementHandleClick]`
- Sử dụng `getEventNameHandleClick` từ `@libs-ui/utils` để xác định event name
- Directive sử dụng `takeUntilDestroyed(destroyRef)` để tự động cleanup, tránh memory leak

## Cài đặt & Import

```typescript
import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
```

## Ví dụ sử dụng

### Basic Usage

```html
<button
  libsUiComponentsDeviceSupportHandleClickDirective
  (outClick)="onButtonClick($event)"
  class="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>
```

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
  template: `
    <button
      libsUiComponentsDeviceSupportHandleClickDirective
      (outClick)="onButtonClick($event)">
      Click me
    </button>
  `
})
export class ExampleComponent {
  onButtonClick(event: Event) {
    console.log('Clicked!', event.type);
  }
}
```

### Custom Element Target

```html
<div #targetElement class="p-4 border rounded">
  Target - Click vào đây
</div>

<div
  libsUiComponentsDeviceSupportHandleClickDirective
  [elementHandleClick]="targetElement"
  (outClick)="onTargetClick($event)">
</div>
```

### Disable stopPropagation

```html
<div (click)="onParentClick()">
  <button
    libsUiComponentsDeviceSupportHandleClickDirective
    [ignoreStopPropagation]="true"
    (outClick)="onChildClick($event)">
    Click - event sẽ bubble lên parent
  </button>
</div>
```

## API Reference

### Selector

`[libsUiComponentsDeviceSupportHandleClickDirective]`

### Inputs

| Property | Type | Default | Description |
|---|---|---|---|
| `[elementHandleClick]` | `HTMLElement \| Window \| Document` | host element | Element để lắng nghe event click |
| `[ignoreStopPropagation]` | `boolean` | `false` | Khi true, không gọi stopPropagation() |

### Outputs

| Property | Type | Description |
|---|---|---|
| `(outClick)` | `Event` | Emit event click khi user click/touch vào element |

## Logic ẩn

### Auto Event Detection

Directive sử dụng `getEventNameHandleClick` từ `@libs-ui/utils` để tự động xác định event type:

- **Touch device** (có `onpointerdown` và `maxTouchPoints > 0`): `pointerdown`
- **Desktop**: `click`
- **Mobile (non-touch)**: `touchstart`

### Default stopPropagation

Mặc định, directive gọi `e.stopPropagation()` trên mỗi event. Set `[ignoreStopPropagation]="true"` để tắt.

### RxJS & DestroyRef

Directive sử dụng `fromEvent()` kết hợp `takeUntilDestroyed(destroyRef)` để tự động unsubscribe khi directive bị destroy.

## Demo

- Local: http://localhost:4500/device-support

## Test

```bash
npx nx test components-device-support
```