@unifylib/ui-lib 1.1.47 → 1.1.48
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/esm2022/lib/base-model/button-action-settings.mjs +2 -1
- package/esm2022/lib/components/base-table/base-table.component.mjs +3 -3
- package/esm2022/lib/components/button-actions/button-actions.component.mjs +35 -4
- package/fesm2022/iq-ui-lib.mjs +37 -5
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +37 -5
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/base-model/button-action-settings.d.ts +1 -0
- package/lib/components/button-actions/button-actions.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -19,7 +19,36 @@ export class ButtonActionsComponent {
|
|
|
19
19
|
}
|
|
20
20
|
ngOnInit() {
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
resolveActionHref(action) {
|
|
23
|
+
if (this.disabled) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
if (action.showCommentDialog) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
const linkHref = action.linkHref;
|
|
30
|
+
if (linkHref == null || linkHref === '') {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
if (typeof linkHref === 'function') {
|
|
34
|
+
if (this.row === undefined || this.row === null) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
const resolved = linkHref(this.row);
|
|
38
|
+
const s = resolved != null ? String(resolved).trim() : '';
|
|
39
|
+
return s.length > 0 ? s : null;
|
|
40
|
+
}
|
|
41
|
+
const s = String(linkHref).trim();
|
|
42
|
+
return s.length > 0 ? s : null;
|
|
43
|
+
}
|
|
44
|
+
getClickedAction(action, event) {
|
|
45
|
+
const href = this.resolveActionHref(action);
|
|
46
|
+
if (href && event) {
|
|
47
|
+
if (event.ctrlKey || event.metaKey || event.button === 1) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
}
|
|
23
52
|
if (action.showCommentDialog === true) {
|
|
24
53
|
const dialogRef = this.dialog.open(ActionCommentComponent, {
|
|
25
54
|
data: { label: action.label, isTermination: action.commentRequired, external: false,
|
|
@@ -41,7 +70,7 @@ export class ButtonActionsComponent {
|
|
|
41
70
|
}
|
|
42
71
|
}
|
|
43
72
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction", row: "row" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
45
74
|
}
|
|
46
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, decorators: [{
|
|
47
76
|
type: Component,
|
|
@@ -55,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
55
84
|
NgClass,
|
|
56
85
|
NgForOf,
|
|
57
86
|
TranslateModule
|
|
58
|
-
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
87
|
+
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"] }]
|
|
59
88
|
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { actions: [{
|
|
60
89
|
type: Input
|
|
61
90
|
}], disabled: [{
|
|
@@ -66,5 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
66
95
|
type: Input
|
|
67
96
|
}], listAction: [{
|
|
68
97
|
type: Input
|
|
98
|
+
}], row: [{
|
|
99
|
+
type: Input
|
|
69
100
|
}] } });
|
|
70
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWFjdGlvbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW52b2ljZXEvdWktbGliL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24tYWN0aW9ucy9idXR0b24tYWN0aW9ucy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnZvaWNlcS91aS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi1hY3Rpb25zL2J1dHRvbi1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHckUsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sNENBQTRDLENBQUM7QUFDbEYsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQy9DLE9BQU8sRUFBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLGNBQWMsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQzVFLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0scUJBQXFCLENBQUM7Ozs7QUFtQnBELE1BQU0sT0FBTyxzQkFBc0I7SUFDakMsWUFBbUIsTUFBaUI7UUFBakIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUdwQyxZQUFPLEdBQTBCLEVBQUUsQ0FBQztRQUVwQyxhQUFRLEdBQWEsS0FBSyxDQUFDO1FBRzNCLGtCQUFhLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFHdEQsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFHL0IsZUFBVSxHQUEyQixFQUFFLENBQUM7SUFkQSxDQUFDO0lBZXpDLFFBQVE7SUFDUixDQUFDO0lBR0QsZ0JBQWdCLENBQUMsTUFBNEI7UUFDM0MsSUFBSSxNQUFNLENBQUMsaUJBQWlCLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDdEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsc0JBQXNCLEVBQUU7Z0JBQ3pELElBQUksRUFBRSxFQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsS0FBSyxFQUFFLGFBQWEsRUFBRSxNQUFNLENBQUMsZUFBZSxFQUFFLFFBQVEsRUFBRSxLQUFLO29CQUNoRixVQUFVLEVBQUUsS0FBSyxFQUFDO2dCQUNwQixLQUFLLEVBQUUsT0FBTztnQkFDZCxNQUFNLEVBQUUsTUFBTTtnQkFDZCxTQUFTLEVBQUcsS0FBSyxDQUFDLGdEQUFnRDthQUNuRSxDQUFDLENBQUM7WUFDSCxTQUFTLENBQUMsV0FBVyxFQUFFLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxFQUFFO2dCQUN6QyxJQUFJLE1BQU0sRUFBRSxDQUFDO29CQUNYLE1BQU0sQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQztvQkFDaEMsTUFBTSxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDO29CQUM1QyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztnQkFDbEMsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBRUwsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQzsrR0F4Q1Usc0JBQXNCO21HQUF0QixzQkFBc0IsMk9DM0JuQyx5eUNBMkJBLHl0Q0RiSSxPQUFPLDJJQUNQLGNBQWMscVNBQ2QsYUFBYSw2RkFDYixPQUFPLDJRQUNQLFdBQVcsc0lBQ1gsSUFBSSw2RkFFSixPQUFPLGtIQUNQLGVBQWU7OzRGQUtOLHNCQUFzQjtrQkFqQmxDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUDt3QkFDUCxPQUFPO3dCQUNQLGNBQWM7d0JBQ2QsYUFBYTt3QkFDYixPQUFPO3dCQUNQLFdBQVc7d0JBQ1gsSUFBSTt3QkFDSixPQUFPO3dCQUNQLE9BQU87d0JBQ1AsZUFBZTtxQkFDaEI7OEVBUUQsT0FBTztzQkFETixLQUFLO2dCQUdOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixhQUFhO3NCQURaLE1BQU07Z0JBSVAsYUFBYTtzQkFEWixLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0J1dHRvbkFjdGlvblNldHRpbmdzfSBmcm9tIFwiLi4vLi4vYmFzZS1tb2RlbC9idXR0b24tYWN0aW9uLXNldHRpbmdzXCI7XHJcbmltcG9ydCB7TWF0RGlhbG9nfSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nXCI7XHJcbmltcG9ydCB7QWN0aW9uQ29tbWVudENvbXBvbmVudH0gZnJvbSBcIi4uL2FjdGlvbi1jb21tZW50L2FjdGlvbi1jb21tZW50LmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge01hdEljb259IGZyb20gXCJAYW5ndWxhci9tYXRlcmlhbC9pY29uXCI7XHJcbmltcG9ydCB7TWF0TWVudSwgTWF0TWVudUl0ZW0sIE1hdE1lbnVUcmlnZ2VyfSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvbWVudVwiO1xyXG5pbXBvcnQge01hdEljb25CdXR0b259IGZyb20gXCJAYW5ndWxhci9tYXRlcmlhbC9idXR0b25cIjtcclxuaW1wb3J0IHtOZ0NsYXNzLCBOZ0Zvck9mLCBOZ0lmfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcbmltcG9ydCB7VHJhbnNsYXRlTW9kdWxlfSBmcm9tIFwiQG5neC10cmFuc2xhdGUvY29yZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtYnV0dG9uLWFjdGlvbnMnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgTWF0SWNvbixcclxuICAgIE1hdE1lbnVUcmlnZ2VyLFxyXG4gICAgTWF0SWNvbkJ1dHRvbixcclxuICAgIE1hdE1lbnUsXHJcbiAgICBNYXRNZW51SXRlbSxcclxuICAgIE5nSWYsXHJcbiAgICBOZ0NsYXNzLFxyXG4gICAgTmdGb3JPZixcclxuICAgIFRyYW5zbGF0ZU1vZHVsZVxyXG4gIF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vYnV0dG9uLWFjdGlvbnMuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25BY3Rpb25zQ29tcG9uZW50IHtcclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgZGlhbG9nOiBNYXREaWFsb2cpIHsgfVxyXG5cclxuICBASW5wdXQoKVxyXG4gIGFjdGlvbnM6IEJ1dHRvbkFjdGlvblNldHRpbmdzW10gPVtdO1xyXG4gIEBJbnB1dCgpXHJcbiAgZGlzYWJsZWQ/OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKVxyXG4gIGNsaWNrZWRCdXR0b246IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGJ1dHRvbnNBY3Rpb246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBsaXN0QWN0aW9uOiBCdXR0b25BY3Rpb25TZXR0aW5nc1tdID0gW107XHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuXHJcbiAgZ2V0Q2xpY2tlZEFjdGlvbihhY3Rpb246IEJ1dHRvbkFjdGlvblNldHRpbmdzKSB7XHJcbiAgICBpZiAoYWN0aW9uLnNob3dDb21tZW50RGlhbG9nID09PSB0cnVlKSB7XHJcbiAgICAgIGNvbnN0IGRpYWxvZ1JlZiA9IHRoaXMuZGlhbG9nLm9wZW4oQWN0aW9uQ29tbWVudENvbXBvbmVudCwge1xyXG4gICAgICAgIGRhdGE6IHtsYWJlbDogYWN0aW9uLmxhYmVsLCBpc1Rlcm1pbmF0aW9uOiBhY3Rpb24uY29tbWVudFJlcXVpcmVkLCBleHRlcm5hbDogZmFsc2UsXHJcbiAgICAgICAgICB3YXJuaW5nTXNnOiBmYWxzZX0sXHJcbiAgICAgICAgd2lkdGg6ICc2MDBweCcsXHJcbiAgICAgICAgaGVpZ2h0OiAnYXV0bycsXHJcbiAgICAgICAgZGlyZWN0aW9uOiAgJ2x0cicgLy8gdGhpcy5hdXRoU2VydmljZS5kaXIgPT09ICdydGwnID8gJ3J0bCc6ICdsdHInXHJcbiAgICAgIH0pO1xyXG4gICAgICBkaWFsb2dSZWYuYWZ0ZXJDbG9zZWQoKS5zdWJzY3JpYmUocmVzdWx0ID0+IHtcclxuICAgICAgICBpZiAocmVzdWx0KSB7XHJcbiAgICAgICAgICBhY3Rpb24uY29tbWVudCA9IHJlc3VsdC5jb21tZW50O1xyXG4gICAgICAgICAgYWN0aW9uLnNoYXJlRXh0ZXJuYWwgPSByZXN1bHQuc2hhcmVFeHRlcm5hbDtcclxuICAgICAgICAgIHRoaXMuY2xpY2tlZEJ1dHRvbi5lbWl0KGFjdGlvbik7XHJcbiAgICAgICAgfVxyXG4gICAgICB9KTtcclxuXHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLmNsaWNrZWRCdXR0b24uZW1pdChhY3Rpb24pO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImJ1dHRvbnNBY3Rpb247IGVsc2UgbGlzdF9BY3Rpb25cIj5cclxuICA8ZGl2IGNsYXNzPVwiYWN0aW9uLWJ1dHRvbnMtY29udGFpbmVyXCIgKm5nSWY9XCIoYWN0aW9ucz8ubGVuZ3RoID8gYWN0aW9ucyA6IGxpc3RBY3Rpb24pPy5sZW5ndGggPiAwXCI+XHJcbiAgICA8YnV0dG9uXHJcbiAgICAgICpuZ0Zvcj1cImxldCBhY3Rpb24gb2YgKGFjdGlvbnM/Lmxlbmd0aCA/IGFjdGlvbnMgOiBsaXN0QWN0aW9uKTsgbGV0IGkgPSBpbmRleFwiXHJcbiAgICAgIGNsYXNzPVwiYWN0aW9uLWJ1dHRvblwiXHJcbiAgICAgIChjbGljayk9XCJnZXRDbGlja2VkQWN0aW9uKGFjdGlvbilcIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgICBbYXR0ci5pZF09XCJhY3Rpb24uaWQgfHwgKCdhY3Rpb25zLWJ0bi0nICsgYWN0aW9uLmxhYmVsKVwiXHJcbiAgICAgIFt0aXRsZV09XCJhY3Rpb24ubGFiZWwgfCB0cmFuc2xhdGVcIlxyXG4gICAgPlxyXG4gICAgICA8bWF0LWljb24gKm5nSWY9XCJhY3Rpb24uaWNvbj8ubGVuZ3RoXCIgY2xhc3M9XCJhY3Rpb24taWNvblwiPnt7IGFjdGlvbi5pY29uIH19PC9tYXQtaWNvbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gIDwvZGl2PlxyXG48L25nLWNvbnRhaW5lcj5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjbGlzdF9BY3Rpb24+XHJcbiAgPGRpdiAqbmdJZj1cImxpc3RBY3Rpb24/Lmxlbmd0aCA+IDBcIj5cclxuICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIFttYXRNZW51VHJpZ2dlckZvcl09XCJtZW51XCIgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiIHN0eWxlPVwianVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGNvbG9yOiBncmV5XCIgaWQ9XCJhY3Rpb25zLW1lbnUtdHJpZ2dlclwiPlxyXG4gICAgICA8bWF0LWljb24+bW9yZV92ZXJ0PC9tYXQtaWNvbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gICAgPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiPlxyXG4gICAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gKm5nRm9yPVwibGV0IGxpc3RfQWN0aW9uIG9mIGxpc3RBY3Rpb25cIiAoY2xpY2spPVwiZ2V0Q2xpY2tlZEFjdGlvbihsaXN0X0FjdGlvbilcIiBbYXR0ci5pZF09XCJsaXN0X0FjdGlvbi5pZCB8fCAoJ2FjdGlvbnMtbWVudS1pdGVtLScgKyBsaXN0X0FjdGlvbi5sYWJlbClcIj5cclxuICAgICAgICA8c3Bhbj57eyBsaXN0X0FjdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L21hdC1tZW51PlxyXG4gIDwvZGl2PlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=
|
|
101
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWFjdGlvbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW52b2ljZXEvdWktbGliL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24tYWN0aW9ucy9idXR0b24tYWN0aW9ucy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnZvaWNlcS91aS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi1hY3Rpb25zL2J1dHRvbi1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHckUsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sNENBQTRDLENBQUM7QUFDbEYsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQy9DLE9BQU8sRUFBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLGNBQWMsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQzVFLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0scUJBQXFCLENBQUM7Ozs7QUFtQnBELE1BQU0sT0FBTyxzQkFBc0I7SUFDakMsWUFBbUIsTUFBaUI7UUFBakIsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUdwQyxZQUFPLEdBQTBCLEVBQUUsQ0FBQztRQUVwQyxhQUFRLEdBQWEsS0FBSyxDQUFDO1FBRzNCLGtCQUFhLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFHdEQsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFHL0IsZUFBVSxHQUEyQixFQUFFLENBQUM7SUFkQSxDQUFDO0lBbUJ6QyxRQUFRO0lBQ1IsQ0FBQztJQUVELGlCQUFpQixDQUFDLE1BQTRCO1FBQzVDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xCLE9BQU8sSUFBSSxDQUFDO1FBQ2QsQ0FBQztRQUNELElBQUksTUFBTSxDQUFDLGlCQUFpQixFQUFFLENBQUM7WUFDN0IsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDO1FBQ0QsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQztRQUNqQyxJQUFJLFFBQVEsSUFBSSxJQUFJLElBQUksUUFBUSxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQ3hDLE9BQU8sSUFBSSxDQUFDO1FBQ2QsQ0FBQztRQUNELElBQUksT0FBTyxRQUFRLEtBQUssVUFBVSxFQUFFLENBQUM7WUFDbkMsSUFBSSxJQUFJLENBQUMsR0FBRyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO2dCQUNoRCxPQUFPLElBQUksQ0FBQztZQUNkLENBQUM7WUFDRCxNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ3BDLE1BQU0sQ0FBQyxHQUFHLFFBQVEsSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQzFELE9BQU8sQ0FBQyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ2pDLENBQUM7UUFDRCxNQUFNLENBQUMsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDbEMsT0FBTyxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDakMsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQTRCLEVBQUUsS0FBa0I7UUFDL0QsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVDLElBQUksSUFBSSxJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ2xCLElBQUksS0FBSyxDQUFDLE9BQU8sSUFBSSxLQUFLLENBQUMsT0FBTyxJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7Z0JBQ3pELE9BQU87WUFDVCxDQUFDO1lBQ0QsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3pCLENBQUM7UUFDRCxJQUFJLE1BQU0sQ0FBQyxpQkFBaUIsS0FBSyxJQUFJLEVBQUUsQ0FBQztZQUN0QyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsRUFBRTtnQkFDekQsSUFBSSxFQUFFLEVBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEVBQUUsYUFBYSxFQUFFLE1BQU0sQ0FBQyxlQUFlLEVBQUUsUUFBUSxFQUFFLEtBQUs7b0JBQ2hGLFVBQVUsRUFBRSxLQUFLLEVBQUM7Z0JBQ3BCLEtBQUssRUFBRSxPQUFPO2dCQUNkLE1BQU0sRUFBRSxNQUFNO2dCQUNkLFNBQVMsRUFBRyxLQUFLLENBQUMsZ0RBQWdEO2FBQ25FLENBQUMsQ0FBQztZQUNILFNBQVMsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7Z0JBQ3pDLElBQUksTUFBTSxFQUFFLENBQUM7b0JBQ1gsTUFBTSxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUMsT0FBTyxDQUFDO29CQUNoQyxNQUFNLENBQUMsYUFBYSxHQUFHLE1BQU0sQ0FBQyxhQUFhLENBQUM7b0JBQzVDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2dCQUNsQyxDQUFDO1lBQ0gsQ0FBQyxDQUFDLENBQUM7UUFFTCxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2xDLENBQUM7SUFDSCxDQUFDOytHQXpFVSxzQkFBc0I7bUdBQXRCLHNCQUFzQix1UEMzQm5DLDQ1RUF5REEseXdDRDNDSSxPQUFPLDJJQUNQLGNBQWMscVNBQ2QsYUFBYSw2RkFDYixPQUFPLDJRQUNQLFdBQVcsc0lBQ1gsSUFBSSw2RkFFSixPQUFPLGtIQUNQLGVBQWU7OzRGQUtOLHNCQUFzQjtrQkFqQmxDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUDt3QkFDUCxPQUFPO3dCQUNQLGNBQWM7d0JBQ2QsYUFBYTt3QkFDYixPQUFPO3dCQUNQLFdBQVc7d0JBQ1gsSUFBSTt3QkFDSixPQUFPO3dCQUNQLE9BQU87d0JBQ1AsZUFBZTtxQkFDaEI7OEVBUUQsT0FBTztzQkFETixLQUFLO2dCQUdOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixhQUFhO3NCQURaLE1BQU07Z0JBSVAsYUFBYTtzQkFEWixLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJTixHQUFHO3NCQURGLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtCdXR0b25BY3Rpb25TZXR0aW5nc30gZnJvbSBcIi4uLy4uL2Jhc2UtbW9kZWwvYnV0dG9uLWFjdGlvbi1zZXR0aW5nc1wiO1xyXG5pbXBvcnQge01hdERpYWxvZ30gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL2RpYWxvZ1wiO1xyXG5pbXBvcnQge0FjdGlvbkNvbW1lbnRDb21wb25lbnR9IGZyb20gXCIuLi9hY3Rpb24tY29tbWVudC9hY3Rpb24tY29tbWVudC5jb21wb25lbnRcIjtcclxuaW1wb3J0IHtNYXRJY29ufSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvblwiO1xyXG5pbXBvcnQge01hdE1lbnUsIE1hdE1lbnVJdGVtLCBNYXRNZW51VHJpZ2dlcn0gZnJvbSBcIkBhbmd1bGFyL21hdGVyaWFsL21lbnVcIjtcclxuaW1wb3J0IHtNYXRJY29uQnV0dG9ufSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uXCI7XHJcbmltcG9ydCB7TmdDbGFzcywgTmdGb3JPZiwgTmdJZn0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xyXG5pbXBvcnQge1RyYW5zbGF0ZU1vZHVsZX0gZnJvbSBcIkBuZ3gtdHJhbnNsYXRlL2NvcmVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWJ1dHRvbi1hY3Rpb25zJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE1hdEljb24sXHJcbiAgICBNYXRNZW51VHJpZ2dlcixcclxuICAgIE1hdEljb25CdXR0b24sXHJcbiAgICBNYXRNZW51LFxyXG4gICAgTWF0TWVudUl0ZW0sXHJcbiAgICBOZ0lmLFxyXG4gICAgTmdDbGFzcyxcclxuICAgIE5nRm9yT2YsXHJcbiAgICBUcmFuc2xhdGVNb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24tYWN0aW9ucy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi1hY3Rpb25zLmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uQWN0aW9uc0NvbXBvbmVudCB7XHJcbiAgY29uc3RydWN0b3IocHVibGljIGRpYWxvZzogTWF0RGlhbG9nKSB7IH1cclxuXHJcbiAgQElucHV0KClcclxuICBhY3Rpb25zOiBCdXR0b25BY3Rpb25TZXR0aW5nc1tdID1bXTtcclxuICBASW5wdXQoKVxyXG4gIGRpc2FibGVkPzogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBAT3V0cHV0KClcclxuICBjbGlja2VkQnV0dG9uOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgQElucHV0KClcclxuICBidXR0b25zQWN0aW9uOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgbGlzdEFjdGlvbjogQnV0dG9uQWN0aW9uU2V0dGluZ3NbXSA9IFtdO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHJvdz86IHVua25vd247XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgcmVzb2x2ZUFjdGlvbkhyZWYoYWN0aW9uOiBCdXR0b25BY3Rpb25TZXR0aW5ncyk6IHN0cmluZyB8IG51bGwge1xyXG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcclxuICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9XHJcbiAgICBpZiAoYWN0aW9uLnNob3dDb21tZW50RGlhbG9nKSB7XHJcbiAgICAgIHJldHVybiBudWxsO1xyXG4gICAgfVxyXG4gICAgY29uc3QgbGlua0hyZWYgPSBhY3Rpb24ubGlua0hyZWY7XHJcbiAgICBpZiAobGlua0hyZWYgPT0gbnVsbCB8fCBsaW5rSHJlZiA9PT0gJycpIHtcclxuICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9XHJcbiAgICBpZiAodHlwZW9mIGxpbmtIcmVmID09PSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgIGlmICh0aGlzLnJvdyA9PT0gdW5kZWZpbmVkIHx8IHRoaXMucm93ID09PSBudWxsKSB7XHJcbiAgICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICAgIH1cclxuICAgICAgY29uc3QgcmVzb2x2ZWQgPSBsaW5rSHJlZih0aGlzLnJvdyk7XHJcbiAgICAgIGNvbnN0IHMgPSByZXNvbHZlZCAhPSBudWxsID8gU3RyaW5nKHJlc29sdmVkKS50cmltKCkgOiAnJztcclxuICAgICAgcmV0dXJuIHMubGVuZ3RoID4gMCA/IHMgOiBudWxsO1xyXG4gICAgfVxyXG4gICAgY29uc3QgcyA9IFN0cmluZyhsaW5rSHJlZikudHJpbSgpO1xyXG4gICAgcmV0dXJuIHMubGVuZ3RoID4gMCA/IHMgOiBudWxsO1xyXG4gIH1cclxuXHJcbiAgZ2V0Q2xpY2tlZEFjdGlvbihhY3Rpb246IEJ1dHRvbkFjdGlvblNldHRpbmdzLCBldmVudD86IE1vdXNlRXZlbnQpIHtcclxuICAgIGNvbnN0IGhyZWYgPSB0aGlzLnJlc29sdmVBY3Rpb25IcmVmKGFjdGlvbik7XHJcbiAgICBpZiAoaHJlZiAmJiBldmVudCkge1xyXG4gICAgICBpZiAoZXZlbnQuY3RybEtleSB8fCBldmVudC5tZXRhS2V5IHx8IGV2ZW50LmJ1dHRvbiA9PT0gMSkge1xyXG4gICAgICAgIHJldHVybjtcclxuICAgICAgfVxyXG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgfVxyXG4gICAgaWYgKGFjdGlvbi5zaG93Q29tbWVudERpYWxvZyA9PT0gdHJ1ZSkge1xyXG4gICAgICBjb25zdCBkaWFsb2dSZWYgPSB0aGlzLmRpYWxvZy5vcGVuKEFjdGlvbkNvbW1lbnRDb21wb25lbnQsIHtcclxuICAgICAgICBkYXRhOiB7bGFiZWw6IGFjdGlvbi5sYWJlbCwgaXNUZXJtaW5hdGlvbjogYWN0aW9uLmNvbW1lbnRSZXF1aXJlZCwgZXh0ZXJuYWw6IGZhbHNlLFxyXG4gICAgICAgICAgd2FybmluZ01zZzogZmFsc2V9LFxyXG4gICAgICAgIHdpZHRoOiAnNjAwcHgnLFxyXG4gICAgICAgIGhlaWdodDogJ2F1dG8nLFxyXG4gICAgICAgIGRpcmVjdGlvbjogICdsdHInIC8vIHRoaXMuYXV0aFNlcnZpY2UuZGlyID09PSAncnRsJyA/ICdydGwnOiAnbHRyJ1xyXG4gICAgICB9KTtcclxuICAgICAgZGlhbG9nUmVmLmFmdGVyQ2xvc2VkKCkuc3Vic2NyaWJlKHJlc3VsdCA9PiB7XHJcbiAgICAgICAgaWYgKHJlc3VsdCkge1xyXG4gICAgICAgICAgYWN0aW9uLmNvbW1lbnQgPSByZXN1bHQuY29tbWVudDtcclxuICAgICAgICAgIGFjdGlvbi5zaGFyZUV4dGVybmFsID0gcmVzdWx0LnNoYXJlRXh0ZXJuYWw7XHJcbiAgICAgICAgICB0aGlzLmNsaWNrZWRCdXR0b24uZW1pdChhY3Rpb24pO1xyXG4gICAgICAgIH1cclxuICAgICAgfSk7XHJcblxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5jbGlja2VkQnV0dG9uLmVtaXQoYWN0aW9uKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJidXR0b25zQWN0aW9uOyBlbHNlIGxpc3RfQWN0aW9uXCI+XHJcbiAgPGRpdiBjbGFzcz1cImFjdGlvbi1idXR0b25zLWNvbnRhaW5lclwiICpuZ0lmPVwiKGFjdGlvbnM/Lmxlbmd0aCA/IGFjdGlvbnMgOiBsaXN0QWN0aW9uKT8ubGVuZ3RoID4gMFwiPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYWN0aW9uIG9mIChhY3Rpb25zPy5sZW5ndGggPyBhY3Rpb25zIDogbGlzdEFjdGlvbik7IGxldCBpID0gaW5kZXhcIj5cclxuICAgICAgPGFcclxuICAgICAgICAqbmdJZj1cInJlc29sdmVBY3Rpb25IcmVmKGFjdGlvbikgYXMgaHJlZlwiXHJcbiAgICAgICAgY2xhc3M9XCJhY3Rpb24tYnV0dG9uXCJcclxuICAgICAgICBbaHJlZl09XCJocmVmXCJcclxuICAgICAgICAoY2xpY2spPVwiZ2V0Q2xpY2tlZEFjdGlvbihhY3Rpb24sICRldmVudClcIlxyXG4gICAgICAgIFthdHRyLmlkXT1cImFjdGlvbi5pZCB8fCAoJ2FjdGlvbnMtYnRuLScgKyBhY3Rpb24ubGFiZWwpXCJcclxuICAgICAgICBbdGl0bGVdPVwiYWN0aW9uLmxhYmVsIHwgdHJhbnNsYXRlXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxtYXQtaWNvbiAqbmdJZj1cImFjdGlvbi5pY29uPy5sZW5ndGhcIiBjbGFzcz1cImFjdGlvbi1pY29uXCI+e3sgYWN0aW9uLmljb24gfX08L21hdC1pY29uPlxyXG4gICAgICA8L2E+XHJcbiAgICAgIDxidXR0b25cclxuICAgICAgICAqbmdJZj1cIiFyZXNvbHZlQWN0aW9uSHJlZihhY3Rpb24pXCJcclxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICBjbGFzcz1cImFjdGlvbi1idXR0b25cIlxyXG4gICAgICAgIChjbGljayk9XCJnZXRDbGlja2VkQWN0aW9uKGFjdGlvbilcIlxyXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXHJcbiAgICAgICAgW2F0dHIuaWRdPVwiYWN0aW9uLmlkIHx8ICgnYWN0aW9ucy1idG4tJyArIGFjdGlvbi5sYWJlbClcIlxyXG4gICAgICAgIFt0aXRsZV09XCJhY3Rpb24ubGFiZWwgfCB0cmFuc2xhdGVcIlxyXG4gICAgICA+XHJcbiAgICAgICAgPG1hdC1pY29uICpuZ0lmPVwiYWN0aW9uLmljb24/Lmxlbmd0aFwiIGNsYXNzPVwiYWN0aW9uLWljb25cIj57eyBhY3Rpb24uaWNvbiB9fTwvbWF0LWljb24+XHJcbiAgICAgIDwvYnV0dG9uPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgPC9kaXY+XHJcbjwvbmctY29udGFpbmVyPlxyXG5cclxuPG5nLXRlbXBsYXRlICNsaXN0X0FjdGlvbj5cclxuICA8ZGl2ICpuZ0lmPVwibGlzdEFjdGlvbj8ubGVuZ3RoID4gMFwiPlxyXG4gICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uIFttYXRNZW51VHJpZ2dlckZvcl09XCJtZW51XCIgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiIHN0eWxlPVwianVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGNvbG9yOiBncmV5XCIgaWQ9XCJhY3Rpb25zLW1lbnUtdHJpZ2dlclwiPlxyXG4gICAgICA8bWF0LWljb24+bW9yZV92ZXJ0PC9tYXQtaWNvbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gICAgPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiPlxyXG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBsaXN0X0FjdGlvbiBvZiBsaXN0QWN0aW9uXCI+XHJcbiAgICAgICAgPGFcclxuICAgICAgICAgICpuZ0lmPVwicmVzb2x2ZUFjdGlvbkhyZWYobGlzdF9BY3Rpb24pIGFzIGhyZWZcIlxyXG4gICAgICAgICAgbWF0LW1lbnUtaXRlbVxyXG4gICAgICAgICAgW2hyZWZdPVwiaHJlZlwiXHJcbiAgICAgICAgICAoY2xpY2spPVwiZ2V0Q2xpY2tlZEFjdGlvbihsaXN0X0FjdGlvbiwgJGV2ZW50KVwiXHJcbiAgICAgICAgICBbYXR0ci5pZF09XCJsaXN0X0FjdGlvbi5pZCB8fCAoJ2FjdGlvbnMtbWVudS1pdGVtLScgKyBsaXN0X0FjdGlvbi5sYWJlbClcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgIDxzcGFuPnt7IGxpc3RfQWN0aW9uLmxhYmVsIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxyXG4gICAgICAgIDwvYT5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAqbmdJZj1cIiFyZXNvbHZlQWN0aW9uSHJlZihsaXN0X0FjdGlvbilcIlxyXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICBtYXQtbWVudS1pdGVtXHJcbiAgICAgICAgICAoY2xpY2spPVwiZ2V0Q2xpY2tlZEFjdGlvbihsaXN0X0FjdGlvbilcIlxyXG4gICAgICAgICAgW2F0dHIuaWRdPVwibGlzdF9BY3Rpb24uaWQgfHwgKCdhY3Rpb25zLW1lbnUtaXRlbS0nICsgbGlzdF9BY3Rpb24ubGFiZWwpXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICA8c3Bhbj57eyBsaXN0X0FjdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L21hdC1tZW51PlxyXG4gIDwvZGl2PlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=
|
package/fesm2022/iq-ui-lib.mjs
CHANGED
|
@@ -214,7 +214,36 @@ class ButtonActionsComponent {
|
|
|
214
214
|
}
|
|
215
215
|
ngOnInit() {
|
|
216
216
|
}
|
|
217
|
-
|
|
217
|
+
resolveActionHref(action) {
|
|
218
|
+
if (this.disabled) {
|
|
219
|
+
return null;
|
|
220
|
+
}
|
|
221
|
+
if (action.showCommentDialog) {
|
|
222
|
+
return null;
|
|
223
|
+
}
|
|
224
|
+
const linkHref = action.linkHref;
|
|
225
|
+
if (linkHref == null || linkHref === '') {
|
|
226
|
+
return null;
|
|
227
|
+
}
|
|
228
|
+
if (typeof linkHref === 'function') {
|
|
229
|
+
if (this.row === undefined || this.row === null) {
|
|
230
|
+
return null;
|
|
231
|
+
}
|
|
232
|
+
const resolved = linkHref(this.row);
|
|
233
|
+
const s = resolved != null ? String(resolved).trim() : '';
|
|
234
|
+
return s.length > 0 ? s : null;
|
|
235
|
+
}
|
|
236
|
+
const s = String(linkHref).trim();
|
|
237
|
+
return s.length > 0 ? s : null;
|
|
238
|
+
}
|
|
239
|
+
getClickedAction(action, event) {
|
|
240
|
+
const href = this.resolveActionHref(action);
|
|
241
|
+
if (href && event) {
|
|
242
|
+
if (event.ctrlKey || event.metaKey || event.button === 1) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
event.preventDefault();
|
|
246
|
+
}
|
|
218
247
|
if (action.showCommentDialog === true) {
|
|
219
248
|
const dialogRef = this.dialog.open(ActionCommentComponent, {
|
|
220
249
|
data: { label: action.label, isTermination: action.commentRequired, external: false,
|
|
@@ -236,7 +265,7 @@ class ButtonActionsComponent {
|
|
|
236
265
|
}
|
|
237
266
|
}
|
|
238
267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction", row: "row" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
240
269
|
}
|
|
241
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, decorators: [{
|
|
242
271
|
type: Component,
|
|
@@ -250,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
250
279
|
NgClass,
|
|
251
280
|
NgForOf,
|
|
252
281
|
TranslateModule
|
|
253
|
-
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
282
|
+
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"] }]
|
|
254
283
|
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { actions: [{
|
|
255
284
|
type: Input
|
|
256
285
|
}], disabled: [{
|
|
@@ -261,6 +290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
261
290
|
type: Input
|
|
262
291
|
}], listAction: [{
|
|
263
292
|
type: Input
|
|
293
|
+
}], row: [{
|
|
294
|
+
type: Input
|
|
264
295
|
}] } });
|
|
265
296
|
|
|
266
297
|
class ButtonActionSettings {
|
|
@@ -276,6 +307,7 @@ class ButtonActionSettings {
|
|
|
276
307
|
this.comment = buttonActionSettings.comment;
|
|
277
308
|
this.shareExternal = buttonActionSettings.shareExternal;
|
|
278
309
|
this.commentRequired = buttonActionSettings.commentRequired || false;
|
|
310
|
+
this.linkHref = buttonActionSettings.linkHref;
|
|
279
311
|
}
|
|
280
312
|
}
|
|
281
313
|
|
|
@@ -3364,7 +3396,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3364
3396
|
return super.labelKeyByValue(column, row);
|
|
3365
3397
|
}
|
|
3366
3398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: 'securityManager' }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
|
|
3399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
|
|
3368
3400
|
}
|
|
3369
3401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
3370
3402
|
type: Component,
|
|
@@ -3395,7 +3427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3395
3427
|
MatMenuTrigger,
|
|
3396
3428
|
MatMenu,
|
|
3397
3429
|
MatMenuItem,
|
|
3398
|
-
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"] }]
|
|
3430
|
+
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"] }]
|
|
3399
3431
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
|
|
3400
3432
|
type: Inject,
|
|
3401
3433
|
args: ['securityManager']
|