@cauca-911/datagrid 22.1.5 → 22.2.1

package/fesm2022/cauca-911-datagrid.mjs

@@ -1,31 +1,31 @@
 import * as i0 from '@angular/core';
-import { input, ViewChild, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, output, Injectable, InjectionToken, linkedSignal, ContentChild, ContentChildren, Inject, QueryList, inject, effect, TemplateRef, EventEmitter, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef, computed, model } from '@angular/core';
+import { input, ViewChild, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, output, signal, Injectable, InjectionToken, inject, LOCALE_ID, linkedSignal, ContentChild, ContentChildren, Inject, QueryList, effect, TemplateRef, EventEmitter, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef, 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$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';
+import * as i3$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 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 { IconButtonComponent, MenuItemComponent, RaisedButtonComponent, BasicButtonComponent, StrokedButtonComponent, StatusMessageComponent, IconComponent, Iso8601TimeSpanPipe } from '@cauca-911/material';
 import * as i1$3 from '@ngx-translate/core';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged, filter } from 'rxjs';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { formatDate, NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1$4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/menu';
-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 { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -56,6 +56,8 @@ class BaseGridColumnComponent {
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         this.showToolTip = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showToolTip" }] : /* istanbul ignore next */ []));
+        this.exportable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "exportable" }] : /* istanbul ignore next */ []));
         this.selected = true;
     }
     ngOnInit() {
@@ -76,8 +78,14 @@ class BaseGridColumnComponent {
     capitalize(value) {
         return value.charAt(0).toUpperCase() + value.slice(1);
     }
+    getExportValue(row) {
+        return row?.[this.prop()] ?? null;
+    }
+    getExportHeader() {
+        return this.label() ?? this.capitalize(this.prop());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, deps: [{ token: i1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isInColumnChooser: { classPropertyName: "isInColumnChooser", publicName: "isInColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isInColumnChooser: { classPropertyName: "isInColumnChooser", publicName: "isInColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, decorators: [{
             type: Component,
@@ -87,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.MatTable, decorators: [{
                     type: Optional
-                }] }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isInColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInColumnChooser", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }], ariaHidden: [{
+                }] }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isInColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInColumnChooser", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], ariaHidden: [{
                 type: HostBinding,
                 args: ['attr.ariaHidden']
             }], classes: [{
@@ -107,6 +115,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: [MatFooterCellDef, { static: true }]
             }] } });
 
