@cauca-911/datagrid 21.0.10 → 21.3.1

package/fesm2022/cauca-911-datagrid.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { ViewChild, HostBinding, Input, Optional, ViewEncapsulation, Component, EventEmitter, input, Output, Injectable, InjectionToken, signal, ContentChild, ContentChildren, Inject, ChangeDetectionStrategy, QueryList, inject, output, TemplateRef, forwardRef, computed, model } from '@angular/core';
+import { ViewChild, HostBinding, Input, Optional, ViewEncapsulation, Component, EventEmitter, input, Output, Injectable, InjectionToken, signal, ContentChild, ContentChildren, Inject, ChangeDetectionStrategy, QueryList, inject, output, TemplateRef, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef, computed, model } from '@angular/core';
 import * as i1 from '@angular/material/table';
 import { MatColumnDef, MatCellDef, MatHeaderCellDef, MatFooterCellDef, MatTable, MatHeaderRowDef, MatFooterRowDef, MatNoDataRow, MatRowDef, MatTableDataSource, MatHeaderCell, MatFooterCell, MatRow, MatHeaderRow, MatFooterRow, MatCell } from '@angular/material/table';
 import { CDK_DRAG_CONFIG, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i1$3 from '@cauca-911/core';
+import * as i1$2 from '@cauca-911/core';
 import { toLowerCaseAndWithoutDiacritics, CaucaCoreService } from '@cauca-911/core';
 import { MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
 import * as i3 from '@angular/forms';
@@ -14,9 +14,9 @@ import { MatIcon } from '@angular/material/icon';
 import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { IconButtonComponent, RaisedButtonComponent, BasicButtonComponent, StrokedButtonComponent, MenuItemComponent, StatusMessageComponent, IconComponent, Iso8601TimeSpanPipe } from '@cauca-911/material';
-import * as i1$2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged } from 'rxjs';
+import * as i1$3 from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged, filter } from 'rxjs';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1$4 from '@angular/material/card';
@@ -28,10 +28,11 @@ import { MatMenuModule } from '@angular/material/menu';
 import { NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
 import { ODataDataSource } from 'odata-data-source';
 import * as i1$6 from '@angular/common/http';
 import { MatTooltip } from '@angular/material/tooltip';
-import { RouterLink } from '@angular/router';
 import dayjs from 'dayjs';
 
 class DataGridRowDropEvent {
@@ -144,11 +145,11 @@ class DataGridHeaderComponent {
         this.addButtonClick.emit(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: false, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: false, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-header', imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslateModule, MatIcon], template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
+            args: [{ selector: 'cauca-data-grid-header', imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon], template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
         }], propDecorators: { showAddButton: [{
                 type: Input
             }], showRefreshButton: [{
@@ -210,7 +211,7 @@ class MatPaginatorLocalizationService extends MatPaginatorIntl {
             this.changes.next();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MatPaginatorLocalizationService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MatPaginatorLocalizationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MatPaginatorLocalizationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MatPaginatorLocalizationService, decorators: [{
@@ -218,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 class PreferenceService {
     constructor() {
@@ -391,13 +392,13 @@ class BaseDataGridComponent {
         }
         return columns;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: false, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseDataGridComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PREFERENCE_SERVICE_TOKEN]
                 }] }], propDecorators: { resourceName: [{
@@ -538,11 +539,11 @@ class DataGridTableOptionsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridTableOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: "gridName", showColumnViewer: "showColumnViewer", allColumns: "allColumns" }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: "gridName", showColumnViewer: "showColumnViewer", allColumns: "allColumns" }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-table-options', imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslateModule, MenuItemComponent], template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
+            args: [{ selector: 'cauca-data-grid-table-options', imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
         }], propDecorators: { gridName: [{
                 type: Input,
                 args: [{ required: true }]
@@ -702,16 +703,14 @@ class DataGridComponent extends BaseDataGridComponent {
             }, 0);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", 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()) {\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton\" [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content\n      select=\"[customFilter]\"\n      ngProjectAs=\"[customFilter]\">\n    </ng-content>\n  </cauca-data-grid-table-options>\n}\n\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n\n  @if (showExpandButton()) {\n    <ng-container matColumnDef=\"expand\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"align-commands\">\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n        </div>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  @if (allowReordering) {\n    <ng-container matColumnDef=\"position\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  <ng-content></ng-content>\n\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\n\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n        <div class=\"grid-element-detail\">\n          @if (row === expandedElement()) {\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n          }\n        </div>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n  @if (showFooter()) {\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\n  }\n\n  @if (!isLoading) {\n    <tr class=\"mat-row\" *matNoDataRow>\n      @if (!showLoadingError && !isLoading) {\n        <td class=\"mat-cell data-grid-message\"\n          [attr.colspan]=\"allDisplayedColumns().length\">\n          <cauca-status-message type=\"noData\" />\n        </td>\n      }\n      @if (showLoadingError) {\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\n          <cauca-status-message type=\"error\" />\n        </td>\n      }\n    </tr>\n  }\n\n</table>\n\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading\" />\n\n@if (showPaginator()) {\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\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:
                 CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: 
                 // Material extras:
-                MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: 
-                // ngx-translate:
-                TranslateModule }, { kind: "component", type: 
+                MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: 
                 // Custom Components:
                 DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -731,8 +730,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         CdkDropList, CdkDrag, CdkDragHandle,
                         // Material extras:
                         MatIcon, MatPaginator,
-                        // ngx-translate:
-                        TranslateModule,
                         // Custom Components:
                         DataGridHeaderComponent,
                         DataGridTableOptionsComponent,
@@ -740,7 +737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         IconButtonComponent,
                         StatusMessageComponent
                     ], template: "@if (showHeader()) {\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton\" [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content\n      select=\"[customFilter]\"\n      ngProjectAs=\"[customFilter]\">\n    </ng-content>\n  </cauca-data-grid-table-options>\n}\n\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n\n  @if (showExpandButton()) {\n    <ng-container matColumnDef=\"expand\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"align-commands\">\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n        </div>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  @if (allowReordering) {\n    <ng-container matColumnDef=\"position\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  <ng-content></ng-content>\n\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\n\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n        <div class=\"grid-element-detail\">\n          @if (row === expandedElement()) {\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n          }\n        </div>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n  @if (showFooter()) {\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\n  }\n\n  @if (!isLoading) {\n    <tr class=\"mat-row\" *matNoDataRow>\n      @if (!showLoadingError && !isLoading) {\n        <td class=\"mat-cell data-grid-message\"\n          [attr.colspan]=\"allDisplayedColumns().length\">\n          <cauca-status-message type=\"noData\" />\n        </td>\n      }\n      @if (showLoadingError) {\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\n          <cauca-status-message type=\"error\" />\n        </td>\n      }\n    </tr>\n  }\n\n</table>\n\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading\" />\n\n@if (showPaginator()) {\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\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$2.TranslateService }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{
                 type: Input
             }], showLoadingError: [{
                 type: Input
@@ -825,21 +822,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$6.HttpClient }] });
 
+const PARAM_BASE_NAMES = {
+    filter: 'filter',
+    sort: 'sort',
+    direction: 'dir',
+    pageIndex: 'page',
+    pageSize: 'size',
+};
+/**
+ * Builds the query param name for a given base name and optional grid state key.
+ * With a key, the scheme is `<key><CapitalizedBaseName>` (e.g. key "alerts" + base "filter" -> "alertsFilter").
+ * Without a key, the plain base name is used (e.g. "filter").
+ */
+function paramName(baseName, key) {
+    if (!key) {
+        return baseName;
+    }
+    return `${key}${baseName.charAt(0).toUpperCase()}${baseName.slice(1)}`;
+}
+function toQueryParams(state, key = '') {
+    const params = {};
+    if (state.filter) {
+        params[paramName(PARAM_BASE_NAMES.filter, key)] = state.filter;
+    }
+    if (state.sort) {
+        params[paramName(PARAM_BASE_NAMES.sort, key)] = state.sort;
+    }
+    if (state.direction) {
+        params[paramName(PARAM_BASE_NAMES.direction, key)] = state.direction;
+    }
+    if (state.pageIndex) {
+        params[paramName(PARAM_BASE_NAMES.pageIndex, key)] = state.pageIndex;
+    }
+    if (state.pageSize) {
+        params[paramName(PARAM_BASE_NAMES.pageSize, key)] = state.pageSize;
+    }
+    return params;
+}
+function fromQueryParams(map, key = '') {
+    const state = {};
+    const filter = map.get(paramName(PARAM_BASE_NAMES.filter, key));
+    if (filter) {
+        state.filter = filter;
+    }
+    const sort = map.get(paramName(PARAM_BASE_NAMES.sort, key));
+    if (sort) {
+        state.sort = sort;
+    }
+    const direction = map.get(paramName(PARAM_BASE_NAMES.direction, key));
+    if (direction === 'asc' || direction === 'desc') {
+        state.direction = direction;
+    }
+    const pageIndex = parsePositiveInteger(map.get(paramName(PARAM_BASE_NAMES.pageIndex, key)));
+    if (pageIndex !== undefined) {
+        state.pageIndex = pageIndex;
+    }
+    const pageSize = parsePositiveInteger(map.get(paramName(PARAM_BASE_NAMES.pageSize, key)));
+    if (pageSize !== undefined) {
+        state.pageSize = pageSize;
+    }
+    return state;
+}
+/**
+ * Returns a Params object with every grid-state param name mapped to `null` for the given key.
+ * Combined with `queryParamsHandling: 'merge'`, this lets the grid explicitly clear stale
+ * params (e.g. a previously-set filter) instead of leaving them stuck in the URL.
+ */
+function emptyQueryParams(key = '') {
+    const params = {};
+    Object.values(PARAM_BASE_NAMES).forEach((baseName) => {
+        params[paramName(baseName, key)] = null;
+    });
+    return params;
+}
+function paramsEqual(a, b) {
+    const aKeys = Object.keys(a).filter((paramKey) => a[paramKey] !== null && a[paramKey] !== undefined);
+    const bKeys = Object.keys(b).filter((paramKey) => b[paramKey] !== null && b[paramKey] !== undefined);
+    if (aKeys.length !== bKeys.length) {
+        return false;
+    }
+    return aKeys.every((paramKey) => String(a[paramKey]) === String(b[paramKey]));
+}
+function parsePositiveInteger(value) {
+    if (!value) {
+        return undefined;
+    }
+    const parsed = Number(value);
+    if (Number.isNaN(parsed) || parsed < 0) {
+        return undefined;
+    }
+    return parsed;
+}
+
 class OdataGridComponent extends BaseDataGridComponent {
     constructor(translateService, listing) {
         super(translateService, inject(PREFERENCE_SERVICE_TOKEN));
         this.listing = listing;
         this.showTableHeader = input(true, ...(ngDevMode ? [{ debugName: "showTableHeader" }] : []));
+        /** Master switch: when true, the grid's filter/sort/page are synced with the URL query params and restored when returning from a detail page. Off by default. */
+        this.persistState = input(false, ...(ngDevMode ? [{ debugName: "persistState" }] : []));
+        /** Optional prefix for the persisted query params, so two independent grids on the same route don't collide (e.g. "alerts" -> "alertsFilter"). */
+        this.stateKey = input('', ...(ngDevMode ? [{ debugName: "stateKey" }] : []));
         this.showHeader = true;
         this.idField = 'id';
         this.itemClick = new EventEmitter();
         this.refreshRequested = new EventEmitter();
         this.showRefreshButton = false;
         this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
+        this.router = inject(Router, { optional: true });
+        this.route = inject(ActivatedRoute, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.lastWrittenParams = {};
     }
     ngOnDestroy() {
         this.listing.destroy();
     }
+    ngAfterViewInit() {
+        if (!this.canPersistState() || !this.header) {
+            return;
+        }
+        if (this.pendingRestoredFilter !== undefined) {
+            this.header.filterControl.setValue(this.pendingRestoredFilter, { emitEvent: false });
+            this.header.showClearButton = !!this.pendingRestoredFilter;
+        }
+        this.header.filterChange
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.writeCurrentUrlState());
+    }
     refreshData() {
         this.listing.refresh();
         this.refreshRequested.emit();
@@ -860,18 +969,25 @@ class OdataGridComponent extends BaseDataGridComponent {
     }
     refreshFilter() {
         if (this.filterPredicate) {
-            this.listing.updateFilters(this.filterPredicate(toLowerCaseAndWithoutDiacritics(this.header.filterControl?.value)));
+            this.listing.updateFilters(this.filterPredicate(toLowerCaseAndWithoutDiacritics(this.header?.filterControl?.value)));
         }
     }
     setUpFilterPredicate() {
+        let filters = this.filterPredicate?.('') ?? [];
+        if (this.canPersistState()) {
+            filters = this.restoreStateBeforeInitialLoad() ?? filters;
+        }
         this.listing.initialize({
             baseUrl: this.baseUrl,
             resourceName: this.resourceName,
             paginator: this.paginator,
             sort: this.sort,
             initialSort: this.baseSort,
-            filters: this.filterPredicate?.('') ?? [],
+            filters,
         });
+        if (this.canPersistState()) {
+            this.setUpUrlStatePersistence();
+        }
     }
     setUpSort(sort) {
         this.sort = sort;
@@ -904,14 +1020,93 @@ class OdataGridComponent extends BaseDataGridComponent {
         }
         this.allDisplayedColumns.set([...columns]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: false, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: false, 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, usesOnChanges: true, ngImport: i0, template: "@if (showHeader) {\n  <cauca-data-grid-header\n    [disableAddButton]=\"disableAddButton()\"\n    [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n    [showAddButton]=\"showAddButton\"\n    [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n  </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n    @if (showExpandButton()) {\n      <ng-container matColumnDef=\"expand\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"align-commands\">\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <ng-content></ng-content>\n    @if(showTableHeader()) {\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n    }\n\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n      [class.showClick]=\"itemClick.observers.length > 0\"\n      [class.compact]=\"preference.gridDensity === density.Compact\"\n      [class.standard]=\"preference.gridDensity === density.Standard\"\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n      [class.selected]=\"selectedRowId === row[idField]\"\n      (click)=\"itemClick.emit(row)\"\n      onkeypress=\"itemClick.emit(row)\">\n    </tr>\n\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n          <div class=\"grid-element-detail\">\n            @if (row === expandedElement()) {\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n            }\n          </div>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n    <ng-container *matNoDataRow>\n      @if(listing.loading() === false) {\n        <ng-container>\n          <tr class=\"mat-row\">\n            @if (listing.error() === false) {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"noData\" />\n              </th>\n            } @else {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"error\" />\n              </th>\n            }\n          </tr>\n        </ng-container>\n      }\n    </ng-container>\n  </table>\n\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\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: 
+    canPersistState() {
+        return this.persistState() && !!this.router && !!this.route;
+    }
+    restoreStateBeforeInitialLoad() {
+        this.defaultPageSize = this.paginator?.pageSize;
+        const restoredState = fromQueryParams(this.route.snapshot.queryParamMap, this.stateKey());
+        this.applySortAndPage(restoredState);
+        this.pendingRestoredFilter = restoredState.filter;
+        if (restoredState.filter === undefined || !this.filterPredicate) {
+            return undefined;
+        }
+        return this.filterPredicate(toLowerCaseAndWithoutDiacritics(restoredState.filter));
+    }
+    setUpUrlStatePersistence() {
+        this.lastWrittenParams = toQueryParams(fromQueryParams(this.route.snapshot.queryParamMap, this.stateKey()), this.stateKey());
+        this.sort?.sortChange
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.writeCurrentUrlState());
+        this.paginator?.page
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.writeCurrentUrlState());
+        this.route.queryParamMap
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((paramMap) => this.reactToExternalUrlStateChange(paramMap));
+    }
+    applySortAndPage(state) {
+        if (state.sort && this.sort) {
+            this.sort.active = state.sort;
+            this.sort.direction = state.direction ?? '';
+        }
+        if (this.paginator) {
+            if (state.pageIndex !== undefined) {
+                this.paginator.pageIndex = state.pageIndex;
+            }
+            if (state.pageSize !== undefined) {
+                this.paginator.pageSize = state.pageSize;
+            }
+        }
+    }
+    currentUrlState() {
+        const pageSize = this.paginator?.pageSize;
+        return {
+            filter: this.header?.filterControl.value || undefined,
+            sort: this.sort?.active || undefined,
+            direction: this.sort?.direction || undefined,
+            pageIndex: this.paginator?.pageIndex,
+            pageSize: pageSize !== undefined && pageSize !== this.defaultPageSize ? pageSize : undefined,
+        };
+    }
+    writeCurrentUrlState() {
+        const params = toQueryParams(this.currentUrlState(), this.stateKey());
+        if (paramsEqual(params, this.lastWrittenParams)) {
+            return;
+        }
+        this.lastWrittenParams = params;
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: { ...emptyQueryParams(this.stateKey()), ...params },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
+    reactToExternalUrlStateChange(paramMap) {
+        const state = fromQueryParams(paramMap, this.stateKey());
+        const params = toQueryParams(state, this.stateKey());
+        if (paramsEqual(params, this.lastWrittenParams)) {
+            return;
+        }
+        this.lastWrittenParams = params;
+        this.applySortAndPage(state);
+        if (this.header) {
+            this.header.filterControl.setValue(state.filter ?? '', { emitEvent: false });
+            this.header.showClearButton = !!state.filter;
+        }
+        if (this.filterPredicate) {
+            this.refreshFilter();
+        }
+        else {
+            this.listing.forceReloadFilter();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: "21.2.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: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: false, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: false, 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, usesOnChanges: true, ngImport: i0, template: "@if (showHeader) {\n  <cauca-data-grid-header\n    [disableAddButton]=\"disableAddButton()\"\n    [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n    [showAddButton]=\"showAddButton\"\n    [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n  </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n    @if (showExpandButton()) {\n      <ng-container matColumnDef=\"expand\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"align-commands\">\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <ng-content></ng-content>\n    @if(showTableHeader()) {\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n    }\n\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n      [class.showClick]=\"itemClick.observers.length > 0\"\n      [class.compact]=\"preference.gridDensity === density.Compact\"\n      [class.standard]=\"preference.gridDensity === density.Standard\"\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n      [class.selected]=\"selectedRowId === row[idField]\"\n      (click)=\"itemClick.emit(row)\"\n      onkeypress=\"itemClick.emit(row)\">\n    </tr>\n\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n          <div class=\"grid-element-detail\">\n            @if (row === expandedElement()) {\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n            }\n          </div>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n    <ng-container *matNoDataRow>\n      @if(listing.loading() === false) {\n        <ng-container>\n          <tr class=\"mat-row\">\n            @if (listing.error() === false) {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"noData\" />\n              </th>\n            } @else {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"error\" />\n              </th>\n            }\n          </tr>\n        </ng-container>\n      }\n    </ng-container>\n  </table>\n\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\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
-                MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: 
-                // ngx-translate
-                TranslateModule }, { kind: "component", type: 
+                MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: 
                 // custom components
                 DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -926,8 +1121,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         MatRow, MatRowDef, MatNoDataRow,
                         // Material extras
                         MatPaginator,
-                        // ngx-translate
-                        TranslateModule,
                         // custom components
                         DataGridHeaderComponent,
                         DataGridTableOptionsComponent,
@@ -935,7 +1128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         DataGridProgressSpinerComponent,
                         StatusMessageComponent,
                     ], template: "@if (showHeader) {\n  <cauca-data-grid-header\n    [disableAddButton]=\"disableAddButton()\"\n    [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n    [showAddButton]=\"showAddButton\"\n    [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n  </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n    @if (showExpandButton()) {\n      <ng-container matColumnDef=\"expand\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"align-commands\">\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <ng-content></ng-content>\n    @if(showTableHeader()) {\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n    }\n\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n      [class.showClick]=\"itemClick.observers.length > 0\"\n      [class.compact]=\"preference.gridDensity === density.Compact\"\n      [class.standard]=\"preference.gridDensity === density.Standard\"\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n      [class.selected]=\"selectedRowId === row[idField]\"\n      (click)=\"itemClick.emit(row)\"\n      onkeypress=\"itemClick.emit(row)\">\n    </tr>\n\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n          <div class=\"grid-element-detail\">\n            @if (row === expandedElement()) {\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n            }\n          </div>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n    <ng-container *matNoDataRow>\n      @if(listing.loading() === false) {\n        <ng-container>\n          <tr class=\"mat-row\">\n            @if (listing.error() === false) {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"noData\" />\n              </th>\n            } @else {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <cauca-status-message type=\"error\" />\n              </th>\n            }\n          </tr>\n        </ng-container>\n      }\n    </ng-container>\n  </table>\n\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\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$2.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], baseSort: [{
+        }], 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: Input
             }], filterPredicate: [{
                 type: Input
@@ -959,6 +1152,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 args: [MatPaginator, { static: true }]
             }] } });
 
+/**
+ * Re-injects a list page's remembered grid query params (filter/sort/page, written by
+ * `OdataGridComponent` when `persistState` is enabled) when the user navigates back to that
+ * list page from one of its own descendant (detail) routes. Any other way of reaching the
+ * list page (menu, bookmark, direct link, refresh) leaves it clean, because the previous URL
+ * won't be a descendant of the list path.
+ */
+class GridStateRestorationService {
+    constructor() {
+        this.router = inject(Router);
+        this.rememberedParamsByPath = new Map();
+        this.previousPath = null;
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe((event) => this.onNavigationEnd(event));
+    }
+    onNavigationEnd(event) {
+        const currentPath = this.pathOnly(event.urlAfterRedirects);
+        const currentParams = this.parseParams(event.urlAfterRedirects);
+        const previousPath = this.previousPath;
+        this.previousPath = currentPath;
+        if (Object.keys(currentParams).length > 0) {
+            this.rememberedParamsByPath.set(currentPath, currentParams);
+            return;
+        }
+        if (this.restoreIfReturningFromDescendant(currentPath, previousPath)) {
+            return;
+        }
+        this.rememberedParamsByPath.delete(currentPath);
+    }
+    restoreIfReturningFromDescendant(currentPath, previousPath) {
+        if (!previousPath || !previousPath.startsWith(`${currentPath}/`)) {
+            return false;
+        }
+        const remembered = this.rememberedParamsByPath.get(currentPath);
+        if (!remembered) {
+            return false;
+        }
+        this.router.navigate([currentPath], { queryParams: remembered, replaceUrl: true });
+        return true;
+    }
+    pathOnly(url) {
+        return url.split('?')[0].split('#')[0];
+    }
+    parseParams(url) {
+        const queryString = url.split('?')[1]?.split('#')[0];
+        if (!queryString) {
+            return {};
+        }
+        const params = {};
+        new URLSearchParams(queryString).forEach((value, key) => {
+            params[key] = value;
+        });
+        return params;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GridStateRestorationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GridStateRestorationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GridStateRestorationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Activates the grid list-state restoration feature for the whole application. Add this once
+ * in the app's root providers; it has no effect on pages whose grids don't opt in via
+ * `[persistState]="true"`.
+ */
+function provideGridStateRestoration() {
+    return makeEnvironmentProviders([
+        provideAppInitializer(() => {
+            inject(GridStateRestorationService);
+        }),
+    ]);
+}
+
 class ColorDataGridColumnComponent extends BaseGridColumnComponent {
     constructor(odata, grid) {
         super((grid ?? odata)?.table);
@@ -1398,11 +1669,11 @@ class TranslationGridColumnComponent extends BaseGridColumnComponent {
         this.prefix = "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: "21.2.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: "prefix" }, 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: "ngmodule", type: TranslateModule }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: "prefix" }, 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.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TranslationGridColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslateModule, 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.Default, 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"] }]
         }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
                     type: Optional
                 }] }, { type: DataGridComponent, decorators: [{
@@ -1437,5 +1708,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridHeaderComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DataGridRowDropEvent, DateGridColumnComponent, Density, GridConfiguration, OdataGridComponent, OdataListingService, PREFERENCE_SERVICE_TOKEN, Preference, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TimeSpanDataGridColumnComponent, TranslationGridColumnComponent, provideCaucaGrid };
+export { BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridHeaderComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DataGridRowDropEvent, DateGridColumnComponent, Density, GridConfiguration, GridStateRestorationService, OdataGridComponent, OdataListingService, PREFERENCE_SERVICE_TOKEN, Preference, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TimeSpanDataGridColumnComponent, TranslationGridColumnComponent, emptyQueryParams, fromQueryParams, paramsEqual, provideCaucaGrid, provideGridStateRestoration, toQueryParams };
 //# sourceMappingURL=cauca-911-datagrid.mjs.map