@libs-ui/components-radio-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,32 +1,33 @@
|
|
|
1
1
|
# @libs-ui/components-radio-single
|
|
2
2
|
|
|
3
|
-
> Component hiển thị một radio button đơn lẻ,
|
|
3
|
+
> Component hiển thị một radio button đơn lẻ, hỗ trợ label, avatar, hình ảnh, popover và custom styling linh hoạt.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsRadioSingleComponent` là một standalone Angular component dùng để hiển thị một radio button.
|
|
7
|
+
`LibsUiComponentsRadioSingleComponent` là một standalone Angular component dùng để hiển thị một radio button đơn. Component hoạt động theo mô hình two-way binding qua `model<boolean>`, cho phép parent kiểm soát trạng thái active và xử lý group logic bên ngoài. Component hỗ trợ đa dạng tùy chỉnh giao diện bao gồm label có i18n, avatar, bullet, icon tùy chỉnh, popover tooltip, và component outlet động.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅ **
|
|
12
|
-
- ✅ **Rich
|
|
13
|
-
- ✅ **
|
|
14
|
-
- ✅ **
|
|
11
|
+
- ✅ **Two-way binding** — Trạng thái `active` dùng `model<boolean>`, hỗ trợ cả controlled và uncontrolled pattern.
|
|
12
|
+
- ✅ **Rich content** — Hỗ trợ label (có i18n interpolation), avatar, hình ảnh, bullet, popover tooltip.
|
|
13
|
+
- ✅ **Click behavior linh hoạt** — `clickExactly` điều khiển vùng click: chỉ icon/label hoặc toàn bộ container.
|
|
14
|
+
- ✅ **Disable state** — Hỗ trợ disable hoàn toàn hoặc chỉ disable label riêng biệt.
|
|
15
|
+
- ✅ **Image fallback** — Tự động dùng `linkImageError` khi `linkImage` bị lỗi tải.
|
|
16
|
+
- ✅ **Component outlet** — Có thể inject component động vào bên trong radio qua `componentOutlet`.
|
|
17
|
+
- ✅ **Custom styling** — Cung cấp nhiều input class cho container, label, icon.
|
|
18
|
+
- ✅ **OnPush + Signals** — Hiệu năng cao với Angular change detection tối ưu.
|
|
15
19
|
|
|
16
20
|
## Khi nào sử dụng
|
|
17
21
|
|
|
18
|
-
- Khi cần một radio button hoạt động độc lập
|
|
19
|
-
-
|
|
20
|
-
-
|
|
22
|
+
- Khi cần một radio button hoạt động độc lập mà không cần group logic phức tạp.
|
|
23
|
+
- Khi muốn tùy chỉnh layout radio button kết hợp với avatar, hình ảnh, hoặc popover.
|
|
24
|
+
- Khi xây dựng các component phức tạp hơn như Radio Group, Select List, hay option list custom.
|
|
25
|
+
- Khi cần radio button hỗ trợ i18n translate cho label.
|
|
21
26
|
|
|
22
27
|
## Cài đặt
|
|
23
28
|
|
|
24
29
|
```bash
|
|
25
|
-
# npm
|
|
26
30
|
npm install @libs-ui/components-radio-single
|
|
27
|
-
|
|
28
|
-
# yarn
|
|
29
|
-
yarn add @libs-ui/components-radio-single
|
|
30
31
|
```
|
|
31
32
|
|
|
32
33
|
## Import
|
|
@@ -39,86 +40,341 @@ import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-
|
|
|
39
40
|
imports: [LibsUiComponentsRadioSingleComponent],
|
|
40
41
|
// ...
|
|
41
42
|
})
|
|
42
|
-
export class
|
|
43
|
+
export class MyComponent {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Ví dụ sử dụng
|
|
47
|
+
|
|
48
|
+
### 1. Radio button cơ bản
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
// my.component.ts
|
|
52
|
+
import { Component, signal } from '@angular/core';
|
|
53
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
54
|
+
import { IRadioEvent } from '@libs-ui/components-radio-single';
|
|
55
|
+
|
|
56
|
+
@Component({
|
|
57
|
+
standalone: true,
|
|
58
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
59
|
+
templateUrl: './my.component.html',
|
|
60
|
+
})
|
|
61
|
+
export class MyComponent {
|
|
62
|
+
protected isActive = signal(false);
|
|
63
|
+
|
|
64
|
+
protected handlerChange(event: IRadioEvent): void {
|
|
65
|
+
event; // IRadioEvent: { active: boolean; key: unknown }
|
|
66
|
+
this.isActive.set(event.active);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<!-- my.component.html -->
|
|
73
|
+
<libs_ui-components-radio-single
|
|
74
|
+
[active]="isActive()"
|
|
75
|
+
(outChange)="handlerChange($event)"
|
|
76
|
+
[key]="'option-1'"
|
|
77
|
+
label="Tùy chọn 1"
|
|
78
|
+
/>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 2. Radio button với disabled state
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
// my.component.ts
|
|
85
|
+
import { Component, signal } from '@angular/core';
|
|
86
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
87
|
+
|
|
88
|
+
@Component({
|
|
89
|
+
standalone: true,
|
|
90
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
91
|
+
templateUrl: './my.component.html',
|
|
92
|
+
})
|
|
93
|
+
export class MyComponent {
|
|
94
|
+
protected activeOption = signal(true);
|
|
95
|
+
protected inactiveOption = signal(false);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!-- my.component.html -->
|
|
101
|
+
<!-- Disabled và đang active -->
|
|
102
|
+
<libs_ui-components-radio-single
|
|
103
|
+
[active]="activeOption()"
|
|
104
|
+
[disable]="true"
|
|
105
|
+
label="Đã chọn (vô hiệu hóa)"
|
|
106
|
+
/>
|
|
107
|
+
|
|
108
|
+
<!-- Disabled và không active -->
|
|
109
|
+
<libs_ui-components-radio-single
|
|
110
|
+
[active]="inactiveOption()"
|
|
111
|
+
[disable]="true"
|
|
112
|
+
label="Chưa chọn (vô hiệu hóa)"
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 3. Điều khiển vùng click bằng clickExactly
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
// my.component.ts
|
|
120
|
+
import { Component, signal } from '@angular/core';
|
|
121
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
122
|
+
import { IRadioEvent } from '@libs-ui/components-radio-single';
|
|
123
|
+
|
|
124
|
+
@Component({
|
|
125
|
+
standalone: true,
|
|
126
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
127
|
+
templateUrl: './my.component.html',
|
|
128
|
+
})
|
|
129
|
+
export class MyComponent {
|
|
130
|
+
protected clickAnywhereActive = signal(false);
|
|
131
|
+
protected clickExactActive = signal(false);
|
|
132
|
+
|
|
133
|
+
protected handlerClickAnywhere(event: IRadioEvent): void {
|
|
134
|
+
event.active;
|
|
135
|
+
this.clickAnywhereActive.set(event.active);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
protected handlerClickExact(event: IRadioEvent): void {
|
|
139
|
+
event.active;
|
|
140
|
+
this.clickExactActive.set(event.active);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<!-- my.component.html -->
|
|
147
|
+
|
|
148
|
+
<!-- clickExactly=false: click vào bất kỳ đâu trong container đều toggle -->
|
|
149
|
+
<libs_ui-components-radio-single
|
|
150
|
+
[active]="clickAnywhereActive()"
|
|
151
|
+
(outChange)="handlerClickAnywhere($event)"
|
|
152
|
+
[clickExactly]="false"
|
|
153
|
+
classInclude="flex items-center w-full"
|
|
154
|
+
label="Click vào container sẽ toggle"
|
|
155
|
+
/>
|
|
156
|
+
|
|
157
|
+
<!-- clickExactly=true (mặc định): chỉ click đúng icon hoặc label mới toggle -->
|
|
158
|
+
<libs_ui-components-radio-single
|
|
159
|
+
[active]="clickExactActive()"
|
|
160
|
+
(outChange)="handlerClickExact($event)"
|
|
161
|
+
[clickExactly]="true"
|
|
162
|
+
classInclude="flex items-center w-full"
|
|
163
|
+
label="Phải click đúng icon hoặc label"
|
|
164
|
+
/>
|
|
43
165
|
```
|
|
44
166
|
|
|
45
|
-
|
|
167
|
+
### 4. Radio button với Avatar
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
// my.component.ts
|
|
171
|
+
import { Component, signal } from '@angular/core';
|
|
172
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
173
|
+
import { IRadioEvent } from '@libs-ui/components-radio-single';
|
|
174
|
+
import { IAvatarConfig } from '@libs-ui/components-avatar';
|
|
46
175
|
|
|
47
|
-
|
|
176
|
+
@Component({
|
|
177
|
+
standalone: true,
|
|
178
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
179
|
+
templateUrl: './my.component.html',
|
|
180
|
+
})
|
|
181
|
+
export class MyComponent {
|
|
182
|
+
protected userActive = signal(false);
|
|
183
|
+
|
|
184
|
+
protected readonly userAvatarConfig: IAvatarConfig = {
|
|
185
|
+
linkAvatar: 'https://example.com/user-avatar.jpg',
|
|
186
|
+
linkAvatarError: 'https://example.com/default-avatar.jpg',
|
|
187
|
+
size: 32,
|
|
188
|
+
typeShape: 'circle',
|
|
189
|
+
textAvatar: 'ND',
|
|
190
|
+
idGenColor: 'user-001',
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
protected handlerUserChange(event: IRadioEvent): void {
|
|
194
|
+
event.key; // 'user-001'
|
|
195
|
+
this.userActive.set(event.active);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
```
|
|
48
199
|
|
|
49
200
|
```html
|
|
201
|
+
<!-- my.component.html -->
|
|
50
202
|
<libs_ui-components-radio-single
|
|
51
|
-
[active]="
|
|
52
|
-
(outChange)="
|
|
53
|
-
|
|
203
|
+
[active]="userActive()"
|
|
204
|
+
(outChange)="handlerUserChange($event)"
|
|
205
|
+
[key]="'user-001'"
|
|
206
|
+
[avatarConfig]="userAvatarConfig"
|
|
207
|
+
label="Nguyễn Dũng"
|
|
208
|
+
classLabelInclude="libs-ui-font-h4r ml-2"
|
|
209
|
+
/>
|
|
54
210
|
```
|
|
55
211
|
|
|
56
|
-
###
|
|
212
|
+
### 5. Radio button với i18n interpolation
|
|
213
|
+
|
|
214
|
+
```typescript
|
|
215
|
+
// my.component.ts
|
|
216
|
+
import { Component, signal } from '@angular/core';
|
|
217
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
218
|
+
import { IRadioEvent } from '@libs-ui/components-radio-single';
|
|
219
|
+
|
|
220
|
+
@Component({
|
|
221
|
+
standalone: true,
|
|
222
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
223
|
+
templateUrl: './my.component.html',
|
|
224
|
+
})
|
|
225
|
+
export class MyComponent {
|
|
226
|
+
protected planActive = signal(false);
|
|
227
|
+
|
|
228
|
+
protected readonly labelParams: Record<string, unknown> = {
|
|
229
|
+
price: '99,000',
|
|
230
|
+
currency: 'VND',
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
protected handlerPlanChange(event: IRadioEvent): void {
|
|
234
|
+
event.active;
|
|
235
|
+
this.planActive.set(event.active);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
```
|
|
57
239
|
|
|
58
240
|
```html
|
|
241
|
+
<!-- my.component.html -->
|
|
242
|
+
<!-- label là i18n key, labelInterpolateParams truyền tham số vào translate pipe -->
|
|
59
243
|
<libs_ui-components-radio-single
|
|
60
|
-
[active]="
|
|
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
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
244
|
+
[active]="planActive()"
|
|
245
|
+
(outChange)="handlerPlanChange($event)"
|
|
246
|
+
[key]="'plan-basic'"
|
|
247
|
+
label="i18n_plan_price_label"
|
|
248
|
+
[labelInterpolateParams]="labelParams"
|
|
249
|
+
/>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### 6. Radio button trong group (pattern thường dùng)
|
|
253
|
+
|
|
254
|
+
```typescript
|
|
255
|
+
// my.component.ts
|
|
256
|
+
import { Component, signal, computed } from '@angular/core';
|
|
257
|
+
import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';
|
|
258
|
+
import { IRadioEvent } from '@libs-ui/components-radio-single';
|
|
259
|
+
|
|
260
|
+
@Component({
|
|
261
|
+
standalone: true,
|
|
262
|
+
imports: [LibsUiComponentsRadioSingleComponent],
|
|
263
|
+
templateUrl: './my.component.html',
|
|
264
|
+
})
|
|
265
|
+
export class MyComponent {
|
|
266
|
+
protected selectedKey = signal<string>('option-a');
|
|
267
|
+
|
|
268
|
+
protected readonly options = [
|
|
269
|
+
{ key: 'option-a', label: 'Tùy chọn A' },
|
|
270
|
+
{ key: 'option-b', label: 'Tùy chọn B' },
|
|
271
|
+
{ key: 'option-c', label: 'Tùy chọn C' },
|
|
272
|
+
];
|
|
273
|
+
|
|
274
|
+
protected isActive = computed(() => (key: string) => this.selectedKey() === key);
|
|
275
|
+
|
|
276
|
+
protected handlerChange(event: IRadioEvent): void {
|
|
277
|
+
event.stopPropagation?.();
|
|
278
|
+
this.selectedKey.set(event.key as string);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
```html
|
|
284
|
+
<!-- my.component.html -->
|
|
285
|
+
@for (option of options; track option.key) {
|
|
286
|
+
<libs_ui-components-radio-single
|
|
287
|
+
[active]="selectedKey() === option.key"
|
|
288
|
+
(outChange)="handlerChange($event)"
|
|
289
|
+
[key]="option.key"
|
|
290
|
+
[label]="option.label"
|
|
291
|
+
/>
|
|
292
|
+
}
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
## @Input()
|
|
296
|
+
|
|
297
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
298
|
+
|---|---|---|---|---|
|
|
299
|
+
| `[active]` | `model<boolean>` | `false` | Trạng thái active (checked) của radio. Hỗ trợ two-way binding. | `[active]="isActive()"` hoặc `[(active)]="isActive"` |
|
|
300
|
+
| `[key]` | `unknown` | `undefined` | Key định danh cho radio button, được emit kèm trong `outChange`. | `[key]="'option-1'"` |
|
|
301
|
+
| `[label]` | `string` | `''` | Label hiển thị bên cạnh radio. Hỗ trợ i18n key (qua TranslateModule). | `label="Tùy chọn 1"` |
|
|
302
|
+
| `[labelInterpolateParams]` | `Record<string, unknown>` | `{}` | Tham số truyền vào translate pipe cho label i18n. | `[labelInterpolateParams]="{ name: 'Admin' }"` |
|
|
303
|
+
| `[disable]` | `boolean` | `false` | Vô hiệu hóa hoàn toàn radio, không cho phép click hay toggle. | `[disable]="true"` |
|
|
304
|
+
| `[disableLabel]` | `boolean` | `false` | Chỉ vô hiệu hóa visual của label (mờ), vẫn cho phép click icon. | `[disableLabel]="true"` |
|
|
305
|
+
| `[clickExactly]` | `boolean` | `true` | `true`: chỉ click đúng icon/label mới toggle. `false`: click vào container cũng toggle. | `[clickExactly]="false"` |
|
|
306
|
+
| `[typeRadio]` | `'normal' \| 'medium'` | `'normal'` | Kích thước/kiểu dáng của icon radio. | `[typeRadio]="'medium'"` |
|
|
307
|
+
| `[ignoreRadio]` | `boolean` | `undefined` | Ẩn icon radio, chỉ hiển thị label/avatar/image. | `[ignoreRadio]="true"` |
|
|
308
|
+
| `[ignorePopoverLabel]` | `boolean` | `undefined` | Không hiển thị popover của label dù đã cấu hình. | `[ignorePopoverLabel]="true"` |
|
|
309
|
+
| `[linkImage]` | `string` | `''` | URL hình ảnh hiển thị cạnh radio. | `[linkImage]="'https://example.com/img.png'"` |
|
|
310
|
+
| `[linkImageError]` | `string` | `''` | URL hình ảnh dự phòng khi `linkImage` tải thất bại. | `[linkImageError]="'https://example.com/default.png'"` |
|
|
311
|
+
| `[imgTypeIcon]` | `boolean` | `undefined` | Nếu `true`, hình ảnh được cố định kích thước 18x18px (dùng cho icon nhỏ). | `[imgTypeIcon]="true"` |
|
|
312
|
+
| `[avatarConfig]` | `IAvatarConfig` | `undefined` | Cấu hình hiển thị avatar bên cạnh radio. | `[avatarConfig]="{ linkAvatar: '...', size: 32, typeShape: 'circle' }"` |
|
|
313
|
+
| `[bullet]` | `Record<string, string>` | `undefined` | Cấu hình bullet point (chấm màu) cạnh radio. Key `backgroundColor` là màu nền. | `[bullet]="{ backgroundColor: '#22c55e' }"` |
|
|
314
|
+
| `[popover]` | `IPopover` | `undefined` | Cấu hình popover tooltip hiển thị kèm icon thông tin. | `[popover]="{ config: { content: 'Mô tả thêm' } }"` |
|
|
315
|
+
| `[zIndexLabel]` | `number` | `1200` | z-index của label (dùng khi label nằm trong modal/dropdown). | `[zIndexLabel]="1300"` |
|
|
316
|
+
| `[classInclude]` | `string` | `''` | Custom CSS class thêm vào container ngoài cùng. | `classInclude="flex items-center gap-2"` |
|
|
317
|
+
| `[classLabelInclude]` | `string` | `'libs-ui-font-h4r '` | Custom CSS class cho label. Ghi đè default font class. | `classLabelInclude="libs-ui-font-h5r text-gray-600"` |
|
|
318
|
+
| `[classIncludeIcon]` | `string` | `''` | Custom CSS class cho icon radio. | `classIncludeIcon="text-blue-600"` |
|
|
319
|
+
| `[classImageInclude]` | `string` | `''` | Custom CSS class cho thẻ `<img>`. | `classImageInclude="rounded-full"` |
|
|
320
|
+
| `[dataComponentOutlet]` | `TYPE_COMPONENT_OUTLET_DATA` | `undefined` | Data truyền vào component được inject qua `componentOutlet`. | `[dataComponentOutlet]="{ name: 'value' }"` |
|
|
321
|
+
| `[componentOutlet]` | `any` | `undefined` | Component động được inject vào bên trong radio qua `ngComponentOutlet`. | `[componentOutlet]="MyBadgeComponent"` |
|
|
322
|
+
|
|
323
|
+
## @Output()
|
|
324
|
+
|
|
325
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
326
|
+
|---|---|---|---|---|
|
|
327
|
+
| `(outChange)` | `IRadioEvent` | Emit khi trạng thái radio thay đổi (toggle active). Chỉ emit khi chưa active và không bị disable. | `handlerChange(event: IRadioEvent): void { event.stopPropagation?.(); this.active.set(event.active); }` | `(outChange)="handlerChange($event)"` |
|
|
328
|
+
| `(outClickLabel)` | `void` | Emit khi người dùng click vào label. | `handlerClickLabel(): void { /* xử lý click label */ }` | `(outClickLabel)="handlerClickLabel()"` |
|
|
329
|
+
| `(outChangStageFlagMousePopover)` | `IFlagMouse` | Emit trạng thái chuột khi hover/leave popover (dùng để đồng bộ trạng thái popover với parent). | `handlerFlagMouse(flag: IFlagMouse): void { flag.stopPropagation?.(); this.flagMouse.set(flag); }` | `(outChangStageFlagMousePopover)="handlerFlagMouse($event)"` |
|
|
330
|
+
|
|
331
|
+
## Types & Interfaces
|
|
332
|
+
|
|
333
|
+
```typescript
|
|
334
|
+
import { IRadioEvent, IRadioItem } from '@libs-ui/components-radio-single';
|
|
335
|
+
import { IAvatarConfig } from '@libs-ui/components-avatar';
|
|
336
|
+
import { IPopover } from '@libs-ui/components-popover';
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
```typescript
|
|
340
|
+
// Event emit khi radio thay đổi trạng thái
|
|
341
|
+
export interface IRadioEvent {
|
|
342
|
+
active: boolean; // Trạng thái active mới sau khi thay đổi
|
|
343
|
+
key: any; // Key của radio button (từ input [key])
|
|
344
|
+
item?: any; // Data item đi kèm (tùy chọn, dùng khi integrate với list)
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
// Cấu hình cho từng item trong radio group (dùng khi xây Radio Group)
|
|
348
|
+
export interface IRadioItem {
|
|
349
|
+
key: any; // Key định danh bắt buộc
|
|
350
|
+
active: boolean; // Trạng thái active
|
|
351
|
+
classInclude?: string; // Custom class container
|
|
352
|
+
label?: string; // Label hiển thị (hỗ trợ i18n key)
|
|
353
|
+
labelInterpolateParams?: Record<string, unknown>; // Params cho translate
|
|
354
|
+
ignorePopoverLabel?: boolean; // Ẩn popover của label
|
|
355
|
+
classLabelInclude?: string; // Custom class label
|
|
356
|
+
popover?: IPopover; // Cấu hình popover
|
|
357
|
+
disable?: boolean; // Vô hiệu hóa
|
|
358
|
+
disableLabel?: boolean; // Vô hiệu hóa label
|
|
359
|
+
clickExactly?: boolean; // Điều khiển vùng click
|
|
360
|
+
zIndexLabel?: number; // z-index label
|
|
361
|
+
avatarConfig?: IAvatarConfig; // Cấu hình avatar
|
|
362
|
+
data?: any; // Data tùy ý đính kèm
|
|
363
|
+
[key: string]: any; // Mở rộng thêm fields
|
|
364
|
+
}
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
## Lưu ý quan trọng
|
|
368
|
+
|
|
369
|
+
⚠️ **Logic nhóm radio phải xử lý ở parent**: Component này là một radio button đơn lẻ, không tự tắt các radio khác. Parent component phải tự xử lý logic "chỉ một radio được active" bằng cách theo dõi `selectedKey` và truyền `[active]="selectedKey() === item.key"` cho từng radio.
|
|
370
|
+
|
|
371
|
+
⚠️ **clickExactly mặc định là true**: Mặc định người dùng phải click chính xác vào icon radio hoặc text label mới trigger toggle. Để click vào vùng container cũng trigger, cần truyền `[clickExactly]="false"` vào component.
|
|
372
|
+
|
|
373
|
+
⚠️ **Radio không tự toggle lại về false**: Một khi radio đã `active = true`, `handlerClick` và `changeActive` sẽ không làm gì (guard `if (this.active())` trả về sớm). Đây là hành vi chuẩn của radio button — không cho phép bỏ chọn khi đã chọn. Nếu muốn toggle, cần xử lý bên ngoài.
|
|
374
|
+
|
|
375
|
+
⚠️ **classLabelInclude ghi đè hoàn toàn**: Khi truyền `classLabelInclude`, giá trị mặc định `'libs-ui-font-h4r '` sẽ bị thay thế hoàn toàn. Nếu muốn giữ typography mặc định và thêm class khác, cần include lại: `classLabelInclude="libs-ui-font-h4r text-gray-600"`.
|
|
376
|
+
|
|
377
|
+
⚠️ **Image fallback dùng AfterViewInit**: Cơ chế fallback cho `linkImageError` chỉ hoạt động sau khi view khởi tạo. Nếu `linkImage` thay đổi dynamically, `linkImageDisplay` signal sẽ reset về `linkImage` mới nhờ `effect()`, nhưng listener lỗi chỉ được đăng ký một lần trong `ngAfterViewInit`.
|
|
122
378
|
|
|
123
379
|
## Demo
|
|
124
380
|
|
|
@@ -126,4 +382,4 @@ export class YourComponent {}
|
|
|
126
382
|
npx nx serve core-ui
|
|
127
383
|
```
|
|
128
384
|
|
|
129
|
-
Truy cập
|
|
385
|
+
Truy cập: http://localhost:4500/components/radio/single
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgComponentOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, computed, input, model, output, viewChild, inject, DestroyRef, effect, untracked,
|
|
3
|
+
import { signal, computed, input, model, output, viewChild, inject, DestroyRef, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
|
|
6
6
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-radio-single.mjs","sources":["../../../../../../libs-ui/components/radio/single/src/radio.component.ts","../../../../../../libs-ui/components/radio/single/src/radio.component.html","../../../../../../libs-ui/components/radio/single/src/interfaces/radio.interface.ts","../../../../../../libs-ui/components/radio/single/src/libs-ui-components-radio-single.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NgComponentOutlet } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, computed, effect, inject, input, model, output, signal, untracked, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IAvatarConfig, LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\nimport { LibsUiComponentsComponentOutletComponent, TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';\nimport { IFlagMouse, IPopover, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { fromEvent } from 'rxjs';\nimport { take } from 'rxjs/operators';\nimport { IRadioEvent } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-radio-single',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n standalone: true,\n imports: [TranslateModule, NgComponentOutlet, LibsUiComponentsAvatarComponent, LibsUiComponentsPopoverComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsRadioSingleComponent implements AfterViewInit {\n // #region PROPERTY\n protected linkImageDisplay = signal<string>('');\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 readonly key = input<unknown>();\n readonly active = model<boolean>(false);\n readonly classInclude = input<string>('');\n readonly label = input<string>('');\n readonly labelInterpolateParams = input<Record<string, unknown> | undefined, Record<string, unknown> | undefined>({}, { transform: (value) => value || {} });\n readonly ignorePopoverLabel = input<boolean>();\n readonly classLabelInclude = input<string | undefined, string | undefined>('libs-ui-font-h4r ', { transform: (value) => value || '' });\n readonly linkImage = input<string>('');\n readonly linkImageError = input<string>('');\n readonly avatarConfig = input<IAvatarConfig>();\n readonly classImageInclude = input<string>('');\n readonly imgTypeIcon = input<boolean>();\n readonly bullet = input<Record<string, string>>();\n readonly popover = input<IPopover>();\n readonly disable = input<boolean>();\n readonly disableLabel = input<boolean>();\n readonly clickExactly = input<boolean | undefined, boolean | undefined>(true, { transform: (value) => value ?? true });\n readonly typeRadio = input<'normal' | 'medium' | undefined, 'normal' | 'medium' | undefined>('normal', { transform: (value) => value || 'normal' });\n readonly ignoreRadio = input<boolean>();\n readonly zIndexLabel = input<number | undefined, number | undefined>(1200, { transform: (value) => value ?? 1200 });\n readonly classIncludeIcon = input<string | undefined, string | undefined>('', { transform: (value) => value || '' });\n\n readonly dataComponentOutlet = input<TYPE_COMPONENT_OUTLET_DATA>();\n readonly componentOutlet = input<LibsUiComponentsComponentOutletComponent | any>();\n\n // #region OUTPUT\n readonly outClickLabel = output<void>();\n readonly outChange = output<IRadioEvent>();\n readonly outChangStageFlagMousePopover = output<IFlagMouse>();\n\n /* VIEW CHILD */\n private readonly imageEl = viewChild<ElementRef>('imageEl');\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n effect(() => {\n this.linkImage();\n untracked(() => this.linkImageDisplay.set(this.linkImage()));\n });\n }\n\n ngAfterViewInit() {\n if (this.imageEl()) {\n fromEvent(this.imageEl()?.nativeElement, 'error')\n .pipe(take(1), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.linkImageDisplay.set(this.linkImageError());\n });\n }\n }\n\n /* FUNCTIONS */\n protected async handlerClick(e: Event) {\n if (this.clickExactly()) {\n return;\n }\n e.stopPropagation();\n this.changeActive();\n }\n\n protected async handlerEventLabel(type: string) {\n if (type === 'click') {\n this.outClickLabel.emit();\n this.changeActive();\n }\n }\n\n private async changeActive() {\n if (this.active() || this.disable()) {\n return;\n }\n this.active.update((value) => !value);\n this.outChange.emit({ active: this.active(), key: this.key() });\n }\n\n protected async handlerChangStageFlagMouse(flag: IFlagMouse) {\n this.outChangStageFlagMousePopover.emit(flag);\n }\n}\n","<div\n [class]=\"'libs-ui-radio ' + classInclude()\"\n [class.cursor-pointer]=\"!clickExactly()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n @if (!ignoreRadio()) {\n <div\n [class.libs-ui-icon-radio-unselected]=\"!active()\"\n [class.text-[#6a7383]]=\"!active()\"\n [class.libs-ui-icon-radio-selected]=\"active()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-active]=\"disable() && active()\"\n [class.pointer-events-none]=\"disable()\"\n [class]=\"classIncludeIcon() + ' libs-ui-radio-type-' + typeRadio()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\"></div>\n }\n @if (linkImageDisplay()) {\n <img\n #imageEl\n [src]=\"linkImageDisplay()\"\n [class]=\"'libs-ui-radio-image ' + classImageInclude()\"\n alt=\"\"\n [class.cursor-default]=\"disable()\"\n [class.w-[18px]]=\"imgTypeIcon()\"\n [class.h-[18px]]=\"imgTypeIcon()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\" />\n }\n @if (avatarConfig(); as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape || 'circle'\"\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 (bullet(); as bulletConfig) {\n <div\n class=\"libs-ui-radio-bullet\"\n [style.background-color]=\"bulletConfig['backgroundColor']\"\n [class.cursor-default]=\"disable()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\"></div>\n }\n @if (label()) {\n <libs_ui-components-popover\n type=\"text\"\n [attr.isLabel]=\"true\"\n [classInclude]=\"classLabelInclude() + (disable() ? ' cursor-default' : ' cursor-pointer')\"\n [ignoreCursorPointerModeLikeClick]=\"disable()\"\n [class.libs-ui-disable]=\"disableLabel()\"\n [ignoreShowPopover]=\"ignorePopoverLabel()\"\n [config]=\"{ content: label(), timerDestroy: 50, zIndex: zIndexLabel() }\"\n [innerHTML]=\"label() | translate: labelInterpolateParams()\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n (outEvent)=\"handlerEventLabel($event)\" />\n }\n @if (popover(); as popover) {\n @if (!popover.dataView) {\n <i\n LibsUiComponentsPopoverDirective\n [config]=\"popover.config\"\n [class]=\"popover.classInclude ?? 'libs-ui-icon-tooltip-outline'\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></i>\n }\n @if (popover.dataView) {\n @let constHtmlDataView = popover.dataView || ' ';\n <div\n LibsUiComponentsPopoverDirective\n [config]=\"popover.config\"\n [innerHtml]=\"constHtmlDataView | translate\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></div>\n }\n }\n @if (dataComponentOutletComputed(); as dataComponentOutletComputed) {\n <ng-container *ngComponentOutlet=\"dataComponentOutletComputed.component; inputs: dataComponentOutletComputed.inputs\" />\n }\n</div>\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { IAvatarConfig } from '@libs-ui/components-avatar';\nimport { IPopover } from '@libs-ui/components-popover';\n\nexport interface IRadioItem {\n key: any;\n active: boolean;\n classInclude?: string;\n label?: string;\n labelInterpolateParams?: Record<string, unknown>;\n ignorePopoverLabel?: boolean;\n classLabelInclude?: string;\n popover?: IPopover;\n disable?: boolean;\n disableLabel?: boolean;\n clickExactly?: boolean;\n zIndexLabel?: number;\n avatarConfig?: IAvatarConfig;\n data?: any;\n [key: string]: any;\n}\n\nexport interface IRadioEvent {\n active: boolean;\n key: any;\n item?: any;\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-radio-single.mjs","sources":["../../../../../../libs-ui/components/radio/single/src/radio.component.ts","../../../../../../libs-ui/components/radio/single/src/radio.component.html","../../../../../../libs-ui/components/radio/single/src/interfaces/radio.interface.ts","../../../../../../libs-ui/components/radio/single/src/libs-ui-components-radio-single.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NgComponentOutlet } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, computed, effect, inject, input, model, output, signal, untracked, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IAvatarConfig, LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';\nimport { LibsUiComponentsComponentOutletComponent, TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';\nimport { IFlagMouse, IPopover, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { fromEvent } from 'rxjs';\nimport { take } from 'rxjs/operators';\nimport { IRadioEvent } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-radio-single',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n standalone: true,\n imports: [TranslateModule, NgComponentOutlet, LibsUiComponentsAvatarComponent, LibsUiComponentsPopoverComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsRadioSingleComponent implements AfterViewInit {\n // #region PROPERTY\n protected linkImageDisplay = signal<string>('');\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 readonly key = input<unknown>();\n readonly active = model<boolean>(false);\n readonly classInclude = input<string>('');\n readonly label = input<string>('');\n readonly labelInterpolateParams = input<Record<string, unknown> | undefined, Record<string, unknown> | undefined>({}, { transform: (value) => value || {} });\n readonly ignorePopoverLabel = input<boolean>();\n readonly classLabelInclude = input<string | undefined, string | undefined>('libs-ui-font-h4r ', { transform: (value) => value || '' });\n readonly linkImage = input<string>('');\n readonly linkImageError = input<string>('');\n readonly avatarConfig = input<IAvatarConfig>();\n readonly classImageInclude = input<string>('');\n readonly imgTypeIcon = input<boolean>();\n readonly bullet = input<Record<string, string>>();\n readonly popover = input<IPopover>();\n readonly disable = input<boolean>();\n readonly disableLabel = input<boolean>();\n readonly clickExactly = input<boolean | undefined, boolean | undefined>(true, { transform: (value) => value ?? true });\n readonly typeRadio = input<'normal' | 'medium' | undefined, 'normal' | 'medium' | undefined>('normal', { transform: (value) => value || 'normal' });\n readonly ignoreRadio = input<boolean>();\n readonly zIndexLabel = input<number | undefined, number | undefined>(1200, { transform: (value) => value ?? 1200 });\n readonly classIncludeIcon = input<string | undefined, string | undefined>('', { transform: (value) => value || '' });\n\n readonly dataComponentOutlet = input<TYPE_COMPONENT_OUTLET_DATA>();\n readonly componentOutlet = input<LibsUiComponentsComponentOutletComponent | any>();\n\n // #region OUTPUT\n readonly outClickLabel = output<void>();\n readonly outChange = output<IRadioEvent>();\n readonly outChangStageFlagMousePopover = output<IFlagMouse>();\n\n /* VIEW CHILD */\n private readonly imageEl = viewChild<ElementRef>('imageEl');\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n effect(() => {\n this.linkImage();\n untracked(() => this.linkImageDisplay.set(this.linkImage()));\n });\n }\n\n ngAfterViewInit() {\n if (this.imageEl()) {\n fromEvent(this.imageEl()?.nativeElement, 'error')\n .pipe(take(1), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.linkImageDisplay.set(this.linkImageError());\n });\n }\n }\n\n /* FUNCTIONS */\n protected async handlerClick(e: Event) {\n if (this.clickExactly()) {\n return;\n }\n e.stopPropagation();\n this.changeActive();\n }\n\n protected async handlerEventLabel(type: string) {\n if (type === 'click') {\n this.outClickLabel.emit();\n this.changeActive();\n }\n }\n\n private async changeActive() {\n if (this.active() || this.disable()) {\n return;\n }\n this.active.update((value) => !value);\n this.outChange.emit({ active: this.active(), key: this.key() });\n }\n\n protected async handlerChangStageFlagMouse(flag: IFlagMouse) {\n this.outChangStageFlagMousePopover.emit(flag);\n }\n}\n","<div\n [class]=\"'libs-ui-radio ' + classInclude()\"\n [class.cursor-pointer]=\"!clickExactly()\"\n (click)=\"handlerClick($event)\"\n (keydown.enter)=\"handlerClick($event)\">\n @if (!ignoreRadio()) {\n <div\n [class.libs-ui-icon-radio-unselected]=\"!active()\"\n [class.text-[#6a7383]]=\"!active()\"\n [class.libs-ui-icon-radio-selected]=\"active()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-active]=\"disable() && active()\"\n [class.pointer-events-none]=\"disable()\"\n [class]=\"classIncludeIcon() + ' libs-ui-radio-type-' + typeRadio()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\"></div>\n }\n @if (linkImageDisplay()) {\n <img\n #imageEl\n [src]=\"linkImageDisplay()\"\n [class]=\"'libs-ui-radio-image ' + classImageInclude()\"\n alt=\"\"\n [class.cursor-default]=\"disable()\"\n [class.w-[18px]]=\"imgTypeIcon()\"\n [class.h-[18px]]=\"imgTypeIcon()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\" />\n }\n @if (avatarConfig(); as avatarConfig) {\n <libs_ui-components-avatar\n [typeShape]=\"avatarConfig.typeShape || 'circle'\"\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 (bullet(); as bulletConfig) {\n <div\n class=\"libs-ui-radio-bullet\"\n [style.background-color]=\"bulletConfig['backgroundColor']\"\n [class.cursor-default]=\"disable()\"\n (click)=\"handlerEventLabel('click')\"\n (keydown.enter)=\"handlerEventLabel('click')\"></div>\n }\n @if (label()) {\n <libs_ui-components-popover\n type=\"text\"\n [attr.isLabel]=\"true\"\n [classInclude]=\"classLabelInclude() + (disable() ? ' cursor-default' : ' cursor-pointer')\"\n [ignoreCursorPointerModeLikeClick]=\"disable()\"\n [class.libs-ui-disable]=\"disableLabel()\"\n [ignoreShowPopover]=\"ignorePopoverLabel()\"\n [config]=\"{ content: label(), timerDestroy: 50, zIndex: zIndexLabel() }\"\n [innerHTML]=\"label() | translate: labelInterpolateParams()\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n (outEvent)=\"handlerEventLabel($event)\" />\n }\n @if (popover(); as popover) {\n @if (!popover.dataView) {\n <i\n LibsUiComponentsPopoverDirective\n [config]=\"popover.config\"\n [class]=\"popover.classInclude ?? 'libs-ui-icon-tooltip-outline'\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></i>\n }\n @if (popover.dataView) {\n @let constHtmlDataView = popover.dataView || ' ';\n <div\n LibsUiComponentsPopoverDirective\n [config]=\"popover.config\"\n [innerHtml]=\"constHtmlDataView | translate\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"></div>\n }\n }\n @if (dataComponentOutletComputed(); as dataComponentOutletComputed) {\n <ng-container *ngComponentOutlet=\"dataComponentOutletComputed.component; inputs: dataComponentOutletComputed.inputs\" />\n }\n</div>\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { IAvatarConfig } from '@libs-ui/components-avatar';\nimport { IPopover } from '@libs-ui/components-popover';\n\nexport interface IRadioItem {\n key: any;\n active: boolean;\n classInclude?: string;\n label?: string;\n labelInterpolateParams?: Record<string, unknown>;\n ignorePopoverLabel?: boolean;\n classLabelInclude?: string;\n popover?: IPopover;\n disable?: boolean;\n disableLabel?: boolean;\n clickExactly?: boolean;\n zIndexLabel?: number;\n avatarConfig?: IAvatarConfig;\n data?: any;\n [key: string]: any;\n}\n\nexport interface IRadioEvent {\n active: boolean;\n key: any;\n item?: any;\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,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-radio-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-
|
|
6
|
+
"@libs-ui/components-avatar": "0.2.356-43",
|
|
7
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
8
8
|
"@ngx-translate/core": "^15.0.0",
|
|
9
9
|
"rxjs": "~7.8.0",
|
|
10
|
-
"@libs-ui/components-component-outlet": "0.2.356-
|
|
10
|
+
"@libs-ui/components-component-outlet": "0.2.356-43",
|
|
11
11
|
"@angular/common": "~18.2.0"
|
|
12
12
|
},
|
|
13
13
|
"sideEffects": false,
|