npm package: @libs-ui/components-inputs-search
Description: `@libs-ui/components-inputs-search` là một thành phần nhập liệu chuyên dụng cho tính năng tìm kiếm. Nó được xây dựng dựa trên `LibsUiComponentsInputsInputComponent` và bổ sung các tính năng như tự động kích hoạt tìm kiếm sau một khoảng thời gian chờ (debo
Latest version: 0.2.356-23

# Search Input Component

`@libs-ui/components-inputs-search` là một thành phần nhập liệu chuyên dụng cho tính năng tìm kiếm. Nó được xây dựng dựa trên `LibsUiComponentsInputsInputComponent` và bổ sung các tính năng như tự động kích hoạt tìm kiếm sau một khoảng thời gian chờ (debounce), nút xóa nội dung tìm kiếm nhanh, và hỗ trợ các biểu tượng tùy chỉnh.

## Tính năng nổi bật

- 🔍 **Auto-complete Search**: Tự động phát ra sự kiện tìm kiếm sau khi người dùng ngừng nhập (mặc định 1 giây).
- ⚡ **Debounce & Throttle**: Tích hợp sẵn cơ chế debounce cho việc nhập liệu và throttle cho phím Enter.
- 🧹 **Clearable Support**: Hỗ trợ nút xóa (`hasClearSearch`) xuất hiện khi có nội dung trong ô tìm kiếm.
- 🎨 **Flexible Styling**: Dễ dàng tùy chỉnh border, background, chiều cao và các class CSS bổ sung.
- ⌨️ **Keyboard Support**: Hỗ trợ phím Enter để kích hoạt tìm kiếm ngay lập tức.
- 🛡️ **Signal Based**: Hoạt động mượt mà với Angular Signals.

## Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

```bash
npm install @libs-ui/components-inputs-search
```

## Cách sử dụng

### Import Module

```typescript
import { LibsUiComponentsInputsSearchComponent } from '@libs-ui/components-inputs-search';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsSearchComponent],
  // ...
})
export class YourComponent {}
```

### Ví dụ cơ bản

```html
<libs_ui-components-inputs-search
  (outSearch)="onSearch($event)"
  [searchConfig]="{
    placeholder: 'Tìm kiếm khách hàng...',
    hasClearSearch: true
  }"></libs_ui-components-inputs-search>
```

### Tùy chỉnh Debounce và Icon

```html
<libs_ui-components-inputs-search
  [debounceTime]="500"
  [searchConfig]="{
    iconLeftClass: 'libs-ui-icon-filter',
    placeholder: 'Lọc nhanh...'
  }"
  (outSearch)="handleFastFilter($event)"></libs_ui-components-inputs-search>
```

## API Reference

### Inputs

| Thuộc tính                   | Kiểu dữ liệu         | Mặc định | Mô tả                                                     |
| :--------------------------- | :------------------- | :------- | :-------------------------------------------------------- |
| `searchConfig`               | `IInputSearchConfig` | `{}`     | Cấu hình cho ô tìm kiếm (placeholder, value, icons, ...). |
| `blurTimeOut`                | `number`             | `600`    | Thời gian chờ trước khi emit sự kiện blur.                |
| `debounceTime`               | `number`             | `1000`   | Thời gian chờ (ms) trước khi phát ra `outSearch`.         |
| `disable`                    | `boolean`            | `false`  | Vô hiệu hóa ô tìm kiếm.                                   |
| `focusTimeOut`               | `number`             | `600`    | Thời gian chờ trước khi emit sự kiện focus.               |
| `ignoreAutoComplete`         | `boolean`            | `false`  | Nếu true, sẽ không tự động emit `outSearch`.              |
| `ignoreStopPropagationEvent` | `boolean`            | `false`  | Ngăn chặn sự kiện lan truyền ra ngoài.                    |
| `readonly`                   | `boolean`            | `false`  | Chế độ chỉ đọc.                                           |

### Outputs

| Sự kiện               | Kiểu dữ liệu                 | Mô tả                                                                        |
| :-------------------- | :--------------------------- | :--------------------------------------------------------------------------- |
| `outFocusAndBlur`     | `IFocusAndBlurEvent`         | Sự kiện focus và blur.                                                       |
| `outFunctionsControl` | `IInputFunctionControlEvent` | Cung cấp các phương thức điều khiển (focus, blur, ...).                      |
| `outIconLeft`         | `string`                     | Sự kiện khi click vào icon bên trái.                                         |
| `outIconRight`        | `string`                     | Sự kiện khi click vào icon bên phải.                                         |
| `outSearch`           | `string`                     | Phát ra nội dung tìm kiếm sau khoảng thời gian debounce hoặc khi nhấn Enter. |
| `outValueChange`      | `string`                     | Phát ra nội dung mới ngay lập tức mỗi khi gõ phím.                           |

## Types & Interfaces

### IInputSearchConfig

Giao diện cấu hình toàn diện cho component Search.

```typescript
export interface IInputSearchConfig {
  classInclude?: string;
  classContainerInput?: string;
  placeholder?: string;
  value?: string;
  noBorder?: boolean;
  backgroundNone?: boolean;
  iconLeftClass?: string;
  iconRightClass?: string;
  defaultHeight?: number;
  classCoverInputSearch?: string;
  hasClearSearch?: boolean;
  popoverContentIconRight?: string;
}
```

### IInputFunctionControlEvent

Được kế thừa từ component Input cơ bản để điều khiển hành vi.

```typescript
export interface IInputFunctionControlEvent {
  focus: (emitEvent?: boolean) => Promise<void>;
  blur: (emitEvent?: boolean) => Promise<void>;
  resetValue: () => Promise<void>;
  insertContent: (data: string | number) => Promise<void>;
  // ... and other methods from @libs-ui/components-inputs-input
}

export interface IFocusAndBlurEvent {
  focus: boolean;
  event: FocusEvent;
}
```

## Tech Stack

- **Core**: Angular 18+, RxJS (Subject, debounceTime, throttleTime)
- **Base**: `@libs-ui/components-inputs-input`

## License

MIT