open-index/open-npm huggingface dataset:
npm package: @libs-ui/components-inputs-keyboard
Description: > Component bàn phím số (Numeric Keypad) hỗ trợ nhập liệu bằng chuột và bàn phím cứng.
Latest version: 0.2.356-23

# @libs-ui/components-inputs-keyboard

> Component bàn phím số (Numeric Keypad) hỗ trợ nhập liệu bằng chuột và bàn phím cứng.

## Giới thiệu

`LibsUiComponentsInputsKeyboardComponent` cung cấp giao diện bàn phím số trực quan (0-9, \*, #). Component này tự động lắng nghe các sự kiện từ bàn phím cứng của người dùng để đồng bộ hóa việc nhập liệu, phù hợp cho các màn hình nhập mã PIN, mật khẩu số hoặc các ứng dụng Dialer.

### Tính năng

- ✅ Giao diện bàn phím số tiêu chuẩn (0-9, \*, #)
- ✅ Đồng bộ hóa tự động với bàn phím cứng (0-9)
- ✅ Hiển thị kết quả nhập liệu nội bộ trực quan
- ✅ Emit mã code phím đã chọn qua output event
- ✅ Sử dụng Angular Signals cho hiệu năng cao
- ✅ Thiết kế Responsive, dễ dàng tích hợp

## Khi nào sử dụng

- Khi cần màn hình nhập mã PIN hoặc mật khẩu chỉ có số.
- Các ứng dụng cần bàn phím số lớn (vd: trên máy POS, thiết bị cảm ứng).
- Tích hợp trong các module quay số (Dialer/VoIP).

## Cài đặt

```bash
# npm
npm install @libs-ui/components-inputs-keyboard

# yarn
yarn add @libs-ui/components-inputs-keyboard
```

## Import

```typescript
import { LibsUiComponentsInputsKeyboardComponent } from '@libs-ui/components-inputs-keyboard';

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

## Ví dụ

### Cơ bản

```html
<libs_ui-components-inputs-keyboard (outKeyCodeSelected)="onKeySelect($event)" />
```

## API

### libs_ui-components-inputs-keyboard

#### Inputs

_Component hiện tại không có inputs công khai._

#### Outputs

| Property               | Type     | Description                                                  |
| ---------------------- | -------- | ------------------------------------------------------------ |
| `(outKeyCodeSelected)` | `string` | Emit mã code của phím khi người dùng click hoặc nhấn phím số |

## Tuyến bố về sự kiện (Events)

Component lắng nghe sự kiện `keyup` trên toàn bộ `document`. Khi người dùng nhấn các phím từ `0` đến `9` trên bàn phím cứng, component sẽ tự động cập nhật trạng thái hiển thị và emit event ra ngoài tương tự như khi click chuột vào phím tương ứng trên UI.

## Công nghệ

| Technology      | Version | Purpose          |
| --------------- | ------- | ---------------- |
| Angular         | 18+     | Framework        |
| Angular Signals | -       | State management |
| RxJS            | 7.x     | Event handling   |
| OnPush          | -       | Change Detection |

## Demo

```bash
npx nx serve core-ui
```

Truy cập: `http://localhost:4500/inputs/keyboard`

## Unit Tests

```bash
# Chạy tests
npx nx test components-inputs-keyboard

# Coverage
npx nx test components-inputs-keyboard --coverage
```

## License

MIT
npm package: @libs-ui/pipes-format-text-full-name-format
Description: Pipe định dạng tên người: viết hoa chữ cái đầu mỗi từ, viết thường phần còn lại, trim khoảng trắng, xóa khoảng trắng thừa và loại bỏ emoji.
Latest version: 0.2.356-23

# Full Name Format Pipe

Pipe định dạng tên người: viết hoa chữ cái đầu mỗi từ, viết thường phần còn lại, trim khoảng trắng, xóa khoảng trắng thừa và loại bỏ emoji.

## Tính năng

- ✅ Viết hoa chữ cái đầu mỗi từ (Title Case)
- ✅ Viết thường các ký tự còn lại trong mỗi từ
- ✅ Trim khoảng trắng đầu/cuối chuỗi
- ✅ Xóa khoảng trắng thừa giữa các từ
- ✅ Loại bỏ emoji
- ✅ Hỗ trợ tiếng Việt có dấu unicode

## Cài đặt

```bash
npm install @libs-ui/pipes-format-text-full-name-format
```

## Import

```typescript
import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';

@Component({
  standalone: true,
  imports: [LibsUiPipesFormatTextFullNameFormatPipe],
})
export class ExampleComponent {}
```

## Cú pháp

```html
{{ value | LibsUiPipesFormatTextFullNameFormatPipe }}
```

## Ví dụ

### Trong Template

```html
<!-- Cơ bản -->
{{ 'john doe' | LibsUiPipesFormatTextFullNameFormatPipe }}
<!-- Output: John Doe -->

<!-- ALL CAPS → Title Case -->
{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextFullNameFormatPipe }}
<!-- Output: Nguyen Van A -->

<!-- Trim & xóa khoảng trắng thừa -->
{{ ' TRAN THI B ' | LibsUiPipesFormatTextFullNameFormatPipe }}
<!-- Output: Tran Thi B -->

<!-- Loại bỏ emoji -->
{{ 'le thu C 😀🎉' | LibsUiPipesFormatTextFullNameFormatPipe }}
<!-- Output: Le Thu C -->

<!-- Tiếng Việt -->
{{ 'phạm thị MỸ LINH' | LibsUiPipesFormatTextFullNameFormatPipe }}
<!-- Output: Phạm Thị Mỹ Linh -->
```

### Dùng trong TypeScript

Pipe là thin wrapper của hàm `fullNameFormat` trong `@libs-ui/utils`. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó — **không cần inject pipe**:

```typescript
import { fullNameFormat } from '@libs-ui/utils';

// Dùng thẳng hàm utils — không cần inject pipe
const displayName = fullNameFormat('NGUYEN VAN A');
// Output: 'Nguyen Van A'

// Trong component class:
class ExampleComponent {
  displayName = fullNameFormat(this.user.rawName);
}
```

## API

| Tham số | Kiểu     | Bắt buộc | Mô tả                   |
| ------- | -------- | -------- | ----------------------- |
| `value` | `string` | ✅       | Tên người cần định dạng |

> **Lưu ý:** Pipe không có tham số tùy chỉnh. Options được hardcode: `lowercaseOtherCharacter=true`, `trim=true`, `removeMultipleSpace=true`, `removeEmoji=true`.

## Khi nào sử dụng

- **Form nhập tên:** Chuẩn hóa tên người dùng nhập vào về dạng "Nguyễn Văn A"
- **Import dữ liệu:** Tên từ Excel/CSV/hệ thống ngoài thường ở dạng ALL CAPS hoặc lowercase
- **Hiển thị profile:** Đảm bảo format tên nhất quán trong danh sách, avatar, profile

## Lưu ý quan trọng

- Pipe **không** hỗ trợ tùy chỉnh options — đây là pipe chuyên dụng cho định dạng tên người
- Nếu cần tùy chỉnh options (ví dụ: giữ nguyên emoji), hãy dùng trực tiếp `capitalize()` từ `@libs-ui/utils`
- Khi input là `null`, `undefined` hoặc chuỗi rỗng, pipe trả về nguyên giá trị đó (không throw error)
npm package: @libs-ui/pipes-get-value-of-object
Description: Pipe hỗ trợ truy cập giá trị của object thông qua đường dẫn (path) chuỗi, hỗ trợ lồng nhau và cung cấp giá trị mặc định.
Latest version: 0.2.356-23

# Get Value Of Object Pipe

Pipe hỗ trợ truy cập giá trị của object thông qua đường dẫn (path) chuỗi, hỗ trợ lồng nhau và cung cấp giá trị mặc định.

## Cài đặt

```bash
npm install @libs-ui/pipes-get-value-of-object
```

## Cách sử dụng

Import `LibsUiPipesGetValueOfObjectPipe` vào component của bạn:

```typescript
import { LibsUiPipesGetValueOfObjectPipe } from '@libs-ui/pipes-get-value-of-object';

@Component({
  standalone: true,
  imports: [LibsUiPipesGetValueOfObjectPipe],
  // ...
})
export class MyComponent {
  user = {
    info: {
      name: 'John Doe',
    },
  };
}
```

Sử dụng trong template:

```html
<!-- Kết quả: John Doe -->
<p>{{ user | LibsUiPipesGetValueOfObjectPipe:'info.name' }}</p>

<!-- Kết quả: 18 (giá trị mặc định nếu không tìm thấy) -->
<p>{{ user | LibsUiPipesGetValueOfObjectPipe:'info.age':18 }}</p>
```

## API

| Tham số                 | Kiểu dữ liệu | Mặc định    | Mô tả                                                        |
| ----------------------- | ------------ | ----------- | ------------------------------------------------------------ |
| `path`                  | `string`     | `undefined` | Đường dẫn đến thuộc tính (ví dụ: `a.b.c` hoặc `items.0.id`). |
| `defaultValue`          | `any`        | `undefined` | Giá trị trả về nếu không tìm thấy thuộc tính.                |
| `keepLastValueIfSignal` | `boolean`    | `false`     | Giữ giá trị cũ khi input signal đang cập nhật.               |
npm package: @libs-ui/pipes-security-trust
Description: Pipe hỗ trợ đánh dấu một giá trị là an toàn (trusted) để sử dụng trong template Angular, bypassing cơ chế Security mặc định của framework.
Latest version: 0.2.356-23

# Security Trust Pipe

Pipe hỗ trợ đánh dấu một giá trị là an toàn (trusted) để sử dụng trong template Angular, bypassing cơ chế Security mặc định của framework.

## Cài đặt

```bash
npm install @libs-ui/pipes-security-trust
```

## Cách sử dụng

Import `LibsUiPipesSecurityTrustPipe` vào component của bạn:

```typescript
import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule, LibsUiPipesSecurityTrustPipe],
  // ...
})
export class MyComponent {
  htmlContent = '<span style="color: blue">Nội dung xanh</span>';
}
```

Sử dụng trong template (luôn đi kèm với pipe `async` do trả về Promise):

```html
<!-- Trusted HTML -->
<div [innerHTML]="htmlContent | LibsUiPipesSecurityTrustPipe:'html' | async"></div>

<!-- Trusted Style -->
<div [style.background]="gradient | LibsUiPipesSecurityTrustPipe:'style' | async"></div>

<!-- Trusted URL -->
<a [href]="link | LibsUiPipesSecurityTrustPipe:'url' | async">Link</a>

<!-- Resource URL -->
<iframe [src]="videoUrl | LibsUiPipesSecurityTrustPipe:'resourceUrl' | async"></iframe>
```

## API

| Tham số        | Kiểu dữ liệu                                              | Mặc định    | Mô tả                                             |
| -------------- | --------------------------------------------------------- | ----------- | ------------------------------------------------- |
| `type`         | `'html' \| 'style' \| 'script' \| 'url' \| 'resourceUrl'` | `undefined` | Loại nội dung cần trust.                          |
| `useXssFilter` | `boolean`                                                 | `true`      | Có áp dụng `xssFilter` cho loại `html` hay không. |

## Lưu ý bảo mật

Pipe này bypass cơ chế bảo mật của Angular. Chỉ sử dụng với các nội dung mà bạn hoàn toàn tin tưởng. Mặc định `xssFilter` được bật cho loại `html` để tăng thêm một lớp bảo mật.