@libs-ui/components-process-bar-standard 0.2.356-9 → 0.2.357-1
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,36 +1,33 @@
|
|
|
1
1
|
# @libs-ui/components-process-bar-standard
|
|
2
2
|
|
|
3
|
-
> Component hiển thị tiến trình dạng
|
|
3
|
+
> Component hiển thị thanh tiến trình (progress bar) dạng stack hoặc separate với hỗ trợ Angular Signals.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsProcessBarStandardComponent` là
|
|
7
|
+
`LibsUiComponentsProcessBarStandardComponent` là standalone Angular component hiển thị thanh tiến trình đa bước. Component hỗ trợ 2 chế độ: **stack** (các bước ghép liền nhau thành 1 thanh) và **separate** (mỗi bước là 1 thanh riêng). Toàn bộ state quản lý qua Angular Signals với kiến trúc Nested Signal — mỗi step là một `WritableSignal` độc lập, cho phép cập nhật realtime mà không re-render toàn bộ.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅
|
|
12
|
-
- ✅
|
|
13
|
-
- ✅
|
|
14
|
-
- ✅
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
17
|
-
- ✅
|
|
11
|
+
- ✅ Chế độ **Stack** — các bước nối liền nhau trên 1 thanh, tỷ lệ tính tự động theo `totalValue`
|
|
12
|
+
- ✅ Chế độ **Separate** — mỗi bước hiển thị thành 1 thanh riêng biệt kèm label và phần trăm
|
|
13
|
+
- ✅ Hiển thị **phần trăm** tùy chọn cho từng bước hoặc toàn bộ config
|
|
14
|
+
- ✅ **Label** tùy chỉnh ngay trong thanh (stack và separate)
|
|
15
|
+
- ✅ Custom **class, màu sắc, bo góc, chiều cao, chiều rộng** linh hoạt
|
|
16
|
+
- ✅ **Nested Signals** — cập nhật từng step riêng lẻ mà không trigger re-render toàn bộ
|
|
17
|
+
- ✅ **Global default config** qua injection token `PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT`
|
|
18
|
+
- ✅ `OnPush` Change Detection + Standalone Component
|
|
18
19
|
|
|
19
20
|
## Khi nào sử dụng
|
|
20
21
|
|
|
21
|
-
- Hiển thị tiến trình
|
|
22
|
-
-
|
|
23
|
-
- Hiển thị
|
|
24
|
-
-
|
|
22
|
+
- Hiển thị tiến trình của một quy trình đa bước (upload, xử lý, phê duyệt)
|
|
23
|
+
- Dashboard widget so sánh các chỉ số (doanh thu, mục tiêu, trạng thái)
|
|
24
|
+
- Hiển thị tỷ lệ phân bổ dữ liệu (ví dụ: phân bổ ngân sách, nguồn lực)
|
|
25
|
+
- Realtime progress với dữ liệu thay đổi thường xuyên nhờ Nested Signals
|
|
25
26
|
|
|
26
27
|
## Cài đặt
|
|
27
28
|
|
|
28
29
|
```bash
|
|
29
|
-
# npm
|
|
30
30
|
npm install @libs-ui/components-process-bar-standard
|
|
31
|
-
|
|
32
|
-
# yarn
|
|
33
|
-
yarn add @libs-ui/components-process-bar-standard
|
|
34
31
|
```
|
|
35
32
|
|
|
36
33
|
## Import
|
|
@@ -43,83 +40,284 @@ import { LibsUiComponentsProcessBarStandardComponent } from '@libs-ui/components
|
|
|
43
40
|
imports: [LibsUiComponentsProcessBarStandardComponent],
|
|
44
41
|
// ...
|
|
45
42
|
})
|
|
46
|
-
export class
|
|
43
|
+
export class MyComponent {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Ví dụ sử dụng
|
|
47
|
+
|
|
48
|
+
### Ví dụ 1 — Stack cơ bản (3 bước)
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
import { signal } from '@angular/core';
|
|
52
|
+
import {
|
|
53
|
+
LibsUiComponentsProcessBarStandardComponent,
|
|
54
|
+
IProcessBarStandardInterface,
|
|
55
|
+
IProcessBarStandardStepInterface,
|
|
56
|
+
} from '@libs-ui/components-process-bar-standard';
|
|
57
|
+
|
|
58
|
+
@Component({
|
|
59
|
+
standalone: true,
|
|
60
|
+
imports: [LibsUiComponentsProcessBarStandardComponent],
|
|
61
|
+
template: `
|
|
62
|
+
<libs_ui-components-process_bar-standard [config]="configStack()" />
|
|
63
|
+
`,
|
|
64
|
+
})
|
|
65
|
+
export class MyComponent {
|
|
66
|
+
private readonly stepProcessing = signal<IProcessBarStandardStepInterface>({
|
|
67
|
+
value: 30,
|
|
68
|
+
color: '#EF4444',
|
|
69
|
+
label: 'Processing',
|
|
70
|
+
});
|
|
71
|
+
private readonly stepDone = signal<IProcessBarStandardStepInterface>({
|
|
72
|
+
value: 50,
|
|
73
|
+
color: '#3B82F6',
|
|
74
|
+
label: 'Done',
|
|
75
|
+
});
|
|
76
|
+
private readonly stepPending = signal<IProcessBarStandardStepInterface>({
|
|
77
|
+
value: 20,
|
|
78
|
+
color: '#10B981',
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
readonly configStack = signal<IProcessBarStandardInterface>({
|
|
82
|
+
width: '100%',
|
|
83
|
+
height: '24px',
|
|
84
|
+
radius: 12,
|
|
85
|
+
totalValue: 100,
|
|
86
|
+
mode: 'stack',
|
|
87
|
+
steps: signal([this.stepProcessing, this.stepDone, this.stepPending]),
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<libs_ui-components-process_bar-standard [config]="configStack()" />
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Ví dụ 2 — Separate mode với hiển thị phần trăm
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
import { signal } from '@angular/core';
|
|
100
|
+
import {
|
|
101
|
+
LibsUiComponentsProcessBarStandardComponent,
|
|
102
|
+
IProcessBarStandardInterface,
|
|
103
|
+
IProcessBarStandardStepInterface,
|
|
104
|
+
} from '@libs-ui/components-process-bar-standard';
|
|
105
|
+
|
|
106
|
+
@Component({
|
|
107
|
+
standalone: true,
|
|
108
|
+
imports: [LibsUiComponentsProcessBarStandardComponent],
|
|
109
|
+
template: `
|
|
110
|
+
<libs_ui-components-process_bar-standard [config]="configSeparate()" />
|
|
111
|
+
`,
|
|
112
|
+
})
|
|
113
|
+
export class MyComponent {
|
|
114
|
+
private readonly stepProgress = signal<IProcessBarStandardStepInterface>({
|
|
115
|
+
value: 75,
|
|
116
|
+
color: '#8B5CF6',
|
|
117
|
+
label: 'Tiến độ',
|
|
118
|
+
showPercent: true,
|
|
119
|
+
});
|
|
120
|
+
private readonly stepPending = signal<IProcessBarStandardStepInterface>({
|
|
121
|
+
value: 45,
|
|
122
|
+
color: '#F59E0B',
|
|
123
|
+
label: 'Đang chờ',
|
|
124
|
+
showPercent: true,
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
readonly configSeparate = signal<IProcessBarStandardInterface>({
|
|
128
|
+
width: '100%',
|
|
129
|
+
height: '16px',
|
|
130
|
+
backgroundColor: 'transparent',
|
|
131
|
+
radius: 8,
|
|
132
|
+
totalValue: 100,
|
|
133
|
+
mode: 'separate',
|
|
134
|
+
steps: signal([this.stepProgress, this.stepPending]),
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
```html
|
|
140
|
+
<libs_ui-components-process_bar-standard [config]="configSeparate()" />
|
|
47
141
|
```
|
|
48
142
|
|
|
49
|
-
|
|
143
|
+
### Ví dụ 3 — Cập nhật realtime bằng Nested Signals
|
|
144
|
+
|
|
145
|
+
```typescript
|
|
146
|
+
import { signal, computed } from '@angular/core';
|
|
147
|
+
import {
|
|
148
|
+
LibsUiComponentsProcessBarStandardComponent,
|
|
149
|
+
IProcessBarStandardInterface,
|
|
150
|
+
IProcessBarStandardStepInterface,
|
|
151
|
+
} from '@libs-ui/components-process-bar-standard';
|
|
50
152
|
|
|
51
|
-
|
|
153
|
+
@Component({
|
|
154
|
+
standalone: true,
|
|
155
|
+
imports: [LibsUiComponentsProcessBarStandardComponent],
|
|
156
|
+
template: `
|
|
157
|
+
<button (click)="handlerIncrement($event)">Tăng tiến độ</button>
|
|
158
|
+
<libs_ui-components-process_bar-standard [config]="configRealtime()" />
|
|
159
|
+
`,
|
|
160
|
+
})
|
|
161
|
+
export class MyComponent {
|
|
162
|
+
private readonly currentValue = signal(40);
|
|
163
|
+
|
|
164
|
+
private readonly stepMain = signal<IProcessBarStandardStepInterface>({
|
|
165
|
+
value: 40,
|
|
166
|
+
color: '#EC4899',
|
|
167
|
+
label: 'Đang xử lý',
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
readonly configRealtime = computed<IProcessBarStandardInterface>(() => ({
|
|
171
|
+
width: '100%',
|
|
172
|
+
height: '20px',
|
|
173
|
+
radius: 10,
|
|
174
|
+
totalValue: 100,
|
|
175
|
+
mode: 'stack',
|
|
176
|
+
steps: signal([this.stepMain]),
|
|
177
|
+
}));
|
|
178
|
+
|
|
179
|
+
protected handlerIncrement(event: Event): void {
|
|
180
|
+
event.stopPropagation();
|
|
181
|
+
const next = Math.min(this.currentValue() + 10, 100);
|
|
182
|
+
this.currentValue.set(next);
|
|
183
|
+
this.stepMain.update((step) => ({ ...step, value: next }));
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
```
|
|
52
187
|
|
|
53
188
|
```html
|
|
54
|
-
<
|
|
189
|
+
<button (click)="handlerIncrement($event)">Tăng tiến độ</button>
|
|
190
|
+
<libs_ui-components-process_bar-standard [config]="configRealtime()" />
|
|
55
191
|
```
|
|
56
192
|
|
|
193
|
+
### Ví dụ 4 — Global default config qua Injection Token
|
|
194
|
+
|
|
57
195
|
```typescript
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
196
|
+
import { ApplicationConfig } from '@angular/core';
|
|
197
|
+
import { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
|
|
198
|
+
import { IProcessBarStandardConfigDefaultInterface } from '@libs-ui/components-process-bar-standard';
|
|
199
|
+
|
|
200
|
+
export const appConfig: ApplicationConfig = {
|
|
201
|
+
providers: [
|
|
202
|
+
{
|
|
203
|
+
provide: PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT,
|
|
204
|
+
useValue: {
|
|
205
|
+
height: '16px',
|
|
206
|
+
backgroundColor: '#F1F5F9',
|
|
207
|
+
radius: 8,
|
|
208
|
+
} satisfies IProcessBarStandardConfigDefaultInterface,
|
|
209
|
+
},
|
|
210
|
+
],
|
|
211
|
+
};
|
|
69
212
|
```
|
|
70
213
|
|
|
71
|
-
|
|
214
|
+
Sau khi cấu hình global, mọi instance của component sẽ tự động áp dụng giá trị mặc định trên nếu không truyền tường minh qua `[config]`.
|
|
215
|
+
|
|
216
|
+
## @Input()
|
|
217
|
+
|
|
218
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
219
|
+
|---|---|---|---|---|
|
|
220
|
+
| `[config]` | `IProcessBarStandardInterface` | **Bắt buộc** | Object cấu hình toàn bộ thanh tiến trình gồm kích thước, màu sắc, chế độ và danh sách bước | `[config]="configStack()"` |
|
|
72
221
|
|
|
73
|
-
|
|
222
|
+
## IProcessBarStandardInterface
|
|
74
223
|
|
|
75
|
-
|
|
224
|
+
Cấu trúc object truyền vào `[config]`:
|
|
76
225
|
|
|
77
|
-
|
|
|
78
|
-
|
|
79
|
-
| `
|
|
226
|
+
| Thuộc tính | Type | Bắt buộc | Default | Mô tả | Ví dụ |
|
|
227
|
+
|---|---|---|---|---|---|
|
|
228
|
+
| `totalValue` | `number` | **Bắt buộc** | — | Giá trị tổng dùng để tính phần trăm cho từng bước | `totalValue: 100` |
|
|
229
|
+
| `steps` | `WritableSignal<Array<WritableSignal<IProcessBarStandardStepInterface>>>` | **Bắt buộc** | — | Danh sách các bước, mỗi bước là một `WritableSignal` | `steps: signal([stepA, stepB])` |
|
|
230
|
+
| `mode` | `'stack' \| 'separate'` | Không | `'stack'` | Chế độ hiển thị: stack = ghép liền, separate = tách rời | `mode: 'separate'` |
|
|
231
|
+
| `width` | `string` | Không | `'100%'` | Chiều rộng của thanh | `width: '300px'` |
|
|
232
|
+
| `height` | `string` | Không | `'12px'` | Chiều cao của thanh | `height: '20px'` |
|
|
233
|
+
| `backgroundColor` | `string` | Không | `'#F8F9FA'` | Màu nền của container thanh | `backgroundColor: '#E5E7EB'` |
|
|
234
|
+
| `radius` | `number` | Không | `20` | Độ bo góc tính bằng px | `radius: 8` |
|
|
235
|
+
| `classInclude` | `string` | Không | `''` | CSS class bổ sung cho element wrapper | `classInclude: 'mt-4'` |
|
|
236
|
+
| `showPercent` | `boolean` | Không | `false` | Hiển thị phần trăm (áp dụng cho tất cả bước trong chế độ separate, có thể override ở từng bước) | `showPercent: true` |
|
|
237
|
+
| `percentClass` | `string` | Không | `''` | CSS class cho phần text phần trăm (áp dụng cho tất cả bước, có thể override ở từng bước) | `percentClass: 'text-blue-600'` |
|
|
80
238
|
|
|
81
|
-
|
|
239
|
+
## IProcessBarStandardStepInterface
|
|
82
240
|
|
|
83
|
-
|
|
84
|
-
| ----------------- | ---------------------------------------- | ------------------------------------------------ |
|
|
85
|
-
| `width` | `string` | Chiều rộng component (vd: '100%'). |
|
|
86
|
-
| `height` | `string` | Chiều cao component. |
|
|
87
|
-
| `backgroundColor` | `string` | Màu nền của container (unused in separate mode). |
|
|
88
|
-
| `radius` | `number` | Độ bo góc (px). |
|
|
89
|
-
| `totalValue` | `number` | Giá trị tổng để tính phần trăm. |
|
|
90
|
-
| `mode` | `'stack' \| 'separate'` | Chế độ hiển thị. |
|
|
91
|
-
| `steps` | `WritableSignal<WritableSignal<Step>[]>` | Array các steps (Signals). |
|
|
92
|
-
| `classInclude` | `string` | Custom class cho container. |
|
|
93
|
-
| `showPercent` | `boolean` | Hiển thị phần trăm (Separate mode). |
|
|
241
|
+
Cấu trúc object mô tả từng bước trong `steps`:
|
|
94
242
|
|
|
95
|
-
|
|
243
|
+
| Thuộc tính | Type | Bắt buộc | Default | Mô tả | Ví dụ |
|
|
244
|
+
|---|---|---|---|---|---|
|
|
245
|
+
| `value` | `number` | **Bắt buộc** | — | Giá trị của bước, được chia cho `totalValue` để tính % | `value: 40` |
|
|
246
|
+
| `color` | `string` | **Bắt buộc** | — | Màu nền của bước (hex, rgb, tên màu CSS) | `color: '#3B82F6'` |
|
|
247
|
+
| `label` | `string` | Không | `undefined` | Văn bản hiển thị bên trong thanh bước | `label: 'Hoàn thành'` |
|
|
248
|
+
| `classLabel` | `string` | Không | `''` | CSS class bổ sung cho element label | `classLabel: 'text-white'` |
|
|
249
|
+
| `classInclude` | `string` | Không | `''` | CSS class bổ sung cho element thanh của bước (chỉ chế độ separate) | `classInclude: 'rounded-full'` |
|
|
250
|
+
| `showPercent` | `boolean` | Không | `undefined` | Override hiển thị phần trăm riêng cho bước này (chỉ chế độ separate) | `showPercent: true` |
|
|
251
|
+
| `percentClass` | `string` | Không | `''` | Override CSS class cho text phần trăm riêng cho bước này | `percentClass: 'libs-ui-font-h5r'` |
|
|
96
252
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
|
102
|
-
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
253
|
+
## IProcessBarStandardConfigDefaultInterface
|
|
254
|
+
|
|
255
|
+
Interface dùng khi cung cấp global default qua `PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT`:
|
|
256
|
+
|
|
257
|
+
| Thuộc tính | Type | Mô tả |
|
|
258
|
+
|---|---|---|
|
|
259
|
+
| `width` | `string` | Chiều rộng mặc định toàn cục |
|
|
260
|
+
| `height` | `string` | Chiều cao mặc định toàn cục |
|
|
261
|
+
| `backgroundColor` | `string` | Màu nền mặc định toàn cục |
|
|
262
|
+
| `radius` | `number` | Bo góc mặc định toàn cục (px) |
|
|
105
263
|
|
|
106
264
|
## Types & Interfaces
|
|
107
265
|
|
|
108
266
|
```typescript
|
|
109
|
-
import {
|
|
267
|
+
import {
|
|
268
|
+
IProcessBarStandardInterface,
|
|
269
|
+
IProcessBarStandardStepInterface,
|
|
270
|
+
IProcessBarStandardConfigDefaultInterface,
|
|
271
|
+
} from '@libs-ui/components-process-bar-standard';
|
|
110
272
|
```
|
|
111
273
|
|
|
112
|
-
|
|
274
|
+
Định nghĩa đầy đủ:
|
|
275
|
+
|
|
276
|
+
```typescript
|
|
277
|
+
import { WritableSignal } from '@angular/core';
|
|
278
|
+
|
|
279
|
+
export interface IProcessBarStandardConfigDefaultInterface {
|
|
280
|
+
width?: string;
|
|
281
|
+
height?: string;
|
|
282
|
+
backgroundColor?: string;
|
|
283
|
+
radius?: number;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
export interface IProcessBarStandardInterface {
|
|
287
|
+
width?: string;
|
|
288
|
+
height?: string;
|
|
289
|
+
backgroundColor?: string;
|
|
290
|
+
radius?: number;
|
|
291
|
+
totalValue: number;
|
|
292
|
+
mode?: 'stack' | 'separate' | 'steps';
|
|
293
|
+
classInclude?: string;
|
|
294
|
+
showPercent?: boolean;
|
|
295
|
+
percentClass?: string;
|
|
296
|
+
steps: WritableSignal<Array<WritableSignal<IProcessBarStandardStepInterface>>>;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
export interface IProcessBarStandardStepInterface {
|
|
300
|
+
classInclude?: string;
|
|
301
|
+
label?: string;
|
|
302
|
+
classLabel?: string;
|
|
303
|
+
value: number;
|
|
304
|
+
color: string;
|
|
305
|
+
showPercent?: boolean;
|
|
306
|
+
percentClass?: string;
|
|
307
|
+
}
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
## Lưu ý quan trọng
|
|
311
|
+
|
|
312
|
+
⚠️ **Nested Signals bắt buộc**: Property `steps` yêu cầu cấu trúc `WritableSignal<Array<WritableSignal<IProcessBarStandardStepInterface>>>`. Mỗi step phải là một `WritableSignal` riêng — không được truyền plain object hay array thông thường.
|
|
313
|
+
|
|
314
|
+
⚠️ **Cập nhật realtime đúng cách**: Để cập nhật giá trị một bước mà không trigger re-render toàn bộ, hãy gọi `.update()` trực tiếp trên signal của step đó (`this.stepA.update(s => ({ ...s, value: 60 }))`). Không tạo lại signal mới hay thay thế toàn bộ mảng.
|
|
113
315
|
|
|
114
|
-
|
|
316
|
+
⚠️ **Mode `steps` chưa implement**: Thuộc tính `mode` có giá trị `'steps'` trong type nhưng chưa được render trong template. Chỉ sử dụng `'stack'` hoặc `'separate'`.
|
|
115
317
|
|
|
116
|
-
|
|
318
|
+
⚠️ **`showPercent` chỉ hoạt động ở chế độ `separate`**: Trong chế độ `stack`, thuộc tính `showPercent` (cả ở config lẫn từng step) không có hiệu lực vì cấu trúc layout không hỗ trợ.
|
|
117
319
|
|
|
118
|
-
|
|
119
|
-
| --------------- | ------- | ---------------- |
|
|
120
|
-
| Angular | 18+ | Framework |
|
|
121
|
-
| Angular Signals | - | State management |
|
|
122
|
-
| OnPush | - | Change Detection |
|
|
320
|
+
⚠️ **Global default token**: Nếu inject `PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT`, các giá trị trong token sẽ là fallback khi thuộc tính tương ứng trong `[config]` không được truyền. Thứ tự ưu tiên: `config.xxx` > `tokenDefault.xxx` > hardcoded default.
|
|
123
321
|
|
|
124
322
|
## Demo
|
|
125
323
|
|
|
@@ -127,4 +325,4 @@ Component sử dụng inline styles cho các thuộc tính dynamic (width, heigh
|
|
|
127
325
|
npx nx serve core-ui
|
|
128
326
|
```
|
|
129
327
|
|
|
130
|
-
Truy cập
|
|
328
|
+
Truy cập: http://localhost:4500/components/process-bar/standard
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { computed, input, inject,
|
|
2
|
+
import { computed, input, inject, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
|
|
4
4
|
|
|
5
5
|
class LibsUiComponentsProcessBarStandardComponent {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-process-bar-standard.mjs","sources":["../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.ts","../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.html","../../../../../../libs-ui/components/process-bar/standard/src/libs-ui-components-process-bar-standard.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';\nimport { IProcessBarStandardConfigDefaultInterface, IProcessBarStandardInterface } from './process-bar-standard.interface';\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-process_bar-standard',\n standalone: true,\n templateUrl: './process-bar-standard.component.html',\n styleUrl: './process-bar-standard.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsProcessBarStandardComponent {\n protected width = computed(() => this.config().width ?? this.processBarConfigDefault?.width ?? '100%');\n protected height = computed(() => this.config().height ?? this.processBarConfigDefault?.height ?? '12px');\n protected backgroundColor = computed(() => this.config().backgroundColor ?? this.processBarConfigDefault?.backgroundColor ?? '#F8F9FA');\n protected radius = computed(() => `${this.config().radius ?? this.processBarConfigDefault?.radius ?? 20}px`);\n\n readonly config = input.required<IProcessBarStandardInterface>();\n\n private readonly processBarConfigDefault = inject<IProcessBarStandardConfigDefaultInterface>(PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });\n}\n","@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n @switch (constHtmlMode) {\n @case ('stack') {\n <div\n [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n [style.width]=\"width()\"\n [style.height]=\"height()\"\n [style.backgroundColor]=\"backgroundColor()\"\n [style.borderRadius]=\"radius()\">\n @for (step of constHtmlSteps; track step()) {\n @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n <div\n class=\"flex h-full items-center\"\n [style.backgroundColor]=\"step().color\"\n [style.width]=\"constHtmlStepPercent + '%'\">\n @if (step().label) {\n <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n }\n </div>\n }\n </div>\n }\n\n @case ('separate') {\n @for (step of constHtmlSteps; track step()) {\n @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n <div\n [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n [style.width]=\"width()\"\n [style.height]=\"height()\">\n <div class=\"flex w-full h-full relative\">\n <div class=\"flex absolute w-full h-full\">\n <div\n class=\"libs-ui-process-bar-standard\"\n [style.backgroundColor]=\"backgroundColor()\"\n [style.borderRadius]=\"radius()\">\n <div\n class=\"flex h-full\"\n [style.backgroundColor]=\"step().color\"\n [style.width]=\"constHtmlStepPercent + '%'\"\n [style.borderRadius]=\"radius()\"\n [class]=\"step().classInclude\"></div>\n @if (step().label) {\n <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n @if (constHtmlShowPercent) {\n <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n {{ constHtmlStepPercent + '%' }}\n </div>\n }\n </div>\n }\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,2CAA2C,CAAA;IAC5C,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"libs-ui-components-process-bar-standard.mjs","sources":["../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.ts","../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.html","../../../../../../libs-ui/components/process-bar/standard/src/libs-ui-components-process-bar-standard.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';\nimport { IProcessBarStandardConfigDefaultInterface, IProcessBarStandardInterface } from './process-bar-standard.interface';\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-process_bar-standard',\n standalone: true,\n templateUrl: './process-bar-standard.component.html',\n styleUrl: './process-bar-standard.component.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsProcessBarStandardComponent {\n protected width = computed(() => this.config().width ?? this.processBarConfigDefault?.width ?? '100%');\n protected height = computed(() => this.config().height ?? this.processBarConfigDefault?.height ?? '12px');\n protected backgroundColor = computed(() => this.config().backgroundColor ?? this.processBarConfigDefault?.backgroundColor ?? '#F8F9FA');\n protected radius = computed(() => `${this.config().radius ?? this.processBarConfigDefault?.radius ?? 20}px`);\n\n readonly config = input.required<IProcessBarStandardInterface>();\n\n private readonly processBarConfigDefault = inject<IProcessBarStandardConfigDefaultInterface>(PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });\n}\n","@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n @switch (constHtmlMode) {\n @case ('stack') {\n <div\n [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n [style.width]=\"width()\"\n [style.height]=\"height()\"\n [style.backgroundColor]=\"backgroundColor()\"\n [style.borderRadius]=\"radius()\">\n @for (step of constHtmlSteps; track step()) {\n @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n <div\n class=\"flex h-full items-center\"\n [style.backgroundColor]=\"step().color\"\n [style.width]=\"constHtmlStepPercent + '%'\">\n @if (step().label) {\n <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n }\n </div>\n }\n </div>\n }\n\n @case ('separate') {\n @for (step of constHtmlSteps; track step()) {\n @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n <div\n [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n [style.width]=\"width()\"\n [style.height]=\"height()\">\n <div class=\"flex w-full h-full relative\">\n <div class=\"flex absolute w-full h-full\">\n <div\n class=\"libs-ui-process-bar-standard\"\n [style.backgroundColor]=\"backgroundColor()\"\n [style.borderRadius]=\"radius()\">\n <div\n class=\"flex h-full\"\n [style.backgroundColor]=\"step().color\"\n [style.width]=\"constHtmlStepPercent + '%'\"\n [style.borderRadius]=\"radius()\"\n [class]=\"step().classInclude\"></div>\n @if (step().label) {\n <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n @if (constHtmlShowPercent) {\n <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n {{ constHtmlStepPercent + '%' }}\n </div>\n }\n </div>\n }\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,2CAA2C,CAAA;IAC5C,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC;IAC7F,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,uBAAuB,EAAE,MAAM,IAAI,MAAM,CAAC,CAAC;IAChG,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,eAAe,IAAI,IAAI,CAAC,uBAAuB,EAAE,eAAe,IAAI,SAAS,CAAC,CAAC;IAC9H,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,uBAAuB,EAAE,MAAM,IAAI,EAAE,CAAI,EAAA,CAAA,CAAC,CAAC;AAEpG,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAgC,CAAC;IAEhD,uBAAuB,GAAG,MAAM,CAA4C,gDAAgD,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;wGARxJ,2CAA2C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2CAA2C,yOCXxD,2uFAmEA,EAAA,MAAA,EAAA,CAAA,qJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDxDa,2CAA2C,EAAA,UAAA,EAAA,CAAA;kBARvD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yCAAyC,EACvC,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2uFAAA,EAAA,MAAA,EAAA,CAAA,qJAAA,CAAA,EAAA,CAAA;;;AETjD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-process-bar-standard",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.357-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/
|
|
6
|
-
"@
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/utils": "0.2.357-1"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-components-process-bar-standard.mjs",
|