@libs-ui/components-buttons-status 0.2.356-41 → 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,23 +1,28 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-buttons-status
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
>
|
|
5
|
-
> Component hiển thị status dạng pill, hỗ trợ icon trái/phải, translate label và tuỳ biến màu theo type hoặc `otherConfig`.
|
|
3
|
+
> Component hiển thị trạng thái dạng pill gọn nhẹ, hỗ trợ nhiều type màu chuẩn, màu tuỳ biến, icon trái/phải kèm popover, và tự động translate label.
|
|
6
4
|
|
|
7
5
|
## Giới thiệu
|
|
8
6
|
|
|
9
|
-
`LibsUiComponentsButtonsStatusComponent` là
|
|
7
|
+
`LibsUiComponentsButtonsStatusComponent` là Angular Standalone component dùng để hiển thị nhãn trạng thái (status pill/badge) trong các danh sách, bảng, hoặc form. Component nhận một object `config` duy nhất chứa toàn bộ cấu hình: label, type màu, tuỳ biến màu ngoài hệ thống, icon trái/phải và popover tương ứng. Màu sắc được tự động tính toán từ `LibsUiConfigProjectService` hoặc từ `otherConfig` khi cần màu nằm ngoài bảng màu chuẩn.
|
|
10
8
|
|
|
11
9
|
## Tính năng
|
|
12
10
|
|
|
13
|
-
- ✅ Hiển thị status dạng pill gọn nhẹ
|
|
14
|
-
- ✅
|
|
15
|
-
- ✅ Tuỳ biến màu với type `other` + `otherConfig`
|
|
16
|
-
- ✅
|
|
17
|
-
- ✅ Hỗ trợ
|
|
18
|
-
- ✅
|
|
19
|
-
- ✅
|
|
20
|
-
- ✅ Angular Signals
|
|
11
|
+
- ✅ Hiển thị status dạng pill gọn nhẹ với label dịch tự động qua `@ngx-translate/core`
|
|
12
|
+
- ✅ 8 type màu chuẩn: `blue`, `green`, `red`, `orange`, `yellow`, `cyan`, `purple`, `brown`
|
|
13
|
+
- ✅ Tuỳ biến màu hoàn toàn với type `other` + `otherConfig` (color + background)
|
|
14
|
+
- ✅ Tự động tính toán màu nền tương phản khi chỉ cung cấp `color`
|
|
15
|
+
- ✅ Hỗ trợ icon trái/phải qua class name (`classIconLeft` / `classIconRight`)
|
|
16
|
+
- ✅ Hỗ trợ popover cho từng icon (thông qua `IPopover`)
|
|
17
|
+
- ✅ Tuỳ biến class bên ngoài qua `classInclude` và `classLabelInclude`
|
|
18
|
+
- ✅ OnPush Change Detection + Angular Signals
|
|
19
|
+
|
|
20
|
+
## Khi nào sử dụng
|
|
21
|
+
|
|
22
|
+
- Khi cần hiển thị trạng thái ngắn gọn trong cột bảng (Active, Pending, Error, Draft...)
|
|
23
|
+
- Khi cần pill/badge màu sắc đồng nhất theo hệ thống màu của project
|
|
24
|
+
- Khi cần trạng thái với màu tuỳ biến nằm ngoài bảng màu chuẩn (dùng `type: 'other'`)
|
|
25
|
+
- Khi cần thêm icon kèm tooltip/popover mô tả thêm thông tin cho trạng thái
|
|
21
26
|
|
|
22
27
|
## Cài đặt
|
|
23
28
|
|
|
@@ -27,127 +32,285 @@ npm install @libs-ui/components-buttons-status
|
|
|
27
32
|
|
|
28
33
|
## Import
|
|
29
34
|
|
|
35
|
+
```typescript
|
|
36
|
+
import {
|
|
37
|
+
LibsUiComponentsButtonsStatusComponent,
|
|
38
|
+
IButtonStatus,
|
|
39
|
+
TYPE_BUTTON_STATUS,
|
|
40
|
+
} from '@libs-ui/components-buttons-status';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Ví dụ sử dụng
|
|
44
|
+
|
|
45
|
+
### 1. Basic — Status đơn giản với type màu chuẩn
|
|
46
|
+
|
|
30
47
|
```typescript
|
|
31
48
|
import { Component } from '@angular/core';
|
|
32
|
-
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus
|
|
49
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
33
50
|
|
|
34
51
|
@Component({
|
|
52
|
+
selector: 'app-example',
|
|
35
53
|
standalone: true,
|
|
36
54
|
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
37
|
-
template:
|
|
55
|
+
template: `
|
|
56
|
+
<libs_ui-components-buttons-status [config]="activeStatus" />
|
|
57
|
+
`,
|
|
38
58
|
})
|
|
39
|
-
export class ExampleComponent {
|
|
59
|
+
export class ExampleComponent {
|
|
60
|
+
readonly activeStatus: IButtonStatus = {
|
|
61
|
+
label: 'Đang hoạt động',
|
|
62
|
+
type: 'blue',
|
|
63
|
+
};
|
|
64
|
+
}
|
|
40
65
|
```
|
|
41
66
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
### 1. Ví dụ inline template
|
|
45
|
-
|
|
46
|
-
```html
|
|
47
|
-
<libs_ui-components-buttons-status
|
|
48
|
-
[config]="statusConfig"
|
|
49
|
-
/>
|
|
50
|
-
```
|
|
67
|
+
### 2. Variants — Nhiều type màu trong một danh sách
|
|
51
68
|
|
|
52
69
|
```typescript
|
|
53
70
|
import { Component } from '@angular/core';
|
|
54
71
|
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
55
72
|
|
|
56
73
|
@Component({
|
|
74
|
+
selector: 'app-variants',
|
|
57
75
|
standalone: true,
|
|
58
76
|
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
59
|
-
template:
|
|
77
|
+
template: `
|
|
78
|
+
<div class="flex flex-wrap gap-2">
|
|
79
|
+
@for (item of variants; track item.type) {
|
|
80
|
+
<libs_ui-components-buttons-status [config]="item" />
|
|
81
|
+
}
|
|
82
|
+
</div>
|
|
83
|
+
`,
|
|
60
84
|
})
|
|
61
|
-
export class
|
|
62
|
-
readonly
|
|
63
|
-
label: '
|
|
64
|
-
type: '
|
|
65
|
-
|
|
85
|
+
export class VariantsExampleComponent {
|
|
86
|
+
readonly variants: IButtonStatus[] = [
|
|
87
|
+
{ label: 'Active', type: 'blue' },
|
|
88
|
+
{ label: 'Success', type: 'green' },
|
|
89
|
+
{ label: 'Error', type: 'red' },
|
|
90
|
+
{ label: 'Warning', type: 'orange' },
|
|
91
|
+
{ label: 'Pending', type: 'yellow' },
|
|
92
|
+
{ label: 'Info', type: 'cyan' },
|
|
93
|
+
{ label: 'Review', type: 'purple' },
|
|
94
|
+
{ label: 'Draft', type: 'brown' },
|
|
95
|
+
];
|
|
66
96
|
}
|
|
67
97
|
```
|
|
68
98
|
|
|
69
|
-
###
|
|
99
|
+
### 3. With Icons — Thêm icon trái/phải kèm popover
|
|
70
100
|
|
|
71
|
-
|
|
101
|
+
```typescript
|
|
102
|
+
import { Component } from '@angular/core';
|
|
103
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
72
104
|
|
|
73
|
-
|
|
74
|
-
|
|
105
|
+
@Component({
|
|
106
|
+
selector: 'app-with-icons',
|
|
107
|
+
standalone: true,
|
|
108
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
109
|
+
template: `
|
|
110
|
+
<libs_ui-components-buttons-status [config]="withIconsConfig" />
|
|
111
|
+
`,
|
|
112
|
+
})
|
|
113
|
+
export class WithIconsExampleComponent {
|
|
114
|
+
readonly withIconsConfig: IButtonStatus = {
|
|
115
|
+
label: 'Đang xử lý',
|
|
116
|
+
type: 'cyan',
|
|
117
|
+
classIconLeft: 'libs-ui-icon-info-circle',
|
|
118
|
+
popoverIconLeft: {
|
|
119
|
+
type: 'text',
|
|
120
|
+
dataView: 'Trạng thái đang chờ phê duyệt',
|
|
121
|
+
},
|
|
122
|
+
classIconRight: 'libs-ui-icon-chevron-right',
|
|
123
|
+
};
|
|
124
|
+
}
|
|
75
125
|
```
|
|
76
126
|
|
|
77
|
-
|
|
127
|
+
### 4. Other — Màu tuỳ biến hoàn toàn
|
|
78
128
|
|
|
79
129
|
```typescript
|
|
80
130
|
import { Component } from '@angular/core';
|
|
81
131
|
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
82
132
|
|
|
83
133
|
@Component({
|
|
134
|
+
selector: 'app-custom-color',
|
|
84
135
|
standalone: true,
|
|
85
136
|
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
86
|
-
|
|
137
|
+
template: `
|
|
138
|
+
<div class="flex gap-2">
|
|
139
|
+
<libs_ui-components-buttons-status [config]="customFull" />
|
|
140
|
+
<libs_ui-components-buttons-status [config]="customColorOnly" />
|
|
141
|
+
</div>
|
|
142
|
+
`,
|
|
87
143
|
})
|
|
88
|
-
export class
|
|
89
|
-
|
|
144
|
+
export class CustomColorExampleComponent {
|
|
145
|
+
// Tuỳ biến cả color lẫn background
|
|
146
|
+
readonly customFull: IButtonStatus = {
|
|
147
|
+
label: 'VIP',
|
|
148
|
+
type: 'other',
|
|
149
|
+
otherConfig: {
|
|
150
|
+
color: '#7c3aed',
|
|
151
|
+
background: '#ede9fe',
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
// Chỉ cần color — background tự động tính tương phản
|
|
156
|
+
readonly customColorOnly: IButtonStatus = {
|
|
90
157
|
label: 'Custom',
|
|
91
158
|
type: 'other',
|
|
92
159
|
otherConfig: {
|
|
93
160
|
color: '#0ea5e9',
|
|
94
|
-
background: '#e0f2fe',
|
|
95
161
|
},
|
|
96
|
-
classIconLeft: 'libs-ui-icon-info-circle',
|
|
97
|
-
classIconRight: 'libs-ui-icon-chevron-right',
|
|
98
162
|
};
|
|
99
163
|
}
|
|
100
164
|
```
|
|
101
165
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
| Technology | Version | Purpose |
|
|
105
|
-
|------------|---------|---------|
|
|
106
|
-
| Angular | 18+ | Framework |
|
|
107
|
-
| Angular Signals | - | State management |
|
|
108
|
-
| TailwindCSS | 3.x | Styling (demo) |
|
|
109
|
-
| OnPush | - | Change Detection |
|
|
110
|
-
| ngx-translate | 15+ | Translate label |
|
|
166
|
+
### 5. Trong bảng dữ liệu (table column)
|
|
111
167
|
|
|
112
|
-
|
|
168
|
+
```typescript
|
|
169
|
+
import { Component } from '@angular/core';
|
|
170
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
113
171
|
|
|
114
|
-
|
|
172
|
+
@Component({
|
|
173
|
+
selector: 'app-table-status',
|
|
174
|
+
standalone: true,
|
|
175
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
176
|
+
template: `
|
|
177
|
+
<table>
|
|
178
|
+
<tbody>
|
|
179
|
+
@for (row of tableData; track row.id) {
|
|
180
|
+
<tr>
|
|
181
|
+
<td>{{ row.name }}</td>
|
|
182
|
+
<td>
|
|
183
|
+
<libs_ui-components-buttons-status [config]="row.statusConfig" />
|
|
184
|
+
</td>
|
|
185
|
+
</tr>
|
|
186
|
+
}
|
|
187
|
+
</tbody>
|
|
188
|
+
</table>
|
|
189
|
+
`,
|
|
190
|
+
})
|
|
191
|
+
export class TableStatusExampleComponent {
|
|
192
|
+
readonly tableData = [
|
|
193
|
+
{ id: 1, name: 'Hợp đồng A', statusConfig: { label: 'Đã ký', type: 'green' } as IButtonStatus },
|
|
194
|
+
{ id: 2, name: 'Hợp đồng B', statusConfig: { label: 'Chờ duyệt', type: 'yellow' } as IButtonStatus },
|
|
195
|
+
{ id: 3, name: 'Hợp đồng C', statusConfig: { label: 'Từ chối', type: 'red' } as IButtonStatus },
|
|
196
|
+
];
|
|
197
|
+
}
|
|
198
|
+
```
|
|
115
199
|
|
|
116
|
-
|
|
200
|
+
## @Input()
|
|
117
201
|
|
|
118
|
-
|
|
|
119
|
-
|
|
120
|
-
| `[config]` | `IButtonStatus` |
|
|
202
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
203
|
+
|---|---|---|---|---|
|
|
204
|
+
| `[config]` | `IButtonStatus` | required | Object cấu hình toàn bộ status pill: label, type màu, tuỳ biến màu, icon trái/phải, popover và class bổ sung | `[config]="{ label: 'Active', type: 'green' }"` |
|
|
121
205
|
|
|
122
|
-
|
|
206
|
+
## @Output()
|
|
123
207
|
|
|
124
|
-
Component này
|
|
208
|
+
Component này không có output. Đây là component hiển thị thuần — tương tác (click, hover) được xử lý ở component cha thông qua wrapper hoặc event delegation.
|
|
125
209
|
|
|
126
210
|
## Types & Interfaces
|
|
127
211
|
|
|
212
|
+
```typescript
|
|
213
|
+
import { IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### IButtonStatus
|
|
217
|
+
|
|
128
218
|
```typescript
|
|
129
219
|
export interface IButtonStatus {
|
|
220
|
+
/** Label hiển thị trong pill — được translate tự động qua @ngx-translate/core */
|
|
130
221
|
label?: string;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Type màu của status pill.
|
|
225
|
+
* - `'blue'` | `'green'` | `'red'` | `'orange'` | `'yellow'` | `'cyan'` | `'purple'` | `'brown'`: lấy màu từ LibsUiConfigProjectService
|
|
226
|
+
* - `'other'`: bắt buộc cung cấp `otherConfig.color`, tuỳ chọn `otherConfig.background`
|
|
227
|
+
*/
|
|
131
228
|
type: TYPE_BUTTON_STATUS;
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Chỉ áp dụng khi `type === 'other'`.
|
|
232
|
+
* - `color`: màu chữ/icon (hex, rgb... đều được)
|
|
233
|
+
* - `background`: màu nền. Nếu bỏ qua, tự động tính màu tương phản từ `color` với độ sáng 90%
|
|
234
|
+
*/
|
|
132
235
|
otherConfig?: {
|
|
133
236
|
color: string;
|
|
134
237
|
background?: string;
|
|
135
238
|
};
|
|
239
|
+
|
|
240
|
+
/** Class CSS bổ sung cho thẻ `<button>` gốc */
|
|
136
241
|
classInclude?: string;
|
|
242
|
+
|
|
243
|
+
/** Class CSS bổ sung cho thẻ `<span>` chứa label. Mặc định: `'libs-ui-font-h6r'` */
|
|
137
244
|
classLabelInclude?: string;
|
|
245
|
+
|
|
246
|
+
/** Class icon bên trái (VD: `'libs-ui-icon-info-circle'`) */
|
|
138
247
|
classIconLeft?: string;
|
|
248
|
+
|
|
249
|
+
/** Cấu hình popover cho icon bên trái */
|
|
139
250
|
popoverIconLeft?: IPopover;
|
|
251
|
+
|
|
252
|
+
/** Class icon bên phải (VD: `'libs-ui-icon-chevron-right'`) */
|
|
140
253
|
classIconRight?: string;
|
|
254
|
+
|
|
255
|
+
/** Cấu hình popover cho icon bên phải */
|
|
141
256
|
popoverIconRight?: IPopover;
|
|
142
257
|
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### TYPE_BUTTON_STATUS
|
|
261
|
+
|
|
262
|
+
```typescript
|
|
263
|
+
export type TYPE_BUTTON_STATUS =
|
|
264
|
+
| 'blue'
|
|
265
|
+
| 'green'
|
|
266
|
+
| 'red'
|
|
267
|
+
| 'orange'
|
|
268
|
+
| 'yellow'
|
|
269
|
+
| 'cyan'
|
|
270
|
+
| 'purple'
|
|
271
|
+
| 'brown'
|
|
272
|
+
| 'other';
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### IPopover (từ `@libs-ui/components-popover`)
|
|
143
276
|
|
|
144
|
-
|
|
277
|
+
```typescript
|
|
278
|
+
import { IPopover } from '@libs-ui/components-popover';
|
|
279
|
+
|
|
280
|
+
// Các trường thường dùng cho icon popover:
|
|
281
|
+
const iconPopover: IPopover = {
|
|
282
|
+
type: 'text', // 'text' | 'other' | ...
|
|
283
|
+
dataView: 'Mô tả ngắn hiển thị khi hover icon',
|
|
284
|
+
ignoreShowPopover: false,
|
|
285
|
+
classInclude: '',
|
|
286
|
+
};
|
|
145
287
|
```
|
|
146
288
|
|
|
147
|
-
|
|
289
|
+
## Lưu ý quan trọng
|
|
290
|
+
|
|
291
|
+
⚠️ **`otherConfig` bắt buộc khi `type === 'other'`**: Nếu `type` là `'other'` mà thiếu `otherConfig.color`, component sẽ không hiển thị màu (fallback về giá trị rỗng). Luôn cung cấp ít nhất `otherConfig: { color: '#hex' }`.
|
|
292
|
+
|
|
293
|
+
⚠️ **`background` tự động tính khi bỏ qua**: Khi chỉ cung cấp `otherConfig.color` mà không có `background`, component tự gọi `colorStepContrastFromOrigin(color, 90)?.light` để tạo màu nền tương phản. Kết quả phụ thuộc vào màu gốc, hãy kiểm tra thực tế nếu cần màu chính xác.
|
|
148
294
|
|
|
149
|
-
|
|
150
|
-
|
|
295
|
+
⚠️ **Label được translate tự động**: Giá trị `label` được đẩy qua pipe `translate` của `@ngx-translate/core`. Nếu muốn hiển thị chuỗi thô (không translate), đảm bảo chuỗi đó không trùng với key trong file i18n, hoặc cấu hình `TranslateService` để bỏ qua.
|
|
296
|
+
|
|
297
|
+
⚠️ **Màu chuẩn lấy từ ConfigProjectService**: Các type `blue`, `green`, `red`... lấy cấu hình màu từ `LibsUiConfigProjectService.ConfigButtonStatus`. Nếu project chưa cấu hình service này, màu có thể hiển thị không đúng.
|
|
298
|
+
|
|
299
|
+
⚠️ **Không tự handle sự kiện click**: Component chỉ render UI. Nếu cần xử lý click, hãy bọc bên ngoài bằng `<div (click)="handlerClick($event)">` ở component cha:
|
|
300
|
+
|
|
301
|
+
```html
|
|
302
|
+
<!-- Component cha -->
|
|
303
|
+
<div (click)="handlerStatusClick($event)">
|
|
304
|
+
<libs_ui-components-buttons-status [config]="statusConfig" />
|
|
305
|
+
</div>
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
```typescript
|
|
309
|
+
protected handlerStatusClick(event: MouseEvent): void {
|
|
310
|
+
event.stopPropagation();
|
|
311
|
+
// xử lý logic
|
|
312
|
+
}
|
|
313
|
+
```
|
|
151
314
|
|
|
152
315
|
## Demo
|
|
153
316
|
|
|
@@ -155,5 +318,4 @@ export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow'
|
|
|
155
318
|
npx nx serve core-ui
|
|
156
319
|
```
|
|
157
320
|
|
|
158
|
-
Truy cập: `http://localhost:4500/buttons/status`
|
|
159
|
-
|
|
321
|
+
Truy cập: `http://localhost:4500/components/buttons/status`
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, inject, input, viewChild, effect, untracked,
|
|
2
|
+
import { signal, inject, input, viewChild, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
4
|
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
5
5
|
import { get, colorStepContrastFromOrigin } from '@libs-ui/utils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-buttons-status.mjs","sources":["../../../../../../libs-ui/components/buttons/status/src/status.component.ts","../../../../../../libs-ui/components/buttons/status/src/status.component.html","../../../../../../libs-ui/components/buttons/status/src/libs-ui-components-buttons-status.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, signal, untracked, viewChild } from '@angular/core';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { PathOf } from '@libs-ui/interfaces-types';\nimport { LibsUiConfigProjectService } from '@libs-ui/services-config-project';\nimport { colorStepContrastFromOrigin, get } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonStatus } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-status',\n templateUrl: './status.component.html',\n styleUrl: './status.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsStatusComponent {\n // #region PROPERTY\n protected classBinding = signal('');\n\n private readonly configProjectService = inject(LibsUiConfigProjectService);\n\n // #region INPUT\n readonly config = input.required<IButtonStatus>();\n\n /* VIEW CHILD */\n private readonly buttonEl = viewChild<ElementRef>('buttonEl');\n\n constructor() {\n effect(() => this.setClassByType());\n }\n\n /* FUNCTIONS */\n private async setClassByType() {\n untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));\n const keys = ['color', 'background'];\n const config = this.config().type === 'other' ? this.config().otherConfig : get(this.configProjectService.ConfigButtonStatus, this.config().type);\n\n keys.forEach((key) => {\n const color = get(config, key as PathOf<typeof config>) || colorStepContrastFromOrigin(get(config, 'color', ''), 90)?.light;\n\n this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);\n });\n }\n}\n","<button\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAiBa,sCAAsC,CAAA;;AAEvC,IAAA,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"libs-ui-components-buttons-status.mjs","sources":["../../../../../../libs-ui/components/buttons/status/src/status.component.ts","../../../../../../libs-ui/components/buttons/status/src/status.component.html","../../../../../../libs-ui/components/buttons/status/src/libs-ui-components-buttons-status.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, signal, untracked, viewChild } from '@angular/core';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { PathOf } from '@libs-ui/interfaces-types';\nimport { LibsUiConfigProjectService } from '@libs-ui/services-config-project';\nimport { colorStepContrastFromOrigin, get } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonStatus } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-status',\n templateUrl: './status.component.html',\n styleUrl: './status.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsStatusComponent {\n // #region PROPERTY\n protected classBinding = signal('');\n\n private readonly configProjectService = inject(LibsUiConfigProjectService);\n\n // #region INPUT\n readonly config = input.required<IButtonStatus>();\n\n /* VIEW CHILD */\n private readonly buttonEl = viewChild<ElementRef>('buttonEl');\n\n constructor() {\n effect(() => this.setClassByType());\n }\n\n /* FUNCTIONS */\n private async setClassByType() {\n untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));\n const keys = ['color', 'background'];\n const config = this.config().type === 'other' ? this.config().otherConfig : get(this.configProjectService.ConfigButtonStatus, this.config().type);\n\n keys.forEach((key) => {\n const color = get(config, key as PathOf<typeof config>) || colorStepContrastFromOrigin(get(config, 'color', ''), 90)?.light;\n\n this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);\n });\n }\n}\n","<button\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\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-buttons-status",
|
|
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-popover": "0.2.356-
|
|
7
|
-
"@libs-ui/services-config-project": "0.2.356-
|
|
8
|
-
"@libs-ui/utils": "0.2.356-
|
|
6
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
7
|
+
"@libs-ui/services-config-project": "0.2.356-43",
|
|
8
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0",
|
|
10
|
-
"@libs-ui/interfaces-types": "0.2.356-
|
|
10
|
+
"@libs-ui/interfaces-types": "0.2.356-43"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-buttons-status.mjs",
|