npm package: @libs-ui/components-click-outside
Description: Directive phát hiện click bên ngoài hoặc bên trong element, hữu ích cho dropdowns, modals, và popups.
Latest version: 0.2.356-23

# Click Outside Directive

Directive phát hiện click bên ngoài hoặc bên trong element, hữu ích cho dropdowns, modals, và popups.

## Features

- ✅ Detect clicks outside element
- ✅ Detect clicks inside element
- ✅ Auto cleanup với `takeUntilDestroyed`
- ✅ Sử dụng `mousedown` event để catch sớm hơn
- ✅ Standalone directive - dễ dàng import
- ✅ TypeScript support đầy đủ

## Installation

```bash
npm install @libs-ui/components-click-outside
```

## Usage

### Basic Example

```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    <div
      LibsUiComponentsClickOutsideDirective
      (outOutside)="onClickOutside($event)"
      (outInSide)="onClickInside($event)">
      Click inside or outside this element
    </div>
  `,
})
export class ExampleComponent {
  onClickOutside(event: Event): void {
    console.log('Clicked outside!', event);
  }

  onClickInside(event: Event): void {
    console.log('Clicked inside!', event);
  }
}
```

### Dropdown Example

```typescript
import { Component, signal } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    <div class="relative">
      <button (click)="isOpen.set(!isOpen())">Toggle Dropdown</button>

      @if (isOpen()) {
        <div
          LibsUiComponentsClickOutsideDirective
          (outOutside)="isOpen.set(false)"
          class="absolute mt-2 w-48 bg-white border rounded-lg shadow-lg">
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>
      }
    </div>
  `,
})
export class DropdownExample {
  readonly isOpen = signal<boolean>(false);
}
```

### Modal Example

```typescript
import { Component, signal } from '@angular/core';
import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';

@Component({
  standalone: true,
  imports: [LibsUiComponentsClickOutsideDirective],
  template: `
    @if (showModal()) {
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <div
          LibsUiComponentsClickOutsideDirective
          (outOutside)="showModal.set(false)"
          class="bg-white p-6 rounded-lg shadow-xl">
          <h3>Modal Title</h3>
          <p>Click outside to close</p>
        </div>
      </div>
    }
  `,
})
export class ModalExample {
  readonly showModal = signal<boolean>(false);
}
```

## API Reference

### Outputs

| Property       | Type    | Description                      |
| -------------- | ------- | -------------------------------- |
| `(outOutside)` | `Event` | Emit khi click bên ngoài element |
| `(outInSide)`  | `Event` | Emit khi click bên trong element |

## Important Notes

⚠️ **Event Timing**: Directive sử dụng `AfterViewInit`, event listener được setup sau khi view init.

⚠️ **Event Type**: Lắng nghe `mousedown` event thay vì `click` để catch event sớm hơn.

⚠️ **stopPropagation**: Event được `stopPropagation()` để tránh conflicts với parent handlers.

⚠️ **Memory Leak**: Tự động cleanup với `takeUntilDestroyed` khi directive bị destroy.

## Use Cases

- Đóng dropdown/menu khi click bên ngoài
- Đóng modal/dialog khi click vào overlay
- Đóng tooltip/popover khi click ra ngoài
- Detect user interaction với element cụ thể
- Implement click-away behavior cho custom components

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Dependencies

- `@angular/core` >= 18.0.0
- `rxjs` ~7.8.0

## License

MIT