npm package: @libs-ui/components-inputs-password
Description: `@libs-ui/components-inputs-password` là một component nhập liệu mật khẩu chuyên dụng, cung cấp các tính năng bảo mật như ẩn/hiện mật khẩu, kiểm tra độ mạnh của mật khẩu (validation rules) và tự động tạo mật khẩu ngẫu nhiên.
Latest version: 0.2.356-23

# Password Input Component

`@libs-ui/components-inputs-password` là một component nhập liệu mật khẩu chuyên dụng, cung cấp các tính năng bảo mật như ẩn/hiện mật khẩu, kiểm tra độ mạnh của mật khẩu (validation rules) và tự động tạo mật khẩu ngẫu nhiên.

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

- 👁️ **Ẩn/Hiện mật khẩu**: Cho phép người dùng chuyển đổi chế độ xem mật khẩu dễ dàng.
- ✅ **Validation phức tạp**: Kiểm tra các quy tắc như độ dài tối thiểu/tối đa, sự xuất hiện của chữ hoa, chữ thường, số và ký tự đặc biệt.
- 🎲 **Tạo mật khẩu ngẫu nhiên**: Hỗ trợ generate mật khẩu dựa trên cấu hình bảo mật được thiết lập.
- 🛠️ **Tích hợp Validation**: Sử dụng `LibsUiComponentsInputsValidComponent` để hiển thị lỗi và quản lý trạng thái hợp lệ.
- 🎨 **Tùy biến cao**: Cho phép tùy chỉnh icon, placeholder, label và các thuộc tính CSS.

## Cài đặt

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

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

## Cách sử dụng

### Import Module

```typescript
import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';

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

### Ví dụ cơ bản (Input mật khẩu thông thường)

```html
<libs_ui-components-inputs-password
  [fieldNameBind]="'password'"
  [(item)]="loginData"
  [isPassword]="true"
  [placeholder]="'Nhập mật khẩu của bạn'"></libs_ui-components-inputs-password>
```

### Ví dụ nâng cao (Kiểm tra độ mạnh mật khẩu)

```html
<libs_ui-components-inputs-password
  [fieldNameBind]="'newPassword'"
  [(item)]="accountData"
  [isPassword]="true"
  [config]="passwordSecurityConfig"
  [placeholder]="'Tạo mật khẩu mạnh'"></libs_ui-components-inputs-password>