+class DataGridExportButtonComponent {
+    constructor() {
+        this.exportRequest = output();
+    }
+    onExport(format) {
+        this.exportRequest.emit(format);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DataGridExportButtonComponent, isStandalone: true, selector: "cauca-data-grid-export-button", outputs: { exportRequest: "exportRequest" }, ngImport: i0, template: "<cauca-icon-button icon=\"download\" colorOnHover=\"var(--primary)\" [matMenuTriggerFor]=\"exportMenu\"\r\n                   [ariaLabel]=\"'dataGrid.export.title' | translate\" />\r\n\r\n<mat-menu #exportMenu=\"matMenu\">\r\n    <cauca-menu-item icon=\"table_view\" label=\"dataGrid.export.excel\" [translateLabel]=\"true\"\r\n                     (buttonClick)=\"onExport('excel')\" class=\"export-excel-button\" />\r\n    <cauca-menu-item icon=\"picture_as_pdf\" label=\"dataGrid.export.pdf\" [translateLabel]=\"true\"\r\n                     (buttonClick)=\"onExport('pdf')\" class=\"export-pdf-button\" />\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridExportButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, MenuItemComponent, MatMenuModule, TranslatePipe], template: "<cauca-icon-button icon=\"download\" colorOnHover=\"var(--primary)\" [matMenuTriggerFor]=\"exportMenu\"\r\n                   [ariaLabel]=\"'dataGrid.export.title' | translate\" />\r\n\r\n<mat-menu #exportMenu=\"matMenu\">\r\n    <cauca-menu-item icon=\"table_view\" label=\"dataGrid.export.excel\" [translateLabel]=\"true\"\r\n                     (buttonClick)=\"onExport('excel')\" class=\"export-excel-button\" />\r\n    <cauca-menu-item icon=\"picture_as_pdf\" label=\"dataGrid.export.pdf\" [translateLabel]=\"true\"\r\n                     (buttonClick)=\"onExport('pdf')\" class=\"export-pdf-button\" />\r\n</mat-menu>\r\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
+        }], propDecorators: { exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
+
 class DataGridHeaderComponent {
     constructor() {
         this.filterControl = new FormControl('');
@@ -119,6 +142,8 @@ class DataGridHeaderComponent {
         ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
         this.showRefreshButton = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
+        this.showExportButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
         this.addButtonLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
         this.searchPlaceholder = input('', /* @ts-ignore */
@@ -128,6 +153,7 @@ class DataGridHeaderComponent {
         this.filterChange = output();
         this.addButtonClick = output();
         this.refreshRequest = output();
+        this.exportRequest = output();
         this._onDestroy = new Subject();
     }
     ngOnInit() {
@@ -152,12 +178,12 @@ class DataGridHeaderComponent {
         this.addButtonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n    @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n    <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  </mat-form-field>\r\n\r\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n  @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n  @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest", exportRequest: "exportRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n    @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n    <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  </mat-form-field>\r\n\r\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n  @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n  @if (showExportButton()) { <cauca-data-grid-export-button (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n  @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridExportButtonComponent, selector: "cauca-data-grid-export-button", outputs: ["exportRequest"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon], template: "<div class=\"grid-header\">\r\n\r\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n    @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n    <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  </mat-form-field>\r\n\r\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n  @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n  @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
-        }], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }] } });
+            args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon, DataGridExportButtonComponent], template: "<div class=\"grid-header\">\r\n\r\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n    @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n    <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  </mat-form-field>\r\n\r\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n  @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n  @if (showExportButton()) { <cauca-data-grid-export-button (exportRequest)=\"exportRequest.emit($event)\" class=\"grid-export-button\" /> }\r\n\r\n  @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
+        }], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }] } });
 
 var Density;
 (function (Density) {
@@ -281,6 +307,81 @@ function provideCaucaGrid(options) {
     ];
 }
 
+const GRID_OWNED_COLUMNS = ['', 'position', 'buttons', 'menu', 'expand'];
+function buildExportMatrix(columnOrder, columns, rows) {
+    const exportedColumns = columnOrder
+        .filter(name => !GRID_OWNED_COLUMNS.includes(name))
+        .map(name => columns.find(column => column.columnDef?.name === name))
+        .filter(column => !!column && column.exportable());
+    return {
+        headers: exportedColumns.map(column => column.getExportHeader()),
+        rows: (rows ?? []).map(row => exportedColumns.map(column => column.getExportValue(row))),
+    };
+}
+
+const XLSX_MIME = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+const DATE_MASK = 'dd/MM/yyyy HH:mm';
+const EXCEL_DATE_FORMAT = 'dd/mm/yyyy hh:mm';
+const COLUMN_WIDTH = 24;
+class GridExportService {
+    constructor() {
+        this.locale = inject(LOCALE_ID);
+    }
+    async toExcel(matrix, fileName) {
+        const { Workbook } = await import('exceljs');
+        const workbook = new Workbook();
+        const worksheet = workbook.addWorksheet(fileName.slice(0, 31));
+        worksheet.addRow(matrix.headers).font = { bold: true };
+        matrix.rows.forEach(row => worksheet.addRow(row));
+        (worksheet.columns ?? []).forEach((column, index) => {
+            column.width = COLUMN_WIDTH;
+            if (matrix.rows.some(row => row[index] instanceof Date)) {
+                column.numFmt = EXCEL_DATE_FORMAT;
+            }
+        });
+        if (matrix.headers.length > 0) {
+            worksheet.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: matrix.headers.length } };
+        }
+        const buffer = await workbook.xlsx.writeBuffer();
+        this.download(new Blob([buffer], { type: XLSX_MIME }), `${fileName}.xlsx`);
+    }
+    async toPdf(matrix, fileName) {
+        const { jsPDF } = await import('jspdf');
+        const { default: autoTable } = await import('jspdf-autotable');
+        const document = new jsPDF({ orientation: 'landscape' });
+        autoTable(document, {
+            head: [matrix.headers],
+            body: matrix.rows.map(row => row.map(cell => this.stringify(cell))),
+            styles: { fontSize: 8, overflow: 'linebreak' },
+            headStyles: { fontStyle: 'bold' },
+        });
+        document.save(`${fileName}.pdf`);
+    }
+    stringify(cell) {
+        if (cell === null || cell === undefined) {
+            return '';
+        }
+        if (cell instanceof Date) {
+            return formatDate(cell, DATE_MASK, this.locale);
+        }
+        return String(cell);
+    }
+    download(blob, fileName) {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridExportService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridExportService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class BaseDataGridComponent {
     get density() {
         return Density;
@@ -311,6 +412,12 @@ class BaseDataGridComponent {
         ...(ngDevMode ? [{ debugName: "hidePageSize" }] : /* istanbul ignore next */ []));
         this.showExpandButton = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showExpandButton" }] : /* istanbul ignore next */ []));
+        this.allowExport = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowExport" }] : /* istanbul ignore next */ []));
+        this.exportFileName = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "exportFileName" }] : /* istanbul ignore next */ []));
+        this.exportRows = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "exportRows" }] : /* istanbul ignore next */ []));
         this.addButtonClick = output();
         this.expandedElement = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expandedElement" }] : /* istanbul ignore next */ []));
