@cauca-911/datagrid 22.3.3 → 22.3.5
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.
|
@@ -1176,6 +1176,8 @@ var BaseDataGridComponent = class BaseDataGridComponent {
|
|
|
1176
1176
|
constructor(translateService, preferenceService) {
|
|
1177
1177
|
this.preferenceService = preferenceService;
|
|
1178
1178
|
this.resourceName = input.required(...ngDevMode ? [{ debugName: "resourceName" }] : /* istanbul ignore next */ []);
|
|
1179
|
+
this.preferenceKey = input(...ngDevMode ? [void 0, { debugName: "preferenceKey" }] : /* istanbul ignore next */ []);
|
|
1180
|
+
this.gridPreferenceKey = computed(() => this.preferenceKey() || this.resourceName(), ...ngDevMode ? [{ debugName: "gridPreferenceKey" }] : /* istanbul ignore next */ []);
|
|
1179
1181
|
this.displayedColumns = input([], ...ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []);
|
|
1180
1182
|
this.showAddButton = input(false, ...ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []);
|
|
1181
1183
|
this.disableAddButton = input(false, ...ngDevMode ? [{ debugName: "disableAddButton" }] : /* istanbul ignore next */ []);
|
|
@@ -1241,7 +1243,7 @@ var BaseDataGridComponent = class BaseDataGridComponent {
|
|
|
1241
1243
|
this.allDisplayedColumns.set([...columns]);
|
|
1242
1244
|
if (!persist) return;
|
|
1243
1245
|
const columnsToSave = this.removeMandatoryColumns([...columns]);
|
|
1244
|
-
this.preferenceService.addOrUpdateGridPreference(this.
|
|
1246
|
+
this.preferenceService.addOrUpdateGridPreference(this.gridPreferenceKey(), columnsToSave).subscribe();
|
|
1245
1247
|
}
|
|
1246
1248
|
applyColumns() {
|
|
1247
1249
|
this.regularColumns.forEach((dynColumn) => this.table.addColumnDef(dynColumn.columnDef));
|
|
@@ -1284,6 +1286,13 @@ var BaseDataGridComponent = class BaseDataGridComponent {
|
|
|
1284
1286
|
isRequired: true,
|
|
1285
1287
|
transformFunction: null
|
|
1286
1288
|
},
|
|
1289
|
+
preferenceKey: {
|
|
1290
|
+
classPropertyName: "preferenceKey",
|
|
1291
|
+
publicName: "preferenceKey",
|
|
1292
|
+
isSignal: true,
|
|
1293
|
+
isRequired: false,
|
|
1294
|
+
transformFunction: null
|
|
1295
|
+
},
|
|
1287
1296
|
displayedColumns: {
|
|
1288
1297
|
classPropertyName: "displayedColumns",
|
|
1289
1298
|
publicName: "displayedColumns",
|
|
@@ -1493,6 +1502,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1493
1502
|
required: true
|
|
1494
1503
|
}]
|
|
1495
1504
|
}],
|
|
1505
|
+
preferenceKey: [{
|
|
1506
|
+
type: i0.Input,
|
|
1507
|
+
args: [{
|
|
1508
|
+
isSignal: true,
|
|
1509
|
+
alias: "preferenceKey",
|
|
1510
|
+
required: false
|
|
1511
|
+
}]
|
|
1512
|
+
}],
|
|
1496
1513
|
displayedColumns: [{
|
|
1497
1514
|
type: i0.Input,
|
|
1498
1515
|
args: [{
|
|
@@ -2463,7 +2480,7 @@ var DataGridComponent = class DataGridComponent extends BaseDataGridComponent {
|
|
|
2463
2480
|
}],
|
|
2464
2481
|
usesInheritance: true,
|
|
2465
2482
|
ngImport: i0,
|
|
2466
|
-
template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"
|
|
2483
|
+
template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"gridPreferenceKey()\" (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}",
|
|
2467
2484
|
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"],
|
|
2468
2485
|
dependencies: [
|
|
2469
2486
|
{
|
|
@@ -2756,7 +2773,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2756
2773
|
IconButtonComponent,
|
|
2757
2774
|
StatusMessageComponent
|
|
2758
2775
|
],
|
|
2759
|
-
template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"
|
|
2776
|
+
template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\" [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"gridPreferenceKey()\" (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}",
|
|
2760
2777
|
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"]
|
|
2761
2778
|
}]
|
|
2762
2779
|
}],
|
|
@@ -3314,7 +3331,7 @@ var OdataGridComponent = class OdataGridComponent extends BaseDataGridComponent
|
|
|
3314
3331
|
}],
|
|
3315
3332
|
usesInheritance: true,
|
|
3316
3333
|
ngImport: i0,
|
|
3317
|
-
template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\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]=\"
|
|
3334
|
+
template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\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]=\"gridPreferenceKey()\" (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",
|
|
3318
3335
|
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"],
|
|
3319
3336
|
dependencies: [
|
|
3320
3337
|
{
|
|
@@ -3496,7 +3513,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3496
3513
|
DataGridProgressSpinerComponent,
|
|
3497
3514
|
StatusMessageComponent
|
|
3498
3515
|
],
|
|
3499
|
-
template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\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]=\"
|
|
3516
|
+
template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showExportMenu]=\"canExport()\" [exportFormats]=\"exportFormats()\" (exportRequest)=\"onExportRequest($event)\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n [showSearchBar]=\"showSearchBar()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n <ng-content select=\"[exportItem]\" ngProjectAs=\"[exportItem]\" />\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]=\"gridPreferenceKey()\" (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",
|
|
3500
3517
|
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"]
|
|
3501
3518
|
}]
|
|
3502
3519
|
}],
|