@cauca-911/datagrid 22.2.1 → 22.2.2

package/fesm2022/cauca-911-datagrid.mjs

@@ -16,7 +16,7 @@ import { MatInputModule } from '@angular/material/input';
 import { IconButtonComponent, MenuItemComponent, RaisedButtonComponent, BasicButtonComponent, StrokedButtonComponent, StatusMessageComponent, IconComponent, Iso8601TimeSpanPipe } from '@cauca-911/material';
 import * as i1$3 from '@ngx-translate/core';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged, filter } from 'rxjs';
+import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged, map, firstValueFrom, filter } from 'rxjs';
 import * as i3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { formatDate, NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
@@ -469,7 +469,7 @@ class BaseDataGridComponent {
     }
     async onExportRequest(format) {
         const provider = this.exportRows();
-        const rows = provider ? await provider() : this.getExportSourceRows();
+        const rows = await (provider ? provider() : this.getExportSourceRows());
         const matrix = buildExportMatrix(this.allDisplayedColumns(), this.regularColumns?.toArray() ?? [], rows);
         const fileName = this.exportFileName() || this.resourceName();
         await (format === 'excel'
@@ -826,6 +826,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: [TemplateRef]
             }] } });
 
+class ExportableODataDataSource extends ODataDataSource {
+    fetchAll(sortedBy, filters, rowCount) {
+        const livePaginator = this.paginator;
+        this.paginator = { pageIndex: 0, pageSize: rowCount, length: rowCount, page: new EventEmitter() };
+        try {
+            return this.getData(0, sortedBy, filters);
+        }
+        finally {
+            this.paginator = livePaginator;
+        }
+    }
+}
 class OdataListingService {
     get data() {
         return this.dataSource?.data ?? null;
@@ -841,7 +853,7 @@ class OdataListingService {
         this.loadingSubscription = null;
     }
     initialize({ baseUrl, resourceName, paginator, sort, initialSort, filters }) {
-        const newDataSource = new ODataDataSource(this.httpClient, `${baseUrl}odata/${resourceName}`);
+        const newDataSource = new ExportableODataDataSource(this.httpClient, `${baseUrl}odata/${resourceName}`);
         newDataSource.filters = filters;
         if (initialSort) {
             newDataSource.initialSort = initialSort;
@@ -863,6 +875,17 @@ class OdataListingService {
         });
         return newDataSource;
     }
+    fetchAllForExport(maxRows) {
+        const dataSource = this.dataSource;
+        if (!dataSource) {
+            return of([]);
+        }
+        const total = dataSource.paginator?.length ?? 0;
+        const rowCount = total > 0 ? Math.min(total, maxRows) : maxRows;
+        return dataSource
+            .fetchAll(this.sortedBy(), dataSource.filters ?? [], rowCount)
+            .pipe(map(result => (dataSource.mapResult(result) ?? [])));
+    }
     updateFilters(filters) {
         if (this.dataSource) {
             this.dataSource.filters = filters;
@@ -884,6 +907,20 @@ class OdataListingService {
         this.errorSubscription?.unsubscribe();
         this.loadingSubscription?.unsubscribe();
     }
+    /** Mirrors how ODataDataSource reads the active sort, single or multi. */
+    sortedBy() {
+        const sort = this.dataSource?.sort;
+        if (!sort) {
+            return [];
+        }
+        if ('multiSortChange' in sort) {
+            return sort.sortedBy ?? [];
+        }
+        if (sort.active && sort.direction) {
+            return [{ id: sort.active, direction: sort.direction }];
+        }
+        return [];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataListingService, deps: [{ token: i1$6.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataListingService, providedIn: 'root' }); }
 }
@@ -1010,6 +1047,8 @@ class OdataGridComponent extends BaseDataGridComponent {
         ...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
         this.showRefreshButton = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
+        this.maxExportRows = input(5000, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxExportRows" }] : /* istanbul ignore next */ []));
         this.itemClick = new EventEmitter();
         this.refreshRequested = output();
         this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
@@ -1075,7 +1114,7 @@ class OdataGridComponent extends BaseDataGridComponent {
         this.sort = sort;
     }
     getExportSourceRows() {
-        return this.getData() ?? [];
+        return firstValueFrom(this.listing.fetchAllForExport(this.maxExportRows()));
     }
     forceReloadFilter() {
         this.listing.forceReloadFilter();
@@ -1192,7 +1231,7 @@ class OdataGridComponent extends BaseDataGridComponent {
         return state.filter !== undefined || state.sort !== undefined || state.pageIndex !== undefined || state.pageSize !== undefined;
     }
     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 }); }
-    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 } }, 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]=\"allowExport()\" (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: 
+    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]=\"allowExport()\" (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: 
                 // Material table structure:
                 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: 
                 // Material extras
@@ -1218,7 +1257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         DataGridProgressSpinerComponent,
                         StatusMessageComponent,
                     ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n    [showExportButton]=\"allowExport()\" (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"] }]
-        }], 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 }] }], refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }], rowDetailTemplate: [{
+        }], 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: [{
                 type: ContentChild,
                 args: [TemplateRef]
             }], paginator: [{