@@ -323,6 +430,7 @@ class BaseDataGridComponent {
         this.allDisplayedColumns = linkedSignal(() => this.computeDisplayedColumns(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allDisplayedColumns" }] : /* istanbul ignore next */ []));
         this.sort = null;
+        this.exportService = inject(GridExportService);
         this.defaultAddButtonLabel = translateService.instant('dataGrid.defaultAddButtonLabel');
     }
     ngAfterContentInit() {
@@ -359,6 +467,15 @@ class BaseDataGridComponent {
     onDensityChanged(density) {
         this.preferenceService.setPreferenceDensity(density);
     }
+    async onExportRequest(format) {
+        const provider = this.exportRows();
+        const rows = provider ? await provider() : this.getExportSourceRows();
+        const matrix = buildExportMatrix(this.allDisplayedColumns(), this.regularColumns?.toArray() ?? [], rows);
+        const fileName = this.exportFileName() || this.resourceName();
+        await (format === 'excel'
+            ? this.exportService.toExcel(matrix, fileName)
+            : this.exportService.toPdf(matrix, fileName));
+    }
     /** The set of columns to render, before the user's own column selection is applied. */
     computeDisplayedColumns() {
         return [...this.displayedColumns()];
@@ -381,30 +498,10 @@ class BaseDataGridComponent {
         });
     }
     removeMandatoryColumns(columns) {
-        let index = columns.indexOf("");
-        if (index > -1) {
-            columns.splice(index, 1);
-        }
-        index = columns.indexOf("position");
-        if (index > -1) {
-            columns.splice(index, 1);
-        }
-        index = columns.indexOf("buttons");
-        if (index > -1) {
-            columns.splice(index, 1);
-        }
-        index = columns.indexOf("menu");
-        if (index > -1) {
-            columns.splice(index, 1);
-        }
-        index = columns.indexOf("expand");
-        if (index > -1) {
-            columns.splice(index, 1);
-        }
-        return columns;
+        return columns.filter(column => !GRID_OWNED_COLUMNS.includes(column));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, exportFileName: { classPropertyName: "exportFileName", publicName: "exportFileName", isSignal: true, isRequired: false, transformFunction: null }, exportRows: { classPropertyName: "exportRows", publicName: "exportRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, decorators: [{
             type: Component,
@@ -413,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PREFERENCE_SERVICE_TOKEN]
-                }] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
+                }] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], exportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFileName", required: false }] }], exportRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportRows", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
                 type: ViewChild,
                 args: [DataGridHeaderComponent]
             }], table: [{
@@ -542,7 +639,7 @@ class DataGridTableOptionsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n  <div class=\"table-options\">\r\n    @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div class=\"columns\">\r\n            @for (column of columns; track column) {\r\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n                (change)=\"onColumnsChanged()\">\r\n                {{column.label()}}\r\n              </mat-checkbox>\r\n            }\r\n          </div>\r\n        </mat-card-content>\r\n        <mat-card-actions>\r\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n        </mat-card-actions>\r\n      </mat-card>\r\n    </cauca-button-popover> }\r\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n  </div>\r\n\r\n  <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n  <div class=\"table-options\">\r\n    @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div class=\"columns\">\r\n            @for (column of columns; track column) {\r\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n                (change)=\"onColumnsChanged()\">\r\n                {{column.label()}}\r\n              </mat-checkbox>\r\n            }\r\n          </div>\r\n        </mat-card-content>\r\n        <mat-card-actions>\r\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n        </mat-card-actions>\r\n      </mat-card>\r\n    </cauca-button-popover> }\r\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n  </div>\r\n\r\n  <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
             type: Component,
@@ -638,6 +735,9 @@ class DataGridComponent extends BaseDataGridComponent {
             }));
         }
     }