```

```typescript
passwordSecurityConfig = {
  length_min: 8,
  length_max: 20,
  uppercase: 1, // Ít nhất 1 chữ hoa
  number: 1, // Ít nhất 1 chữ số
  symbol: 1, // Ít nhất 1 ký tự đặc biệt
  key: 'all', // Yêu cầu thỏa mãn tất cả quy tắc
};
```

## API Reference

### Inputs

| Thuộc tính                                  | Kiểu dữ liệu                       | Mặc định                                   | Mô tả                                                     |
| :------------------------------------------ | :--------------------------------- | :----------------------------------------- | :-------------------------------------------------------- |
| `classIncludeInput`                         | `string`                           | `undefined`                                | Class bao ngoài input.                                    |
| `config`                                    | `IConfig`                          | `defaultConfig()`                          | Cấu hình các quy tắc bảo mật (độ dài, ký tự đặc biệt...). |
| `configUnitRight`                           | `IInputValidUnitConfig`            | `undefined`                                | Cấu hình hiển thị đơn vị bên phải.                        |
| `contentPopoverOverlayIconShowOrHiddenPass` | `IContentWhenHiddenOrShowPassword` | `defaultContentWhenHiddenOrShowPassword()` | Nội dung tooltip khi hover vào icon ẩn/hiện password.     |
| `defaultHeight`                             | `number`                           | `undefined`                                | Chiều cao mặc định của input.                             |
| `fieldNameBind`                             | `string`                           | **(Required)**                             | Tên trường dữ liệu trong object `item` để bind giá trị.   |
| `iconLeftClass`                             | `string`                           | `undefined`                                | Class cho icon bên trái.                                  |
| `iconRightClass`                            | `string`                           | `undefined`                                | Class cho icon bên phải.                                  |
| `ignoreWidthInput100`                       | `boolean`                          | `undefined`                                | Không set width 100% cho input.                           |
| `isPassword`                                | `boolean`                          | `false`                                    | Nếu `true`, hiển thị icon ẩn/hiện mật khẩu.               |
| `item`                                      | `Record<string, any>`              | **(Model)** `{}`                           | Object chứa dữ liệu nhập liệu.                            |
| `keySelectedUnitRight`                      | `unknown`                          | `undefined`                                | Key của đơn vị được chọn mặc định bên phải.               |
| `labelConfig`                               | `ILabel`                           | `undefined`                                | Cấu hình label cho input.                                 |
| `maxLength`                                 | `number`                           | `20`                                       | Giới hạn độ dài tối đa của chuỗi nhập vào.                |
| `placeholder`                               | `string`                           | `undefined`                                | Văn bản gợi ý trong ô input.                              |
| `popoverContentIconRight`                   | `string`                           | `undefined`                                | Nội dung popover khi hover/click icon phải.               |
| `readonly`                                  | `boolean`                          | `false`                                    | Chế độ chỉ đọc.                                           |
| `resetAutoCompletePassword`                 | `boolean`                          | `undefined`                                | Tắt tính năng tự động điền mật khẩu của trình duyệt.      |
| `unitsRight`                                | `Array<Record<string, unknown>>`   | `undefined`                                | Danh sách các đơn vị hiển thị bên phải.                   |
| `validMinLength`                            | `IValidLength`                     | `defaultValidMinLength()`                  | Cấu hình thông báo khi không đủ độ dài tối thiểu.         |
| `validPattern`                              | `Array<IValidPattern>`             | `undefined`                                | Danh sách pattern validation tùy chỉnh.                   |
| `validRequired`                             | `IValidRequired`                   | `defaultValidRequired()`                   | Cấu hình thông báo khi trường bị bỏ trống.                |
| `zIndexPopoverOverlay`                      | `number`                           | `undefined`                                | Z-index của popover overlay.                              |

### Outputs

| Sự kiện               | Kiểu dữ liệu                      | Mô tả                                                     |
| :-------------------- | :-------------------------------- | :-------------------------------------------------------- |
| Sự kiện               | Kiểu dữ liệu                      | Mô tả                                                     |
| :-------------------- | :-------------------------------- | :-------------------------------------------------------- |
| `outClickIconRight`   | `void`                            | Phát ra khi click vào icon bên phải (thường là icon mắt). |
| `outFunctionsControl` | `IInputValidFunctionControlEvent` | Cung cấp phương thức điều khiển (`checkIsValid`).         |
| `outGeneratePassword` | `string`                          | Phát ra khi một mật khẩu ngẫu nhiên được tạo tự động.     |
| `outValueChange`      | `string \| number`                | Phát ra khi giá trị mật khẩu thay đổi.                    |

## Types & Interfaces

```typescript
export interface IConfig {
  length_max: number;
  length_min: number;
  uppercase: number;
  lowercase: number;
  symbol: number;
  number: number;
  key: string; // 'all' hoặc các giá trị khác để xác định mức độ ưu tiên
  value: string; // Số lượng quy tắc cần thỏa mãn nếu key không phải 'all'
}

export interface IValidStatus {
  upper?: boolean;
  number?: boolean;
  lower?: boolean;
  symbol?: boolean;
  length_max?: boolean;
  length_min?: boolean;
}

export interface IContentWhenHiddenOrShowPassword {
  show: string;
  hidden: string;
}
```

## Tech Stack

- **Framework**: Angular 18+
- **I18n**: `@ngx-translate/core`
- **Validation**: `@libs-ui/components-inputs-valid`
- **Styling**: Vanilla SCSS + Tailwind CSS class support

## License

MIT