@cauca-911/datagrid 22.1.4 → 22.1.5

package/fesm2022/cauca-911-datagrid.mjs

@@ -688,7 +688,7 @@ class DataGridComponent extends BaseDataGridComponent {
         }, 0);
     }
     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 }); }
-    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    <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}table ::ng-deep th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
+    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    <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
                 // Material Table structure:
                 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: 
                 // Drag and Drop:
@@ -720,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         DataGridProgressSpinerComponent,
                         IconButtonComponent,
                         StatusMessageComponent
-                    ], 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    <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}table ::ng-deep th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], 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    <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"] }]
         }], 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: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -1088,7 +1088,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    [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}table ::ng-deep th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\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 } }, 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    [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
@@ -1113,7 +1113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         IconButtonComponent,
                         DataGridProgressSpinerComponent,
                         StatusMessageComponent,
-                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\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}table ::ng-deep th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}table ::ng-deep th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\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: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -1207,7 +1207,7 @@ class ColorDataGridColumnComponent extends BaseGridColumnComponent {
         this.grid = grid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColorDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ColorDataGridColumnComponent, isStandalone: true, selector: "cauca-color-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ColorDataGridColumnComponent, isStandalone: true, selector: "cauca-color-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColorDataGridColumnComponent, decorators: [{
             type: Component,
@@ -1216,7 +1216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         MatHeaderCell, MatHeaderCellDef, NgStyle,
                         MatCell, MatCellDef,
                         MatFooterCellDef, MatFooterCellDef
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1277,11 +1277,11 @@ class DataGridCheckColumnComponent extends BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "uncheckIcon" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DataGridCheckColumnComponent, isStandalone: true, selector: "cauca-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\"  [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DataGridCheckColumnComponent, isStandalone: true, selector: "cauca-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\"  [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCheckColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\"  [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"] }]
+            args: [{ selector: 'cauca-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\"  [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1315,11 +1315,11 @@ class DataGridColumnComponent extends BaseGridColumnComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridColumnComponent, isStandalone: true, selector: "cauca-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n      @else { <span>{{ row[prop()] }}</span>}\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridColumnComponent, isStandalone: true, selector: "cauca-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n      @else { <span>{{ row[prop()] }}</span>}\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n      @else { <span>{{ row[prop()] }}</span>}\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'cauca-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n      @else { <span>{{ row[prop()] }}</span>}\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1342,11 +1342,11 @@ class DataGridCommandIconColumnComponent extends BaseGridColumnComponent {
         this.commandClick = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-command-icon-column", inputs: { checkColor: { classPropertyName: "checkColor", publicName: "checkColor", isSignal: true, isRequired: false, transformFunction: null }, checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckColor: { classPropertyName: "uncheckColor", publicName: "uncheckColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandClick: "commandClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <div>\r\n            @if (label()) {\r\n                {{ label() }}\r\n            } @else {\r\n                <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n            }\r\n        </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <div>\r\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n        </div>\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-command-icon-column", inputs: { checkColor: { classPropertyName: "checkColor", publicName: "checkColor", isSignal: true, isRequired: false, transformFunction: null }, checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckColor: { classPropertyName: "uncheckColor", publicName: "uncheckColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandClick: "commandClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <div>\r\n            @if (label()) {\r\n                {{ label() }}\r\n            } @else {\r\n                <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n            }\r\n        </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <div>\r\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n        </div>\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandIconColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-command-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatSortHeader, MatHeaderCellDef, MatIcon, MatCell, MatCellDef, IconButtonComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <div>\r\n            @if (label()) {\r\n                {{ label() }}\r\n            } @else {\r\n                <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n            }\r\n        </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <div>\r\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n        </div>\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"] }]
+            args: [{ selector: 'cauca-data-grid-command-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatSortHeader, MatHeaderCellDef, MatIcon, MatCell, MatCellDef, IconButtonComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <div>\r\n            @if (label()) {\r\n                {{ label() }}\r\n            } @else {\r\n                <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n            }\r\n        </div>\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        <div>\r\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n        </div>\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1371,11 +1371,11 @@ class DataGridCommandsColumnComponent extends BaseGridColumnComponent {
         this.duplicateClick = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandsColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandsColumnComponent, isStandalone: true, selector: "cauca-data-grid-commands-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"buttons\">\r\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n  <td mat-cell *matCellDef=\"let row\">\r\n\r\n      <div class=\"align-commands\">\r\n\r\n        @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n        @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n        @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n      </div>\r\n\r\n  </td>\r\n  <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"], dependencies: [{ 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: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandsColumnComponent, isStandalone: true, selector: "cauca-data-grid-commands-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"buttons\">\r\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n  <td mat-cell *matCellDef=\"let row\">\r\n\r\n      <div class=\"align-commands\">\r\n\r\n        @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n        @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n        @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n      </div>\r\n\r\n  </td>\r\n  <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"], dependencies: [{ 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: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandsColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-commands-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconButtonComponent, NgTemplateOutlet, MatFooterCell, MatFooterCellDef, NgStyle, RouterLink], template: "<ng-container matColumnDef=\"buttons\">\r\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n  <td mat-cell *matCellDef=\"let row\">\r\n\r\n      <div class=\"align-commands\">\r\n\r\n        @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n        @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n        @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n      </div>\r\n\r\n  </td>\r\n  <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'cauca-data-grid-commands-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconButtonComponent, NgTemplateOutlet, MatFooterCell, MatFooterCellDef, NgStyle, RouterLink], template: "<ng-container matColumnDef=\"buttons\">\r\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n  <td mat-cell *matCellDef=\"let row\">\r\n\r\n      <div class=\"align-commands\">\r\n\r\n        @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n        @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n        @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n      </div>\r\n\r\n  </td>\r\n  <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1398,11 +1398,11 @@ class DataGridIconColumnComponent extends BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-icon-column", inputs: { alignRight: { classPropertyName: "alignRight", publicName: "alignRight", isSignal: true, isRequired: false, transformFunction: null }, useMatIcon: { classPropertyName: "useMatIcon", publicName: "useMatIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n    <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n        @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n        @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"], dependencies: [{ 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: IconComponent, selector: "cauca-icon", inputs: ["icon"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-icon-column", inputs: { alignRight: { classPropertyName: "alignRight", publicName: "alignRight", isSignal: true, isRequired: false, transformFunction: null }, useMatIcon: { classPropertyName: "useMatIcon", publicName: "useMatIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n    <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n        @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n        @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"], dependencies: [{ 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: IconComponent, selector: "cauca-icon", inputs: ["icon"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridIconColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconComponent, MatFooterCell, MatFooterCellDef, NgClass, MatIcon], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n    <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n        @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n        @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"] }]
+            args: [{ selector: 'cauca-data-grid-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconComponent, MatFooterCell, MatFooterCellDef, NgClass, MatIcon], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n    <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n        @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n        @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1443,7 +1443,7 @@ class DataGridMenuColumnComponent extends BaseGridColumnComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridMenuColumnComponent, isStandalone: true, selector: "cauca-data-grid-menu-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canDeleteByRow: { classPropertyName: "canDeleteByRow", publicName: "canDeleteByRow", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, canDuplicateByRow: { classPropertyName: "canDuplicateByRow", publicName: "canDuplicateByRow", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null }, duplicateLinkField: { classPropertyName: "duplicateLinkField", publicName: "duplicateLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canDelete: "canDeleteChange", canDuplicate: "canDuplicateChange", deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ 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: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridMenuColumnComponent, isStandalone: true, selector: "cauca-data-grid-menu-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canDeleteByRow: { classPropertyName: "canDeleteByRow", publicName: "canDeleteByRow", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, canDuplicateByRow: { classPropertyName: "canDuplicateByRow", publicName: "canDuplicateByRow", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null }, duplicateLinkField: { classPropertyName: "duplicateLinkField", publicName: "duplicateLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canDelete: "canDeleteChange", canDuplicate: "canDuplicateChange", deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ 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: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, decorators: [{
             type: Component,
@@ -1460,7 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         MatFooterCell,
                         MatFooterCellDef,
                         RouterLink
-                    ], template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"] }]
+                    ], template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1532,7 +1532,7 @@ class DateGridColumnComponent extends BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateGridColumnComponent, isStandalone: true, selector: "cauca-date-grid-column", inputs: { showWithTime: { classPropertyName: "showWithTime", publicName: "showWithTime", isSignal: true, isRequired: false, transformFunction: null }, showSecond: { classPropertyName: "showSecond", publicName: "showSecond", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: TimeLabelComponent, selector: "cauca-time-label", inputs: ["date", "minLimit", "maxLimit", "showTime", "showSecond"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateGridColumnComponent, isStandalone: true, selector: "cauca-date-grid-column", inputs: { showWithTime: { classPropertyName: "showWithTime", publicName: "showWithTime", isSignal: true, isRequired: false, transformFunction: null }, showSecond: { classPropertyName: "showSecond", publicName: "showSecond", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: TimeLabelComponent, selector: "cauca-time-label", inputs: ["date", "minLimit", "maxLimit", "showTime", "showSecond"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateGridColumnComponent, decorators: [{
             type: Component,
@@ -1542,7 +1542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         MatCell, MatCellDef,
                         TimeLabelComponent,
                         MatFooterCell, MatFooterCellDef,
-                    ], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1562,11 +1562,11 @@ class SortableDataGridCheckColumnComponent extends BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "sortProp" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: SortableDataGridCheckColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: SortableDataGridCheckColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridCheckColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-sortable-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatTooltip, MatCell, MatCellDef, CheckIconComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
+            args: [{ selector: 'cauca-sortable-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatTooltip, MatCell, MatCellDef, CheckIconComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n        <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1626,7 +1626,7 @@ class SortableDataGridColumnComponent extends BaseGridColumnComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SortableDataGridColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\"  [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n</ng-container>\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnLabelComponent, selector: "cauca-column-label", inputs: ["value", "format", "showToolTip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SortableDataGridColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\"  [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n</ng-container>\r\n", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"], dependencies: [{ 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: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnLabelComponent, selector: "cauca-column-label", inputs: ["value", "format", "showToolTip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridColumnComponent, decorators: [{
             type: Component,
@@ -1636,7 +1636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         MatCell, MatCellDef,
                         MatTooltip, ColumnLabelComponent,
                         MatFooterCell, MatFooterCellDef,
-                    ], template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\"  [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n</ng-container>\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"] }]
+                    ], template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n    <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\"  [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef>\r\n      @if (isInitialized) {\r\n        {{calculateSummary()}}\r\n      }\r\n    </td>\r\n</ng-container>\r\n", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1652,11 +1652,11 @@ class TranslationGridColumnComponent extends BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TranslationGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n        @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n        @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TranslationGridColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslatePipe, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n        @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslatePipe, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n        @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1670,11 +1670,11 @@ class TimeSpanDataGridColumnComponent extends BaseGridColumnComponent {
         this.grid = grid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSpanDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TimeSpanDataGridColumnComponent, isStandalone: true, selector: "cauca-time-span-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n          <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n            {{ formattedValue }}\r\n          </span>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: [""], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: Iso8601TimeSpanPipe, name: "Iso8601TimeSpan" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TimeSpanDataGridColumnComponent, isStandalone: true, selector: "cauca-time-span-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n          <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n            {{ formattedValue }}\r\n          </span>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: Iso8601TimeSpanPipe, name: "Iso8601TimeSpan" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSpanDataGridColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-time-span-data-grid-column', imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCellDef, Iso8601TimeSpanPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n          <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n            {{ formattedValue }}\r\n          </span>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>" }]
+            args: [{ selector: 'cauca-time-span-data-grid-column', imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCellDef, Iso8601TimeSpanPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n          <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n            {{ formattedValue }}\r\n          </span>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{