+    getExportSourceRows() {
+        return this.getFilteredData();
+    }
     setUpPaginator(paginator, showPaginator) {
         this.dataSource.paginator = paginator && showPaginator ? paginator : null;
     }
@@ -688,7 +788,7 @@ class DataGridComponent extends BaseDataGridComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content\r\n      select=\"[customFilter]\"\r\n      ngProjectAs=\"[customFilter]\">\r\n    </ng-content>\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n  @if (showExpandButton()) {\r\n    <ng-container matColumnDef=\"expand\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n        <div class=\"align-commands\">\r\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n        </div>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  @if (allowReordering()) {\r\n    <ng-container matColumnDef=\"position\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n        <div class=\"grid-element-detail\">\r\n          @if (row === expandedElement()) {\r\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n          }\r\n        </div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n  @if (showFooter()) {\r\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n  }\r\n\r\n  @if (!isLoading()) {\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      @if (!showLoadingError() && !isLoading()) {\r\n        <td class=\"mat-cell data-grid-message\"\r\n          [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"noData\" />\r\n        </td>\r\n      }\r\n      @if (showLoadingError()) {\r\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"error\" />\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n    [showExportButton]=\"allowExport()\" (exportRequest)=\"onExportRequest($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content\r\n      select=\"[customFilter]\"\r\n      ngProjectAs=\"[customFilter]\">\r\n    </ng-content>\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n  @if (showExpandButton()) {\r\n    <ng-container matColumnDef=\"expand\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n        <div class=\"align-commands\">\r\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n        </div>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  @if (allowReordering()) {\r\n    <ng-container matColumnDef=\"position\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n        <div class=\"grid-element-detail\">\r\n          @if (row === expandedElement()) {\r\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n          }\r\n        </div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n  @if (showFooter()) {\r\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n  }\r\n\r\n  @if (!isLoading()) {\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      @if (!showLoadingError() && !isLoading()) {\r\n        <td class=\"mat-cell data-grid-message\"\r\n          [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"noData\" />\r\n        </td>\r\n      }\r\n      @if (showLoadingError()) {\r\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"error\" />\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
                 // 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:
