@cauca-911/datagrid 22.2.2 → 22.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -1
- package/fesm2022/cauca-911-datagrid.mjs +67 -38
- package/fesm2022/cauca-911-datagrid.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cauca-911-datagrid.d.ts +17 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ViewChild, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, output, signal, Injectable, InjectionToken, inject, LOCALE_ID, linkedSignal, ContentChild, ContentChildren, Inject, QueryList, effect, TemplateRef, EventEmitter, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef,
|
|
2
|
+
import { input, ViewChild, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, output, signal, Injectable, InjectionToken, inject, LOCALE_ID, computed, linkedSignal, ContentChild, ContentChildren, Inject, QueryList, effect, TemplateRef, EventEmitter, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef, model } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/table';
|
|
4
4
|
import { MatColumnDef, MatCellDef, MatHeaderCellDef, MatFooterCellDef, MatTable, MatHeaderRowDef, MatFooterRowDef, MatNoDataRow, MatRowDef, MatTableDataSource, MatHeaderCell, MatFooterCell, MatRow, MatHeaderRow, MatFooterRow, MatCell } from '@angular/material/table';
|
|
5
5
|
import { CDK_DRAG_CONFIG, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
@@ -52,6 +52,8 @@ class BaseGridColumnComponent {
|
|
|
52
52
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
53
53
|
this.isInColumnChooser = input(true, /* @ts-ignore */
|
|
54
54
|
...(ngDevMode ? [{ debugName: "isInColumnChooser" }] : /* istanbul ignore next */ []));
|
|
55
|
+
this.visibleByDefault = input(true, /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "visibleByDefault" }] : /* istanbul ignore next */ []));
|
|
55
57
|
this.width = input('', /* @ts-ignore */
|
|
56
58
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
57
59
|
this.showToolTip = input(true, /* @ts-ignore */
|
|
@@ -85,7 +87,7 @@ class BaseGridColumnComponent {
|
|
|
85
87
|
return this.label() ?? this.capitalize(this.prop());
|
|
86
88
|
}
|
|
87
89
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, deps: [{ token: i1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
88
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isInColumnChooser: { classPropertyName: "isInColumnChooser", publicName: "isInColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isInColumnChooser: { classPropertyName: "isInColumnChooser", publicName: "isInColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, visibleByDefault: { classPropertyName: "visibleByDefault", publicName: "visibleByDefault", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
89
91
|
}
|
|
90
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, decorators: [{
|
|
91
93
|
type: Component,
|
|
@@ -95,7 +97,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
95
97
|
}]
|
|
96
98
|
}], ctorParameters: () => [{ type: i1.MatTable, decorators: [{
|
|
97
99
|
type: Optional
|
|
98
|
-
}] }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isInColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInColumnChooser", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], ariaHidden: [{
|
|
100
|
+
}] }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isInColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInColumnChooser", required: false }] }], visibleByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleByDefault", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], ariaHidden: [{
|
|
99
101
|
type: HostBinding,
|
|
100
102
|
args: ['attr.ariaHidden']
|
|
101
103
|
}], classes: [{
|
|
@@ -115,20 +117,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
115
117
|
args: [MatFooterCellDef, { static: true }]
|
|
116
118
|
}] } });
|
|
117
119
|
|
|
120
|
+
const ALL_EXPORT_FORMATS = ['excel', 'pdf'];
|
|
121
|
+
const GRID_OWNED_COLUMNS = ['', 'position', 'buttons', 'menu', 'expand'];
|
|
122
|
+
function buildExportMatrix(columnOrder, columns, rows) {
|
|
123
|
+
const exportedColumns = columnOrder
|
|
124
|
+
.filter(name => !GRID_OWNED_COLUMNS.includes(name))
|
|
125
|
+
.map(name => columns.find(column => column.columnDef?.name === name))
|
|
126
|
+
.filter(column => !!column && column.exportable());
|
|
127
|
+
return {
|
|
128
|
+
headers: exportedColumns.map(column => column.getExportHeader()),
|
|
129
|
+
rows: (rows ?? []).map(row => exportedColumns.map(column => column.getExportValue(row))),
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const FORMAT_MENU_ITEMS = {
|
|
134
|
+
excel: { icon: 'table_view', label: 'dataGrid.export.excel' },
|
|
135
|
+
pdf: { icon: 'picture_as_pdf', label: 'dataGrid.export.pdf' },
|
|
136
|
+
};
|
|
118
137
|
class DataGridExportButtonComponent {
|
|
119
138
|
constructor() {
|
|
139
|
+
this.formats = input(ALL_EXPORT_FORMATS, /* @ts-ignore */
|
|
140
|
+
...(ngDevMode ? [{ debugName: "formats" }] : /* istanbul ignore next */ []));
|
|
120
141
|
this.exportRequest = output();
|
|
142
|
+
this.menuItems = FORMAT_MENU_ITEMS;
|
|
121
143
|
}
|
|
122
144
|
onExport(format) {
|
|
123
145
|
this.exportRequest.emit(format);
|
|
124
146
|
}
|
|
125
147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridExportButtonComponent, isStandalone: true, selector: "cauca-data-grid-export-button", inputs: { formats: { classPropertyName: "formats", publicName: "formats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequest: "exportRequest" }, ngImport: i0, template: "<cauca-icon-button icon=\"download\" colorOnHover=\"var(--primary)\" [matMenuTriggerFor]=\"exportMenu\"\r\n [ariaLabel]=\"'dataGrid.export.title' | translate\" />\r\n\r\n<mat-menu #exportMenu=\"matMenu\">\r\n @for (format of formats(); track format) {\r\n <cauca-menu-item [icon]=\"menuItems[format].icon\" [label]=\"menuItems[format].label\" [translateLabel]=\"true\"\r\n (buttonClick)=\"onExport(format)\" [class]=\"'export-' + format + '-button'\" />\r\n }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
127
149
|
}
|
|
128
150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridExportButtonComponent, decorators: [{
|
|
129
151
|
type: Component,
|
|
130
|
-
args: [{ selector: 'cauca-data-grid-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, MenuItemComponent, MatMenuModule, TranslatePipe], template: "<cauca-icon-button icon=\"download\" colorOnHover=\"var(--primary)\" [matMenuTriggerFor]=\"exportMenu\"\r\n [ariaLabel]=\"'dataGrid.export.title' | translate\" />\r\n\r\n<mat-menu #exportMenu=\"matMenu\">\r\n
|
|
131
|
-
}], propDecorators: { exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
152
|
+
args: [{ selector: 'cauca-data-grid-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, MenuItemComponent, MatMenuModule, TranslatePipe], template: "<cauca-icon-button icon=\"download\" colorOnHover=\"var(--primary)\" [matMenuTriggerFor]=\"exportMenu\"\r\n [ariaLabel]=\"'dataGrid.export.title' | translate\" />\r\n\r\n<mat-menu #exportMenu=\"matMenu\">\r\n @for (format of formats(); track format) {\r\n <cauca-menu-item [icon]=\"menuItems[format].icon\" [label]=\"menuItems[format].label\" [translateLabel]=\"true\"\r\n (buttonClick)=\"onExport(format)\" [class]=\"'export-' + format + '-button'\" />\r\n }\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
|
|
153
|
+
}], propDecorators: { formats: [{ type: i0.Input, args: [{ isSignal: true, alias: "formats", required: false }] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
132
154
|
|
|
133
155
|
class DataGridHeaderComponent {
|
|
134
156
|
constructor() {
|
|
@@ -144,6 +166,8 @@ class DataGridHeaderComponent {
|
|
|
144
166
|
...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
|
|
145
167
|
this.showExportButton = input(false, /* @ts-ignore */
|
|
146
168
|
...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
|
|
169
|
+
this.exportFormats = input(ALL_EXPORT_FORMATS, /* @ts-ignore */
|
|
170
|
+
...(ngDevMode ? [{ debugName: "exportFormats" }] : /* istanbul ignore next */ []));
|
|
147
171
|
this.addButtonLabel = input('', /* @ts-ignore */
|
|
148
172
|
...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
|
|
149
173
|
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
@@ -178,12 +202,12 @@ class DataGridHeaderComponent {
|
|
|
178
202
|
this.addButtonClick.emit();
|
|
179
203
|
}
|
|
180
204
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest", exportRequest: "exportRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportButton()) { <cauca-data-grid-export-button (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridExportButtonComponent, selector: "cauca-data-grid-export-button", outputs: ["exportRequest"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest", exportRequest: "exportRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportButton()) { <cauca-data-grid-export-button [formats]=\"exportFormats()\" (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridExportButtonComponent, selector: "cauca-data-grid-export-button", inputs: ["formats"], outputs: ["exportRequest"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
182
206
|
}
|
|
183
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
|
|
184
208
|
type: Component,
|
|
185
|
-
args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon, DataGridExportButtonComponent], template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportButton()) { <cauca-data-grid-export-button (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
|
|
186
|
-
}], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
209
|
+
args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon, DataGridExportButtonComponent], template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showExportButton()) { <cauca-data-grid-export-button [formats]=\"exportFormats()\" (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
|
|
210
|
+
}], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
|
|
187
211
|
|
|
188
212
|
var Density;
|
|
189
213
|
(function (Density) {
|
|
@@ -307,18 +331,6 @@ function provideCaucaGrid(options) {
|
|
|
307
331
|
];
|
|
308
332
|
}
|
|
309
333
|
|
|
310
|
-
const GRID_OWNED_COLUMNS = ['', 'position', 'buttons', 'menu', 'expand'];
|
|
311
|
-
function buildExportMatrix(columnOrder, columns, rows) {
|
|
312
|
-
const exportedColumns = columnOrder
|
|
313
|
-
.filter(name => !GRID_OWNED_COLUMNS.includes(name))
|
|
314
|
-
.map(name => columns.find(column => column.columnDef?.name === name))
|
|
315
|
-
.filter(column => !!column && column.exportable());
|
|
316
|
-
return {
|
|
317
|
-
headers: exportedColumns.map(column => column.getExportHeader()),
|
|
318
|
-
rows: (rows ?? []).map(row => exportedColumns.map(column => column.getExportValue(row))),
|
|
319
|
-
};
|
|
320
|
-
}
|
|
321
|
-
|
|
322
334
|
const XLSX_MIME = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
323
335
|
const DATE_MASK = 'dd/MM/yyyy HH:mm';
|
|
324
336
|
const EXCEL_DATE_FORMAT = 'dd/mm/yyyy hh:mm';
|
|
@@ -328,7 +340,7 @@ class GridExportService {
|
|
|
328
340
|
this.locale = inject(LOCALE_ID);
|
|
329
341
|
}
|
|
330
342
|
async toExcel(matrix, fileName) {
|
|
331
|
-
const { Workbook } = await import('exceljs');
|
|
343
|
+
const { Workbook } = await this.load(() => import('exceljs'), 'exceljs');
|
|
332
344
|
const workbook = new Workbook();
|
|
333
345
|
const worksheet = workbook.addWorksheet(fileName.slice(0, 31));
|
|
334
346
|
worksheet.addRow(matrix.headers).font = { bold: true };
|
|
@@ -346,8 +358,8 @@ class GridExportService {
|
|
|
346
358
|
this.download(new Blob([buffer], { type: XLSX_MIME }), `${fileName}.xlsx`);
|
|
347
359
|
}
|
|
348
360
|
async toPdf(matrix, fileName) {
|
|
349
|
-
const { jsPDF } = await import('jspdf');
|
|
350
|
-
const { default: autoTable } = await import('jspdf-autotable');
|
|
361
|
+
const { jsPDF } = await this.load(() => import('jspdf'), 'jspdf');
|
|
362
|
+
const { default: autoTable } = await this.load(() => import('jspdf-autotable'), 'jspdf-autotable');
|
|
351
363
|
const document = new jsPDF({ orientation: 'landscape' });
|
|
352
364
|
autoTable(document, {
|
|
353
365
|
head: [matrix.headers],
|
|
@@ -357,6 +369,15 @@ class GridExportService {
|
|
|
357
369
|
});
|
|
358
370
|
document.save(`${fileName}.pdf`);
|
|
359
371
|
}
|
|
372
|
+
async load(importer, packageName) {
|
|
373
|
+
try {
|
|
374
|
+
return await importer();
|
|
375
|
+
}
|
|
376
|
+
catch (cause) {
|
|
377
|
+
throw new Error(`@cauca-911/datagrid needs the optional peer dependency "${packageName}" to export. `
|
|
378
|
+
+ 'Run: npm install exceljs jspdf jspdf-autotable --save', { cause });
|
|
379
|
+
}
|
|
380
|
+
}
|
|
360
381
|
stringify(cell) {
|
|
361
382
|
if (cell === null || cell === undefined) {
|
|
362
383
|
return '';
|
|
@@ -418,6 +439,10 @@ class BaseDataGridComponent {
|
|
|
418
439
|
...(ngDevMode ? [{ debugName: "exportFileName" }] : /* istanbul ignore next */ []));
|
|
419
440
|
this.exportRows = input(undefined, /* @ts-ignore */
|
|
420
441
|
...(ngDevMode ? [{ debugName: "exportRows" }] : /* istanbul ignore next */ []));
|
|
442
|
+
this.exportFormats = input(ALL_EXPORT_FORMATS, /* @ts-ignore */
|
|
443
|
+
...(ngDevMode ? [{ debugName: "exportFormats" }] : /* istanbul ignore next */ []));
|
|
444
|
+
this.canExport = computed(() => this.allowExport() && this.exportFormats().length > 0, /* @ts-ignore */
|
|
445
|
+
...(ngDevMode ? [{ debugName: "canExport" }] : /* istanbul ignore next */ []));
|
|
421
446
|
this.addButtonClick = output();
|
|
422
447
|
this.expandedElement = signal(null, /* @ts-ignore */
|
|
423
448
|
...(ngDevMode ? [{ debugName: "expandedElement" }] : /* istanbul ignore next */ []));
|
|
@@ -501,7 +526,7 @@ class BaseDataGridComponent {
|
|
|
501
526
|
return columns.filter(column => !GRID_OWNED_COLUMNS.includes(column));
|
|
502
527
|
}
|
|
503
528
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, exportRows: { classPropertyName: "exportRows", publicName: "exportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, exportRows: { classPropertyName: "exportRows", publicName: "exportRows", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
505
530
|
}
|
|
506
531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, decorators: [{
|
|
507
532
|
type: Component,
|
|
@@ -510,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
510
535
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: undefined, decorators: [{
|
|
511
536
|
type: Inject,
|
|
512
537
|
args: [PREFERENCE_SERVICE_TOKEN]
|
|
513
|
-
}] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], exportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportRows", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
|
|
538
|
+
}] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], exportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportRows", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
|
|
514
539
|
type: ViewChild,
|
|
515
540
|
args: [DataGridHeaderComponent]
|
|
516
541
|
}], table: [{
|
|
@@ -603,7 +628,7 @@ class DataGridTableOptionsComponent {
|
|
|
603
628
|
this.selectOnlyUserColumns(configuration.visibleColumns);
|
|
604
629
|
}
|
|
605
630
|
else {
|
|
606
|
-
this.
|
|
631
|
+
this.selectDefaultColumns();
|
|
607
632
|
}
|
|
608
633
|
this.onColumnsChanged();
|
|
609
634
|
}
|
|
@@ -622,6 +647,10 @@ class DataGridTableOptionsComponent {
|
|
|
622
647
|
this.columnsChanged.emit(newColumns.map((column) => column.prop()));
|
|
623
648
|
}
|
|
624
649
|
resetColumns() {
|
|
650
|
+
this.selectDefaultColumns();
|
|
651
|
+
this.onColumnsChanged();
|
|
652
|
+
}
|
|
653
|
+
showAllColumns() {
|
|
625
654
|
this.allColumns().forEach((column => column.selected = true));
|
|
626
655
|
this.columnsChanged.emit(this.allColumns().map((column) => column.prop()));
|
|
627
656
|
}
|
|
@@ -633,17 +662,17 @@ class DataGridTableOptionsComponent {
|
|
|
633
662
|
}
|
|
634
663
|
}));
|
|
635
664
|
}
|
|
636
|
-
|
|
665
|
+
selectDefaultColumns() {
|
|
637
666
|
this.allColumns().forEach((column => {
|
|
638
|
-
column.selected =
|
|
667
|
+
column.selected = column.visibleByDefault();
|
|
639
668
|
}));
|
|
640
669
|
}
|
|
641
670
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"
|
|
671
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
643
672
|
}
|
|
644
673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
|
|
645
674
|
type: Component,
|
|
646
|
-
args: [{ selector: 'cauca-data-grid-table-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"
|
|
675
|
+
args: [{ selector: 'cauca-data-grid-table-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"showAllColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
|
|
647
676
|
}], propDecorators: { gridName: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridName", required: true }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], densityChanged: [{ type: i0.Output, args: ["densityChanged"] }], columnsChanged: [{ type: i0.Output, args: ["columnsChanged"] }], columnViewer: [{
|
|
648
677
|
type: ViewChild,
|
|
649
678
|
args: [ButtonPopoverComponent, { static: true }]
|
|
@@ -788,7 +817,7 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
788
817
|
}, 0);
|
|
789
818
|
}
|
|
790
819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
791
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportButton]=\"
|
|
820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportButton]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
|
|
792
821
|
// Material Table structure:
|
|
793
822
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type:
|
|
794
823
|
// Drag and Drop:
|
|
@@ -796,7 +825,7 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
796
825
|
// Material extras:
|
|
797
826
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
798
827
|
// Custom Components:
|
|
799
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
828
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "exportFormats", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
800
829
|
}
|
|
801
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
802
831
|
type: Component,
|
|
@@ -820,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
820
849
|
DataGridProgressSpinerComponent,
|
|
821
850
|
IconButtonComponent,
|
|
822
851
|
StatusMessageComponent
|
|
823
|
-
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportButton]=\"
|
|
852
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportButton]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
824
853
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showLoadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingError", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], allowReordering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReordering", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], refreshData: [{ type: i0.Output, args: ["refreshData"] }], rowDetailTemplate: [{
|
|
825
854
|
type: ContentChild,
|
|
826
855
|
args: [TemplateRef]
|
|
@@ -1231,13 +1260,13 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1231
1260
|
return state.filter !== undefined || state.sort !== undefined || state.pageIndex !== undefined || state.pageSize !== undefined;
|
|
1232
1261
|
}
|
|
1233
1262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, maxExportRows: { classPropertyName: "maxExportRows", publicName: "maxExportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportButton]=\"
|
|
1263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, maxExportRows: { classPropertyName: "maxExportRows", publicName: "maxExportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportButton]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
1235
1264
|
// Material table structure:
|
|
1236
1265
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type:
|
|
1237
1266
|
// Material extras
|
|
1238
1267
|
MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
1239
1268
|
// custom components
|
|
1240
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1269
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "exportFormats", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1241
1270
|
}
|
|
1242
1271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, decorators: [{
|
|
1243
1272
|
type: Component,
|
|
@@ -1256,7 +1285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1256
1285
|
IconButtonComponent,
|
|
1257
1286
|
DataGridProgressSpinerComponent,
|
|
1258
1287
|
StatusMessageComponent,
|
|
1259
|
-
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportButton]=\"
|
|
1288
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportButton]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
1260
1289
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], baseSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseSort", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], selectedRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowId", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], maxExportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExportRows", required: false }] }], refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }], rowDetailTemplate: [{
|
|
1261
1290
|
type: ContentChild,
|
|
1262
1291
|
args: [TemplateRef]
|
|
@@ -1843,5 +1872,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1843
1872
|
* Generated bundle index. Do not edit.
|
|
1844
1873
|
*/
|
|
1845
1874
|
|
|
1846
|
-
export { BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridHeaderComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DataGridRowDropEvent, DateGridColumnComponent, Density, GRID_OWNED_COLUMNS, GridConfiguration, GridExportService, GridStateRestorationService, OdataGridComponent, OdataListingService, PREFERENCE_SERVICE_TOKEN, Preference, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TimeSpanDataGridColumnComponent, TranslationGridColumnComponent, buildExportMatrix, emptyQueryParams, fromQueryParams, paramsEqual, provideCaucaGrid, provideGridStateRestoration, toQueryParams };
|
|
1875
|
+
export { ALL_EXPORT_FORMATS, BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridHeaderComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DataGridRowDropEvent, DateGridColumnComponent, Density, GRID_OWNED_COLUMNS, GridConfiguration, GridExportService, GridStateRestorationService, OdataGridComponent, OdataListingService, PREFERENCE_SERVICE_TOKEN, Preference, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TimeSpanDataGridColumnComponent, TranslationGridColumnComponent, buildExportMatrix, emptyQueryParams, fromQueryParams, paramsEqual, provideCaucaGrid, provideGridStateRestoration, toQueryParams };
|
|
1847
1876
|
//# sourceMappingURL=cauca-911-datagrid.mjs.map
|