dolfo-angular 1.228.0 → 1.230.0
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.
|
@@ -48,19 +48,24 @@ class GridConfig {
|
|
|
48
48
|
loading$ = new BehaviorSubject(false);
|
|
49
49
|
selectedItems;
|
|
50
50
|
actions$ = new BehaviorSubject(null);
|
|
51
|
+
toolbar;
|
|
52
|
+
prevSub;
|
|
51
53
|
constructor(config) {
|
|
52
54
|
this.config = config;
|
|
53
55
|
this.refreshGrid();
|
|
54
56
|
this.actions$.next(config.actions);
|
|
57
|
+
if (config.toolbar)
|
|
58
|
+
this.toolbar = config.toolbar;
|
|
55
59
|
}
|
|
56
60
|
refreshGrid = () => {
|
|
57
61
|
this.selectedItems = [];
|
|
62
|
+
this.prevSub?.unsubscribe();
|
|
58
63
|
if (Array.isArray(this.config.items))
|
|
59
64
|
this.items$.next(this.config.items);
|
|
60
65
|
else {
|
|
61
|
-
this.
|
|
62
|
-
this.config.items.subscribe(it => {
|
|
63
|
-
this.
|
|
66
|
+
this.setLoading(true);
|
|
67
|
+
this.prevSub = this.config.items.subscribe(it => {
|
|
68
|
+
this.setLoading(false);
|
|
64
69
|
this.items$.next(it);
|
|
65
70
|
if (this.getSelectionConfig()?.defaultSelected)
|
|
66
71
|
this.selectedItems = it.filter(i => this.getSelectionConfig().defaultSelected(i));
|
|
@@ -77,7 +82,7 @@ class GridConfig {
|
|
|
77
82
|
getEvents = () => this.config.events;
|
|
78
83
|
getUniqueId = (item) => this.config.getItemKey(item);
|
|
79
84
|
isLoading$ = () => this.loading$.asObservable();
|
|
80
|
-
|
|
85
|
+
setLoading = (v) => this.loading$.next(v);
|
|
81
86
|
getSelectedItems = () => this.items$.getValue().filter(it => this.selectedItems.some(d => this.getUniqueId(d) === this.getUniqueId(it)));
|
|
82
87
|
toggleSelection = (item) => {
|
|
83
88
|
if (this.isItemSelected(item))
|
|
@@ -102,6 +107,13 @@ class GridConfig {
|
|
|
102
107
|
get hasActions() {
|
|
103
108
|
return !!this.actions$.getValue();
|
|
104
109
|
}
|
|
110
|
+
get hasToolbar() {
|
|
111
|
+
return !!this.toolbar;
|
|
112
|
+
}
|
|
113
|
+
getToolbarButtons() {
|
|
114
|
+
return this.toolbar.buttons;
|
|
115
|
+
}
|
|
116
|
+
setToolbar = (toolbar) => this.toolbar = toolbar;
|
|
105
117
|
}
|
|
106
118
|
|
|
107
119
|
class IconComponent {
|
|
@@ -1449,18 +1461,23 @@ class DialogHeaderComponent {
|
|
|
1449
1461
|
title;
|
|
1450
1462
|
icon;
|
|
1451
1463
|
showCloseX = true;
|
|
1464
|
+
onCancel = new EventEmitter();
|
|
1452
1465
|
cdr = inject(ChangeDetectorRef);
|
|
1453
1466
|
dialogService = inject(DialogService);
|
|
1454
1467
|
ngOnInit() {
|
|
1455
1468
|
this.cdr.detectChanges();
|
|
1456
1469
|
}
|
|
1457
1470
|
close = () => {
|
|
1458
|
-
this.
|
|
1459
|
-
|
|
1471
|
+
if (this.onCancel.observed)
|
|
1472
|
+
this.onCancel.emit();
|
|
1473
|
+
else {
|
|
1474
|
+
this.dialogService.action({ type: DialogActionType.CANCEL, data: null });
|
|
1475
|
+
this.dialogService.close();
|
|
1476
|
+
}
|
|
1460
1477
|
};
|
|
1461
1478
|
getIcon = () => this.icon.icon;
|
|
1462
1479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogHeaderComponent, isStandalone: false, selector: "dolfo-dialog-header", inputs: { title: "title", icon: "icon", showCloseX: ["showCloseX", "showCloseX", booleanAttribute] }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template>
|
|
1480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DialogHeaderComponent, isStandalone: false, selector: "dolfo-dialog-header", inputs: { title: "title", icon: "icon", showCloseX: ["showCloseX", "showCloseX", booleanAttribute] }, outputs: { onCancel: "onCancel" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `<ng-template>
|
|
1464
1481
|
<h5>
|
|
1465
1482
|
@if(icon){
|
|
1466
1483
|
<dolfo-icon [name]="getIcon()" [class]="'fg-' + icon.color"></dolfo-icon>
|
|
@@ -1505,6 +1522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1505
1522
|
}], showCloseX: [{
|
|
1506
1523
|
type: Input,
|
|
1507
1524
|
args: [{ transform: booleanAttribute }]
|
|
1525
|
+
}], onCancel: [{
|
|
1526
|
+
type: Output
|
|
1508
1527
|
}] } });
|
|
1509
1528
|
|
|
1510
1529
|
class DialogFooterComponent {
|
|
@@ -1694,7 +1713,7 @@ class DialogComponent extends Formable {
|
|
|
1694
1713
|
@if(footer){
|
|
1695
1714
|
<dolfo-dialog-footer [buttons]="footer"></dolfo-dialog-footer>
|
|
1696
1715
|
}
|
|
1697
|
-
</dolfo-dialog-layout>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputTextComponent, selector: "dolfo-input-text", inputs: ["type", "placeHolder"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: ComboboxComponent, selector: "dolfo-combobox", inputs: ["options", "placeHolder", "multiple"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: DatepickerComponent, selector: "dolfo-datepicker", inputs: ["selectTime"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: AutocompleteComponent, selector: "dolfo-autocomplete", inputs: ["config", "minChars", "resultTemplate"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: InputRadioComponent, selector: "dolfo-input-radio", inputs: ["options"] }, { kind: "component", type: DialogContentComponent, selector: "dolfo-dialog-content" }, { kind: "component", type: DialogHeaderComponent, selector: "dolfo-dialog-header", inputs: ["title", "icon", "showCloseX"] }, { kind: "component", type: DialogFooterComponent, selector: "dolfo-dialog-footer", inputs: ["buttons"] }, { kind: "component", type: DialogLayoutComponent, selector: "dolfo-dialog-layout", inputs: ["width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1716
|
+
</dolfo-dialog-layout>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputTextComponent, selector: "dolfo-input-text", inputs: ["type", "placeHolder"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: ComboboxComponent, selector: "dolfo-combobox", inputs: ["options", "placeHolder", "multiple"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: DatepickerComponent, selector: "dolfo-datepicker", inputs: ["selectTime"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: AutocompleteComponent, selector: "dolfo-autocomplete", inputs: ["config", "minChars", "resultTemplate"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: InputRadioComponent, selector: "dolfo-input-radio", inputs: ["options"] }, { kind: "component", type: DialogContentComponent, selector: "dolfo-dialog-content" }, { kind: "component", type: DialogHeaderComponent, selector: "dolfo-dialog-header", inputs: ["title", "icon", "showCloseX"], outputs: ["onCancel"] }, { kind: "component", type: DialogFooterComponent, selector: "dolfo-dialog-footer", inputs: ["buttons"] }, { kind: "component", type: DialogLayoutComponent, selector: "dolfo-dialog-layout", inputs: ["width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1698
1717
|
}
|
|
1699
1718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1700
1719
|
type: Component,
|
|
@@ -2515,12 +2534,13 @@ class GridComponent {
|
|
|
2515
2534
|
col.onLink(colValue);
|
|
2516
2535
|
}
|
|
2517
2536
|
};
|
|
2537
|
+
isToolbarBtnDisabled = (disabled) => typeof disabled === "boolean" ? disabled : disabled();
|
|
2518
2538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2519
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: GridComponent, isStandalone: false, selector: "dolfo-grid", inputs: { config: "config" }, ngImport: i0, template: "@let loading = config.isLoading$() | async;\r\n\r\n<div class=\"grid-container\" [class.loading]=\"loading\">\r\n @if(loading){\r\n <div class=\"grid-loading\">\r\n <dolfo-icon name=\"spinner2\"></dolfo-icon>\r\n </div>\r\n }\r\n\r\n <table>\r\n @let columns = config.getColumns();\r\n @let showActions = config.hasActions;\r\n @let selection = config.getSelectionConfig();\r\n @let colSpan = columns.length + (showActions ? 1 : 0) + (selection ? 1 : 0);\r\n \r\n <thead>\r\n <tr>\r\n @if(selection){\r\n <th [style]=\"{ width: 0 }\">\r\n @if(selection.showSelectAll && selection.type === \"multiple\"){\r\n <input type=\"checkbox\" [checked]=\"config.isAllSelected()\" (change)=\"config.toggleSelectAll()\" />\r\n }\r\n </th>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <th [ngStyle]=\"{ width: col.width + 'px', maxWidth: col.width + 'px' }\">{{ col.label | translate }}</th>\r\n }\r\n \r\n @if(showActions){\r\n <th>{{ \"grid.actions\" | translate }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <tbody>\r\n @let list = config.getList$() | async;\r\n \r\n @if(list.length > 0){\r\n @for(item of list; track config.getUniqueId(item)){\r\n @let itemActions = config.getActions$(item) | async;\r\n @let rowClass = config.getRowClass(item);\r\n \r\n <tr (click)=\"config.getEvents()?.onRowClick?.(item)\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\">\r\n @if(selection){\r\n <td [ngClass]=\"rowClass\" class=\"align-center\">\r\n <input type=\"checkbox\" [checked]=\"config.isItemSelected(item)\" (change)=\"config.toggleSelection(item)\" />\r\n </td>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <td #cell [ngStyle]=\"{ width: col.width + 'px' }\" [ngClass]=\"rowClass\" [class.align-right]=\"col.align === 'right'\" [class.align-center]=\"col.align === 'center'\" (click)=\"checkLink($event, col, item, cell)\" [innerHTML]=\"resolveField(item, col)\"></td>\r\n }\r\n \r\n @if(showActions){\r\n <td class=\"align-center actions\" [ngClass]=\"rowClass\">\r\n @if(itemActions.length > 0){\r\n <dolfo-button color=\"secondary\" [dolfoTooltip]=\"'grid.showActions' | translate\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\" openOnClick>\r\n <dolfo-icon name=\"flickr\"></dolfo-icon>\r\n </dolfo-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }@else {\r\n <tr>\r\n <td [colSpan]=\"colSpan\" class=\"align-center\">{{ \"grid.noResults\" | translate }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContextMenuDirective, selector: "[dolfoContextMenu]", inputs: ["dolfoContextMenu", "openOnClick", "useElRef", "position"] }, { kind: "directive", type: TooltipDirective, selector: "[dolfoTooltip]", inputs: ["dolfoTooltip", "direction"] }, { kind: "component", type: ButtonComponent, selector: "dolfo-button", inputs: ["type", "disabled", "color", "loading", "size", "textButton"], outputs: ["onClick", "onBlur", "onFocus"] }, { kind: "component", type: IconWrapperComponent, selector: "dolfo-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: GridComponent, isStandalone: false, selector: "dolfo-grid", inputs: { config: "config" }, ngImport: i0, template: "@let loading = config.isLoading$() | async;\r\n\r\n<div class=\"grid-container\" [class.loading]=\"loading\">\r\n @if(loading){\r\n <div class=\"grid-loading\">\r\n <dolfo-icon name=\"spinner2\"></dolfo-icon>\r\n </div>\r\n }\r\n\r\n <table>\r\n @let columns = config.getColumns();\r\n @let showActions = config.hasActions;\r\n @let selection = config.getSelectionConfig();\r\n @let colSpan = columns.length + (showActions ? 1 : 0) + (selection ? 1 : 0);\r\n \r\n <thead>\r\n @if(config.hasToolbar){\r\n <tr class=\"dolfo-grid-toolbar\">\r\n <th [colSpan]=\"colSpan\">\r\n @for(btn of config.getToolbarButtons(); track btn.label){\r\n <dolfo-button color=\"white\" (onClick)=\"btn.onClick()\" [disabled]=\"isToolbarBtnDisabled(btn.disabled)\">\r\n @if(btn.icon){\r\n <dolfo-icon [name]=\"btn.icon\"></dolfo-icon>\r\n }\r\n\r\n {{ btn.label }}\r\n </dolfo-button>\r\n }\r\n </th>\r\n </tr>\r\n }\r\n\r\n <tr>\r\n @if(selection){\r\n <th [style]=\"{ width: 0 }\">\r\n @if(selection.showSelectAll && selection.type === \"multiple\"){\r\n <input type=\"checkbox\" [checked]=\"config.isAllSelected()\" (change)=\"config.toggleSelectAll()\" />\r\n }\r\n </th>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <th [ngStyle]=\"{ width: col.width + 'px', maxWidth: col.width + 'px' }\">{{ col.label | translate }}</th>\r\n }\r\n \r\n @if(showActions){\r\n <th>{{ \"grid.actions\" | translate }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <tbody>\r\n @let list = config.getList$() | async;\r\n \r\n @if(list.length > 0){\r\n @for(item of list; track config.getUniqueId(item)){\r\n @let itemActions = config.getActions$(item) | async;\r\n @let rowClass = config.getRowClass(item);\r\n \r\n <tr (click)=\"config.getEvents()?.onRowClick?.(item)\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\">\r\n @if(selection){\r\n <td [ngClass]=\"rowClass\" class=\"align-center\">\r\n <input type=\"checkbox\" [checked]=\"config.isItemSelected(item)\" (change)=\"config.toggleSelection(item)\" />\r\n </td>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <td #cell [ngStyle]=\"{ width: col.width + 'px' }\" [ngClass]=\"rowClass\" [class.align-right]=\"col.align === 'right'\" [class.align-center]=\"col.align === 'center'\" (click)=\"checkLink($event, col, item, cell)\" [innerHTML]=\"resolveField(item, col)\"></td>\r\n }\r\n \r\n @if(showActions){\r\n <td class=\"align-center actions\" [ngClass]=\"rowClass\">\r\n @if(itemActions.length > 0){\r\n <dolfo-button color=\"secondary\" [dolfoTooltip]=\"'grid.showActions' | translate\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\" openOnClick>\r\n <dolfo-icon name=\"flickr\"></dolfo-icon>\r\n </dolfo-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }@else {\r\n <tr>\r\n <td [colSpan]=\"colSpan\" class=\"align-center\">{{ \"grid.noResults\" | translate }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContextMenuDirective, selector: "[dolfoContextMenu]", inputs: ["dolfoContextMenu", "openOnClick", "useElRef", "position"] }, { kind: "directive", type: TooltipDirective, selector: "[dolfoTooltip]", inputs: ["dolfoTooltip", "direction"] }, { kind: "component", type: ButtonComponent, selector: "dolfo-button", inputs: ["type", "disabled", "color", "loading", "size", "textButton"], outputs: ["onClick", "onBlur", "onFocus"] }, { kind: "component", type: IconWrapperComponent, selector: "dolfo-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2520
2540
|
}
|
|
2521
2541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridComponent, decorators: [{
|
|
2522
2542
|
type: Component,
|
|
2523
|
-
args: [{ selector: "dolfo-grid", standalone: false, template: "@let loading = config.isLoading$() | async;\r\n\r\n<div class=\"grid-container\" [class.loading]=\"loading\">\r\n @if(loading){\r\n <div class=\"grid-loading\">\r\n <dolfo-icon name=\"spinner2\"></dolfo-icon>\r\n </div>\r\n }\r\n\r\n <table>\r\n @let columns = config.getColumns();\r\n @let showActions = config.hasActions;\r\n @let selection = config.getSelectionConfig();\r\n @let colSpan = columns.length + (showActions ? 1 : 0) + (selection ? 1 : 0);\r\n \r\n <thead>\r\n <tr>\r\n @if(selection){\r\n <th [style]=\"{ width: 0 }\">\r\n @if(selection.showSelectAll && selection.type === \"multiple\"){\r\n <input type=\"checkbox\" [checked]=\"config.isAllSelected()\" (change)=\"config.toggleSelectAll()\" />\r\n }\r\n </th>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <th [ngStyle]=\"{ width: col.width + 'px', maxWidth: col.width + 'px' }\">{{ col.label | translate }}</th>\r\n }\r\n \r\n @if(showActions){\r\n <th>{{ \"grid.actions\" | translate }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <tbody>\r\n @let list = config.getList$() | async;\r\n \r\n @if(list.length > 0){\r\n @for(item of list; track config.getUniqueId(item)){\r\n @let itemActions = config.getActions$(item) | async;\r\n @let rowClass = config.getRowClass(item);\r\n \r\n <tr (click)=\"config.getEvents()?.onRowClick?.(item)\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\">\r\n @if(selection){\r\n <td [ngClass]=\"rowClass\" class=\"align-center\">\r\n <input type=\"checkbox\" [checked]=\"config.isItemSelected(item)\" (change)=\"config.toggleSelection(item)\" />\r\n </td>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <td #cell [ngStyle]=\"{ width: col.width + 'px' }\" [ngClass]=\"rowClass\" [class.align-right]=\"col.align === 'right'\" [class.align-center]=\"col.align === 'center'\" (click)=\"checkLink($event, col, item, cell)\" [innerHTML]=\"resolveField(item, col)\"></td>\r\n }\r\n \r\n @if(showActions){\r\n <td class=\"align-center actions\" [ngClass]=\"rowClass\">\r\n @if(itemActions.length > 0){\r\n <dolfo-button color=\"secondary\" [dolfoTooltip]=\"'grid.showActions' | translate\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\" openOnClick>\r\n <dolfo-icon name=\"flickr\"></dolfo-icon>\r\n </dolfo-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }@else {\r\n <tr>\r\n <td [colSpan]=\"colSpan\" class=\"align-center\">{{ \"grid.noResults\" | translate }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>" }]
|
|
2543
|
+
args: [{ selector: "dolfo-grid", standalone: false, template: "@let loading = config.isLoading$() | async;\r\n\r\n<div class=\"grid-container\" [class.loading]=\"loading\">\r\n @if(loading){\r\n <div class=\"grid-loading\">\r\n <dolfo-icon name=\"spinner2\"></dolfo-icon>\r\n </div>\r\n }\r\n\r\n <table>\r\n @let columns = config.getColumns();\r\n @let showActions = config.hasActions;\r\n @let selection = config.getSelectionConfig();\r\n @let colSpan = columns.length + (showActions ? 1 : 0) + (selection ? 1 : 0);\r\n \r\n <thead>\r\n @if(config.hasToolbar){\r\n <tr class=\"dolfo-grid-toolbar\">\r\n <th [colSpan]=\"colSpan\">\r\n @for(btn of config.getToolbarButtons(); track btn.label){\r\n <dolfo-button color=\"white\" (onClick)=\"btn.onClick()\" [disabled]=\"isToolbarBtnDisabled(btn.disabled)\">\r\n @if(btn.icon){\r\n <dolfo-icon [name]=\"btn.icon\"></dolfo-icon>\r\n }\r\n\r\n {{ btn.label }}\r\n </dolfo-button>\r\n }\r\n </th>\r\n </tr>\r\n }\r\n\r\n <tr>\r\n @if(selection){\r\n <th [style]=\"{ width: 0 }\">\r\n @if(selection.showSelectAll && selection.type === \"multiple\"){\r\n <input type=\"checkbox\" [checked]=\"config.isAllSelected()\" (change)=\"config.toggleSelectAll()\" />\r\n }\r\n </th>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <th [ngStyle]=\"{ width: col.width + 'px', maxWidth: col.width + 'px' }\">{{ col.label | translate }}</th>\r\n }\r\n \r\n @if(showActions){\r\n <th>{{ \"grid.actions\" | translate }}</th>\r\n }\r\n </tr>\r\n </thead>\r\n \r\n <tbody>\r\n @let list = config.getList$() | async;\r\n \r\n @if(list.length > 0){\r\n @for(item of list; track config.getUniqueId(item)){\r\n @let itemActions = config.getActions$(item) | async;\r\n @let rowClass = config.getRowClass(item);\r\n \r\n <tr (click)=\"config.getEvents()?.onRowClick?.(item)\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\">\r\n @if(selection){\r\n <td [ngClass]=\"rowClass\" class=\"align-center\">\r\n <input type=\"checkbox\" [checked]=\"config.isItemSelected(item)\" (change)=\"config.toggleSelection(item)\" />\r\n </td>\r\n }\r\n\r\n @for(col of columns; track col.label){\r\n <td #cell [ngStyle]=\"{ width: col.width + 'px' }\" [ngClass]=\"rowClass\" [class.align-right]=\"col.align === 'right'\" [class.align-center]=\"col.align === 'center'\" (click)=\"checkLink($event, col, item, cell)\" [innerHTML]=\"resolveField(item, col)\"></td>\r\n }\r\n \r\n @if(showActions){\r\n <td class=\"align-center actions\" [ngClass]=\"rowClass\">\r\n @if(itemActions.length > 0){\r\n <dolfo-button color=\"secondary\" [dolfoTooltip]=\"'grid.showActions' | translate\" [dolfoContextMenu]=\"itemActions\" position=\"bottom-right\" openOnClick>\r\n <dolfo-icon name=\"flickr\"></dolfo-icon>\r\n </dolfo-button>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n }@else {\r\n <tr>\r\n <td [colSpan]=\"colSpan\" class=\"align-center\">{{ \"grid.noResults\" | translate }}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>" }]
|
|
2524
2544
|
}], propDecorators: { config: [{
|
|
2525
2545
|
type: Input,
|
|
2526
2546
|
args: [{ required: true }]
|