@@ -696,7 +796,7 @@ class DataGridComponent extends BaseDataGridComponent {
                 // 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: "component", type: 
                 // Custom Components:
-                DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "searchPlaceholder", "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 }); }
+                DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -720,7 +820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         DataGridProgressSpinerComponent,
                         IconButtonComponent,
                         StatusMessageComponent
-                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content\r\n      select=\"[customFilter]\"\r\n      ngProjectAs=\"[customFilter]\">\r\n    </ng-content>\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n  @if (showExpandButton()) {\r\n    <ng-container matColumnDef=\"expand\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n        <div class=\"align-commands\">\r\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n        </div>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  @if (allowReordering()) {\r\n    <ng-container matColumnDef=\"position\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n        <div class=\"grid-element-detail\">\r\n          @if (row === expandedElement()) {\r\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n          }\r\n        </div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n  @if (showFooter()) {\r\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n  }\r\n\r\n  @if (!isLoading()) {\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      @if (!showLoadingError() && !isLoading()) {\r\n        <td class=\"mat-cell data-grid-message\"\r\n          [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"noData\" />\r\n        </td>\r\n      }\r\n      @if (showLoadingError()) {\r\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"error\" />\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
+                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\"\r\n    [showExportButton]=\"allowExport()\" (exportRequest)=\"onExportRequest($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content\r\n      select=\"[customFilter]\"\r\n      ngProjectAs=\"[customFilter]\">\r\n    </ng-content>\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n  @if (showExpandButton()) {\r\n    <ng-container matColumnDef=\"expand\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n        <div class=\"align-commands\">\r\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n        </div>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  @if (allowReordering()) {\r\n    <ng-container matColumnDef=\"position\">\r\n      <th mat-header-cell *matHeaderCellDef></th>\r\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n      </td>\r\n      <td mat-footer-cell *matFooterCellDef></td>\r\n    </ng-container>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n      <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n        <div class=\"grid-element-detail\">\r\n          @if (row === expandedElement()) {\r\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n          }\r\n        </div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n  @if (showFooter()) {\r\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n  }\r\n\r\n  @if (!isLoading()) {\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      @if (!showLoadingError() && !isLoading()) {\r\n        <td class=\"mat-cell data-grid-message\"\r\n          [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"noData\" />\r\n        </td>\r\n      }\r\n      @if (showLoadingError()) {\r\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n          <cauca-status-message type=\"error\" />\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showLoadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingError", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], allowReordering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReordering", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], refreshData: [{ type: i0.Output, args: ["refreshData"] }], rowDetailTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -949,19 +1049,10 @@ class OdataGridComponent extends BaseDataGridComponent {
         return this.listing.data;
     }
     applyFilter(filter) {
-        const filterPredicate = this.filterPredicate();
-        if (filterPredicate) {
-            if (this.paginator) {
-                this.paginator.firstPage();
-            }
-            this.listing.updateFilters(filterPredicate(toLowerCaseAndWithoutDiacritics(filter)));
-        }
+        this.applyFilterValue(filter, { resetPage: true });
     }
     refreshFilter() {
-        const filterPredicate = this.filterPredicate();
-        if (filterPredicate) {
-            this.listing.updateFilters(filterPredicate(toLowerCaseAndWithoutDiacritics(this.header?.filterControl?.value)));
-        }
+        this.applyFilterValue(this.header?.filterControl?.value, { resetPage: true });
     }
     setUpFilterPredicate() {
         let filters = this.filterPredicate()?.('') ?? [];
@@ -983,6 +1074,9 @@ class OdataGridComponent extends BaseDataGridComponent {
     setUpSort(sort) {
         this.sort = sort;
     }
+    getExportSourceRows() {
+        return this.getData() ?? [];
+    }
     forceReloadFilter() {
         this.listing.forceReloadFilter();
     }
@@ -992,6 +1086,16 @@ class OdataGridComponent extends BaseDataGridComponent {
     onColumnsChanged(columns) {
         super.onColumnsChanged(this.decorateColumns(columns));
     }
+    applyFilterValue(filter, { resetPage }) {
+        const filterPredicate = this.filterPredicate();
+        if (!filterPredicate) {
+            return;
+        }
+        if (resetPage) {
+            this.paginator?.firstPage();
+        }
+        this.listing.updateFilters(filterPredicate(toLowerCaseAndWithoutDiacritics(filter)));
+    }
     /** `expand` is a grid-owned column, not part of the caller's list. */
     decorateColumns(columns) {
         return this.showExpandButton() && !columns.includes('expand')
@@ -1078,7 +1182,7 @@ class OdataGridComponent extends BaseDataGridComponent {
             this.header.showClearButton.set(!!state.filter);
         }
         if (this.filterPredicate()) {
-            this.refreshFilter();
+            this.applyFilterValue(this.header?.filterControl?.value, { resetPage: false });
         }
         else {
             this.listing.forceReloadFilter();
@@ -1088,13 +1192,13 @@ class OdataGridComponent extends BaseDataGridComponent {
         return state.filter !== undefined || state.sort !== undefined || state.pageIndex !== undefined || state.pageSize !== undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n    [showAddButton]=\"showAddButton()\"\r\n    [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n    @if (showExpandButton()) {\r\n      <ng-container matColumnDef=\"expand\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <div class=\"align-commands\">\r\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n    @if(showTableHeader()) {\r\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n    }\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n      [class.showClick]=\"itemClick.observers.length > 0\"\r\n      [class.compact]=\"preference.gridDensity === density.Compact\"\r\n      [class.standard]=\"preference.gridDensity === density.Standard\"\r\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n      [class.selected]=\"selectedRowId() === row[idField()]\"\r\n      (click)=\"itemClick.emit(row)\"\r\n      onkeypress=\"itemClick.emit(row)\">\r\n    </tr>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n          <div class=\"grid-element-detail\">\r\n            @if (row === expandedElement()) {\r\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n            }\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n    <ng-container *matNoDataRow>\r\n      @if(listing.loading() === false) {\r\n        <ng-container>\r\n          <tr class=\"mat-row\">\r\n            @if (listing.error() === false) {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"noData\" />\r\n              </th>\r\n            } @else {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"error\" />\r\n              </th>\r\n            }\r\n          </tr>\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  </table>\r\n\r\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n    [showExportButton]=\"allowExport()\" (exportRequest)=\"onExportRequest($event)\"\r\n    [showAddButton]=\"showAddButton()\"\r\n    [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n    @if (showExpandButton()) {\r\n      <ng-container matColumnDef=\"expand\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <div class=\"align-commands\">\r\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n    @if(showTableHeader()) {\r\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n    }\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n      [class.showClick]=\"itemClick.observers.length > 0\"\r\n      [class.compact]=\"preference.gridDensity === density.Compact\"\r\n      [class.standard]=\"preference.gridDensity === density.Standard\"\r\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n      [class.selected]=\"selectedRowId() === row[idField()]\"\r\n      (click)=\"itemClick.emit(row)\"\r\n      onkeypress=\"itemClick.emit(row)\">\r\n    </tr>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n          <div class=\"grid-element-detail\">\r\n            @if (row === expandedElement()) {\r\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n            }\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n    <ng-container *matNoDataRow>\r\n      @if(listing.loading() === false) {\r\n        <ng-container>\r\n          <tr class=\"mat-row\">\r\n            @if (listing.error() === false) {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"noData\" />\r\n              </th>\r\n            } @else {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"error\" />\r\n              </th>\r\n            }\r\n          </tr>\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  </table>\r\n\r\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // Material table structure:
                 MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: 
                 // Material extras
                 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", "searchPlaceholder", "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 }); }
+                DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "showExportButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest", "exportRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, decorators: [{
             type: Component,
@@ -1113,7 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         IconButtonComponent,
                         DataGridProgressSpinerComponent,
                         StatusMessageComponent,
-                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n    [showAddButton]=\"showAddButton()\"\r\n    [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n    @if (showExpandButton()) {\r\n      <ng-container matColumnDef=\"expand\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <div class=\"align-commands\">\r\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n    @if(showTableHeader()) {\r\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n    }\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n      [class.showClick]=\"itemClick.observers.length > 0\"\r\n      [class.compact]=\"preference.gridDensity === density.Compact\"\r\n      [class.standard]=\"preference.gridDensity === density.Standard\"\r\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n      [class.selected]=\"selectedRowId() === row[idField()]\"\r\n      (click)=\"itemClick.emit(row)\"\r\n      onkeypress=\"itemClick.emit(row)\">\r\n    </tr>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n          <div class=\"grid-element-detail\">\r\n            @if (row === expandedElement()) {\r\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n            }\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n    <ng-container *matNoDataRow>\r\n      @if(listing.loading() === false) {\r\n        <ng-container>\r\n          <tr class=\"mat-row\">\r\n            @if (listing.error() === false) {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"noData\" />\r\n              </th>\r\n            } @else {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"error\" />\r\n              </th>\r\n            }\r\n          </tr>\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  </table>\r\n\r\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
+                    ], template: "@if (showHeader()) {\r\n  <cauca-data-grid-header\r\n    [disableAddButton]=\"disableAddButton()\"\r\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n    [showExportButton]=\"allowExport()\" (exportRequest)=\"onExportRequest($event)\"\r\n    [showAddButton]=\"showAddButton()\"\r\n    [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n    [searchPlaceholder]=\"searchPlaceholder()\"\r\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n  </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n  </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n    @if (showExpandButton()) {\r\n      <ng-container matColumnDef=\"expand\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <div class=\"align-commands\">\r\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n    @if(showTableHeader()) {\r\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n    }\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n      [class.showClick]=\"itemClick.observers.length > 0\"\r\n      [class.compact]=\"preference.gridDensity === density.Compact\"\r\n      [class.standard]=\"preference.gridDensity === density.Standard\"\r\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n      [class.selected]=\"selectedRowId() === row[idField()]\"\r\n      (click)=\"itemClick.emit(row)\"\r\n      onkeypress=\"itemClick.emit(row)\">\r\n    </tr>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n        <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n          <div class=\"grid-element-detail\">\r\n            @if (row === expandedElement()) {\r\n              <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n            }\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n    <ng-container *matNoDataRow>\r\n      @if(listing.loading() === false) {\r\n        <ng-container>\r\n          <tr class=\"mat-row\">\r\n            @if (listing.error() === false) {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"noData\" />\r\n              </th>\r\n            } @else {\r\n              <th class=\"mat-cell data-grid-message\"\r\n                [attr.colspan]=\"allDisplayedColumns().length\">\r\n                <cauca-status-message type=\"error\" />\r\n              </th>\r\n            }\r\n          </tr>\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  </table>\r\n\r\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], baseSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseSort", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], selectedRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowId", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }], rowDetailTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -1443,7 +1547,7 @@ class DataGridMenuColumnComponent extends BaseGridColumnComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridMenuColumnComponent, isStandalone: true, selector: "cauca-data-grid-menu-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canDeleteByRow: { classPropertyName: "canDeleteByRow", publicName: "canDeleteByRow", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, canDuplicateByRow: { classPropertyName: "canDuplicateByRow", publicName: "canDuplicateByRow", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null }, duplicateLinkField: { classPropertyName: "duplicateLinkField", publicName: "duplicateLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canDelete: "canDeleteChange", canDuplicate: "canDuplicateChange", deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridMenuColumnComponent, isStandalone: true, selector: "cauca-data-grid-menu-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canDeleteByRow: { classPropertyName: "canDeleteByRow", publicName: "canDeleteByRow", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, canDuplicateByRow: { classPropertyName: "canDuplicateByRow", publicName: "canDuplicateByRow", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null }, duplicateLinkField: { classPropertyName: "duplicateLinkField", publicName: "duplicateLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canDelete: "canDeleteChange", canDuplicate: "canDuplicateChange", deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"menu\">\r\n    <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n    <td mat-cell *matCellDef=\"let row\">\r\n    <div class=\"align-commands\">\r\n\r\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n            @if (canEdit()) {\r\n                <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n            }\r\n\r\n            @if (canDuplicate()) {\r\n                <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n            }\r\n\r\n            @if (canDelete()) {\r\n                <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n            }\r\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n        </mat-menu>\r\n\r\n        </div>\r\n\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, decorators: [{
             type: Component,
@@ -1470,6 +1574,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: [TemplateRef]
             }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], duplicateClick: [{ type: i0.Output, args: ["duplicateClick"] }] } });
 
