@libs-ui/components-breadcrumb 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,25 +1,29 @@
|
|
|
1
1
|
# @libs-ui/components-breadcrumb
|
|
2
2
|
|
|
3
|
-
> Component
|
|
3
|
+
> Component hiển thị tiến trình nhiều bước (step indicator / breadcrumb) cho các quy trình làm việc trong Angular.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsBreadcrumbComponent`
|
|
7
|
+
`@libs-ui/components-breadcrumb` cung cấp hai component: `LibsUiComponentsBreadcrumbComponent` dùng cho breadcrumb bước đơn giản dạng số thứ tự, và `LibsUiComponentsBreadcrumbMultiStepComponent` dùng cho breadcrumb dạng tab liền khối (pill-style) hỗ trợ dropdown tại từng bước. Cả hai đều hỗ trợ điều khiển programmatic qua `FunctionsControl`, tích hợp i18n, và sử dụng Angular Signals với `ChangeDetectionStrategy.OnPush`.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅
|
|
12
|
-
- ✅
|
|
13
|
-
- ✅
|
|
14
|
-
- ✅
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
11
|
+
- ✅ Hiển thị các bước với số thứ tự, tiêu đề và trạng thái (đang chọn, đã hoàn thành, vô hiệu hóa)
|
|
12
|
+
- ✅ Three alignment modes: `center` (mặc định), `left`, `right`
|
|
13
|
+
- ✅ Tùy chỉnh độ rộng dải ngăn cách giữa các bước
|
|
14
|
+
- ✅ Two-way binding cho `completedIndex` và `steps` qua Angular Signals `model()`
|
|
15
|
+
- ✅ Điều khiển programmatic qua `IBreadCrumbFunctionControlEvent` (set selected, complete, disable, reset)
|
|
16
|
+
- ✅ Sub-component `MultiStep` với kiểu hiển thị pill liền khối, hỗ trợ dropdown tại từng bước
|
|
17
|
+
- ✅ Tích hợp `@ngx-translate/core` cho tiêu đề đa ngôn ngữ
|
|
18
|
+
- ✅ Standalone component, `ChangeDetectionStrategy.OnPush`, Angular Signals
|
|
19
|
+
- ✅ Hỗ trợ accessibility: keyboard navigation (`Enter`, `Space`)
|
|
17
20
|
|
|
18
21
|
## Khi nào sử dụng
|
|
19
22
|
|
|
20
|
-
- Khi
|
|
21
|
-
- Khi
|
|
22
|
-
-
|
|
23
|
+
- Khi cần hiển thị tiến trình của quy trình nhiều bước (wizard, multi-step form, checkout flow)
|
|
24
|
+
- Khi muốn cho người dùng biết đang ở bước nào và còn bao nhiêu bước còn lại
|
|
25
|
+
- Khi cần điều khiển breadcrumb từ bên ngoài (tự động chuyển bước, đánh dấu hoàn thành) qua API
|
|
26
|
+
- Khi có quy trình phức tạp với từng bước có thể chọn giá trị từ dropdown (`MultiStep`)
|
|
23
27
|
|
|
24
28
|
## Cài đặt
|
|
25
29
|
|
|
@@ -30,8 +34,24 @@ npm install @libs-ui/components-breadcrumb
|
|
|
30
34
|
## Import
|
|
31
35
|
|
|
32
36
|
```typescript
|
|
37
|
+
// Component breadcrumb bước đơn giản
|
|
33
38
|
import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
34
39
|
|
|
40
|
+
// Component breadcrumb dạng pill/tab liền khối có dropdown
|
|
41
|
+
import { LibsUiComponentsBreadcrumbMultiStepComponent } from '@libs-ui/components-breadcrumb';
|
|
42
|
+
|
|
43
|
+
// Interfaces & Types
|
|
44
|
+
import {
|
|
45
|
+
ITabBreadCrumb,
|
|
46
|
+
ITabBreadCrumbSelected,
|
|
47
|
+
ITabBreadCrumbMultiStep,
|
|
48
|
+
ITabBreadCrumbMultiStepSelected,
|
|
49
|
+
IBreadCrumbFunctionControlEvent,
|
|
50
|
+
IConfigClassMultiStep,
|
|
51
|
+
TYPE_MODE_BREADCRUMB,
|
|
52
|
+
TYPE_MULTI_STEP,
|
|
53
|
+
} from '@libs-ui/components-breadcrumb';
|
|
54
|
+
|
|
35
55
|
@Component({
|
|
36
56
|
standalone: true,
|
|
37
57
|
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
@@ -40,70 +60,306 @@ import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcr
|
|
|
40
60
|
export class YourComponent {}
|
|
41
61
|
```
|
|
42
62
|
|
|
43
|
-
## Ví dụ
|
|
63
|
+
## Ví dụ sử dụng
|
|
64
|
+
|
|
65
|
+
### 1. Breadcrumb cơ bản
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
// your.component.ts
|
|
69
|
+
import { Component } from '@angular/core';
|
|
70
|
+
import { ITabBreadCrumb, LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
44
71
|
|
|
45
|
-
|
|
72
|
+
@Component({
|
|
73
|
+
selector: 'app-example',
|
|
74
|
+
standalone: true,
|
|
75
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
76
|
+
templateUrl: './example.component.html',
|
|
77
|
+
})
|
|
78
|
+
export class ExampleComponent {
|
|
79
|
+
readonly steps: ITabBreadCrumb[] = [
|
|
80
|
+
{ number: 1, title: 'Thông tin cơ bản' },
|
|
81
|
+
{ number: 2, title: 'Cấu hình dịch vụ' },
|
|
82
|
+
{ number: 3, title: 'Xác nhận & Hoàn tất' },
|
|
83
|
+
];
|
|
84
|
+
}
|
|
85
|
+
```
|
|
46
86
|
|
|
47
87
|
```html
|
|
48
|
-
|
|
88
|
+
<!-- your.component.html -->
|
|
89
|
+
<libs_ui-components-breadcrumb [steps]="steps" />
|
|
49
90
|
```
|
|
50
91
|
|
|
51
|
-
###
|
|
92
|
+
### 2. Breadcrumb với chế độ căn lề và độ rộng tùy chỉnh
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
// your.component.ts
|
|
96
|
+
import { Component } from '@angular/core';
|
|
97
|
+
import { ITabBreadCrumb, LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
98
|
+
|
|
99
|
+
@Component({
|
|
100
|
+
selector: 'app-example',
|
|
101
|
+
standalone: true,
|
|
102
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
103
|
+
templateUrl: './example.component.html',
|
|
104
|
+
})
|
|
105
|
+
export class ExampleComponent {
|
|
106
|
+
readonly steps: ITabBreadCrumb[] = [
|
|
107
|
+
{ number: 1, title: 'Khởi tạo' },
|
|
108
|
+
{ number: 2, title: 'Thiết lập' },
|
|
109
|
+
{ number: 3, title: 'Hoàn thành' },
|
|
110
|
+
];
|
|
111
|
+
}
|
|
112
|
+
```
|
|
52
113
|
|
|
53
114
|
```html
|
|
115
|
+
<!-- Căn trái, dải ngăn cách 40px -->
|
|
116
|
+
<libs_ui-components-breadcrumb
|
|
117
|
+
[steps]="steps"
|
|
118
|
+
mode="left"
|
|
119
|
+
[width]="40"
|
|
120
|
+
/>
|
|
121
|
+
|
|
122
|
+
<!-- Căn phải, dải ngăn cách 20px -->
|
|
54
123
|
<libs_ui-components-breadcrumb
|
|
55
|
-
[steps]="
|
|
56
|
-
|
|
124
|
+
[steps]="steps"
|
|
125
|
+
mode="right"
|
|
126
|
+
[width]="20"
|
|
127
|
+
/>
|
|
57
128
|
```
|
|
58
129
|
|
|
59
|
-
|
|
130
|
+
### 3. Breadcrumb với điều khiển programmatic qua FunctionsControl
|
|
60
131
|
|
|
61
|
-
|
|
132
|
+
```typescript
|
|
133
|
+
// your.component.ts
|
|
134
|
+
import { Component, signal } from '@angular/core';
|
|
135
|
+
import {
|
|
136
|
+
IBreadCrumbFunctionControlEvent,
|
|
137
|
+
ITabBreadCrumb,
|
|
138
|
+
ITabBreadCrumbSelected,
|
|
139
|
+
LibsUiComponentsBreadcrumbComponent,
|
|
140
|
+
} from '@libs-ui/components-breadcrumb';
|
|
62
141
|
|
|
63
|
-
|
|
142
|
+
@Component({
|
|
143
|
+
selector: 'app-example',
|
|
144
|
+
standalone: true,
|
|
145
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
146
|
+
templateUrl: './example.component.html',
|
|
147
|
+
})
|
|
148
|
+
export class ExampleComponent {
|
|
149
|
+
readonly steps: ITabBreadCrumb[] = [
|
|
150
|
+
{ number: 1, title: 'Nhập thông tin' },
|
|
151
|
+
{ number: 2, title: 'Xác minh' },
|
|
152
|
+
{ number: 3, title: 'Hoàn tất' },
|
|
153
|
+
];
|
|
154
|
+
|
|
155
|
+
readonly completedSteps = signal<number[]>([]);
|
|
156
|
+
|
|
157
|
+
private breadcrumbControl: IBreadCrumbFunctionControlEvent | undefined;
|
|
158
|
+
|
|
159
|
+
handlerFunctionControl(event: IBreadCrumbFunctionControlEvent): void {
|
|
160
|
+
event.stopPropagation?.();
|
|
161
|
+
this.breadcrumbControl = event;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
handlerStepSelected(event: ITabBreadCrumbSelected): void {
|
|
165
|
+
event.stopPropagation?.();
|
|
166
|
+
this.breadcrumbControl?.setSelectedStep(event.index);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
async goToNextStep(): Promise<void> {
|
|
170
|
+
const currentIndex = await this.breadcrumbControl?.getSelectedIndex() ?? 0;
|
|
171
|
+
await this.breadcrumbControl?.setCompletedStep(true, currentIndex);
|
|
172
|
+
await this.breadcrumbControl?.setSelectedStep(currentIndex + 1);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
async resetAll(): Promise<void> {
|
|
176
|
+
await this.breadcrumbControl?.resetCompleteIndex(true);
|
|
177
|
+
await this.breadcrumbControl?.setSelectedStep(0);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
```
|
|
64
181
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
182
|
+
```html
|
|
183
|
+
<libs_ui-components-breadcrumb
|
|
184
|
+
[steps]="steps"
|
|
185
|
+
[(completedIndex)]="completedSteps"
|
|
186
|
+
(outFunctionControl)="handlerFunctionControl($event)"
|
|
187
|
+
(outStepSelected)="handlerStepSelected($event)"
|
|
188
|
+
/>
|
|
189
|
+
|
|
190
|
+
<div class="flex gap-3 mt-4">
|
|
191
|
+
<button (click)="goToNextStep()">Bước tiếp theo</button>
|
|
192
|
+
<button (click)="resetAll()">Reset tất cả</button>
|
|
193
|
+
</div>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### 4. MultiStep breadcrumb dạng pill
|
|
197
|
+
|
|
198
|
+
```typescript
|
|
199
|
+
// your.component.ts
|
|
200
|
+
import { Component } from '@angular/core';
|
|
201
|
+
import {
|
|
202
|
+
ITabBreadCrumbMultiStep,
|
|
203
|
+
ITabBreadCrumbMultiStepSelected,
|
|
204
|
+
LibsUiComponentsBreadcrumbMultiStepComponent,
|
|
205
|
+
} from '@libs-ui/components-breadcrumb';
|
|
73
206
|
|
|
74
|
-
|
|
207
|
+
@Component({
|
|
208
|
+
selector: 'app-example',
|
|
209
|
+
standalone: true,
|
|
210
|
+
imports: [LibsUiComponentsBreadcrumbMultiStepComponent],
|
|
211
|
+
templateUrl: './example.component.html',
|
|
212
|
+
})
|
|
213
|
+
export class ExampleComponent {
|
|
214
|
+
readonly multiSteps: ITabBreadCrumbMultiStep[] = [
|
|
215
|
+
{ number: 1, title: 'Đề xuất', status: 'completed', type: 'text' },
|
|
216
|
+
{ number: 2, title: 'Phê duyệt', status: 'selected', type: 'text' },
|
|
217
|
+
{ number: 3, title: 'Thực hiện', status: 'normal', type: 'text' },
|
|
218
|
+
{ number: 4, title: 'Kết thúc', status: 'disabled', type: 'text' },
|
|
219
|
+
];
|
|
220
|
+
|
|
221
|
+
handlerMultiStepSelect(event: ITabBreadCrumbMultiStepSelected<ITabBreadCrumbMultiStep>): void {
|
|
222
|
+
event.stopPropagation?.();
|
|
223
|
+
console.log('Selected step:', event.index, 'Type:', event.type);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
```
|
|
75
227
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
228
|
+
```html
|
|
229
|
+
<libs_ui-components-breadcrumb-multi_step
|
|
230
|
+
[stepsMulti]="multiSteps"
|
|
231
|
+
(outMultiStepSelect)="handlerMultiStepSelect($event)"
|
|
232
|
+
/>
|
|
233
|
+
```
|
|
80
234
|
|
|
81
|
-
|
|
235
|
+
### 5. Bước có trạng thái disable và class tùy chỉnh
|
|
82
236
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
237
|
+
```typescript
|
|
238
|
+
// your.component.ts
|
|
239
|
+
import { Component } from '@angular/core';
|
|
240
|
+
import { ITabBreadCrumb, LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';
|
|
241
|
+
|
|
242
|
+
@Component({
|
|
243
|
+
selector: 'app-example',
|
|
244
|
+
standalone: true,
|
|
245
|
+
imports: [LibsUiComponentsBreadcrumbComponent],
|
|
246
|
+
templateUrl: './example.component.html',
|
|
247
|
+
})
|
|
248
|
+
export class ExampleComponent {
|
|
249
|
+
readonly steps: ITabBreadCrumb[] = [
|
|
250
|
+
{ number: 1, title: 'Khởi tạo' },
|
|
251
|
+
{ number: 2, title: 'Xem xét', disable: true },
|
|
252
|
+
{ number: 3, title: 'Phê duyệt', classInclude: 'w-[200px]' },
|
|
253
|
+
];
|
|
254
|
+
}
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<libs_ui-components-breadcrumb
|
|
259
|
+
[steps]="steps"
|
|
260
|
+
[backgroundWhite]="true"
|
|
261
|
+
classInclude="px-4 py-2"
|
|
262
|
+
/>
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
## @Input() — LibsUiComponentsBreadcrumbComponent
|
|
266
|
+
|
|
267
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
268
|
+
|---|---|---|---|---|
|
|
269
|
+
| `[backgroundWhite]` | `boolean` | `undefined` | Áp dụng nền trắng (`#ffffff`) cho container | `[backgroundWhite]="true"` |
|
|
270
|
+
| `[classInclude]` | `string` | `undefined` | Class CSS bổ sung cho container bao ngoài | `classInclude="px-4 py-2"` |
|
|
271
|
+
| `[(completedIndex)]` | `Array<number>` | `[]` | Two-way binding — danh sách index các bước đã hoàn thành (hiển thị icon check) | `[(completedIndex)]="completedSteps"` |
|
|
272
|
+
| `[mode]` | `'center' \| 'left' \| 'right'` | `'center'` | Canh lề của các bước trong container | `mode="left"` |
|
|
273
|
+
| `[(steps)]` | `Array<ITabBreadCrumb>` | `undefined` | Two-way binding — danh sách cấu hình các bước | `[(steps)]="steps"` |
|
|
274
|
+
| `[width]` | `number` | `24` | Độ rộng (px) của dải ngăn cách ngang giữa các bước | `[width]="40"` |
|
|
275
|
+
|
|
276
|
+
## @Output() — LibsUiComponentsBreadcrumbComponent
|
|
277
|
+
|
|
278
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
279
|
+
|---|---|---|---|---|
|
|
280
|
+
| `(outFunctionControl)` | `IBreadCrumbFunctionControlEvent` | Emit object chứa các hàm điều khiển component, phát ngay trong `ngOnInit`. Phải capture để gọi API programmatic. | `handlerFunctionControl(event: IBreadCrumbFunctionControlEvent): void { event.stopPropagation?.(); this.control = event; }` | `(outFunctionControl)="handlerFunctionControl($event)"` |
|
|
281
|
+
| `(outStepSelected)` | `ITabBreadCrumbSelected` | Emit khi người dùng click vào một bước (không phát nếu bước bị `disable`) | `handlerStepSelected(event: ITabBreadCrumbSelected): void { event.stopPropagation?.(); this.control?.setSelectedStep(event.index); }` | `(outStepSelected)="handlerStepSelected($event)"` |
|
|
282
|
+
|
|
283
|
+
## @Input() — LibsUiComponentsBreadcrumbMultiStepComponent
|
|
284
|
+
|
|
285
|
+
Kế thừa toàn bộ Input của `LibsUiComponentsBreadcrumbComponent`, cộng thêm:
|
|
286
|
+
|
|
287
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
288
|
+
|---|---|---|---|---|
|
|
289
|
+
| `[configClassMultiStep]` | `IConfigClassMultiStep` | `undefined` | Cấu hình class và kích thước cho từng bước pill | `[configClassMultiStep]="{ maxWidth: 160, width: 120 }"` |
|
|
290
|
+
| `[elementRef]` | `HTMLElement` | `undefined` | Tham chiếu đến container HTMLElement để hỗ trợ auto-scroll đến bước đang chọn | `[elementRef]="containerEl"` |
|
|
291
|
+
| `[popoverCustomConfig]` | `IPopoverCustomConfig` | `ConfigPopupDropdown()` | Cấu hình popover tùy chỉnh cho dropdown tại mỗi bước | `[popoverCustomConfig]="myPopoverConfig"` |
|
|
292
|
+
| `[stepsMulti]` | `Array<ITabBreadCrumbMultiStep>` | — (**required**) | Danh sách cấu hình đầy đủ các bước multi-step | `[stepsMulti]="multiSteps"` |
|
|
293
|
+
|
|
294
|
+
## @Output() — LibsUiComponentsBreadcrumbMultiStepComponent
|
|
295
|
+
|
|
296
|
+
Kế thừa toàn bộ Output của `LibsUiComponentsBreadcrumbComponent`, cộng thêm:
|
|
297
|
+
|
|
298
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
299
|
+
|---|---|---|---|---|
|
|
300
|
+
| `(outMultiStepSelect)` | `ITabBreadCrumbMultiStepSelected<any>` | Emit khi người dùng chọn bước (text click hoặc chọn item từ dropdown). Kèm `callBack` để ẩn/hiện keys trong dropdown. | `handlerMultiStepSelect(event: ITabBreadCrumbMultiStepSelected<MyStep>): void { event.stopPropagation?.(); this.onSelectStep(event); }` | `(outMultiStepSelect)="handlerMultiStepSelect($event)"` |
|
|
301
|
+
|
|
302
|
+
## FunctionsControl API — IBreadCrumbFunctionControlEvent
|
|
303
|
+
|
|
304
|
+
Capture object từ `(outFunctionControl)` để gọi các phương thức điều khiển:
|
|
305
|
+
|
|
306
|
+
| Method | Signature | Mô tả |
|
|
307
|
+
|---|---|---|
|
|
308
|
+
| `getCompleteIndex` | `() => Promise<Array<number>>` | Lấy danh sách index các bước đang được đánh dấu hoàn thành |
|
|
309
|
+
| `getSelectedIndex` | `() => Promise<number>` | Lấy index của bước đang được chọn |
|
|
310
|
+
| `resetCompleteIndex` | `(resetAll: boolean, index?: number) => Promise<void>` | Reset trạng thái hoàn thành — `resetAll=true` xóa tất cả, `resetAll=false` + `index` xóa 1 bước cụ thể |
|
|
311
|
+
| `setCompletedStep` | `(complete: boolean, index: number) => Promise<void>` | Đánh dấu hoặc bỏ đánh dấu hoàn thành cho bước tại `index` |
|
|
312
|
+
| `setSelectedStep` | `(index: number) => Promise<void>` | Thiết lập bước đang được chọn (highlight active) |
|
|
313
|
+
| `setStepDisable` | `(steps: Array<number>) => Promise<void>` | Thiết lập danh sách các bước bị vô hiệu hóa (không thể click) |
|
|
91
314
|
|
|
92
315
|
## Types & Interfaces
|
|
93
316
|
|
|
94
317
|
```typescript
|
|
318
|
+
import {
|
|
319
|
+
ITabBreadCrumb,
|
|
320
|
+
ITabBreadCrumbSelected,
|
|
321
|
+
ITabBreadCrumbMultiStep,
|
|
322
|
+
ITabBreadCrumbMultiStepSelected,
|
|
323
|
+
IBreadCrumbFunctionControlEvent,
|
|
324
|
+
IConfigClassMultiStep,
|
|
325
|
+
TYPE_MODE_BREADCRUMB,
|
|
326
|
+
TYPE_MULTI_STEP,
|
|
327
|
+
} from '@libs-ui/components-breadcrumb';
|
|
328
|
+
|
|
329
|
+
/** Cấu hình một bước trong breadcrumb đơn giản */
|
|
95
330
|
export interface ITabBreadCrumb {
|
|
96
|
-
number: number;
|
|
97
|
-
title: string;
|
|
98
|
-
valid?: boolean;
|
|
99
|
-
disable?: boolean;
|
|
100
|
-
classInclude?: string;
|
|
331
|
+
number: number; // Số hiển thị trong vòng tròn bước
|
|
332
|
+
title: string; // Tiêu đề bước (hỗ trợ i18n key)
|
|
333
|
+
valid?: boolean; // Trạng thái hợp lệ
|
|
334
|
+
disable?: boolean; // Vô hiệu hóa click trên bước này
|
|
335
|
+
classInclude?: string; // Class CSS bổ sung riêng cho bước này (mặc định: 'w-full')
|
|
336
|
+
config?: IPopover; // Cấu hình popover tooltip
|
|
101
337
|
}
|
|
102
338
|
|
|
339
|
+
/** Dữ liệu emit khi chọn bước */
|
|
103
340
|
export interface ITabBreadCrumbSelected {
|
|
104
|
-
index: number;
|
|
341
|
+
index: number; // Index (0-based) của bước được chọn
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/** Cấu hình một bước trong MultiStep breadcrumb */
|
|
345
|
+
export interface ITabBreadCrumbMultiStep extends ITabBreadCrumb {
|
|
346
|
+
status: TYPE_MULTI_STEP; // Trạng thái hiển thị của bước
|
|
347
|
+
type: 'text' | 'dropdown'; // Kiểu tương tác: text click hoặc dropdown
|
|
348
|
+
listHasButtonUnSelectOption?: boolean; // Hiện nút bỏ chọn trong dropdown
|
|
349
|
+
listConfigItem?: IListConfigItem; // Cấu hình danh sách dropdown
|
|
350
|
+
popover?: IPopover; // Cấu hình tooltip cho tiêu đề
|
|
351
|
+
listKeysHidden?: Array<string>; // Danh sách keys ẩn trong dropdown
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/** Dữ liệu emit khi chọn bước trong MultiStep */
|
|
355
|
+
export interface ITabBreadCrumbMultiStepSelected<T> {
|
|
356
|
+
type: 'text' | 'dropdown'; // Kiểu tương tác đã xảy ra
|
|
357
|
+
index: number; // Index (0-based) của bước được chọn
|
|
358
|
+
step?: T; // Item được chọn từ dropdown (nếu type='dropdown')
|
|
359
|
+
callBack?: (step: T) => void; // Callback để cập nhật keys ẩn trong dropdown
|
|
105
360
|
}
|
|
106
361
|
|
|
362
|
+
/** Object điều khiển breadcrumb từ bên ngoài (emit qua outFunctionControl) */
|
|
107
363
|
export interface IBreadCrumbFunctionControlEvent {
|
|
108
364
|
setSelectedStep: (index: number) => Promise<void>;
|
|
109
365
|
setCompletedStep: (complete: boolean, index: number) => Promise<void>;
|
|
@@ -112,17 +368,64 @@ export interface IBreadCrumbFunctionControlEvent {
|
|
|
112
368
|
getSelectedIndex: () => Promise<number>;
|
|
113
369
|
resetCompleteIndex: (resetAll: boolean, index?: number) => Promise<void>;
|
|
114
370
|
}
|
|
371
|
+
|
|
372
|
+
/** Cấu hình class/kích thước cho MultiStep pill */
|
|
373
|
+
export interface IConfigClassMultiStep {
|
|
374
|
+
classTitleInclude?: string; // Class CSS bổ sung cho phần tiêu đề trong pill
|
|
375
|
+
classInclude?: string; // Class CSS bổ sung cho container pill
|
|
376
|
+
maxWidth?: number; // Chiều rộng tối đa (px) của pill
|
|
377
|
+
width?: number; // Chiều rộng cố định (px) của pill
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/** Chế độ căn lề breadcrumb */
|
|
381
|
+
export type TYPE_MODE_BREADCRUMB = 'center' | 'left' | 'right';
|
|
382
|
+
|
|
383
|
+
/**
|
|
384
|
+
* Trạng thái hiển thị của bước trong MultiStep:
|
|
385
|
+
* - 'completed': đã hoàn thành (màu xanh lá)
|
|
386
|
+
* - 'selected': đang được chọn (màu brand chính)
|
|
387
|
+
* - 'failed': thất bại (màu đỏ)
|
|
388
|
+
* - 'disabled': vô hiệu hóa (màu xám, không click được)
|
|
389
|
+
* - 'normal': bình thường chưa thực hiện
|
|
390
|
+
*/
|
|
391
|
+
export type TYPE_MULTI_STEP = 'completed' | 'selected' | 'failed' | 'disabled' | 'normal';
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
## Lưu ý quan trọng
|
|
395
|
+
|
|
396
|
+
⚠️ **FunctionsControl emit trong ngOnInit**: `(outFunctionControl)` phát ngay khi component khởi tạo (`ngOnInit`). Phải khai báo handler và lưu object vào biến class để sử dụng sau — không nhận được nếu đăng ký quá muộn.
|
|
397
|
+
|
|
398
|
+
⚠️ **stepsMulti là required trong MultiStep**: `LibsUiComponentsBreadcrumbMultiStepComponent` yêu cầu bắt buộc `[stepsMulti]`. Thiếu prop này sẽ văng lỗi TypeScript tại compile time.
|
|
399
|
+
|
|
400
|
+
⚠️ **Bước disable không phát sự kiện**: Bước có `disable: true` (với `ITabBreadCrumb`) hoặc `status: 'disabled'` (với `ITabBreadCrumbMultiStep`) sẽ không trigger `outStepSelected` hay `outMultiStepSelect`.
|
|
401
|
+
|
|
402
|
+
⚠️ **completedIndex dùng model() — Two-way binding**: `[(completedIndex)]` là Angular Signal `model()`, không phải `@Input/@Output` truyền thống. Có thể bind hai chiều hoặc chỉ bind một chiều `[completedIndex]`.
|
|
403
|
+
|
|
404
|
+
⚠️ **Auto-scroll trong MultiStep**: Truyền `[elementRef]` (tham chiếu đến container có `overflow-x: auto`) để component tự động cuộn đến bước đang được chọn khi mount.
|
|
405
|
+
|
|
406
|
+
## Sub-components
|
|
407
|
+
|
|
408
|
+
### LibsUiComponentsBreadcrumbMultiStepComponent
|
|
409
|
+
|
|
410
|
+
Component con kế thừa từ `LibsUiComponentsBreadcrumbComponent`, cung cấp kiểu hiển thị breadcrumb dạng pill/tab liền khối thường dùng trong các màn hình phức tạp với nhiều trạng thái (completed, selected, failed, disabled, normal). Mỗi bước có thể là text click hoặc dropdown để chọn sub-item.
|
|
411
|
+
|
|
412
|
+
```typescript
|
|
413
|
+
import { LibsUiComponentsBreadcrumbMultiStepComponent } from '@libs-ui/components-breadcrumb';
|
|
115
414
|
```
|
|
116
415
|
|
|
117
|
-
|
|
416
|
+
```html
|
|
417
|
+
<!-- Selector: libs_ui-components-breadcrumb-multi_step -->
|
|
418
|
+
<libs_ui-components-breadcrumb-multi_step
|
|
419
|
+
[stepsMulti]="steps"
|
|
420
|
+
mode="left"
|
|
421
|
+
(outMultiStepSelect)="handlerMultiStepSelect($event)"
|
|
422
|
+
/>
|
|
423
|
+
```
|
|
118
424
|
|
|
119
|
-
|
|
120
|
-
| --------------- | ------- | ---------------- |
|
|
121
|
-
| Angular | 18+ | Framework |
|
|
122
|
-
| Angular Signals | - | State management |
|
|
123
|
-
| TailwindCSS | 3.x | Styling |
|
|
124
|
-
| OnPush | - | Change Detection |
|
|
425
|
+
## Demo
|
|
125
426
|
|
|
126
|
-
|
|
427
|
+
```bash
|
|
428
|
+
npx nx serve core-ui
|
|
429
|
+
```
|
|
127
430
|
|
|
128
|
-
|
|
431
|
+
Truy cập: http://localhost:4500/components/breadcrumb
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, signal, input, model, output,
|
|
2
|
+
import { Pipe, signal, input, model, output, Component, ChangeDetectionStrategy, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ngx-translate/core';
|
|
4
4
|
import { TranslateModule } from '@ngx-translate/core';
|
|
5
5
|
import { NgTemplateOutlet } from '@angular/common';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-breadcrumb.mjs","sources":["../../../../../libs-ui/components/breadcrumb/src/pipes/check-complete-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.html","../../../../../libs-ui/components/breadcrumb/src/utils/breadcrumb.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.html","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.html","../../../../../libs-ui/components/breadcrumb/src/pipes/check-disable-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.html","../../../../../libs-ui/components/breadcrumb/src/libs-ui-components-breadcrumb.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbCheckCompleteStepPipe implements PipeTransform {\n transform(step: number, completedIndex: Array<number>): boolean {\n return completedIndex.includes(step);\n }\n}\n","import { ChangeDetectionStrategy, Component, input, model, OnInit, output, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IBreadCrumbFunctionControlEvent, ITabBreadCrumb, ITabBreadCrumbSelected, TYPE_MODE_BREADCRUMB } from './interfaces/breadcrumb.interface';\nimport { LibsUiComponentsBreadcrumbCheckCompleteStepPipe } from './pipes/check-complete-step.pipe';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb',\n templateUrl: './breadcrumb.component.html',\n styleUrl: './breadcrumb.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, LibsUiComponentsBreadcrumbCheckCompleteStepPipe],\n})\nexport class LibsUiComponentsBreadcrumbComponent implements OnInit {\n // #region PROPERTY\n protected selectedIndex = signal<number>(0);\n protected stepDisable = signal<Array<number>>([]);\n\n // #region INPUT\n readonly width = input<number>(24);\n readonly mode = input<TYPE_MODE_BREADCRUMB>('center');\n readonly steps = model<Array<ITabBreadCrumb>>();\n readonly classInclude = input<string>();\n readonly completedIndex = model<Array<number>>([]);\n readonly backgroundWhite = input<boolean>();\n\n // #region OUTPUT\n readonly outStepSelected = output<ITabBreadCrumbSelected>();\n readonly outFunctionControl = output<IBreadCrumbFunctionControlEvent>();\n\n ngOnInit() {\n this.outFunctionControl.emit(this.FunctionsControl);\n }\n\n public get FunctionsControl(): IBreadCrumbFunctionControlEvent {\n return {\n setSelectedStep: async (event) => this.selectedIndex.set(event),\n setCompletedStep: this.setCompletedStep.bind(this),\n setStepDisable: async (event) => this.stepDisable.set(event),\n getCompleteIndex: async () => this.completedIndex(),\n getSelectedIndex: async () => this.selectedIndex(),\n resetCompleteIndex: this.resetCompleteIndex.bind(this),\n };\n }\n\n /* FUNCTIONS */\n protected handlerSelectStep(event: Event, index: number) {\n event.stopPropagation();\n this.outStepSelected.emit({ index });\n }\n\n protected async setCompletedStep(complete: boolean, index: number) {\n const indexFound = this.completedIndex().indexOf(index);\n if (indexFound >= 0) {\n this.completedIndex.update((items) => {\n items.splice(indexFound, 1);\n return [...items];\n });\n }\n if (complete) {\n this.completedIndex.update((items) => {\n items.push(index);\n return [...items];\n });\n }\n }\n\n protected async resetCompleteIndex(resetAll = true, index?: number) {\n if (resetAll) {\n this.completedIndex.set([]);\n return;\n }\n this.completedIndex.update((items) => items.filter((item) => item !== index));\n }\n\n protected handlerLabelEvent(event: Event, index: number) {\n this.handlerSelectStep(event, index);\n }\n}\n","<div\n class=\"flex items-center {{ classInclude() || '' }}\"\n [class.justify-center]=\"mode() === 'center'\"\n [class.justify-start]=\"mode() === 'left'\"\n [class.justify-end]=\"mode() === 'right'\"\n [class.bg-[#ffffff]]=\"backgroundWhite()\">\n @for (step of steps(); track step) {\n <div\n class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n tabindex=\"0\"\n [class.pointer-events-none]=\"step.disable\"\n (click)=\"handlerSelectStep($event, $index)\"\n (keydown.enter)=\"handlerSelectStep($any($event), $index)\"\n (keydown.space)=\"handlerSelectStep($any($event), $index)\">\n @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe: completedIndex()) {\n <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n </span>\n } @else {\n <span\n class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n [class.disable]=\"step.disable\"\n [class.pointer-events-none]=\"step.disable\"\n [class.text-[#cdd0d6]]=\"step.disable\"\n [class.bg-[#f8f9fa]]=\"step.disable\"\n [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n {{ step.number }}\n </span>\n }\n <span\n class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n tabindex=\"0\"\n [class.disable]=\"step.disable\"\n [class.pointer-events-none]=\"step.disable\"\n [class.text-[#cdd0d6]]=\"step.disable\"\n [class.active]=\"$index === selectedIndex()\"\n (click)=\"handlerLabelEvent($event, $index)\"\n (keydown.enter)=\"handlerLabelEvent($any($event), $index)\"\n (keydown.space)=\"handlerLabelEvent($any($event), $index)\">\n {{ step.title | translate }}\n </span>\n @if (!$last) {\n <div\n class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n [style.width.px]=\"width()\"></div>\n }\n </div>\n }\n</div>\n","import { IPopoverCustomConfig } from '@libs-ui/components-dropdown';\n\nexport const ConfigPopupDropdown = (): IPopoverCustomConfig => {\n return {\n maxWidth: 210,\n direction: 'bottom',\n classInclude: 'w-[200px]',\n position: {\n mode: 'center',\n distance: 0,\n },\n };\n};\n","import { Component } from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step-arrow_begin',\n templateUrl: './arrow-begin.component.html',\n styleUrls: ['../multi-step.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent {}\n","<svg\n version=\"1.2\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 40\"\n width=\"20\"\n height=\"40\">\n <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n","import { Component } from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step-arrow_end',\n templateUrl: './arrow-end.component.html',\n styleUrls: ['../multi-step.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowEndComponent {}\n","<svg\n version=\"1.2\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 40\"\n width=\"20\"\n height=\"40\">\n <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbCheckDisableStepPipe implements PipeTransform {\n transform(index: number, stepDisable: Array<number>): boolean {\n return stepDisable.includes(index);\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, OnInit, output, signal, viewChildren } from '@angular/core';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, IPopoverCustomConfig, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { LibsUiComponentsBreadcrumbComponent } from '../breadcrumb.component';\nimport { IConfigClassMultiStep, ITabBreadCrumbMultiStep, ITabBreadCrumbMultiStepSelected } from '../interfaces/breadcrumb.interface';\nimport { ConfigPopupDropdown } from '../utils/breadcrumb';\nimport { LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent } from './arrow-begin/arrow-begin.component';\nimport { LibsUiComponentsBreadcrumbMultiStepArrowEndComponent } from './arrow-end/arrow-end.component';\nimport { LibsUiComponentsBreadcrumbCheckDisableStepPipe } from '../pipes/check-disable-step.pipe';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step',\n templateUrl: './multi-step.component.html',\n styleUrls: ['./multi-step.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n TranslateModule,\n NgTemplateOutlet,\n LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,\n LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,\n LibsUiComponentsPopoverComponent,\n LibsUiComponentsDropdownComponent,\n LibsUiComponentsBreadcrumbCheckDisableStepPipe,\n ],\n})\nexport class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent implements OnInit, AfterViewInit {\n // #region PROPERTY\n protected failedIndex = signal<Array<number>>([]);\n protected listKeyHidden = signal<Array<string> | undefined>(undefined);\n protected openList = signal<boolean>(false);\n protected indexFocus = signal<number | undefined>(undefined);\n\n private readonly dropDownFunctionControl = signal<IDropdownFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n readonly popoverCustomConfig = input<IPopoverCustomConfig>(ConfigPopupDropdown());\n readonly stepsMulti = input.required<Array<ITabBreadCrumbMultiStep>>();\n readonly configClassMultiStep = input<IConfigClassMultiStep>();\n readonly elementRef = input<HTMLElement>();\n\n // #region OUTPUT\n // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n readonly outMultiStepSelect = output<ITabBreadCrumbMultiStepSelected<any>>();\n\n /* VIEW CHILD */\n private readonly stepEl = viewChildren<ElementRef>('stepEl');\n\n ngAfterViewInit(): void {\n this.handlerScrollIntoView();\n }\n\n protected override handlerLabelEvent(event: Event, index: number) {\n event.stopPropagation();\n if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {\n return;\n }\n this.handlerSelectMultiStep(undefined, { type: 'text', index });\n }\n\n protected handlerSelectKey(event: IEmitSelectKey | undefined, index: number): void {\n if (this.stepDisable().includes(index) || !event) {\n return;\n }\n this.dropDownFunctionControl()?.reset();\n this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });\n }\n\n protected handlerShowList(event: boolean, index: number): void {\n this.openList.set(event);\n this.indexFocus.set(event ? index : undefined);\n }\n\n // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private handlerSelectMultiStep(event: Event | undefined, step: ITabBreadCrumbMultiStepSelected<any>): void {\n event?.stopPropagation();\n this.outMultiStepSelect.emit({ ...step, callBack: (event: Array<string> | undefined) => this.listKeyHidden.set(event) });\n }\n\n protected handlerDropDownFunctionControl(event: IDropdownFunctionControlEvent): void {\n this.dropDownFunctionControl.set(event);\n }\n\n protected handlerScrollIntoView(): void {\n setTimeout(() => {\n const selectedStep = this.stepsMulti().findIndex((item) => item.status === 'selected');\n const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;\n const { offsetWidth } = this.elementRef() || {};\n\n this.stepEl().forEach((element, index) => {\n if (index === indexScroll) {\n if (offsetWidth && offsetWidth - element.nativeElement.offsetLeft < 200) {\n this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });\n }\n }\n });\n }, 1000);\n }\n}\n","<div\n class=\"flex items-center {{ classInclude() || '' }}\"\n [class.justify-center]=\"mode() === 'center'\"\n [class.justify-start]=\"mode() === 'left'\"\n [class.justify-end]=\"mode() === 'right'\"\n [class.bg-[#ffffff]]=\"backgroundWhite()\"\n #containerEl>\n @for (step of stepsMulti(); track step) {\n <div\n #stepEl\n class=\"flex libs-ui-breadcrumb-multi-step\"\n [class.cursor-default]=\"step.status === 'disabled'\"\n [class.pointer-events-none]=\"step.status === 'disabled'\"\n [class.cursor-pointer]=\"step.status !== 'disabled'\">\n @if (step.type === 'text') {\n <div\n tabindex=\"0\"\n (click)=\"handlerLabelEvent($event, $index)\"\n (keydown.enter)=\"handlerLabelEvent($any($event), $index)\"\n (keydown.space)=\"handlerLabelEvent($any($event), $index)\">\n <ng-container\n [ngTemplateOutlet]=\"contentEl\"\n [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n </div>\n } @else {\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [listHiddenInputSearch]=\"true\"\n [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n [listConfig]=\"step.listConfigItem\"\n [popoverCustomConfig]=\"popoverCustomConfig()\"\n [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n (outShowList)=\"handlerShowList($event, $index)\"\n (outSelectKey)=\"handlerSelectKey($event, $index)\"\n (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n <ng-container\n [ngTemplateOutlet]=\"contentEl\"\n [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n </libs_ui-components-dropdown>\n }\n </div>\n }\n</div>\n\n<ng-template\n #contentEl\n let-index=\"$index\"\n let-first=\"$first\"\n let-step=\"step\"\n let-last=\"$last\">\n <div class=\"flex items-center\">\n @if (!first) {\n <libs_ui-components-breadcrumb-multi_step-arrow_end\n class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\" />\n }\n <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n <libs_ui-components-popover\n [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n [type]=\"'text'\"\n [ignoreShowPopover]=\"true\"\n [ignoreStopPropagationEvent]=\"true\">\n <div\n class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n [style.width.px]=\"configClassMultiStep()?.width\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\"\n [class.rounded-tl-[4px]]=\"first\"\n [class.rounded-bl-[4px]]=\"first\"\n [class.pl-[6px]]=\"first\"\n [class.rounded-tr-[4px]]=\"last\"\n [class.rounded-br-[4px]]=\"last\"\n [class.pr-[16px]]=\"last\">\n <libs_ui-components-popover\n [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n [type]=\"'text'\"\n [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHTML]=\"step.title | translate\" />\n @if (step.type === 'dropdown') {\n <i\n [attr.isFocus]=\"openList() && indexFocus() === index\"\n class=\"libs-ui-icon-move-right rotate-90\"></i>\n }\n </div>\n </libs_ui-components-popover>\n </div>\n @if (!last) {\n <libs_ui-components-breadcrumb-multi_step-arrow_begin\n class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\" />\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAMa,+CAA+C,CAAA;IAC1D,SAAS,CAAC,IAAY,EAAE,cAA6B,EAAA;AACnD,QAAA,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC;IACtC;wGAHW,+CAA+C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAA/C,+CAA+C,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,iDAAA,EAAA,CAAA;;4FAA/C,+CAA+C,EAAA,UAAA,EAAA,CAAA;kBAJ3D,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,iDAAiD;AACvD,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;MCSY,mCAAmC,CAAA;;AAEpC,IAAA,aAAa,GAAG,MAAM,CAAS,CAAC,CAAC;AACjC,IAAA,WAAW,GAAG,MAAM,CAAgB,EAAE,CAAC;;AAGxC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AACzB,IAAA,IAAI,GAAG,KAAK,CAAuB,QAAQ,CAAC;IAC5C,KAAK,GAAG,KAAK,EAAyB;IACtC,YAAY,GAAG,KAAK,EAAU;AAC9B,IAAA,cAAc,GAAG,KAAK,CAAgB,EAAE,CAAC;IACzC,eAAe,GAAG,KAAK,EAAW;;IAGlC,eAAe,GAAG,MAAM,EAA0B;IAClD,kBAAkB,GAAG,MAAM,EAAmC;IAEvE,QAAQ,GAAA;QACN,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACrD;AAEA,IAAA,IAAW,gBAAgB,GAAA;QACzB,OAAO;AACL,YAAA,eAAe,EAAE,OAAO,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;YAC/D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AAClD,YAAA,cAAc,EAAE,OAAO,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;YAC5D,gBAAgB,EAAE,YAAY,IAAI,CAAC,cAAc,EAAE;YACnD,gBAAgB,EAAE,YAAY,IAAI,CAAC,aAAa,EAAE;YAClD,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;SACvD;IACH;;IAGU,iBAAiB,CAAC,KAAY,EAAE,KAAa,EAAA;QACrD,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACtC;AAEU,IAAA,MAAM,gBAAgB,CAAC,QAAiB,EAAE,KAAa,EAAA;QAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;AACvD,QAAA,IAAI,UAAU,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,KAAI;AACnC,gBAAA,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;AAC3B,gBAAA,OAAO,CAAC,GAAG,KAAK,CAAC;AACnB,YAAA,CAAC,CAAC;QACJ;QACA,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,KAAI;AACnC,gBAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AACjB,gBAAA,OAAO,CAAC,GAAG,KAAK,CAAC;AACnB,YAAA,CAAC,CAAC;QACJ;IACF;AAEU,IAAA,MAAM,kBAAkB,CAAC,QAAQ,GAAG,IAAI,EAAE,KAAc,EAAA;QAChE,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B;QACF;QACA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC;IAC/E;IAEU,iBAAiB,CAAC,KAAY,EAAE,KAAa,EAAA;AACrD,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC;IACtC;wGAhEW,mCAAmC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mCAAmC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdhD,oyEAoDA,EAAA,MAAA,EAAA,CAAA,6hCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxCY,eAAe,uFAAE,+CAA+C,EAAA,IAAA,EAAA,iDAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAE/D,mCAAmC,EAAA,UAAA,EAAA,CAAA;kBAT/C,SAAS;+BAEE,+BAA+B,EAAA,UAAA,EAG7B,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,EAAE,+CAA+C,CAAC,EAAA,QAAA,EAAA,oyEAAA,EAAA,MAAA,EAAA,CAAA,6hCAAA,CAAA,EAAA;;;AEVtE,MAAM,mBAAmB,GAAG,MAA2B;IAC5D,OAAO;AACL,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,YAAY,EAAE,WAAW;AACzB,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,QAAQ,EAAE,CAAC;AACZ,SAAA;KACF;AACH,CAAC;;MCHY,sDAAsD,CAAA;wGAAtD,sDAAsD,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sDAAsD,gHCTnE,kVAQA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA,CAAA;;4FDCa,sDAAsD,EAAA,UAAA,EAAA,CAAA;kBAPlE,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sDAAsD,cAGpD,IAAI,EAAA,QAAA,EAAA,kVAAA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA;;;MEEL,oDAAoD,CAAA;wGAApD,oDAAoD,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApD,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oDAAoD,8GCTjE,+UAQA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA,CAAA;;4FDCa,oDAAoD,EAAA,UAAA,EAAA,CAAA;kBAPhE,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oDAAoD,cAGlD,IAAI,EAAA,QAAA,EAAA,+UAAA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA;;;MEDL,8CAA8C,CAAA;IACzD,SAAS,CAAC,KAAa,EAAE,WAA0B,EAAA;AACjD,QAAA,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;IACpC;wGAHW,8CAA8C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAA9C,8CAA8C,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,gDAAA,EAAA,CAAA;;4FAA9C,8CAA8C,EAAA,UAAA,EAAA,CAAA;kBAJ1D,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,gDAAgD;AACtD,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACwBK,MAAO,4CAA6C,SAAQ,mCAAmC,CAAA;;AAEzF,IAAA,WAAW,GAAG,MAAM,CAAgB,EAAE,CAAC;AACvC,IAAA,aAAa,GAAG,MAAM,CAA4B,SAAS,CAAC;AAC5D,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,CAAC;AACjC,IAAA,UAAU,GAAG,MAAM,CAAqB,SAAS,CAAC;AAE3C,IAAA,uBAAuB,GAAG,MAAM,CAA4C,SAAS,CAAC;;AAG9F,IAAA,mBAAmB,GAAG,KAAK,CAAuB,mBAAmB,EAAE,CAAC;AACxE,IAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,EAAkC;IAC7D,oBAAoB,GAAG,KAAK,EAAyB;IACrD,UAAU,GAAG,KAAK,EAAe;;;;IAKjC,kBAAkB,GAAG,MAAM,EAAwC;;AAG3D,IAAA,MAAM,GAAG,YAAY,CAAa,QAAQ,CAAC;IAE5D,eAAe,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;IAC9B;IAEmB,iBAAiB,CAAC,KAAY,EAAE,KAAa,EAAA;QAC9D,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YACxF;QACF;AACA,QAAA,IAAI,CAAC,sBAAsB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IACjE;IAEU,gBAAgB,CAAC,KAAiC,EAAE,KAAa,EAAA;AACzE,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;YAChD;QACF;AACA,QAAA,IAAI,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE;AACvC,QAAA,IAAI,CAAC,sBAAsB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACvF;IAEU,eAAe,CAAC,KAAc,EAAE,KAAa,EAAA;AACrD,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;IAChD;;;IAIQ,sBAAsB,CAAC,KAAwB,EAAE,IAA0C,EAAA;QACjG,KAAK,EAAE,eAAe,EAAE;QACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAgC,KAAK,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;IAC1H;AAEU,IAAA,8BAA8B,CAAC,KAAoC,EAAA;AAC3E,QAAA,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,KAAK,CAAC;IACzC;IAEU,qBAAqB,GAAA;QAC7B,UAAU,CAAC,MAAK;YACd,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC;YACtF,MAAM,WAAW,GAAG,YAAY,KAAK,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM,GAAG,CAAC;YACrF,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;YAE/C,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AACvC,gBAAA,IAAI,KAAK,KAAK,WAAW,EAAE;AACzB,oBAAA,IAAI,WAAW,IAAI,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,GAAG,GAAG,EAAE;wBACvE,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;oBAC7F;gBACF;AACF,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,IAAI,CAAC;IACV;wGAzEW,4CAA4C,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA5C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,4CAA4C,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,MAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BzD,kyJA2GA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvFI,eAAe,4FACf,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,sDAAsD,EAAA,QAAA,EAAA,sDAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtD,oDAAoD,EAAA,QAAA,EAAA,oDAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACpD,gCAAgC,EAAA,QAAA,EAAA,+DAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,6BAAA,EAAA,cAAA,EAAA,0CAAA,EAAA,4BAAA,EAAA,kCAAA,EAAA,8BAAA,EAAA,oBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChC,iCAAiC,k3DACjC,8CAA8C,EAAA,IAAA,EAAA,gDAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGrC,4CAA4C,EAAA,UAAA,EAAA,CAAA;kBAjBxD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0CAA0C,cAGxC,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,eAAe;wBACf,gBAAgB;wBAChB,sDAAsD;wBACtD,oDAAoD;wBACpD,gCAAgC;wBAChC,iCAAiC;wBACjC,8CAA8C;AAC/C,qBAAA,EAAA,QAAA,EAAA,kyJAAA,EAAA,MAAA,EAAA,CAAA,8hLAAA,CAAA,EAAA;;;AE3BH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"libs-ui-components-breadcrumb.mjs","sources":["../../../../../libs-ui/components/breadcrumb/src/pipes/check-complete-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.ts","../../../../../libs-ui/components/breadcrumb/src/breadcrumb.component.html","../../../../../libs-ui/components/breadcrumb/src/utils/breadcrumb.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-begin/arrow-begin.component.html","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/arrow-end/arrow-end.component.html","../../../../../libs-ui/components/breadcrumb/src/pipes/check-disable-step.pipe.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.ts","../../../../../libs-ui/components/breadcrumb/src/multi-step/multi-step.component.html","../../../../../libs-ui/components/breadcrumb/src/libs-ui-components-breadcrumb.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbCheckCompleteStepPipe implements PipeTransform {\n transform(step: number, completedIndex: Array<number>): boolean {\n return completedIndex.includes(step);\n }\n}\n","import { ChangeDetectionStrategy, Component, input, model, OnInit, output, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IBreadCrumbFunctionControlEvent, ITabBreadCrumb, ITabBreadCrumbSelected, TYPE_MODE_BREADCRUMB } from './interfaces/breadcrumb.interface';\nimport { LibsUiComponentsBreadcrumbCheckCompleteStepPipe } from './pipes/check-complete-step.pipe';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb',\n templateUrl: './breadcrumb.component.html',\n styleUrl: './breadcrumb.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, LibsUiComponentsBreadcrumbCheckCompleteStepPipe],\n})\nexport class LibsUiComponentsBreadcrumbComponent implements OnInit {\n // #region PROPERTY\n protected selectedIndex = signal<number>(0);\n protected stepDisable = signal<Array<number>>([]);\n\n // #region INPUT\n readonly width = input<number>(24);\n readonly mode = input<TYPE_MODE_BREADCRUMB>('center');\n readonly steps = model<Array<ITabBreadCrumb>>();\n readonly classInclude = input<string>();\n readonly completedIndex = model<Array<number>>([]);\n readonly backgroundWhite = input<boolean>();\n\n // #region OUTPUT\n readonly outStepSelected = output<ITabBreadCrumbSelected>();\n readonly outFunctionControl = output<IBreadCrumbFunctionControlEvent>();\n\n ngOnInit() {\n this.outFunctionControl.emit(this.FunctionsControl);\n }\n\n public get FunctionsControl(): IBreadCrumbFunctionControlEvent {\n return {\n setSelectedStep: async (event) => this.selectedIndex.set(event),\n setCompletedStep: this.setCompletedStep.bind(this),\n setStepDisable: async (event) => this.stepDisable.set(event),\n getCompleteIndex: async () => this.completedIndex(),\n getSelectedIndex: async () => this.selectedIndex(),\n resetCompleteIndex: this.resetCompleteIndex.bind(this),\n };\n }\n\n /* FUNCTIONS */\n protected handlerSelectStep(event: Event, index: number) {\n event.stopPropagation();\n this.outStepSelected.emit({ index });\n }\n\n protected async setCompletedStep(complete: boolean, index: number) {\n const indexFound = this.completedIndex().indexOf(index);\n if (indexFound >= 0) {\n this.completedIndex.update((items) => {\n items.splice(indexFound, 1);\n return [...items];\n });\n }\n if (complete) {\n this.completedIndex.update((items) => {\n items.push(index);\n return [...items];\n });\n }\n }\n\n protected async resetCompleteIndex(resetAll = true, index?: number) {\n if (resetAll) {\n this.completedIndex.set([]);\n return;\n }\n this.completedIndex.update((items) => items.filter((item) => item !== index));\n }\n\n protected handlerLabelEvent(event: Event, index: number) {\n this.handlerSelectStep(event, index);\n }\n}\n","<div\n class=\"flex items-center {{ classInclude() || '' }}\"\n [class.justify-center]=\"mode() === 'center'\"\n [class.justify-start]=\"mode() === 'left'\"\n [class.justify-end]=\"mode() === 'right'\"\n [class.bg-[#ffffff]]=\"backgroundWhite()\">\n @for (step of steps(); track step) {\n <div\n class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n tabindex=\"0\"\n [class.pointer-events-none]=\"step.disable\"\n (click)=\"handlerSelectStep($event, $index)\"\n (keydown.enter)=\"handlerSelectStep($any($event), $index)\"\n (keydown.space)=\"handlerSelectStep($any($event), $index)\">\n @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe: completedIndex()) {\n <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n </span>\n } @else {\n <span\n class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n [class.disable]=\"step.disable\"\n [class.pointer-events-none]=\"step.disable\"\n [class.text-[#cdd0d6]]=\"step.disable\"\n [class.bg-[#f8f9fa]]=\"step.disable\"\n [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n {{ step.number }}\n </span>\n }\n <span\n class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n tabindex=\"0\"\n [class.disable]=\"step.disable\"\n [class.pointer-events-none]=\"step.disable\"\n [class.text-[#cdd0d6]]=\"step.disable\"\n [class.active]=\"$index === selectedIndex()\"\n (click)=\"handlerLabelEvent($event, $index)\"\n (keydown.enter)=\"handlerLabelEvent($any($event), $index)\"\n (keydown.space)=\"handlerLabelEvent($any($event), $index)\">\n {{ step.title | translate }}\n </span>\n @if (!$last) {\n <div\n class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n [style.width.px]=\"width()\"></div>\n }\n </div>\n }\n</div>\n","import { IPopoverCustomConfig } from '@libs-ui/components-dropdown';\n\nexport const ConfigPopupDropdown = (): IPopoverCustomConfig => {\n return {\n maxWidth: 210,\n direction: 'bottom',\n classInclude: 'w-[200px]',\n position: {\n mode: 'center',\n distance: 0,\n },\n };\n};\n","import { Component } from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step-arrow_begin',\n templateUrl: './arrow-begin.component.html',\n styleUrls: ['../multi-step.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent {}\n","<svg\n version=\"1.2\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 40\"\n width=\"20\"\n height=\"40\">\n <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n","import { Component } from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step-arrow_end',\n templateUrl: './arrow-end.component.html',\n styleUrls: ['../multi-step.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbMultiStepArrowEndComponent {}\n","<svg\n version=\"1.2\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 40\"\n width=\"20\"\n height=\"40\">\n <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',\n standalone: true,\n})\nexport class LibsUiComponentsBreadcrumbCheckDisableStepPipe implements PipeTransform {\n transform(index: number, stepDisable: Array<number>): boolean {\n return stepDisable.includes(index);\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, OnInit, output, signal, viewChildren } from '@angular/core';\nimport { IDropdownFunctionControlEvent, IEmitSelectKey, IPopoverCustomConfig, LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { LibsUiComponentsBreadcrumbComponent } from '../breadcrumb.component';\nimport { IConfigClassMultiStep, ITabBreadCrumbMultiStep, ITabBreadCrumbMultiStepSelected } from '../interfaces/breadcrumb.interface';\nimport { ConfigPopupDropdown } from '../utils/breadcrumb';\nimport { LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent } from './arrow-begin/arrow-begin.component';\nimport { LibsUiComponentsBreadcrumbMultiStepArrowEndComponent } from './arrow-end/arrow-end.component';\nimport { LibsUiComponentsBreadcrumbCheckDisableStepPipe } from '../pipes/check-disable-step.pipe';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-breadcrumb-multi_step',\n templateUrl: './multi-step.component.html',\n styleUrls: ['./multi-step.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n TranslateModule,\n NgTemplateOutlet,\n LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,\n LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,\n LibsUiComponentsPopoverComponent,\n LibsUiComponentsDropdownComponent,\n LibsUiComponentsBreadcrumbCheckDisableStepPipe,\n ],\n})\nexport class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent implements OnInit, AfterViewInit {\n // #region PROPERTY\n protected failedIndex = signal<Array<number>>([]);\n protected listKeyHidden = signal<Array<string> | undefined>(undefined);\n protected openList = signal<boolean>(false);\n protected indexFocus = signal<number | undefined>(undefined);\n\n private readonly dropDownFunctionControl = signal<IDropdownFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n readonly popoverCustomConfig = input<IPopoverCustomConfig>(ConfigPopupDropdown());\n readonly stepsMulti = input.required<Array<ITabBreadCrumbMultiStep>>();\n readonly configClassMultiStep = input<IConfigClassMultiStep>();\n readonly elementRef = input<HTMLElement>();\n\n // #region OUTPUT\n // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n readonly outMultiStepSelect = output<ITabBreadCrumbMultiStepSelected<any>>();\n\n /* VIEW CHILD */\n private readonly stepEl = viewChildren<ElementRef>('stepEl');\n\n ngAfterViewInit(): void {\n this.handlerScrollIntoView();\n }\n\n protected override handlerLabelEvent(event: Event, index: number) {\n event.stopPropagation();\n if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {\n return;\n }\n this.handlerSelectMultiStep(undefined, { type: 'text', index });\n }\n\n protected handlerSelectKey(event: IEmitSelectKey | undefined, index: number): void {\n if (this.stepDisable().includes(index) || !event) {\n return;\n }\n this.dropDownFunctionControl()?.reset();\n this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });\n }\n\n protected handlerShowList(event: boolean, index: number): void {\n this.openList.set(event);\n this.indexFocus.set(event ? index : undefined);\n }\n\n // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private handlerSelectMultiStep(event: Event | undefined, step: ITabBreadCrumbMultiStepSelected<any>): void {\n event?.stopPropagation();\n this.outMultiStepSelect.emit({ ...step, callBack: (event: Array<string> | undefined) => this.listKeyHidden.set(event) });\n }\n\n protected handlerDropDownFunctionControl(event: IDropdownFunctionControlEvent): void {\n this.dropDownFunctionControl.set(event);\n }\n\n protected handlerScrollIntoView(): void {\n setTimeout(() => {\n const selectedStep = this.stepsMulti().findIndex((item) => item.status === 'selected');\n const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;\n const { offsetWidth } = this.elementRef() || {};\n\n this.stepEl().forEach((element, index) => {\n if (index === indexScroll) {\n if (offsetWidth && offsetWidth - element.nativeElement.offsetLeft < 200) {\n this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });\n }\n }\n });\n }, 1000);\n }\n}\n","<div\n class=\"flex items-center {{ classInclude() || '' }}\"\n [class.justify-center]=\"mode() === 'center'\"\n [class.justify-start]=\"mode() === 'left'\"\n [class.justify-end]=\"mode() === 'right'\"\n [class.bg-[#ffffff]]=\"backgroundWhite()\"\n #containerEl>\n @for (step of stepsMulti(); track step) {\n <div\n #stepEl\n class=\"flex libs-ui-breadcrumb-multi-step\"\n [class.cursor-default]=\"step.status === 'disabled'\"\n [class.pointer-events-none]=\"step.status === 'disabled'\"\n [class.cursor-pointer]=\"step.status !== 'disabled'\">\n @if (step.type === 'text') {\n <div\n tabindex=\"0\"\n (click)=\"handlerLabelEvent($event, $index)\"\n (keydown.enter)=\"handlerLabelEvent($any($event), $index)\"\n (keydown.space)=\"handlerLabelEvent($any($event), $index)\">\n <ng-container\n [ngTemplateOutlet]=\"contentEl\"\n [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n </div>\n } @else {\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [listHiddenInputSearch]=\"true\"\n [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n [listConfig]=\"step.listConfigItem\"\n [popoverCustomConfig]=\"popoverCustomConfig()\"\n [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n (outShowList)=\"handlerShowList($event, $index)\"\n (outSelectKey)=\"handlerSelectKey($event, $index)\"\n (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n <ng-container\n [ngTemplateOutlet]=\"contentEl\"\n [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n </libs_ui-components-dropdown>\n }\n </div>\n }\n</div>\n\n<ng-template\n #contentEl\n let-index=\"$index\"\n let-first=\"$first\"\n let-step=\"step\"\n let-last=\"$last\">\n <div class=\"flex items-center\">\n @if (!first) {\n <libs_ui-components-breadcrumb-multi_step-arrow_end\n class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\" />\n }\n <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n <libs_ui-components-popover\n [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n [type]=\"'text'\"\n [ignoreShowPopover]=\"true\"\n [ignoreStopPropagationEvent]=\"true\">\n <div\n class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n [style.width.px]=\"configClassMultiStep()?.width\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\"\n [class.rounded-tl-[4px]]=\"first\"\n [class.rounded-bl-[4px]]=\"first\"\n [class.pl-[6px]]=\"first\"\n [class.rounded-tr-[4px]]=\"last\"\n [class.rounded-br-[4px]]=\"last\"\n [class.pr-[16px]]=\"last\">\n <libs_ui-components-popover\n [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n [type]=\"'text'\"\n [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHTML]=\"step.title | translate\" />\n @if (step.type === 'dropdown') {\n <i\n [attr.isFocus]=\"openList() && indexFocus() === index\"\n class=\"libs-ui-icon-move-right rotate-90\"></i>\n }\n </div>\n </libs_ui-components-popover>\n </div>\n @if (!last) {\n <libs_ui-components-breadcrumb-multi_step-arrow_begin\n class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n [attr.focus]=\"openList() && indexFocus() === index\"\n [class.active]=\"step.status === 'selected'\"\n [class.complete]=\"step.status === 'completed'\"\n [class.disabled]=\"step.status === 'disabled'\"\n [class.failed]=\"step.status === 'failed'\" />\n }\n </div>\n</ng-template>\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-breadcrumb",
|
|
3
|
-
"version": "0.2.356-
|
|
3
|
+
"version": "0.2.356-43",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
7
|
"@ngx-translate/core": "^15.0.0",
|
|
8
|
-
"@libs-ui/components-list": "0.2.356-
|
|
9
|
-
"@libs-ui/components-popover": "0.2.356-
|
|
10
|
-
"@libs-ui/components-dropdown": "0.2.356-
|
|
8
|
+
"@libs-ui/components-list": "0.2.356-43",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
10
|
+
"@libs-ui/components-dropdown": "0.2.356-43"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-breadcrumb.mjs",
|