@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

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

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

Import

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

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

Ví dụ

Cơ bản

<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

npx nx serve core-ui

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

Unit Tests

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

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

License

MIT