+function resolveDisplayDate(date, minLimit, maxLimit) {
+    const upperBound = maxLimit ? dayjs(maxLimit).add(-1, 'second').toDate() : null;
+    if (!date) {
+        return upperBound;
+    }
+    const resolved = new Date(date);
+    if (minLimit) {
+        const lowerBound = new Date(minLimit);
+        return resolved < lowerBound ? lowerBound : resolved;
+    }
+    if (upperBound) {
+        return resolved > upperBound ? upperBound : resolved;
+    }
+    return resolved;
+}
+
 class TimeLabelComponent {
     constructor() {
         this.date = input.required(/* @ts-ignore */
@@ -1484,27 +1604,7 @@ class TimeLabelComponent {
         ...(ngDevMode ? [{ debugName: "showSecond" }] : /* istanbul ignore next */ []));
         this.dateMask = computed(() => this.showTime() ? `dd/MM/yyyy${this.timeFormat()}` : 'dd/MM/yyyy', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dateMask" }] : /* istanbul ignore next */ []));
-        this.displayDate = computed(() => {
-            if (!this.date() && this.maxLimit()) {
-                const maxLimit = dayjs(this.maxLimit()).add(-1, 'second').toDate();
-                return maxLimit;
-            }
-            if (!this.date()) {
-                return '';
-            }
-            const date = new Date(this.date());
-            if (this.minLimit()) {
-                const minLimit = new Date(this.minLimit());
-                return date < minLimit ? minLimit : date;
-            }
-            else if (this.maxLimit()) {
-                const maxLimit = dayjs(this.maxLimit()).add(-1, 'second').toDate();
-                return date > maxLimit ? maxLimit : date;
-            }
-            else {
-                return date;
-            }
-        }, /* @ts-ignore */
+        this.displayDate = computed(() => resolveDisplayDate(this.date(), this.minLimit(), this.maxLimit()) ?? '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayDate" }] : /* istanbul ignore next */ []));
         this.timeFormat = computed(() => this.showSecond() ? ' HH:mm:ss' : ' HH:mm', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
@@ -1531,6 +1631,9 @@ class DateGridColumnComponent extends BaseGridColumnComponent {
         this.minDate = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     }
+    getExportValue(row) {
+        return resolveDisplayDate(row?.[this.prop()], this.minDate(), this.maxDate());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateGridColumnComponent, isStandalone: true, selector: "cauca-date-grid-column", inputs: { showWithTime: { classPropertyName: "showWithTime", publicName: "showWithTime", isSignal: true, isRequired: false, transformFunction: null }, showSecond: { classPropertyName: "showSecond", publicName: "showSecond", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n      <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n    </td>\r\n\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}th.mat-mdc-header-cell .mat-sort-header-container{min-width:0}th.mat-mdc-header-cell .mat-sort-header-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: TimeLabelComponent, selector: "cauca-time-label", inputs: ["date", "minLimit", "maxLimit", "showTime", "showSecond"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1573,6 +1676,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     type: Optional
                 }] }], propDecorators: { checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], uncheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckIcon", required: false }] }], sortProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortProp", required: false }] }] } });
 
