@libs-ui/components-label 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,114 +1,347 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-label
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component nhãn đa năng hỗ trợ tooltip, toggle switch, nút thao tác, bộ đếm ký tự và văn bản mô tả — dùng làm header cho các trường nhập liệu trong form.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
- 🛠️ **Cấu hình phong phú**:
|
|
9
|
-
- Hỗ trợ văn bản bên trái (`labelLeft`) và bên phải (`labelRight`).
|
|
10
|
-
- Đánh dấu bắt buộc (`required`).
|
|
11
|
-
- Hỗ trợ Tooltip (`popover`) với biểu tượng tùy chỉnh.
|
|
12
|
-
- Tích hợp công tắc (`hasToggle`).
|
|
13
|
-
- 🔘 **Điều khiển linh hoạt**:
|
|
14
|
-
- Cho phép thêm mảng các nút bấm (`IButton`) vào bên trái, bên phải hoặc trong phần mô tả.
|
|
15
|
-
- Xử lý các sự kiện click nút và chuyển đổi trạng thái công tắc.
|
|
16
|
-
- 📝 **Mô tả & Đếm số**:
|
|
17
|
-
- Hiển thị văn bản mô tả phụ bên dưới nhãn chính.
|
|
18
|
-
- Tích hợp bộ đếm ký tự (`count` và `limitLength`) thường dùng cho các ô nhập liệu.
|
|
7
|
+
`@libs-ui/components-label` là component nhãn (label) linh hoạt dùng để trang trí tiêu đề cho các ô nhập liệu, form field hoặc nhóm nội dung. Nó hỗ trợ hiển thị nhãn trái/phải, đánh dấu bắt buộc (dấu sao đỏ), tooltip hướng dẫn, tích hợp toggle switch, thêm nút thao tác nhanh (trái/phải/mô tả), và bộ đếm ký tự theo giới hạn. Toàn bộ văn bản hỗ trợ đa ngôn ngữ qua `TranslateModule`.
|
|
19
8
|
|
|
20
|
-
##
|
|
9
|
+
## Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Hiển thị nhãn bên trái (`labelLeft`) và nhãn bên phải (`labelRight`) đồng thời
|
|
12
|
+
- ✅ Đánh dấu trường bắt buộc bằng dấu sao đỏ (`required`)
|
|
13
|
+
- ✅ Tooltip hướng dẫn tích hợp sẵn qua `popover` với icon tùy chỉnh
|
|
14
|
+
- ✅ Tích hợp Toggle Switch (`hasToggle`) với vị trí linh hoạt (trước hoặc sau nhãn)
|
|
15
|
+
- ✅ Thêm mảng nút bấm (`IButton[]`) ở vùng trái, phải hoặc vùng mô tả
|
|
16
|
+
- ✅ Văn bản mô tả phụ (`description`) hiển thị bên dưới nhãn chính
|
|
17
|
+
- ✅ Bộ đếm ký tự (`count` / `limitLength`) dùng cho textarea, rich text editor
|
|
18
|
+
- ✅ Hỗ trợ đa ngôn ngữ qua `TranslateModule` (i18n key)
|
|
19
|
+
- ✅ Standalone component, OnPush, Angular Signals
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
## Khi nào sử dụng
|
|
22
|
+
|
|
23
|
+
- Làm nhãn tiêu đề cho Input, Select, Textarea, DatePicker trong form
|
|
24
|
+
- Cần hiển thị tooltip hướng dẫn đính kèm nhãn (icon `?` hover)
|
|
25
|
+
- Cần thanh tiêu đề có nút thao tác nhanh (thêm mới, chỉnh sửa, cài đặt)
|
|
26
|
+
- Hiển thị cài đặt bật/tắt kèm mô tả chi tiết (Toggle + Description)
|
|
27
|
+
- Hiển thị bộ đếm ký tự còn lại cho ô nhập liệu có giới hạn độ dài
|
|
28
|
+
|
|
29
|
+
## Cài đặt
|
|
23
30
|
|
|
24
31
|
```bash
|
|
25
32
|
npm install @libs-ui/components-label
|
|
26
33
|
```
|
|
27
34
|
|
|
28
|
-
##
|
|
29
|
-
|
|
30
|
-
### Import Module
|
|
35
|
+
## Import
|
|
31
36
|
|
|
32
37
|
```typescript
|
|
33
38
|
import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
|
|
39
|
+
import { ILabel } from '@libs-ui/components-label';
|
|
34
40
|
|
|
35
41
|
@Component({
|
|
36
42
|
standalone: true,
|
|
37
43
|
imports: [LibsUiComponentsLabelComponent],
|
|
38
|
-
// ...
|
|
39
44
|
})
|
|
40
|
-
export class
|
|
45
|
+
export class MyFormComponent {}
|
|
41
46
|
```
|
|
42
47
|
|
|
43
|
-
|
|
48
|
+
## Ví dụ sử dụng
|
|
49
|
+
|
|
50
|
+
### 1. Nhãn cơ bản với dấu bắt buộc và tooltip
|
|
44
51
|
|
|
45
52
|
```html
|
|
46
53
|
<libs_ui-components-label
|
|
47
54
|
[labelLeft]="'Họ và tên'"
|
|
48
55
|
[required]="true"
|
|
49
|
-
[popover]="{ content: 'Vui lòng nhập đầy đủ tên
|
|
56
|
+
[popover]="{ config: { content: 'Vui lòng nhập đầy đủ họ tên như trong giấy khai sinh.' } }">
|
|
57
|
+
</libs_ui-components-label>
|
|
50
58
|
```
|
|
51
59
|
|
|
52
|
-
###
|
|
60
|
+
### 2. Nhãn tích hợp nút thao tác nhanh
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
|
|
65
|
+
import { IButton } from '@libs-ui/components-buttons-button';
|
|
66
|
+
|
|
67
|
+
@Component({
|
|
68
|
+
standalone: true,
|
|
69
|
+
imports: [LibsUiComponentsLabelComponent],
|
|
70
|
+
template: `
|
|
71
|
+
<libs_ui-components-label
|
|
72
|
+
[labelLeft]="'Danh sách thành viên'"
|
|
73
|
+
[buttonsRight]="buttonsRight"
|
|
74
|
+
(outClickButton)="handlerClickButton($event)">
|
|
75
|
+
</libs_ui-components-label>
|
|
76
|
+
`,
|
|
77
|
+
})
|
|
78
|
+
export class TeamSectionComponent {
|
|
79
|
+
protected buttonsRight: IButton[] = [
|
|
80
|
+
{ classIconLeft: 'libs-ui-icon-plus-outline', key: 'add', popover: { dataView: 'Thêm mới' } },
|
|
81
|
+
{ classIconLeft: 'libs-ui-icon-settings-outline', key: 'settings', popover: { dataView: 'Cài đặt' } },
|
|
82
|
+
];
|
|
83
|
+
|
|
84
|
+
protected handlerClickButton(button: IButton): void {
|
|
85
|
+
button.action?.(button);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### 3. Nhãn tích hợp Toggle Switch và mô tả
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { Component, signal } from '@angular/core';
|
|
94
|
+
import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
|
|
95
|
+
import { ISwitchEvent } from '@libs-ui/components-switch';
|
|
96
|
+
|
|
97
|
+
@Component({
|
|
98
|
+
standalone: true,
|
|
99
|
+
imports: [LibsUiComponentsLabelComponent],
|
|
100
|
+
template: `
|
|
101
|
+
<libs_ui-components-label
|
|
102
|
+
[labelLeft]="'Chế độ bảo mật 2 lớp'"
|
|
103
|
+
[hasToggle]="true"
|
|
104
|
+
[toggleActive]="securityEnabled()"
|
|
105
|
+
[description]="'Khi bật, ứng dụng yêu cầu xác thực OTP mỗi lần đăng nhập.'"
|
|
106
|
+
(outSwitchEvent)="handlerToggle($event)">
|
|
107
|
+
</libs_ui-components-label>
|
|
108
|
+
`,
|
|
109
|
+
})
|
|
110
|
+
export class SecuritySettingComponent {
|
|
111
|
+
protected securityEnabled = signal(false);
|
|
112
|
+
|
|
113
|
+
protected handlerToggle(event: ISwitchEvent): void {
|
|
114
|
+
this.securityEnabled.set(event.active);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 4. Nhãn với bộ đếm ký tự
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
import { Component, signal } from '@angular/core';
|
|
123
|
+
import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
|
|
124
|
+
|
|
125
|
+
@Component({
|
|
126
|
+
standalone: true,
|
|
127
|
+
imports: [LibsUiComponentsLabelComponent],
|
|
128
|
+
template: `
|
|
129
|
+
<libs_ui-components-label
|
|
130
|
+
[labelLeft]="'Mô tả bản thân'"
|
|
131
|
+
[count]="charCount()"
|
|
132
|
+
[limitLength]="200">
|
|
133
|
+
</libs_ui-components-label>
|
|
134
|
+
<textarea (input)="handlerTextareaInput($event)" maxlength="200"></textarea>
|
|
135
|
+
`,
|
|
136
|
+
})
|
|
137
|
+
export class BioFieldComponent {
|
|
138
|
+
protected charCount = signal(0);
|
|
139
|
+
|
|
140
|
+
protected handlerTextareaInput(event: Event): void {
|
|
141
|
+
event.stopPropagation();
|
|
142
|
+
const target = event.target as HTMLTextAreaElement;
|
|
143
|
+
this.charCount.set(target.value.length);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### 5. Nhãn trái/phải với toggle trước nhãn
|
|
53
149
|
|
|
54
150
|
```html
|
|
55
151
|
<libs_ui-components-label
|
|
56
|
-
[labelLeft]="'
|
|
152
|
+
[labelLeft]="'Nhận thông báo email'"
|
|
153
|
+
[labelRight]="'Tùy chỉnh'"
|
|
57
154
|
[hasToggle]="true"
|
|
155
|
+
[labelLeftBehindToggleButton]="true"
|
|
58
156
|
[toggleActive]="true"
|
|
59
|
-
[
|
|
60
|
-
|
|
157
|
+
[toggleSize]="'large'"
|
|
158
|
+
(outSwitchEvent)="handlerToggle($event)"
|
|
159
|
+
(outLabelRightClick)="handlerLabelRightClick($event)">
|
|
160
|
+
</libs_ui-components-label>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### 6. Sử dụng với interface ILabel (truyền config dạng object)
|
|
164
|
+
|
|
165
|
+
```typescript
|
|
166
|
+
import { ILabel } from '@libs-ui/components-label';
|
|
167
|
+
import { IButton } from '@libs-ui/components-buttons-button';
|
|
168
|
+
|
|
169
|
+
const labelConfig: ILabel = {
|
|
170
|
+
labelLeft: 'Số điện thoại',
|
|
171
|
+
required: true,
|
|
172
|
+
description: 'Nhập số điện thoại có mã quốc gia, ví dụ: +84901234567',
|
|
173
|
+
buttonsRight: [
|
|
174
|
+
{ key: 'verify', label: 'Xác minh', type: 'button-link-primary' },
|
|
175
|
+
],
|
|
176
|
+
};
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
```html
|
|
180
|
+
<libs_ui-components-label
|
|
181
|
+
[labelLeft]="labelConfig.labelLeft"
|
|
182
|
+
[required]="labelConfig.required"
|
|
183
|
+
[description]="labelConfig.description"
|
|
184
|
+
[buttonsRight]="labelConfig.buttonsRight">
|
|
185
|
+
</libs_ui-components-label>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## @Input()
|
|
189
|
+
|
|
190
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
191
|
+
|---|---|---|---|---|
|
|
192
|
+
| `buttonsDescription` | `IButton[]` | `[]` | Danh sách nút bấm hiển thị vùng mô tả bên dưới nhãn | `[buttonsDescription]="[{ key: 'add', label: 'Thêm' }]"` |
|
|
193
|
+
| `buttonsDescriptionContainerClass` | `string` | `'flex libs-ui-label-description-button'` | Class CSS container bọc ngoài nhóm nút mô tả | `[buttonsDescriptionContainerClass]="'flex gap-2'"` |
|
|
194
|
+
| `buttonsLeft` | `IButton[]` | `[]` | Danh sách nút bấm hiển thị vùng trái (sau nhãn left) | `[buttonsLeft]="[{ classIconLeft: 'libs-ui-icon-plus-outline', key: 'add' }]"` |
|
|
195
|
+
| `buttonsRight` | `IButton[]` | `[]` | Danh sách nút bấm hiển thị vùng phải | `[buttonsRight]="[{ classIconLeft: 'libs-ui-icon-edit', key: 'edit' }]"` |
|
|
196
|
+
| `classInclude` | `string` | `'libs-ui-label'` | Class CSS bổ sung cho wrapper ngoài cùng của component | `[classInclude]="'my-custom-label'"` |
|
|
197
|
+
| `count` | `number` | `0` | Số ký tự hiện tại để hiển thị trên bộ đếm | `[count]="charCount()"` |
|
|
198
|
+
| `description` | `string` | `undefined` | Văn bản mô tả phụ hiển thị bên dưới nhãn chính (hỗ trợ i18n key) | `[description]="'i18n_field_hint'"` |
|
|
199
|
+
| `descriptionClass` | `string` | `'libs-ui-label-description libs-ui-font-h5r'` | Class CSS bổ sung cho vùng mô tả | `[descriptionClass]="'text-orange-500'"` |
|
|
200
|
+
| `disableButtonsDescription` | `boolean` | `undefined` | Vô hiệu hóa tất cả nút trong vùng mô tả | `[disableButtonsDescription]="isReadonly()"` |
|
|
201
|
+
| `disableButtonsLeft` | `boolean` | `undefined` | Vô hiệu hóa tất cả nút bên trái | `[disableButtonsLeft]="isReadonly()"` |
|
|
202
|
+
| `disableButtonsRight` | `boolean` | `undefined` | Vô hiệu hóa tất cả nút bên phải | `[disableButtonsRight]="isReadonly()"` |
|
|
203
|
+
| `hasToggle` | `boolean` | `undefined` | Hiển thị toggle switch trong nhãn | `[hasToggle]="true"` |
|
|
204
|
+
| `iconPopoverClass` | `string` | `'libs-ui-icon-tooltip-outline'` | Class CSS của icon tooltip (hiển thị khi có `popover`) | `[iconPopoverClass]="'libs-ui-icon-info-outline'"` |
|
|
205
|
+
| `labelLeft` | `string` | `undefined` | Văn bản nhãn bên trái (hỗ trợ i18n key) | `[labelLeft]="'i18n_field_name'"` |
|
|
206
|
+
| `labelLeftBehindToggleButton` | `boolean` | `undefined` | Khi `true`, toggle switch hiển thị trước nhãn trái; khi `false`/`undefined`, toggle ở sau | `[labelLeftBehindToggleButton]="true"` |
|
|
207
|
+
| `labelLeftClass` | `string` | `'libs-ui-label-left-text libs-ui-font-h6m'` | Class CSS bổ sung cho text nhãn trái | `[labelLeftClass]="'text-blue-600'"` |
|
|
208
|
+
| `labelRight` | `string` | `undefined` | Văn bản nhãn bên phải, có thể click (hỗ trợ i18n key) | `[labelRight]="'Tùy chỉnh'"` |
|
|
209
|
+
| `labelRightClass` | `string` | `''` | Class CSS bổ sung cho text nhãn phải | `[labelRightClass]="'text-blue-500 cursor-pointer'"` |
|
|
210
|
+
| `labelRightRequired` | `string` | `undefined` | Text hiển thị bắt buộc vùng phải (thay thế dấu `*`) | `[labelRightRequired]="'(Bắt buộc)'"` |
|
|
211
|
+
| `limitLength` | `number` | `0` | Giới hạn ký tự tối đa — khi > 0 hiển thị dạng `count/limitLength` | `[limitLength]="200"` |
|
|
212
|
+
| `onlyShowCount` | `boolean` | `undefined` | Khi `true`, chỉ hiển thị số đếm hiện tại (không hiển thị giới hạn) | `[onlyShowCount]="true"` |
|
|
213
|
+
| `popover` | `IPopover` | `undefined` | Cấu hình tooltip hiển thị khi hover vào icon | `[popover]="{ config: { content: 'Hướng dẫn nhập liệu' } }"` |
|
|
214
|
+
| `required` | `boolean` | `undefined` | Hiển thị dấu sao đỏ `*` đánh dấu trường bắt buộc | `[required]="true"` |
|
|
215
|
+
| `timerDestroyPopover` | `number` | `0` | Thời gian (ms) sau đó popover tự đóng (0 = không tự đóng) | `[timerDestroyPopover]="3000"` |
|
|
216
|
+
| `toggleActive` | `boolean` | `undefined` | Trạng thái bật/tắt của toggle switch | `[toggleActive]="isEnabled()"` |
|
|
217
|
+
| `toggleDisable` | `boolean` | `undefined` | Vô hiệu hóa toggle switch | `[toggleDisable]="isReadonly()"` |
|
|
218
|
+
| `toggleSize` | `'default' \| 'large'` | `'default'` | Kích thước toggle switch | `[toggleSize]="'large'"` |
|
|
219
|
+
| `zIndexPopover` | `number` | `10` | z-index của popover (tăng khi bị che bởi các lớp khác) | `[zIndexPopover]="100"` |
|
|
220
|
+
|
|
221
|
+
## @Output()
|
|
222
|
+
|
|
223
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
224
|
+
|---|---|---|---|---|
|
|
225
|
+
| `(outClickButton)` | `IButton` | Phát ra khi click vào bất kỳ nút nào (trái, phải hoặc mô tả) trong component | `handlerClickButton(button: IButton): void { button.action?.(button); }` | `(outClickButton)="handlerClickButton($event)"` |
|
|
226
|
+
| `(outLabelLeftClick)` | `MouseEvent` | Phát ra khi click vào vùng nhãn trái | `handlerLabelLeftClick(event: MouseEvent): void { event.stopPropagation(); }` | `(outLabelLeftClick)="handlerLabelLeftClick($event)"` |
|
|
227
|
+
| `(outLabelRightClick)` | `boolean` | Phát ra `true` khi click vào nhãn phải | `handlerLabelRightClick(clicked: boolean): void { }` | `(outLabelRightClick)="handlerLabelRightClick($event)"` |
|
|
228
|
+
| `(outSwitchEvent)` | `ISwitchEvent` | Phát ra khi trạng thái toggle switch thay đổi | `handlerToggle(event: ISwitchEvent): void { this.isEnabled.set(event.active); }` | `(outSwitchEvent)="handlerToggle($event)"` |
|
|
229
|
+
|
|
230
|
+
## Types & Interfaces
|
|
231
|
+
|
|
232
|
+
```typescript
|
|
233
|
+
import { ILabel } from '@libs-ui/components-label';
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### ILabel
|
|
237
|
+
|
|
238
|
+
Interface dùng để xây dựng object cấu hình cho component, thuận tiện khi cần truyền config từ TS thay vì bind từng input riêng lẻ.
|
|
239
|
+
|
|
240
|
+
```typescript
|
|
241
|
+
import { ILabel } from '@libs-ui/components-label';
|
|
242
|
+
import { IButton } from '@libs-ui/components-buttons-button';
|
|
243
|
+
import { IPopover } from '@libs-ui/components-popover';
|
|
244
|
+
|
|
245
|
+
interface ILabel {
|
|
246
|
+
classInclude?: string;
|
|
247
|
+
|
|
248
|
+
labelLeft?: string;
|
|
249
|
+
labelLeftClass?: string;
|
|
250
|
+
labelLeftBehindToggleButton?: boolean;
|
|
251
|
+
|
|
252
|
+
popover?: IPopover;
|
|
253
|
+
iconPopoverClass?: string;
|
|
254
|
+
zIndexPopover?: number;
|
|
255
|
+
timerDestroyPopover?: number;
|
|
256
|
+
|
|
257
|
+
required?: boolean;
|
|
258
|
+
|
|
259
|
+
buttonsLeft?: IButton[];
|
|
260
|
+
disableButtonsLeft?: boolean;
|
|
261
|
+
|
|
262
|
+
buttonsRight?: IButton[];
|
|
263
|
+
disableButtonsRight?: boolean;
|
|
264
|
+
|
|
265
|
+
labelRight?: string;
|
|
266
|
+
labelRightClass?: string;
|
|
267
|
+
labelRightRequired?: string;
|
|
268
|
+
|
|
269
|
+
hasToggle?: boolean;
|
|
270
|
+
toggleActive?: boolean;
|
|
271
|
+
toggleDisable?: boolean;
|
|
272
|
+
toggleSize?: 'default' | 'large';
|
|
273
|
+
|
|
274
|
+
description?: string;
|
|
275
|
+
descriptionClass?: string;
|
|
276
|
+
|
|
277
|
+
buttonsDescription?: IButton[];
|
|
278
|
+
disableButtonsDescription?: boolean;
|
|
279
|
+
buttonsDescriptionContainerClass?: string;
|
|
280
|
+
|
|
281
|
+
onlyShowCount?: boolean;
|
|
282
|
+
limitLength?: number;
|
|
283
|
+
count?: number;
|
|
284
|
+
}
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
### ISwitchEvent (từ @libs-ui/components-switch)
|
|
288
|
+
|
|
289
|
+
```typescript
|
|
290
|
+
import { ISwitchEvent } from '@libs-ui/components-switch';
|
|
291
|
+
|
|
292
|
+
// ISwitchEvent chứa ít nhất:
|
|
293
|
+
// { active: boolean }
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### IButton (từ @libs-ui/components-buttons-button)
|
|
297
|
+
|
|
298
|
+
```typescript
|
|
299
|
+
import { IButton } from '@libs-ui/components-buttons-button';
|
|
300
|
+
|
|
301
|
+
// Các field thường dùng:
|
|
302
|
+
// {
|
|
303
|
+
// key?: string;
|
|
304
|
+
// label?: string;
|
|
305
|
+
// type?: string; // 'button-link-primary' | 'button-primary' | ...
|
|
306
|
+
// classIconLeft?: string;
|
|
307
|
+
// classIconRight?: string;
|
|
308
|
+
// classInclude?: string;
|
|
309
|
+
// classLabel?: string;
|
|
310
|
+
// sizeButton?: string;
|
|
311
|
+
// disable?: boolean;
|
|
312
|
+
// popover?: object;
|
|
313
|
+
// action?: (button: IButton) => void;
|
|
314
|
+
// }
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
## Custom Description Slot
|
|
318
|
+
|
|
319
|
+
Component hỗ trợ `ng-content` projection với selector `div.libs-ui-custom-description` để inject nội dung tùy chỉnh bên dưới nhãn:
|
|
320
|
+
|
|
321
|
+
```html
|
|
322
|
+
<libs_ui-components-label [labelLeft]="'Tệp đính kèm'">
|
|
323
|
+
<div class="libs-ui-custom-description">
|
|
324
|
+
<span class="text-gray-400 libs-ui-font-h7r">Hỗ trợ PDF, DOCX, tối đa 10MB</span>
|
|
325
|
+
</div>
|
|
326
|
+
</libs_ui-components-label>
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
## Lưu ý quan trọng
|
|
330
|
+
|
|
331
|
+
⚠️ **Bộ đếm ký tự**: Để bộ đếm hoạt động, cần truyền cả `[count]` và `[limitLength]`. Nếu chỉ muốn hiển thị số đếm mà không giới hạn, dùng `[onlyShowCount]="true"` kết hợp `[count]`.
|
|
332
|
+
|
|
333
|
+
⚠️ **Toggle switch và vị trí nhãn**: Khi `[labelLeftBehindToggleButton]="true"`, toggle xuất hiện ở bên trái nhãn. Khi `false` hoặc không truyền, toggle xuất hiện ở bên phải nhãn.
|
|
334
|
+
|
|
335
|
+
⚠️ **Nhãn phải và giới hạn chiều rộng**: Khi có `labelRight`, `limitLength` hoặc `onlyShowCount`, vùng nhãn trái (`libs-ui-label-left`) tự động co xuống `maxWidth: 70%` để dành chỗ cho vùng phải.
|
|
336
|
+
|
|
337
|
+
⚠️ **i18n**: Tất cả `labelLeft`, `labelRight`, `description` đều được pipe `translate` tự động — có thể truyền i18n key trực tiếp hoặc text thường.
|
|
338
|
+
|
|
339
|
+
⚠️ **Custom description content**: Chỉ nội dung trong `<div class="libs-ui-custom-description">` mới được inject qua `ng-content`. Các tag khác sẽ bị bỏ qua.
|
|
340
|
+
|
|
341
|
+
## Demo
|
|
342
|
+
|
|
343
|
+
```bash
|
|
344
|
+
npx nx serve core-ui
|
|
61
345
|
```
|
|
62
346
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
### Inputs
|
|
66
|
-
|
|
67
|
-
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
68
|
-
| :--------------------------------- | :--------------------- | :---------- | :------------------------------------------------------------ |
|
|
69
|
-
| `buttonsDescription` | `IButton[]` | `[]` | Danh sách nút bấm trong phần mô tả. |
|
|
70
|
-
| `buttonsDescriptionContainerClass` | `string` | `flex ...` | Class CSS container cho nút bấm mô tả. |
|
|
71
|
-
| `buttonsLeft` | `IButton[]` | `[]` | Danh sách các nút bấm bên trái nhãn. |
|
|
72
|
-
| `buttonsRight` | `IButton[]` | `[]` | Danh sách các nút bấm bên phải nhãn. |
|
|
73
|
-
| `classInclude` | `string` | `libs-...` | Class CSS tổng thể cho component. |
|
|
74
|
-
| `count` | `number` | `0` | Số lượng ký tự hiện tại (để hiển thị bộ đếm). |
|
|
75
|
-
| `description` | `string` | `undefined` | Văn bản mô tả phía dưới nhãn. |
|
|
76
|
-
| `descriptionClass` | `string` | `libs-...` | Class CSS cho phần mô tả. |
|
|
77
|
-
| `disableButtonsDescription` | `boolean` | `undefined` | Vô hiệu hóa các nút bấm trong mô tả. |
|
|
78
|
-
| `disableButtonsLeft` | `boolean` | `undefined` | Vô hiệu hóa các nút bấm bên trái. |
|
|
79
|
-
| `disableButtonsRight` | `boolean` | `undefined` | Vô hiệu hóa các nút bấm bên phải. |
|
|
80
|
-
| `hasToggle` | `boolean` | `false` | Hiển thị công tắc chuyển đổi (switch). |
|
|
81
|
-
| `iconPopoverClass` | `string` | `libs-...` | Class icon cho tooltip (mặc định là icon help). |
|
|
82
|
-
| `labelLeft` | `string` | `undefined` | Văn bản nhãn bên trái. |
|
|
83
|
-
| `labelLeftBehindToggleButton` | `boolean` | `undefined` | Hiển thị nhãn trái phía sau nút toggle. |
|
|
84
|
-
| `labelLeftClass` | `string` | `libs-...` | Class CSS cho nhãn bên trái. |
|
|
85
|
-
| `labelRight` | `string` | `undefined` | Văn bản nhãn bên phải. |
|
|
86
|
-
| `labelRightClass` | `string` | `''` | Class CSS cho nhãn bên phải. |
|
|
87
|
-
| `labelRightRequired` | `string` | `undefined` | Nhãn phải bắt buộc (thường dùng để hiển thị text thay vì \*). |
|
|
88
|
-
| `limitLength` | `number` | `0` | Giới hạn ký tự tối đa. |
|
|
89
|
-
| `onlyShowCount` | `boolean` | `undefined` | Chỉ hiển thị bộ đếm (ẩn giới hạn tổng). |
|
|
90
|
-
| `popover` | `IPopover` | `undefined` | Cấu hình cho tooltip hiển thị khi hover vào icon thông tin. |
|
|
91
|
-
| `required` | `boolean` | `false` | Hiển thị dấu sao đỏ đánh dấu bắt buộc. |
|
|
92
|
-
| `timerDestroyPopover` | `number` | `0` | Thời gian hủy popover (ms). |
|
|
93
|
-
| `toggleActive` | `boolean` | `false` | Trạng thái của công tắc. |
|
|
94
|
-
| `toggleDisable` | `boolean` | `undefined` | Vô hiệu hóa công tắc. |
|
|
95
|
-
| `toggleSize` | `'default' \| 'large'` | `'default'` | Kích thước công tắc. |
|
|
96
|
-
| `zIndexPopover` | `number` | `10` | Z-index của popover. |
|
|
97
|
-
|
|
98
|
-
### Outputs
|
|
99
|
-
|
|
100
|
-
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
101
|
-
| :------------------- | :------------- | :--------------------------------------------------------------- |
|
|
102
|
-
| `outClickButton` | `IButton` | Phát ra khi người dùng click vào bất kỳ nút nào trong component. |
|
|
103
|
-
| `outLabelLeftClick` | `MouseEvent` | Phát ra khi click vào nhãn bên trái. |
|
|
104
|
-
| `outLabelRightClick` | `boolean` | Phát ra khi click vào phần văn bản bên phải. |
|
|
105
|
-
| `outSwitchEvent` | `ISwitchEvent` | Phát ra khi trạng thái công tắc thay đổi. |
|
|
106
|
-
|
|
107
|
-
## Tech Stack
|
|
108
|
-
|
|
109
|
-
- **Core**: Angular 18+, Signals
|
|
110
|
-
- **Dependencies**: `@libs-ui/components-popover`, `@libs-ui/components-buttons-button`, `@libs-ui/components-switch`.
|
|
111
|
-
|
|
112
|
-
## License
|
|
113
|
-
|
|
114
|
-
MIT
|
|
347
|
+
Truy cập: http://localhost:4500/components/label
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { computed, input, output,
|
|
2
|
+
import { computed, input, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
4
4
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
5
5
|
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-label.mjs","sources":["../../../../../libs-ui/components/label/src/label.component.ts","../../../../../libs-ui/components/label/src/label.component.html","../../../../../libs-ui/components/label/src/libs-ui-components-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopover, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-label',\n templateUrl: './label.component.html',\n styleUrl: './label.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSwitchComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsLabelComponent {\n // #region PROPERTY\n protected countDisplay = computed(() => `${viewDataNumberByLanguage(this.count() || 0, false)}`);\n protected maxLengthDisplay = computed(() => `${viewDataNumberByLanguage(this.limitLength() || 0, false)}`);\n\n // #region INPUT\n readonly iconPopoverClass = input<string | undefined, string | undefined>('libs-ui-icon-tooltip-outline', { transform: (value) => value || 'libs-ui-icon-tooltip-outline' });\n readonly classInclude = input<string, string | undefined>('libs-ui-label', { transform: (value) => `libs-ui-label ${value ?? ''}` });\n readonly labelLeft = input<string>();\n readonly labelLeftClass = input<string, string | undefined>('libs-ui-label-left-text libs-ui-font-h6m', { transform: (value) => `libs-ui-label-left-text libs-ui-font-h6m ${value ?? ''}` });\n readonly labelLeftBehindToggleButton = input<boolean>();\n readonly popover = input<IPopover>();\n readonly required = input<boolean>();\n readonly buttonsLeft = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsLeft = input<boolean>();\n readonly buttonsRight = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsRight = input<boolean>();\n readonly labelRight = input<string>();\n readonly labelRightClass = input<string | undefined, string | undefined>('', { transform: (value) => value || '' });\n readonly labelRightRequired = input<string>();\n readonly hasToggle = input<boolean>();\n readonly toggleSize = input<'default' | 'large', 'default' | 'large'>('default', { transform: (value) => value || 'default' });\n readonly toggleActive = input<boolean>();\n readonly toggleDisable = input<boolean>();\n readonly description = input<string>();\n readonly descriptionClass = input<string | undefined, string | undefined>('libs-ui-label-description libs-ui-font-h7r', { transform: (value) => `libs-ui-label-description libs-ui-font-h5r ${value ?? ''}` });\n readonly buttonsDescription = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsDescription = input<boolean | undefined>();\n readonly buttonsDescriptionContainerClass = input<string, string | undefined>('flex libs-ui-label-description-button', { transform: (value) => value ?? 'flex libs-ui-label-description-button' });\n readonly onlyShowCount = input<boolean>();\n readonly zIndexPopover = input<number, number>(10, { transform: (value) => value ?? 10 });\n readonly timerDestroyPopover = input<number, number>(0, { transform: (value) => value ?? 0 });\n readonly count = input<number | undefined, number | undefined>(0, { transform: (value) => value || 0 });\n readonly limitLength = input<number | undefined, number | undefined>(0, { transform: (value) => value || 0 });\n\n // #region OUTPUT\n readonly outClickButton = output<IButton>();\n readonly outSwitchEvent = output<ISwitchEvent>();\n readonly outLabelRightClick = output<boolean>();\n readonly outLabelLeftClick = output<MouseEvent>();\n\n // #region FUNCTIONS\n protected async handlerClickButton(button: IButton) {\n if (button.action) {\n button.action(button);\n }\n this.outClickButton.emit(button);\n }\n\n protected async handlerSwitch(toggleEvent: ISwitchEvent) {\n this.outSwitchEvent.emit(toggleEvent);\n }\n\n protected async handlerEventLabelRight(event: TYPE_POPOVER_EVENT) {\n if (event === 'click') {\n this.outLabelRightClick.emit(true);\n }\n }\n\n protected async handlerEventLabelLeft(event: MouseEvent) {\n event.stopPropagation();\n this.outLabelLeftClick.emit(event);\n }\n}\n","<div\n [class]=\"classInclude()\"\n [class.mb-[4px]]=\"description()\"\n [class.mb-[8px]]=\"!description()\">\n <div\n class=\"libs-ui-label-left\"\n [style.maxWidth.%]=\"labelRight() || limitLength() || onlyShowCount() ? 70 : 100\">\n @if (hasToggle() && labelLeftBehindToggleButton()) {\n <libs_ui-components-switch\n [size]=\"toggleSize()\"\n [disable]=\"toggleDisable()\"\n [class]=\"'mr-[8px]'\"\n [active]=\"toggleActive() || false\"\n (outSwitch)=\"handlerSwitch($event)\" />\n }\n @if (labelLeft()) {\n @let constHtmlLabel = labelLeft() || ' ';\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ zIndex: zIndexPopover(), timerDestroy: timerDestroyPopover() }\"\n [innerHtml]=\"constHtmlLabel | translate\"\n [classInclude]=\"labelLeftClass()\"\n (click)=\"handlerEventLabelLeft($event)\"\n (keydown.enter)=\"handlerEventLabelLeft($any($event))\" />\n }\n @if (required() && labelLeft()) {\n <i class=\"flex libs-ui-icon-asterisk before:!text-[#ee2d41] before:!text-[8px] pb-[4px] h-full\"></i>\n }\n @if (popover()?.config && popover()?.config?.content) {\n <libs_ui-components-popover\n classInclude=\"ml-[4px] {{ popover()?.classInclude }}\"\n [config]=\"popover()?.config\">\n <i [class]=\"iconPopoverClass()\"></i>\n </libs_ui-components-popover>\n }\n @for (button of buttonsLeft(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [sizeButton]=\"button.sizeButton\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsLeft() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (hasToggle() && !labelLeftBehindToggleButton()) {\n <libs_ui-components-switch\n [disable]=\"toggleDisable()\"\n [size]=\"toggleSize()\"\n [class]=\"'ml-[20px]'\"\n [active]=\"toggleActive() || false\"\n (outSwitch)=\"handlerSwitch($event)\" />\n }\n </div>\n\n <div class=\"libs-ui-label-right\">\n @if (labelRight(); as labelRight) {\n <libs_ui-components-popover\n type=\"text\"\n [innerHtml]=\"labelRight | translate\"\n [classInclude]=\"labelRightClass()\"\n (outEvent)=\"handlerEventLabelRight($event)\" />\n }\n @for (button of buttonsRight(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [sizeButton]=\"button.sizeButton\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsRight() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [classLabel]=\"button.classLabel || ''\"\n [popover]=\"button.popover || {}\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (limitLength() || onlyShowCount()) {\n <div class=\"flex items-center ml-[12px] text-[#9ca2ad] libs-ui-font-h7r\">\n <span>{{ countDisplay() }}</span>\n @if (limitLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n <span> {{ 'i18n_character' | translate }}</span>\n </div>\n }\n </div>\n</div>\n@if (description(); as description) {\n <div\n [class]=\"descriptionClass()\"\n [innerHtml]=\"description | translate\"></div>\n}\n@if (buttonsDescription()?.length) {\n <div [class]=\"buttonsDescriptionContainerClass()\">\n @for (button of buttonsDescription(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsDescription() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [classLabel]=\"button.classLabel || ''\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n </div>\n}\n<ng-content select=\"div.libs-ui-custom-description\" />\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-label.mjs","sources":["../../../../../libs-ui/components/label/src/label.component.ts","../../../../../libs-ui/components/label/src/label.component.html","../../../../../libs-ui/components/label/src/libs-ui-components-label.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopover, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { ISwitchEvent, LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-label',\n templateUrl: './label.component.html',\n styleUrl: './label.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSwitchComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsLabelComponent {\n // #region PROPERTY\n protected countDisplay = computed(() => `${viewDataNumberByLanguage(this.count() || 0, false)}`);\n protected maxLengthDisplay = computed(() => `${viewDataNumberByLanguage(this.limitLength() || 0, false)}`);\n\n // #region INPUT\n readonly iconPopoverClass = input<string | undefined, string | undefined>('libs-ui-icon-tooltip-outline', { transform: (value) => value || 'libs-ui-icon-tooltip-outline' });\n readonly classInclude = input<string, string | undefined>('libs-ui-label', { transform: (value) => `libs-ui-label ${value ?? ''}` });\n readonly labelLeft = input<string>();\n readonly labelLeftClass = input<string, string | undefined>('libs-ui-label-left-text libs-ui-font-h6m', { transform: (value) => `libs-ui-label-left-text libs-ui-font-h6m ${value ?? ''}` });\n readonly labelLeftBehindToggleButton = input<boolean>();\n readonly popover = input<IPopover>();\n readonly required = input<boolean>();\n readonly buttonsLeft = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsLeft = input<boolean>();\n readonly buttonsRight = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsRight = input<boolean>();\n readonly labelRight = input<string>();\n readonly labelRightClass = input<string | undefined, string | undefined>('', { transform: (value) => value || '' });\n readonly labelRightRequired = input<string>();\n readonly hasToggle = input<boolean>();\n readonly toggleSize = input<'default' | 'large', 'default' | 'large'>('default', { transform: (value) => value || 'default' });\n readonly toggleActive = input<boolean>();\n readonly toggleDisable = input<boolean>();\n readonly description = input<string>();\n readonly descriptionClass = input<string | undefined, string | undefined>('libs-ui-label-description libs-ui-font-h7r', { transform: (value) => `libs-ui-label-description libs-ui-font-h5r ${value ?? ''}` });\n readonly buttonsDescription = input<Array<IButton> | undefined, Array<IButton> | undefined>([], { transform: (value) => value || [] });\n readonly disableButtonsDescription = input<boolean | undefined>();\n readonly buttonsDescriptionContainerClass = input<string, string | undefined>('flex libs-ui-label-description-button', { transform: (value) => value ?? 'flex libs-ui-label-description-button' });\n readonly onlyShowCount = input<boolean>();\n readonly zIndexPopover = input<number, number>(10, { transform: (value) => value ?? 10 });\n readonly timerDestroyPopover = input<number, number>(0, { transform: (value) => value ?? 0 });\n readonly count = input<number | undefined, number | undefined>(0, { transform: (value) => value || 0 });\n readonly limitLength = input<number | undefined, number | undefined>(0, { transform: (value) => value || 0 });\n\n // #region OUTPUT\n readonly outClickButton = output<IButton>();\n readonly outSwitchEvent = output<ISwitchEvent>();\n readonly outLabelRightClick = output<boolean>();\n readonly outLabelLeftClick = output<MouseEvent>();\n\n // #region FUNCTIONS\n protected async handlerClickButton(button: IButton) {\n if (button.action) {\n button.action(button);\n }\n this.outClickButton.emit(button);\n }\n\n protected async handlerSwitch(toggleEvent: ISwitchEvent) {\n this.outSwitchEvent.emit(toggleEvent);\n }\n\n protected async handlerEventLabelRight(event: TYPE_POPOVER_EVENT) {\n if (event === 'click') {\n this.outLabelRightClick.emit(true);\n }\n }\n\n protected async handlerEventLabelLeft(event: MouseEvent) {\n event.stopPropagation();\n this.outLabelLeftClick.emit(event);\n }\n}\n","<div\n [class]=\"classInclude()\"\n [class.mb-[4px]]=\"description()\"\n [class.mb-[8px]]=\"!description()\">\n <div\n class=\"libs-ui-label-left\"\n [style.maxWidth.%]=\"labelRight() || limitLength() || onlyShowCount() ? 70 : 100\">\n @if (hasToggle() && labelLeftBehindToggleButton()) {\n <libs_ui-components-switch\n [size]=\"toggleSize()\"\n [disable]=\"toggleDisable()\"\n [class]=\"'mr-[8px]'\"\n [active]=\"toggleActive() || false\"\n (outSwitch)=\"handlerSwitch($event)\" />\n }\n @if (labelLeft()) {\n @let constHtmlLabel = labelLeft() || ' ';\n <libs_ui-components-popover\n type=\"text\"\n [config]=\"{ zIndex: zIndexPopover(), timerDestroy: timerDestroyPopover() }\"\n [innerHtml]=\"constHtmlLabel | translate\"\n [classInclude]=\"labelLeftClass()\"\n (click)=\"handlerEventLabelLeft($event)\"\n (keydown.enter)=\"handlerEventLabelLeft($any($event))\" />\n }\n @if (required() && labelLeft()) {\n <i class=\"flex libs-ui-icon-asterisk before:!text-[#ee2d41] before:!text-[8px] pb-[4px] h-full\"></i>\n }\n @if (popover()?.config && popover()?.config?.content) {\n <libs_ui-components-popover\n classInclude=\"ml-[4px] {{ popover()?.classInclude }}\"\n [config]=\"popover()?.config\">\n <i [class]=\"iconPopoverClass()\"></i>\n </libs_ui-components-popover>\n }\n @for (button of buttonsLeft(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [sizeButton]=\"button.sizeButton\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsLeft() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (hasToggle() && !labelLeftBehindToggleButton()) {\n <libs_ui-components-switch\n [disable]=\"toggleDisable()\"\n [size]=\"toggleSize()\"\n [class]=\"'ml-[20px]'\"\n [active]=\"toggleActive() || false\"\n (outSwitch)=\"handlerSwitch($event)\" />\n }\n </div>\n\n <div class=\"libs-ui-label-right\">\n @if (labelRight(); as labelRight) {\n <libs_ui-components-popover\n type=\"text\"\n [innerHtml]=\"labelRight | translate\"\n [classInclude]=\"labelRightClass()\"\n (outEvent)=\"handlerEventLabelRight($event)\" />\n }\n @for (button of buttonsRight(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [sizeButton]=\"button.sizeButton\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsRight() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [classLabel]=\"button.classLabel || ''\"\n [popover]=\"button.popover || {}\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n @if (limitLength() || onlyShowCount()) {\n <div class=\"flex items-center ml-[12px] text-[#9ca2ad] libs-ui-font-h7r\">\n <span>{{ countDisplay() }}</span>\n @if (limitLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n <span> {{ 'i18n_character' | translate }}</span>\n </div>\n }\n </div>\n</div>\n@if (description(); as description) {\n <div\n [class]=\"descriptionClass()\"\n [innerHtml]=\"description | translate\"></div>\n}\n@if (buttonsDescription()?.length) {\n <div [class]=\"buttonsDescriptionContainerClass()\">\n @for (button of buttonsDescription(); track button) {\n <libs_ui-components-buttons-button\n [type]=\"button.type || 'button-link-primary'\"\n [label]=\"button.label || ' '\"\n [disable]=\"button.disable || disableButtonsDescription() || false\"\n [classIconLeft]=\"button.classIconLeft || ''\"\n [classInclude]=\"button.classInclude || ''\"\n [classIconRight]=\"button.classIconRight || ''\"\n [popover]=\"button.popover || {}\"\n [classLabel]=\"button.classLabel || ''\"\n (outClick)=\"handlerClickButton(button)\" />\n }\n </div>\n}\n<ng-content select=\"div.libs-ui-custom-description\" />\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,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-label",
|
|
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-buttons-button": "0.2.356-
|
|
7
|
-
"@libs-ui/components-popover": "0.2.356-
|
|
8
|
-
"@libs-ui/components-switch": "0.2.356-
|
|
9
|
-
"@libs-ui/utils": "0.2.356-
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.356-43",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
8
|
+
"@libs-ui/components-switch": "0.2.356-43",
|
|
9
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
10
10
|
"@ngx-translate/core": "^15.0.0"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|