@libs-ui/components-checkbox-single 0.2.356-42 → 0.2.356-43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,165 +1,462 @@
|
|
|
1
1
|
# @libs-ui/components-checkbox-single
|
|
2
2
|
|
|
3
|
-
> Component checkbox đơn lẻ với
|
|
3
|
+
> Component checkbox đơn lẻ với hỗ trợ nhãn, hình ảnh, avatar, popover, bullet và mô tả chi tiết cho Angular.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsCheckboxSingleComponent` là một
|
|
7
|
+
`LibsUiComponentsCheckboxSingleComponent` là một Standalone Angular component cung cấp giải pháp checkbox linh hoạt, vượt xa ô chọn thông thường. Component hỗ trợ hiển thị nhãn văn bản (có thể dịch i18n), tích hợp Popover khi di chuột, hiển thị hình ảnh hoặc Avatar cạnh ô chọn, bullet màu sắc để phân loại, và khu vực mô tả chi tiết bên dưới nhãn. Được xây dựng trên Angular Signals với `ChangeDetectionStrategy.OnPush`, đảm bảo hiệu năng tối ưu trong mọi tình huống sử dụng.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Two-way binding trạng thái `checked` qua Angular `model()`
|
|
12
|
+
- ✅ Hiển thị nhãn văn bản hỗ trợ i18n (TranslateModule)
|
|
10
13
|
- ✅ Tích hợp Popover (tooltip) khi di chuột vào nhãn
|
|
11
|
-
- ✅ Hiển thị hình ảnh hoặc Avatar cạnh checkbox
|
|
12
|
-
- ✅ Hỗ trợ
|
|
13
|
-
- ✅
|
|
14
|
-
- ✅
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
14
|
+
- ✅ Hiển thị hình ảnh hoặc Avatar cạnh ô checkbox
|
|
15
|
+
- ✅ Hỗ trợ icon class cạnh checkbox
|
|
16
|
+
- ✅ Bullet (chấm tròn màu) để phân loại trực quan
|
|
17
|
+
- ✅ Description (mô tả chi tiết HTML) dưới nhãn
|
|
18
|
+
- ✅ Chế độ `modeBorder` hiển thị viền bao quanh toàn component
|
|
19
|
+
- ✅ Trạng thái `disable`, `disableLabel`, `error`, `showBorderError`
|
|
20
|
+
- ✅ Trạng thái `stillOtherOptions` (indeterminate) cho checkbox nhóm
|
|
21
|
+
- ✅ `ignoreCheckbox` để ẩn ô chọn, chỉ hiển thị nhãn/ảnh
|
|
22
|
+
- ✅ Component Outlet tùy chỉnh nội dung qua `ngComponentOutlet`
|
|
23
|
+
- ✅ Hàm `revert()` trong sự kiện `outChange` để hoàn tác khi cần (ví dụ: API thất bại)
|
|
24
|
+
- ✅ Keyboard accessibility (Enter/Space)
|
|
25
|
+
|
|
26
|
+
## Khi nào sử dụng
|
|
27
|
+
|
|
28
|
+
- Cần một ô chọn (checkbox) đơn lẻ với nhãn văn bản rõ ràng
|
|
29
|
+
- Cần hiển thị thông tin bổ sung cạnh checkbox (ảnh đại diện, logo, icon phân loại)
|
|
30
|
+
- Cần giải thích chi tiết qua popover khi người dùng di chuột vào nhãn
|
|
31
|
+
- Dùng trong form cài đặt, lựa chọn cấu hình phức tạp nhiều trường
|
|
32
|
+
- Muốn hiển thị danh sách lựa chọn dạng checkbox có kèm hình ảnh minh họa
|
|
33
|
+
- Cần đánh dấu màu sắc phân loại (bullet) bên cạnh mỗi lựa chọn
|
|
17
34
|
|
|
18
35
|
## Cài đặt
|
|
19
36
|
|
|
20
37
|
```bash
|
|
21
|
-
# npm
|
|
22
38
|
npm install @libs-ui/components-checkbox-single
|
|
39
|
+
```
|
|
23
40
|
|
|
24
|
-
|
|
25
|
-
|
|
41
|
+
## Import
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import { LibsUiComponentsCheckboxSingleComponent } from '@libs-ui/components-checkbox-single';
|
|
45
|
+
|
|
46
|
+
// Interfaces & Types
|
|
47
|
+
import {
|
|
48
|
+
ICheckboxEvent,
|
|
49
|
+
ICheckboxBullet,
|
|
50
|
+
ICheckboxItemDescription,
|
|
51
|
+
ICheckboxChecked,
|
|
52
|
+
} from '@libs-ui/components-checkbox-single';
|
|
26
53
|
```
|
|
27
54
|
|
|
28
|
-
##
|
|
55
|
+
## Ví dụ sử dụng
|
|
29
56
|
|
|
30
|
-
###
|
|
57
|
+
### 1. Cơ bản — Checkbox với nhãn và two-way binding
|
|
31
58
|
|
|
32
59
|
```typescript
|
|
33
60
|
import { Component, signal } from '@angular/core';
|
|
34
61
|
import { LibsUiComponentsCheckboxSingleComponent, ICheckboxEvent } from '@libs-ui/components-checkbox-single';
|
|
35
62
|
|
|
36
63
|
@Component({
|
|
37
|
-
selector: 'app-example',
|
|
64
|
+
selector: 'app-basic-example',
|
|
38
65
|
standalone: true,
|
|
39
66
|
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
40
67
|
template: `
|
|
41
68
|
<libs_ui-components-checkbox-single
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
69
|
+
key="accept-terms"
|
|
70
|
+
[(checked)]="isAccepted"
|
|
71
|
+
label="Tôi đồng ý với điều khoản sử dụng"
|
|
72
|
+
(outChange)="handlerChange($event)"
|
|
73
|
+
/>
|
|
74
|
+
<p>Trạng thái: {{ isAccepted() ? 'Đã đồng ý' : 'Chưa đồng ý' }}</p>
|
|
45
75
|
`,
|
|
46
76
|
})
|
|
47
|
-
export class
|
|
48
|
-
|
|
77
|
+
export class BasicExampleComponent {
|
|
78
|
+
isAccepted = signal(false);
|
|
79
|
+
|
|
80
|
+
handlerChange(event: ICheckboxEvent): void {
|
|
81
|
+
event; // stopPropagation đã được xử lý bên trong component
|
|
82
|
+
console.log('key:', event.key, 'checked:', event.checked);
|
|
83
|
+
// Nếu cần hoàn tác (ví dụ: gọi API thất bại)
|
|
84
|
+
// event.revert();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 2. Checkbox với hình ảnh và Avatar
|
|
49
90
|
|
|
50
|
-
|
|
51
|
-
|
|
91
|
+
```typescript
|
|
92
|
+
import { Component, signal } from '@angular/core';
|
|
93
|
+
import { LibsUiComponentsCheckboxSingleComponent, ICheckboxEvent } from '@libs-ui/components-checkbox-single';
|
|
94
|
+
import { IAvatarConfig } from '@libs-ui/components-avatar';
|
|
95
|
+
|
|
96
|
+
@Component({
|
|
97
|
+
selector: 'app-image-example',
|
|
98
|
+
standalone: true,
|
|
99
|
+
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
100
|
+
template: `
|
|
101
|
+
<!-- Checkbox với hình ảnh -->
|
|
102
|
+
<libs_ui-components-checkbox-single
|
|
103
|
+
key="item-with-image"
|
|
104
|
+
[(checked)]="imageChecked"
|
|
105
|
+
label="Sản phẩm A"
|
|
106
|
+
linkImage="https://example.com/product-a.png"
|
|
107
|
+
linkImageError="https://example.com/placeholder.png"
|
|
108
|
+
classImageInclude="w-[32px] h-[32px] rounded-[4px]"
|
|
109
|
+
(outChange)="handlerChange($event)"
|
|
110
|
+
/>
|
|
111
|
+
|
|
112
|
+
<!-- Checkbox với Avatar -->
|
|
113
|
+
<libs_ui-components-checkbox-single
|
|
114
|
+
key="user-avatar"
|
|
115
|
+
[(checked)]="avatarChecked"
|
|
116
|
+
label="Nguyễn Văn An"
|
|
117
|
+
[avatarConfig]="userAvatarConfig"
|
|
118
|
+
(outChange)="handlerChange($event)"
|
|
119
|
+
/>
|
|
120
|
+
`,
|
|
121
|
+
})
|
|
122
|
+
export class ImageExampleComponent {
|
|
123
|
+
imageChecked = signal(false);
|
|
124
|
+
avatarChecked = signal(true);
|
|
125
|
+
|
|
126
|
+
readonly userAvatarConfig: IAvatarConfig = {
|
|
127
|
+
linkAvatar: 'https://i.pravatar.cc/150?u=nguyen-van-an',
|
|
128
|
+
linkAvatarError: 'https://i.pravatar.cc/150?u=fallback',
|
|
129
|
+
size: 32,
|
|
130
|
+
textAvatar: 'Nguyễn Văn An',
|
|
131
|
+
idGenColor: 'nguyen-van-an',
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
handlerChange(event: ICheckboxEvent): void {
|
|
135
|
+
event;
|
|
136
|
+
console.log('checked:', event.checked);
|
|
52
137
|
}
|
|
53
138
|
}
|
|
54
139
|
```
|
|
55
140
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
141
|
+
### 3. Checkbox với Popover và Description
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
import { Component, signal } from '@angular/core';
|
|
145
|
+
import { LibsUiComponentsCheckboxSingleComponent, ICheckboxEvent, ICheckboxItemDescription } from '@libs-ui/components-checkbox-single';
|
|
146
|
+
import { IPopover } from '@libs-ui/components-popover';
|
|
147
|
+
|
|
148
|
+
@Component({
|
|
149
|
+
selector: 'app-popover-example',
|
|
150
|
+
standalone: true,
|
|
151
|
+
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
152
|
+
template: `
|
|
153
|
+
<libs_ui-components-checkbox-single
|
|
154
|
+
key="advanced-option"
|
|
155
|
+
[(checked)]="advancedChecked"
|
|
156
|
+
label="Kích hoạt chế độ nâng cao"
|
|
157
|
+
[popover]="advancedPopover"
|
|
158
|
+
[description]="advancedDescription"
|
|
159
|
+
[modeBorder]="true"
|
|
160
|
+
(outChange)="handlerChange($event)"
|
|
161
|
+
/>
|
|
162
|
+
`,
|
|
163
|
+
})
|
|
164
|
+
export class PopoverExampleComponent {
|
|
165
|
+
advancedChecked = signal(false);
|
|
166
|
+
|
|
167
|
+
readonly advancedPopover: IPopover = {
|
|
168
|
+
dataView: 'Chế độ nâng cao cho phép cấu hình thêm nhiều tùy chọn chi tiết hơn.',
|
|
169
|
+
config: {
|
|
170
|
+
direction: 'right',
|
|
171
|
+
} as any,
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
readonly advancedDescription: ICheckboxItemDescription = {
|
|
175
|
+
content: 'Lưu ý: Chế độ này yêu cầu quyền <strong>Admin</strong> mới có thể sử dụng.',
|
|
176
|
+
classInclude: 'text-sm text-orange-500 mt-1 ml-6',
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
handlerChange(event: ICheckboxEvent): void {
|
|
180
|
+
event;
|
|
181
|
+
console.log('advanced mode:', event.checked);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### 4. Các trạng thái — Disable, Error, Indeterminate
|
|
187
|
+
|
|
188
|
+
```typescript
|
|
189
|
+
import { Component, signal } from '@angular/core';
|
|
190
|
+
import { LibsUiComponentsCheckboxSingleComponent } from '@libs-ui/components-checkbox-single';
|
|
191
|
+
|
|
192
|
+
@Component({
|
|
193
|
+
selector: 'app-states-example',
|
|
194
|
+
standalone: true,
|
|
195
|
+
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
196
|
+
template: `
|
|
197
|
+
<!-- Disabled (checked) -->
|
|
198
|
+
<libs_ui-components-checkbox-single
|
|
199
|
+
label="Tùy chọn bắt buộc (không thay đổi được)"
|
|
200
|
+
[checked]="true"
|
|
201
|
+
[disable]="true"
|
|
202
|
+
/>
|
|
203
|
+
|
|
204
|
+
<!-- Error state với viền đỏ -->
|
|
205
|
+
<libs_ui-components-checkbox-single
|
|
206
|
+
key="required-accept"
|
|
207
|
+
label="Bắt buộc phải đồng ý"
|
|
208
|
+
[error]="true"
|
|
209
|
+
[showBorderError]="true"
|
|
210
|
+
/>
|
|
211
|
+
|
|
212
|
+
<!-- Indeterminate — còn lựa chọn khác -->
|
|
213
|
+
<libs_ui-components-checkbox-single
|
|
214
|
+
label="Chọn tất cả (một phần đã chọn)"
|
|
215
|
+
[stillOtherOptions]="true"
|
|
216
|
+
/>
|
|
217
|
+
|
|
218
|
+
<!-- Ẩn ô checkbox, chỉ hiển thị nhãn -->
|
|
219
|
+
<libs_ui-components-checkbox-single
|
|
220
|
+
label="Chỉ hiển thị nhãn"
|
|
221
|
+
[ignoreCheckbox]="true"
|
|
222
|
+
/>
|
|
223
|
+
`,
|
|
224
|
+
})
|
|
225
|
+
export class StatesExampleComponent {}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
### 5. Checkbox với Bullet màu và modeBorder
|
|
229
|
+
|
|
230
|
+
```typescript
|
|
231
|
+
import { Component, signal } from '@angular/core';
|
|
232
|
+
import { LibsUiComponentsCheckboxSingleComponent, ICheckboxEvent, ICheckboxBullet } from '@libs-ui/components-checkbox-single';
|
|
233
|
+
|
|
234
|
+
@Component({
|
|
235
|
+
selector: 'app-bullet-example',
|
|
236
|
+
standalone: true,
|
|
237
|
+
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
238
|
+
template: `
|
|
239
|
+
<libs_ui-components-checkbox-single
|
|
240
|
+
key="status-active"
|
|
241
|
+
[(checked)]="activeChecked"
|
|
242
|
+
label="Hoạt động"
|
|
243
|
+
[bullet]="activeBullet"
|
|
244
|
+
[modeBorder]="true"
|
|
245
|
+
classInclude="mb-2"
|
|
246
|
+
(outChange)="handlerChange($event)"
|
|
247
|
+
/>
|
|
248
|
+
|
|
249
|
+
<libs_ui-components-checkbox-single
|
|
250
|
+
key="status-pending"
|
|
251
|
+
[(checked)]="pendingChecked"
|
|
252
|
+
label="Đang chờ"
|
|
253
|
+
[bullet]="pendingBullet"
|
|
254
|
+
[modeBorder]="true"
|
|
255
|
+
(outChange)="handlerChange($event)"
|
|
256
|
+
/>
|
|
257
|
+
`,
|
|
258
|
+
})
|
|
259
|
+
export class BulletExampleComponent {
|
|
260
|
+
activeChecked = signal(true);
|
|
261
|
+
pendingChecked = signal(false);
|
|
262
|
+
|
|
263
|
+
readonly activeBullet: ICheckboxBullet = {
|
|
264
|
+
backgroundColor: '#52c41a',
|
|
265
|
+
width: 8,
|
|
266
|
+
height: 8,
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
readonly pendingBullet: ICheckboxBullet = {
|
|
270
|
+
backgroundColor: '#faad14',
|
|
271
|
+
width: 8,
|
|
272
|
+
height: 8,
|
|
273
|
+
classInclude: 'rounded-full',
|
|
274
|
+
};
|
|
275
|
+
|
|
276
|
+
handlerChange(event: ICheckboxEvent): void {
|
|
277
|
+
event;
|
|
278
|
+
console.log('key:', event.key, 'checked:', event.checked);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
### 6. Revert trạng thái khi API thất bại
|
|
284
|
+
|
|
285
|
+
```typescript
|
|
286
|
+
import { Component, signal, inject } from '@angular/core';
|
|
287
|
+
import { LibsUiComponentsCheckboxSingleComponent, ICheckboxEvent } from '@libs-ui/components-checkbox-single';
|
|
288
|
+
import { catchError, of } from 'rxjs';
|
|
289
|
+
import { takeUntilDestroyed, DestroyRef } from '@angular/core/rxjs-interop';
|
|
290
|
+
|
|
291
|
+
@Component({
|
|
292
|
+
selector: 'app-revert-example',
|
|
293
|
+
standalone: true,
|
|
294
|
+
imports: [LibsUiComponentsCheckboxSingleComponent],
|
|
295
|
+
template: `
|
|
296
|
+
<libs_ui-components-checkbox-single
|
|
297
|
+
key="newsletter"
|
|
298
|
+
[(checked)]="newsletterEnabled"
|
|
299
|
+
label="Đăng ký nhận bản tin"
|
|
300
|
+
(outChange)="handlerToggleNewsletter($event)"
|
|
301
|
+
/>
|
|
302
|
+
`,
|
|
303
|
+
})
|
|
304
|
+
export class RevertExampleComponent {
|
|
305
|
+
private readonly destroyRef = inject(DestroyRef);
|
|
306
|
+
newsletterEnabled = signal(false);
|
|
307
|
+
|
|
308
|
+
handlerToggleNewsletter(event: ICheckboxEvent): void {
|
|
309
|
+
event;
|
|
310
|
+
// Gọi API cập nhật, nếu thất bại thì revert trạng thái checkbox
|
|
311
|
+
this.settingsService.updateNewsletter(event.checked)
|
|
312
|
+
.pipe(
|
|
313
|
+
catchError(() => {
|
|
314
|
+
event.revert(); // Hoàn tác về trạng thái trước
|
|
315
|
+
return of(null);
|
|
316
|
+
}),
|
|
317
|
+
takeUntilDestroyed(this.destroyRef),
|
|
318
|
+
)
|
|
319
|
+
.subscribe();
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
// Giả lập service (trong thực tế sẽ inject thật)
|
|
323
|
+
private readonly settingsService = {
|
|
324
|
+
updateNewsletter: (enabled: boolean) => of({ success: true }),
|
|
325
|
+
};
|
|
326
|
+
}
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
## @Input()
|
|
330
|
+
|
|
331
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
332
|
+
|---|---|---|---|---|
|
|
333
|
+
| `avatarConfig` | `IAvatarConfig` | `undefined` | Cấu hình Avatar hiển thị cạnh checkbox thay cho hình ảnh thông thường | `[avatarConfig]="{ linkAvatar: 'url', size: 32, textAvatar: 'AB' }"` |
|
|
334
|
+
| `bullet` | `ICheckboxBullet` | `undefined` | Chấm tròn màu sắc phân loại hiển thị cạnh checkbox | `[bullet]="{ backgroundColor: '#52c41a', width: 8, height: 8 }"` |
|
|
335
|
+
| `checked` | `boolean` | `false` | Trạng thái chọn — hỗ trợ two-way binding qua `model()` | `[(checked)]="isSelected"` |
|
|
336
|
+
| `classIconInclude` | `string` | `undefined` | Class CSS bổ sung cho thẻ `<i>` chứa icon checkbox | `classIconInclude="text-[20px]"` |
|
|
337
|
+
| `classImageInclude` | `string` | `undefined` | Class CSS bổ sung cho thẻ `<img>` | `classImageInclude="w-[32px] h-[32px] rounded"` |
|
|
338
|
+
| `classInclude` | `string` | `''` | Class CSS bổ sung cho container chính (wrapper) | `classInclude="mb-2 w-full"` |
|
|
339
|
+
| `classLabelInclude` | `string` | `'libs-ui-font-h5r'` | Class CSS cho phần nhãn văn bản — mặc định typography h5 regular | `classLabelInclude="libs-ui-font-h5m text-blue-600"` |
|
|
340
|
+
| `clickExactly` | `boolean` | `true` | Khi `true`, chỉ click vào icon checkbox hoặc nhãn mới đổi trạng thái. Khi `false`, click bất kỳ vị trí nào trong container đều trigger | `[clickExactly]="false"` |
|
|
341
|
+
| `componentOutlet` | `any` | `undefined` | Component tùy chỉnh render thông qua `ngComponentOutlet` bên trong checkbox | `[componentOutlet]="MyCustomBadge"` |
|
|
342
|
+
| `dataComponentOutlet` | `TYPE_COMPONENT_OUTLET_DATA` | `undefined` | Dữ liệu (inputs) truyền vào component được render qua `componentOutlet` | `[dataComponentOutlet]="{ status: 'active' }"` |
|
|
343
|
+
| `description` | `ICheckboxItemDescription` | `undefined` | Mô tả chi tiết hiển thị bên dưới nhãn, hỗ trợ nội dung HTML và i18n | `[description]="{ content: 'Ghi chú', classInclude: 'text-sm text-gray-500' }"` |
|
|
344
|
+
| `disable` | `boolean` | `undefined` | Vô hiệu hóa toàn bộ tương tác với component | `[disable]="true"` |
|
|
345
|
+
| `disableLabel` | `boolean` | `undefined` | Vô hiệu hóa chỉ phần nhãn (click nhãn không đổi trạng thái checkbox) | `[disableLabel]="true"` |
|
|
346
|
+
| `error` | `boolean` | `undefined` | Đánh dấu checkbox ở trạng thái lỗi (icon checkbox chuyển màu đỏ) | `[error]="hasError"` |
|
|
347
|
+
| `iconImageClass` | `string` | `undefined` | Class icon CSS (ví dụ: từ icon font) hiển thị cạnh checkbox thay cho `<img>` | `iconImageClass="libs-ui-icon-user"` |
|
|
348
|
+
| `ignoreCheckbox` | `boolean` | `undefined` | Ẩn ô chọn icon checkbox — chỉ hiển thị nhãn, ảnh và các thành phần khác | `[ignoreCheckbox]="true"` |
|
|
349
|
+
| `ignoreShowPopoverLabel` | `boolean` | `undefined` | Ẩn popover khi di chuột vào nhãn (override cấu hình popover) | `[ignoreShowPopoverLabel]="true"` |
|
|
350
|
+
| `imgTypeIcon` | `boolean` | `undefined` | Xác định hình ảnh truyền qua `linkImage` là dạng icon nhỏ (18x18px) | `[imgTypeIcon]="true"` |
|
|
351
|
+
| `key` | `string` | `undefined` | Khóa định danh duy nhất, được gửi kèm trong sự kiện `outChange` để phân biệt các checkbox | `key="accept-terms"` |
|
|
352
|
+
| `label` | `string` | `undefined` | Văn bản nhãn hiển thị cạnh checkbox, hỗ trợ i18n key | `label="Đồng ý điều khoản"` hoặc `label="i18n_key"` |
|
|
353
|
+
| `linkImage` | `string` | `undefined` | URL hình ảnh hiển thị cạnh checkbox — hỗ trợ two-way binding qua `model()` | `[(linkImage)]="productImageUrl"` |
|
|
354
|
+
| `linkImageError` | `string` | `undefined` | URL hình ảnh dự phòng khi `linkImage` bị lỗi tải | `linkImageError="assets/placeholder.png"` |
|
|
355
|
+
| `modeBorder` | `boolean` | `undefined` | Hiển thị viền bao quanh toàn bộ component, viền xanh khi đang chọn | `[modeBorder]="true"` |
|
|
356
|
+
| `popover` | `IPopover` | `undefined` | Cấu hình Popover (tooltip) hiển thị khi di chuột vào phần nhãn | `[popover]="{ dataView: 'Mô tả thêm', config: { direction: 'right' } }"` |
|
|
357
|
+
| `showBorderError` | `boolean` | `undefined` | Hiển thị viền màu đỏ bao quanh component khi `error` là `true` | `[showBorderError]="formSubmitted && !isAccepted()"` |
|
|
358
|
+
| `stillOtherOptions` | `boolean` | `undefined` | Hiển thị icon trạng thái indeterminate (một phần đã chọn) thay cho checked/unchecked | `[stillOtherOptions]="someSelected"` |
|
|
359
|
+
| `typeLabelPopover` | `TYPE_POPOVER_TYPE` | `'text'` | Kiểu nội dung của popover trên nhãn (`'text'` hoặc `'component'`) | `typeLabelPopover="text"` |
|
|
360
|
+
| `zIndexLabel` | `number` | `1200` | Giá trị `z-index` CSS cho phần nhãn và popover | `[zIndexLabel]="1500"` |
|
|
361
|
+
|
|
362
|
+
## @Output()
|
|
363
|
+
|
|
364
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
365
|
+
|---|---|---|---|---|
|
|
366
|
+
| `(outChange)` | `ICheckboxEvent` | Phát ra mỗi khi trạng thái `checked` thay đổi. Kèm theo `key`, `checked` và hàm `revert()` để hoàn tác nếu cần | `handlerChange(event: ICheckboxEvent): void { event; /* logic */ }` | `(outChange)="handlerChange($event)"` |
|
|
367
|
+
| `(outChangStageFlagMousePopover)` | `IFlagMouse` | Phát ra khi trạng thái chuột thay đổi trên vùng nhãn — dùng để đồng bộ trạng thái popover từ component cha | `handlerFlagMouse(event: IFlagMouse): void { event; /* logic */ }` | `(outChangStageFlagMousePopover)="handlerFlagMouse($event)"` |
|
|
368
|
+
| `(outClickLabel)` | `void` | Phát ra khi người dùng click trực tiếp vào nhãn văn bản | `handlerClickLabel(): void { /* logic */ }` | `(outClickLabel)="handlerClickLabel()"` |
|
|
369
|
+
| `(outEventPopover)` | `TYPE_POPOVER_EVENT` | Phát ra các sự kiện tương tác từ Popover (hover, click, close...) | `handlerEventPopover(event: TYPE_POPOVER_EVENT): void { event; /* logic */ }` | `(outEventPopover)="handlerEventPopover($event)"` |
|
|
370
|
+
|
|
371
|
+
## Types & Interfaces
|
|
372
|
+
|
|
373
|
+
```typescript
|
|
374
|
+
import {
|
|
375
|
+
ICheckboxEvent,
|
|
376
|
+
ICheckboxBullet,
|
|
377
|
+
ICheckboxItemDescription,
|
|
378
|
+
ICheckboxChecked,
|
|
379
|
+
} from '@libs-ui/components-checkbox-single';
|
|
380
|
+
```
|
|
101
381
|
|
|
102
382
|
### ICheckboxEvent
|
|
103
383
|
|
|
384
|
+
Sự kiện phát ra mỗi khi trạng thái checkbox thay đổi.
|
|
385
|
+
|
|
104
386
|
```typescript
|
|
105
387
|
interface ICheckboxEvent {
|
|
388
|
+
/** Khóa định danh của checkbox (từ input [key]) */
|
|
106
389
|
key: any;
|
|
390
|
+
/** Trạng thái chọn sau khi thay đổi */
|
|
107
391
|
checked: boolean;
|
|
392
|
+
/** Danh sách các checkbox đang được chọn — dùng khi kết hợp với checkbox group */
|
|
108
393
|
allCheckboxChecked?: Array<ICheckboxChecked>;
|
|
394
|
+
/** Hàm callback để hoàn tác trạng thái về trước — ví dụ khi gọi API thất bại */
|
|
109
395
|
revert: () => void;
|
|
110
396
|
}
|
|
111
397
|
```
|
|
112
398
|
|
|
113
|
-
### ICheckboxItemDescription
|
|
114
|
-
|
|
115
|
-
```typescript
|
|
116
|
-
interface ICheckboxItemDescription {
|
|
117
|
-
content: string; // Nội dung mô tả (Hỗ trợ HTML)
|
|
118
|
-
classInclude: string; // Class CSS bổ sung
|
|
119
|
-
}
|
|
120
|
-
```
|
|
121
|
-
|
|
122
399
|
### ICheckboxBullet
|
|
123
400
|
|
|
401
|
+
Cấu hình chấm tròn màu sắc (bullet) hiển thị cạnh checkbox.
|
|
402
|
+
|
|
124
403
|
```typescript
|
|
125
404
|
interface ICheckboxBullet {
|
|
405
|
+
/** Class CSS bổ sung (ví dụ: 'rounded-full') */
|
|
126
406
|
classInclude?: string;
|
|
407
|
+
/** Màu nền của bullet — bất kỳ giá trị CSS color hợp lệ */
|
|
127
408
|
backgroundColor: string;
|
|
409
|
+
/** Chiều rộng tính bằng pixel */
|
|
128
410
|
width: number;
|
|
411
|
+
/** Chiều cao tính bằng pixel */
|
|
129
412
|
height: number;
|
|
130
413
|
}
|
|
131
414
|
```
|
|
132
415
|
|
|
133
|
-
|
|
416
|
+
### ICheckboxItemDescription
|
|
134
417
|
|
|
135
|
-
|
|
136
|
-
- **Angular Signals & Model** - Modern reactive state management
|
|
137
|
-
- **NG-Zorro Style Integration** - Tuân thủ phong cách thiết kế chuyên nghiệp
|
|
418
|
+
Cấu hình phần mô tả chi tiết hiển thị bên dưới nhãn.
|
|
138
419
|
|
|
139
|
-
|
|
420
|
+
```typescript
|
|
421
|
+
interface ICheckboxItemDescription {
|
|
422
|
+
/** Nội dung mô tả — hỗ trợ HTML và i18n key */
|
|
423
|
+
content: string;
|
|
424
|
+
/** Class CSS bổ sung cho thẻ wrapper của mô tả */
|
|
425
|
+
classInclude: string;
|
|
426
|
+
}
|
|
427
|
+
```
|
|
140
428
|
|
|
141
|
-
|
|
429
|
+
### ICheckboxChecked
|
|
142
430
|
|
|
143
|
-
|
|
144
|
-
|
|
431
|
+
Thông tin một checkbox đang được chọn trong context nhóm.
|
|
432
|
+
|
|
433
|
+
```typescript
|
|
434
|
+
interface ICheckboxChecked {
|
|
435
|
+
/** Khóa định danh */
|
|
436
|
+
key: string;
|
|
437
|
+
/** Dữ liệu item liên quan */
|
|
438
|
+
item: any;
|
|
439
|
+
}
|
|
145
440
|
```
|
|
146
441
|
|
|
147
|
-
|
|
442
|
+
## Lưu ý quan trọng
|
|
148
443
|
|
|
149
|
-
|
|
444
|
+
⚠️ **Hàm `revert()` trong `outChange`**: Luôn lưu tham chiếu `event` trước khi gọi API bất đồng bộ. Gọi `event.revert()` trong khối `catchError` để hoàn tác trạng thái checkbox về trước nếu thao tác thất bại — tránh sai lệch giữa UI và server.
|
|
150
445
|
|
|
151
|
-
|
|
152
|
-
- 🖼️ **Image & Avatar**: Kết hợp checkbox với hình ảnh minh họa.
|
|
153
|
-
- 💡 **Popover & Description**: Hiển thị thông tin chi tiết khi tương tác.
|
|
154
|
-
- 🛠️ **Interactive Demo**: Thử nghiệm các flag `disable`, `error`, `ignoreCheckbox`.
|
|
446
|
+
⚠️ **`clickExactly` mặc định là `true`**: Mặc định chỉ click vào icon checkbox hoặc nhãn mới trigger thay đổi. Nếu muốn toàn bộ area (card, row) có thể click, đặt `[clickExactly]="false"`.
|
|
155
447
|
|
|
156
|
-
|
|
448
|
+
⚠️ **`description.content` hỗ trợ HTML**: Nội dung trong `ICheckboxItemDescription.content` được render qua `[innerHtml]` và đã qua `escapeHtml` bảo mật tự động. Truyền chuỗi HTML bình thường, không cần escape thủ công.
|
|
449
|
+
|
|
450
|
+
⚠️ **`label` hỗ trợ i18n**: Giá trị `label` được pipe qua `translate` tự động. Có thể truyền i18n key (`label="i18n_accept_terms"`) hoặc chuỗi trực tiếp.
|
|
451
|
+
|
|
452
|
+
⚠️ **`modeBorder` và trạng thái**: Khi `modeBorder="true"`, component hiển thị viền xám khi chưa chọn và viền màu primary khi đã chọn — phù hợp cho danh sách lựa chọn dạng card.
|
|
453
|
+
|
|
454
|
+
⚠️ **`stillOtherOptions` vs `checked`**: Hai trạng thái này độc lập. `stillOtherOptions` hiển thị icon indeterminate thay cho cả checked và unchecked icon — dùng để biểu thị "một phần đã chọn" trong nhóm checkbox.
|
|
455
|
+
|
|
456
|
+
## Demo
|
|
157
457
|
|
|
158
458
|
```bash
|
|
159
|
-
|
|
160
|
-
npx nx test components-checkbox-single
|
|
459
|
+
npx nx serve core-ui
|
|
161
460
|
```
|
|
162
461
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
MIT
|
|
462
|
+
Truy cập: http://localhost:4500/components/checkbox/single
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgComponentOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { computed, input, model, output,
|
|
3
|
+
import { computed, input, model, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
|
|
5
5
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
6
6
|
import { escapeHtml } from '@libs-ui/utils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-checkbox-single.mjs","sources":["../../../../../../libs-ui/components/checkbox/single/src/checkbox-single.component.ts","../../../../../../libs-ui/components/checkbox/single/src/checkbox-single.component.html","../../../../../../libs-ui/components/checkbox/single/src/libs-ui-components-checkbox-single.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NgComponentOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { IAvatarConfig, LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\nimport { LibsUiComponentsComponentOutletComponent, TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';\nimport { IFlagMouse, IPopover, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT, TYPE_POPOVER_TYPE } from '@libs-ui/components-popover';\nimport { escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { ICheckboxBullet, ICheckboxEvent, ICheckboxItemDescription } from './interfaces';\n\n/**\n * Checkbox Single Component - Một checkbox đơn lẻ với nhiều tùy chọn hiển thị (nhãn, ảnh, avatar, popover, description).\n *\n * @description\n * Hỗ trợ nhiều tính năng nâng cao như hiển thị hình ảnh/avatar cạnh checkbox,\n * tích hợp popover khi di chuột vào nhãn, và hiển thị phần mô tả chi tiết.\n *\n * @example\n * ```html\n * <libs_ui-components-checkbox-single\n * [(checked)]=\"isSelected\"\n * label=\"Đồng ý điều khoản\"\n * (outChange)=\"onStatusChange($event)\"\n * />\n * ```\n *\n * @publicApi\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-checkbox-single',\n templateUrl: './checkbox-single.component.html',\n styleUrls: ['./checkbox-single.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, NgComponentOutlet, LibsUiComponentsAvatarComponent, LibsUiComponentsPopoverComponent],\n})\nexport class LibsUiComponentsCheckboxSingleComponent {\n // #region PROPERTY\n protected descriptionComputed = computed(() => escapeHtml(this.description()?.content || ''));\n protected dataComponentOutletComputed = computed(() => {\n if (!this.componentOutlet()) {\n return undefined;\n }\n return {\n component: this.componentOutlet(),\n inputs: this.dataComponentOutlet() || {},\n };\n });\n\n // #region INPUT\n /** Khóa định danh cho checkbox */\n readonly key = input<string>();\n /** Trạng thái chọn của checkbox (Two-way binding) */\n readonly checked = model<boolean>(false);\n /** Nhãn hiển thị bên cạnh checkbox */\n readonly label = input<string>();\n /** Class CSS bổ sung cho nhãn */\n readonly classLabelInclude = input<string | undefined, string | undefined>('libs-ui-font-h5r', { transform: (value) => value ?? 'libs-ui-font-h5r' });\n /** Ẩn popover khi di chuột vào nhãn */\n readonly ignoreShowPopoverLabel = input<boolean>();\n /** Loại popover hiển thị trên nhãn */\n readonly typeLabelPopover = input<TYPE_POPOVER_TYPE, TYPE_POPOVER_TYPE>('text', { transform: (value) => value ?? 'text' });\n /** Cấu hình popover chi tiết */\n readonly popover = input<IPopover>();\n /** Đường dẫn hình ảnh hiển thị cạnh checkbox */\n readonly linkImage = model<string>();\n /** Hình ảnh hiển thị dự phòng khi lỗi */\n readonly linkImageError = input<string>();\n /** Cấu hình Avatar (nếu dùng thay cho hình ảnh) */\n readonly avatarConfig = input<IAvatarConfig>();\n /** Class CSS bổ sung cho phần hình ảnh */\n readonly classImageInclude = input<string>();\n /** Đánh dấu hình ảnh là dạng icon */\n readonly imgTypeIcon = input<boolean>();\n /** Cấu hình bullet (chấm tròn màu) bên cạnh checkbox */\n readonly bullet = input<ICheckboxBullet>();\n /** Class CSS bổ sung cho container chính */\n readonly classInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n /** Chỉ xử lý thay đổi khi click chính xác vào checkbox hoặc nhãn */\n readonly clickExactly = input<boolean | undefined, boolean | undefined>(true, { transform: (value) => value ?? true });\n /** Trạng thái vô hiệu hóa toàn bộ component */\n readonly disable = input<boolean>();\n /** Trạng thái vô hiệu hóa nhãn (không cho click nhãn để đổi trạng thái) */\n readonly disableLabel = input<boolean>();\n /** Ẩn ô checkbox, chỉ hiển thị nhãn/ảnh */\n readonly ignoreCheckbox = input<boolean>();\n /** Độ ưu tiên hiển thị (z-index) của nhãn/popover */\n readonly zIndexLabel = input<number | undefined, number | undefined>(1200, { transform: (value) => value ?? 1200 });\n /** Hiển thị trạng thái \"còn các lựa chọn khác\" */\n readonly stillOtherOptions = input<boolean>();\n /** Trạng thái lỗi */\n readonly error = input<boolean>();\n /** Hiển thị viền đỏ khi có lỗi */\n readonly showBorderError = input<boolean>();\n /** Phần mô tả chi tiết phía dưới nhãn */\n readonly description = input<ICheckboxItemDescription>();\n /** Class icon hiển thị (thay cho image/avatar) */\n readonly iconImageClass = input<string>();\n /** Class CSS cho icon */\n readonly classIconInclude = input<string>();\n /** Hiển thị viền bao quanh toàn bộ component */\n readonly modeBorder = input<boolean>();\n\n /** Dữ liệu truyền vào Component Outlet */\n readonly dataComponentOutlet = input<TYPE_COMPONENT_OUTLET_DATA>();\n /** Component tùy chỉnh hiển thị thông qua outlet */\n readonly componentOutlet = input<LibsUiComponentsComponentOutletComponent | any>();\n\n // #region OUTPUT\n /** Phát ra khi trạng thái checkbox thay đổi */\n readonly outChange = output<ICheckboxEvent>();\n /** Phát các sự kiện từ popover nhãn */\n readonly outEventPopover = output<TYPE_POPOVER_EVENT>();\n /** Phát khi người dùng click vào nhãn */\n readonly outClickLabel = output<void>();\n /** Phát trạng thái chuột trên nhãn để điều khiển popover */\n readonly outChangStageFlagMousePopover = output<IFlagMouse>();\n\n /* FUNCTIONS */\n protected async handlerErrorImage(event: Event) {\n event.stopPropagation();\n this.linkImage.set(this.linkImageError());\n }\n\n protected async handlerClickRelatively(event?: Event) {\n if (this.clickExactly()) {\n return;\n }\n event?.stopPropagation();\n this.handlerChange(event);\n }\n\n protected async handlerChange(event?: Event) {\n event?.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.checked.update((checked) => !checked);\n this.outChange.emit({ key: this.key(), checked: this.checked(), revert: () => this.checked.update((checked) => !checked) });\n }\n\n protected async handlerEventLabel(event: string) {\n if (event === 'click') {\n this.outClickLabel.emit();\n this.handlerChange();\n }\n }\n\n protected async handlerEventPopover(event: TYPE_POPOVER_EVENT) {\n this.outEventPopover.emit(event);\n }\n\n protected async handlerChangStageFlagMouse(event: IFlagMouse) {\n this.outChangStageFlagMousePopover.emit(event);\n }\n}\n","<div\n class=\"libs-ui-checkbox {{ classInclude() || '' }}\"\n tabindex=\"0\"\n [class.cursor-pointer]=\"!clickExactly() && !disable()\"\n [class.p-[8px]]=\"modeBorder()\"\n [class.rounded-[4px]]=\"modeBorder()\"\n [class.libs-ui-border-general]=\"modeBorder() && !checked()\"\n [class.libs-ui-border-primary-general]=\"modeBorder() && checked()\"\n (click)=\"handlerClickRelatively($event)\"\n (keydown.enter)=\"handlerClickRelatively($any($event))\"\n (keydown.space)=\"handlerClickRelatively($any($event))\">\n @if (!ignoreCheckbox()) {\n <i\n class=\"{{ classIconInclude() || '' }}\"\n tabindex=\"0\"\n [class.libs-ui-icon-checkbox-unselected]=\"!checked() && !stillOtherOptions()\"\n [class.libs-ui-icon-checkbox-selected]=\"checked() && !stillOtherOptions()\"\n [class.libs-ui-icon-checkbox-indeterminate]=\"stillOtherOptions()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n [class.libs-ui-disable-active]=\"disable() && (checked() || stillOtherOptions())\"\n [class.libs-ui-text-error]=\"showBorderError() || error()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"></i>\n }\n @if (linkImage()) {\n <img\n [src]=\"linkImage()\"\n class=\"libs-ui-checkbox-image {{ classImageInclude() || '' }}\"\n alt=\"\"\n tabindex=\"0\"\n [class.cursor-default]=\"disable()\"\n [class.w-[18px]]=\"imgTypeIcon()\"\n [class.h-[18px]]=\"imgTypeIcon()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"\n (error)=\"handlerErrorImage($event)\" />\n }\n @if (avatarConfig(); as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape\"\n [classInclude]=\"avatarConfig.classInclude\"\n [size]=\"avatarConfig.size || 24\"\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [textAvatar]=\"avatarConfig.textAvatar\" />\n }\n @if (!linkImage() && iconImageClass()) {\n <div\n [class]=\"iconImageClass()\"\n [class.cursor-default]=\"disable()\"></div>\n }\n @if (bullet(); as bullet) {\n <div\n class=\"libs-ui-checkbox-bullet {{ bullet.classInclude || '' }}\"\n tabindex=\"0\"\n [style.background-color]=\"bullet.backgroundColor\"\n [style.width.px]=\"bullet.width\"\n [style.height.px]=\"bullet.height\"\n [class.cursor-default]=\"disable()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"></div>\n }\n @if (label(); as label) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"typeLabelPopover() || 'text'\"\n [attr.isLabel]=\"true\"\n [classInclude]=\"classLabelInclude() + (disable() ? ' cursor-default' : '')\"\n [class.libs-ui-disable]=\"disableLabel()\"\n [ignoreShowPopover]=\"ignoreShowPopoverLabel()\"\n [config]=\"{ content: label, timerDestroy: 50, zIndex: zIndexLabel() }\"\n [ignoreCursorPointerModeLikeClick]=\"disableLabel() || disable()\"\n [innerHTML]=\"label | translate\"\n (outEvent)=\"handlerEventLabel($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></div>\n }\n @if (popover(); as popover) {\n <libs_ui-components-popover\n class=\"flex\"\n [config]=\"popover.config\"\n (outEvent)=\"handlerEventPopover($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\">\n @if (!popover.dataView) {\n <i [class]=\"popover.classInclude ?? 'libs-ui-icon-tooltip-outline'\"></i>\n }\n @if (popover.dataView) {\n <div [innerHtml]=\"popover.dataView | translate\"></div>\n }\n </libs_ui-components-popover>\n }\n @if (dataComponentOutletComputed(); as dataComponentOutletComputed) {\n <ng-container *ngComponentOutlet=\"dataComponentOutletComputed.component; inputs: dataComponentOutletComputed.inputs\" />\n }\n</div>\n@if (description(); as description) {\n <div\n [class]=\"description.classInclude\"\n [innerHtml]=\"descriptionComputed() | translate\"></div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"libs-ui-components-checkbox-single.mjs","sources":["../../../../../../libs-ui/components/checkbox/single/src/checkbox-single.component.ts","../../../../../../libs-ui/components/checkbox/single/src/checkbox-single.component.html","../../../../../../libs-ui/components/checkbox/single/src/libs-ui-components-checkbox-single.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NgComponentOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { IAvatarConfig, LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\nimport { LibsUiComponentsComponentOutletComponent, TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';\nimport { IFlagMouse, IPopover, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT, TYPE_POPOVER_TYPE } from '@libs-ui/components-popover';\nimport { escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { ICheckboxBullet, ICheckboxEvent, ICheckboxItemDescription } from './interfaces';\n\n/**\n * Checkbox Single Component - Một checkbox đơn lẻ với nhiều tùy chọn hiển thị (nhãn, ảnh, avatar, popover, description).\n *\n * @description\n * Hỗ trợ nhiều tính năng nâng cao như hiển thị hình ảnh/avatar cạnh checkbox,\n * tích hợp popover khi di chuột vào nhãn, và hiển thị phần mô tả chi tiết.\n *\n * @example\n * ```html\n * <libs_ui-components-checkbox-single\n * [(checked)]=\"isSelected\"\n * label=\"Đồng ý điều khoản\"\n * (outChange)=\"onStatusChange($event)\"\n * />\n * ```\n *\n * @publicApi\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-checkbox-single',\n templateUrl: './checkbox-single.component.html',\n styleUrls: ['./checkbox-single.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, NgComponentOutlet, LibsUiComponentsAvatarComponent, LibsUiComponentsPopoverComponent],\n})\nexport class LibsUiComponentsCheckboxSingleComponent {\n // #region PROPERTY\n protected descriptionComputed = computed(() => escapeHtml(this.description()?.content || ''));\n protected dataComponentOutletComputed = computed(() => {\n if (!this.componentOutlet()) {\n return undefined;\n }\n return {\n component: this.componentOutlet(),\n inputs: this.dataComponentOutlet() || {},\n };\n });\n\n // #region INPUT\n /** Khóa định danh cho checkbox */\n readonly key = input<string>();\n /** Trạng thái chọn của checkbox (Two-way binding) */\n readonly checked = model<boolean>(false);\n /** Nhãn hiển thị bên cạnh checkbox */\n readonly label = input<string>();\n /** Class CSS bổ sung cho nhãn */\n readonly classLabelInclude = input<string | undefined, string | undefined>('libs-ui-font-h5r', { transform: (value) => value ?? 'libs-ui-font-h5r' });\n /** Ẩn popover khi di chuột vào nhãn */\n readonly ignoreShowPopoverLabel = input<boolean>();\n /** Loại popover hiển thị trên nhãn */\n readonly typeLabelPopover = input<TYPE_POPOVER_TYPE, TYPE_POPOVER_TYPE>('text', { transform: (value) => value ?? 'text' });\n /** Cấu hình popover chi tiết */\n readonly popover = input<IPopover>();\n /** Đường dẫn hình ảnh hiển thị cạnh checkbox */\n readonly linkImage = model<string>();\n /** Hình ảnh hiển thị dự phòng khi lỗi */\n readonly linkImageError = input<string>();\n /** Cấu hình Avatar (nếu dùng thay cho hình ảnh) */\n readonly avatarConfig = input<IAvatarConfig>();\n /** Class CSS bổ sung cho phần hình ảnh */\n readonly classImageInclude = input<string>();\n /** Đánh dấu hình ảnh là dạng icon */\n readonly imgTypeIcon = input<boolean>();\n /** Cấu hình bullet (chấm tròn màu) bên cạnh checkbox */\n readonly bullet = input<ICheckboxBullet>();\n /** Class CSS bổ sung cho container chính */\n readonly classInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n /** Chỉ xử lý thay đổi khi click chính xác vào checkbox hoặc nhãn */\n readonly clickExactly = input<boolean | undefined, boolean | undefined>(true, { transform: (value) => value ?? true });\n /** Trạng thái vô hiệu hóa toàn bộ component */\n readonly disable = input<boolean>();\n /** Trạng thái vô hiệu hóa nhãn (không cho click nhãn để đổi trạng thái) */\n readonly disableLabel = input<boolean>();\n /** Ẩn ô checkbox, chỉ hiển thị nhãn/ảnh */\n readonly ignoreCheckbox = input<boolean>();\n /** Độ ưu tiên hiển thị (z-index) của nhãn/popover */\n readonly zIndexLabel = input<number | undefined, number | undefined>(1200, { transform: (value) => value ?? 1200 });\n /** Hiển thị trạng thái \"còn các lựa chọn khác\" */\n readonly stillOtherOptions = input<boolean>();\n /** Trạng thái lỗi */\n readonly error = input<boolean>();\n /** Hiển thị viền đỏ khi có lỗi */\n readonly showBorderError = input<boolean>();\n /** Phần mô tả chi tiết phía dưới nhãn */\n readonly description = input<ICheckboxItemDescription>();\n /** Class icon hiển thị (thay cho image/avatar) */\n readonly iconImageClass = input<string>();\n /** Class CSS cho icon */\n readonly classIconInclude = input<string>();\n /** Hiển thị viền bao quanh toàn bộ component */\n readonly modeBorder = input<boolean>();\n\n /** Dữ liệu truyền vào Component Outlet */\n readonly dataComponentOutlet = input<TYPE_COMPONENT_OUTLET_DATA>();\n /** Component tùy chỉnh hiển thị thông qua outlet */\n readonly componentOutlet = input<LibsUiComponentsComponentOutletComponent | any>();\n\n // #region OUTPUT\n /** Phát ra khi trạng thái checkbox thay đổi */\n readonly outChange = output<ICheckboxEvent>();\n /** Phát các sự kiện từ popover nhãn */\n readonly outEventPopover = output<TYPE_POPOVER_EVENT>();\n /** Phát khi người dùng click vào nhãn */\n readonly outClickLabel = output<void>();\n /** Phát trạng thái chuột trên nhãn để điều khiển popover */\n readonly outChangStageFlagMousePopover = output<IFlagMouse>();\n\n /* FUNCTIONS */\n protected async handlerErrorImage(event: Event) {\n event.stopPropagation();\n this.linkImage.set(this.linkImageError());\n }\n\n protected async handlerClickRelatively(event?: Event) {\n if (this.clickExactly()) {\n return;\n }\n event?.stopPropagation();\n this.handlerChange(event);\n }\n\n protected async handlerChange(event?: Event) {\n event?.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.checked.update((checked) => !checked);\n this.outChange.emit({ key: this.key(), checked: this.checked(), revert: () => this.checked.update((checked) => !checked) });\n }\n\n protected async handlerEventLabel(event: string) {\n if (event === 'click') {\n this.outClickLabel.emit();\n this.handlerChange();\n }\n }\n\n protected async handlerEventPopover(event: TYPE_POPOVER_EVENT) {\n this.outEventPopover.emit(event);\n }\n\n protected async handlerChangStageFlagMouse(event: IFlagMouse) {\n this.outChangStageFlagMousePopover.emit(event);\n }\n}\n","<div\n class=\"libs-ui-checkbox {{ classInclude() || '' }}\"\n tabindex=\"0\"\n [class.cursor-pointer]=\"!clickExactly() && !disable()\"\n [class.p-[8px]]=\"modeBorder()\"\n [class.rounded-[4px]]=\"modeBorder()\"\n [class.libs-ui-border-general]=\"modeBorder() && !checked()\"\n [class.libs-ui-border-primary-general]=\"modeBorder() && checked()\"\n (click)=\"handlerClickRelatively($event)\"\n (keydown.enter)=\"handlerClickRelatively($any($event))\"\n (keydown.space)=\"handlerClickRelatively($any($event))\">\n @if (!ignoreCheckbox()) {\n <i\n class=\"{{ classIconInclude() || '' }}\"\n tabindex=\"0\"\n [class.libs-ui-icon-checkbox-unselected]=\"!checked() && !stillOtherOptions()\"\n [class.libs-ui-icon-checkbox-selected]=\"checked() && !stillOtherOptions()\"\n [class.libs-ui-icon-checkbox-indeterminate]=\"stillOtherOptions()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n [class.libs-ui-disable-active]=\"disable() && (checked() || stillOtherOptions())\"\n [class.libs-ui-text-error]=\"showBorderError() || error()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"></i>\n }\n @if (linkImage()) {\n <img\n [src]=\"linkImage()\"\n class=\"libs-ui-checkbox-image {{ classImageInclude() || '' }}\"\n alt=\"\"\n tabindex=\"0\"\n [class.cursor-default]=\"disable()\"\n [class.w-[18px]]=\"imgTypeIcon()\"\n [class.h-[18px]]=\"imgTypeIcon()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"\n (error)=\"handlerErrorImage($event)\" />\n }\n @if (avatarConfig(); as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape\"\n [classInclude]=\"avatarConfig.classInclude\"\n [size]=\"avatarConfig.size || 24\"\n [linkAvatar]=\"avatarConfig.linkAvatar\"\n [linkAvatarError]=\"avatarConfig.linkAvatarError\"\n [idGenColor]=\"avatarConfig.idGenColor\"\n [textAvatar]=\"avatarConfig.textAvatar\" />\n }\n @if (!linkImage() && iconImageClass()) {\n <div\n [class]=\"iconImageClass()\"\n [class.cursor-default]=\"disable()\"></div>\n }\n @if (bullet(); as bullet) {\n <div\n class=\"libs-ui-checkbox-bullet {{ bullet.classInclude || '' }}\"\n tabindex=\"0\"\n [style.background-color]=\"bullet.backgroundColor\"\n [style.width.px]=\"bullet.width\"\n [style.height.px]=\"bullet.height\"\n [class.cursor-default]=\"disable()\"\n (click)=\"handlerChange($event)\"\n (keydown.enter)=\"handlerChange($any($event))\"\n (keydown.space)=\"handlerChange($any($event))\"></div>\n }\n @if (label(); as label) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"typeLabelPopover() || 'text'\"\n [attr.isLabel]=\"true\"\n [classInclude]=\"classLabelInclude() + (disable() ? ' cursor-default' : '')\"\n [class.libs-ui-disable]=\"disableLabel()\"\n [ignoreShowPopover]=\"ignoreShowPopoverLabel()\"\n [config]=\"{ content: label, timerDestroy: 50, zIndex: zIndexLabel() }\"\n [ignoreCursorPointerModeLikeClick]=\"disableLabel() || disable()\"\n [innerHTML]=\"label | translate\"\n (outEvent)=\"handlerEventLabel($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></div>\n }\n @if (popover(); as popover) {\n <libs_ui-components-popover\n class=\"flex\"\n [config]=\"popover.config\"\n (outEvent)=\"handlerEventPopover($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\">\n @if (!popover.dataView) {\n <i [class]=\"popover.classInclude ?? 'libs-ui-icon-tooltip-outline'\"></i>\n }\n @if (popover.dataView) {\n <div [innerHtml]=\"popover.dataView | translate\"></div>\n }\n </libs_ui-components-popover>\n }\n @if (dataComponentOutletComputed(); as dataComponentOutletComputed) {\n <ng-container *ngComponentOutlet=\"dataComponentOutletComputed.component; inputs: dataComponentOutletComputed.inputs\" />\n }\n</div>\n@if (description(); as description) {\n <div\n [class]=\"description.classInclude\"\n [innerHtml]=\"descriptionComputed() | translate\"></div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-checkbox-single",
|
|
3
|
-
"version": "0.2.356-
|
|
3
|
+
"version": "0.2.356-43",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-avatar": "0.2.356-
|
|
7
|
-
"@libs-ui/components-popover": "0.2.356-
|
|
8
|
-
"@libs-ui/utils": "0.2.356-
|
|
6
|
+
"@libs-ui/components-avatar": "0.2.356-43",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
8
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0",
|
|
10
10
|
"@angular/common": "~18.2.0",
|
|
11
|
-
"@libs-ui/components-component-outlet": "0.2.356-
|
|
11
|
+
"@libs-ui/components-component-outlet": "0.2.356-43"
|
|
12
12
|
},
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"module": "fesm2022/libs-ui-components-checkbox-single.mjs",
|