+function formatPhone(value) {
+    return value?.toString().replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3') ?? '';
+}
+
 class ColumnLabelComponent {
     constructor() {
         this.value = input(null, /* @ts-ignore */
@@ -1581,12 +1688,7 @@ class ColumnLabelComponent {
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
         this.showToolTip = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showToolTip" }] : /* istanbul ignore next */ []));
-        this.displayValue = computed(() => {
-            if (this.format() === 'phone') {
-                return this.value()?.toString().replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
-            }
-            return this.value();
-        }, /* @ts-ignore */
+        this.displayValue = computed(() => this.format() === 'phone' ? formatPhone(this.value()) : this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1613,6 +1715,10 @@ class SortableDataGridColumnComponent extends BaseGridColumnComponent {
         this.grid = grid ?? odata;
         this.isInitialized = true;
     }
+    getExportValue(row) {
+        const value = row?.[this.prop()] ?? null;
+        return this.format() === 'phone' ? formatPhone(value) : value;
+    }
     calculateSummary() {
         const rows = this.grid?.data?.();
         if (this.isInitialized && rows) {
@@ -1650,6 +1756,11 @@ class TranslationGridColumnComponent extends BaseGridColumnComponent {
         this.grid = grid;
         this.prefix = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.translateService = inject(TranslateService);
+    }
+    getExportValue(row) {
+        const value = row?.[this.prop()];
+        return value == null ? null : this.translateService.instant(`${this.prefix()}.${value}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TranslationGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n        @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1663,12 +1774,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     type: Optional
                 }] }], propDecorators: { prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }] } });
 
+const timeSpanFormatter = new Iso8601TimeSpanPipe();
 class TimeSpanDataGridColumnComponent extends BaseGridColumnComponent {
     constructor(odata, grid) {
         super((grid ?? odata)?.table);
         this.odata = odata;
         this.grid = grid;
     }
+    getExportValue(row) {
+        return timeSpanFormatter.transform(row?.[this.prop()]);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSpanDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TimeSpanDataGridColumnComponent, isStandalone: true, selector: "cauca-time-span-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n      {{ label() ?? capitalize(prop()) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n          <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n            {{ formattedValue }}\r\n          </span>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th.mat-mdc-header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: Iso8601TimeSpanPipe, name: "Iso8601TimeSpan" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1689,5 +1804,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridHeaderComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DataGridRowDropEvent, DateGridColumnComponent, Density, GRID_OWNED_COLUMNS, GridConfiguration, GridExportService, GridStateRestorationService, OdataGridComponent, OdataListingService, PREFERENCE_SERVICE_TOKEN, Preference, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TimeSpanDataGridColumnComponent, TranslationGridColumnComponent, buildExportMatrix, emptyQueryParams, fromQueryParams, paramsEqual, provideCaucaGrid, provideGridStateRestoration, toQueryParams };
 //# sourceMappingURL=cauca-911-datagrid.mjs.map