@cauca-911/datagrid 20.0.0

package/fesm2022/cauca-911-datagrid.mjs

@@ -0,0 +1,1333 @@
+import * as i0 from '@angular/core';
+import { ViewChild, HostBinding, Input, Optional, ViewEncapsulation, Component, EventEmitter, Output, Injectable, input, signal, ContentChild, ContentChildren, ChangeDetectionStrategy, QueryList, output, effect, TemplateRef, inject, 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 { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i1$5 from '@cauca-911/core';
+import { toLowerCaseAndWithoutDiacritics, CaucaCoreService } from '@cauca-911/core';
+import * as i4$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i3 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 * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { IconButtonComponent, RaisedButtonComponent, BasicButtonComponent, StrokedButtonComponent, MenuItemComponent, IconComponent } from '@cauca-911/material';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, debounceTime, takeUntil, BehaviorSubject, of, distinctUntilChanged } from 'rxjs';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i2$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
+import * as i1$3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ODataDataSource } from 'odata-data-source';
+import * as i1$4 from '@angular/common/http';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import dayjs from 'dayjs';
+
+class DataGridRowDropEvent {
+    constructor(data) {
+        Object.assign(this, data);
+    }
+}
+
+class BaseGridColumnComponent {
+    constructor(table) {
+        this.table = table;
+        this.prop = '';
+        this.showLabel = true;
+        this.isInColumnChooser = true;
+        this.width = "";
+        this.showToolTip = false;
+        this.selected = true;
+    }
+    ngOnInit() {
+        if (this.columnDef) {
+            if (!this.columnDef.name) {
+                this.columnDef.name = this.prop;
+            }
+            this.columnDef.cell = this.cellDef;
+            this.columnDef.headerCell = this.headerCellDef;
+            this.columnDef.footerCell = this.footerCellDef;
+        }
+    }
+    ngOnDestroy() {
+        if (this.table) {
+            this.table.removeColumnDef(this.columnDef);
+        }
+    }
+    capitalize(value) {
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseGridColumnComponent, deps: [{ token: i1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: "prop", showLabel: "showLabel", label: "label", isInColumnChooser: "isInColumnChooser", width: "width", showToolTip: "showToolTip" }, 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, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ template: '',
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: i1.MatTable, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { prop: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isInColumnChooser: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], showToolTip: [{
+                type: Input
+            }], ariaHidden: [{
+                type: HostBinding,
+                args: ['attr.ariaHidden']
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], columnDef: [{
+                type: ViewChild,
+                args: [MatColumnDef, { static: true }]
+            }], cellDef: [{
+                type: ViewChild,
+                args: [MatCellDef, { static: true }]
+            }], headerCellDef: [{
+                type: ViewChild,
+                args: [MatHeaderCellDef, { static: true }]
+            }], footerCellDef: [{
+                type: ViewChild,
+                args: [MatFooterCellDef, { static: true }]
+            }] } });
+
+class DataGridHeaderComponent {
+    constructor() {
+        this.filterControl = new FormControl('');
+        this.showAddButton = false;
+        this.showRefreshButton = false;
+        this.addButtonLabel = '';
+        this.filterChange = new EventEmitter();
+        this.addButtonClick = new EventEmitter();
+        this.refreshRequest = new EventEmitter();
+        this._onDestroy = new Subject();
+    }
+    ngOnInit() {
+        this.filterControl.valueChanges
+            .pipe(debounceTime(500), takeUntil(this._onDestroy))
+            .subscribe((filter) => {
+            this.filterChange.emit(filter);
+            this.showClearButton = !!filter;
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    onRefresh() {
+        this.refreshRequest.emit();
+    }
+    clearSearchValue() {
+        this.filterControl.setValue('');
+    }
+    onAddButtonClick() {
+        this.addButtonClick.emit(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: "showAddButton", showRefreshButton: "showRefreshButton", addButtonLabel: "addButtonLabel" }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;align-content:normal;padding:0 16px}@media (max-width: 500px){.grid-header{flex-wrap:wrap;justify-content:flex-end}}.grid-search-box{display:block;flex-grow:1;flex-basis:auto;align-self:auto}.grid-new-button{display:block;flex-shrink:0;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-header', imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslateModule], template: "<div class=\"grid-header\">\n\n  <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n    @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n    <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n    <input matInput [formControl]=\"filterControl\">\n    <mat-icon matSuffix>search</mat-icon>\n  </mat-form-field>\n\n  <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n  @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n  @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;align-content:normal;padding:0 16px}@media (max-width: 500px){.grid-header{flex-wrap:wrap;justify-content:flex-end}}.grid-search-box{display:block;flex-grow:1;flex-basis:auto;align-self:auto}.grid-new-button{display:block;flex-shrink:0;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
+        }], propDecorators: { showAddButton: [{
+                type: Input
+            }], showRefreshButton: [{
+                type: Input
+            }], addButtonLabel: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], addButtonClick: [{
+                type: Output
+            }], refreshRequest: [{
+                type: Output
+            }] } });
+
+var Density;
+(function (Density) {
+    Density["Compact"] = "compact";
+    Density["Standard"] = "standard";
+    Density["Comfortable"] = "comfortable";
+})(Density || (Density = {}));
+
+class Preference {
+}
+class GridConfiguration {
+}
+
+class PreferenceService {
+    constructor() {
+        this.preference = new BehaviorSubject(new Preference());
+        this.gridConfiguration = [];
+        const data = localStorage.getItem('GridPreference');
+        const configuration = localStorage.getItem('GridConfiguration');
+        if (data) {
+            this.preference.next(JSON.parse(data));
+        }
+        if (configuration) {
+            this.gridConfiguration = JSON.parse(configuration);
+        }
+    }
+    getPreference() {
+        return this.preference.value;
+    }
+    setPreferenceDensity(density) {
+        const preference = this.getPreference();
+        if (density === preference.gridDensity)
+            return;
+        preference.gridDensity = density;
+        this.preference.next(preference);
+        this.addOrUpdatePreference();
+    }
+    addOrUpdatePreference() {
+        localStorage.setItem('GridPreference', JSON.stringify(this.getPreference()));
+    }
+    getPreferenceForGrid(gridName) {
+        return of(this.getPreferenceForGridNotObservable(gridName));
+    }
+    addOrUpdateGridPreference(gridName, visibleColumns) {
+        const configuration = this.getPreferenceForGridNotObservable(gridName);
+        configuration.visibleColumns = visibleColumns || [];
+        localStorage.setItem('GridConfiguration', JSON.stringify(this.gridConfiguration));
+        return of();
+    }
+    getPreferenceForGridNotObservable(gridName) {
+        const configuration = this.gridConfiguration.find(g => g.name == gridName);
+        if (configuration) {
+            return configuration;
+        }
+        const newConfiguration = new GridConfiguration();
+        newConfiguration.name = gridName;
+        this.gridConfiguration.push(newConfiguration);
+        return newConfiguration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PreferenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class BaseDataGridComponent {
+    get density() {
+        return Density;
+    }
+    constructor(translateService, preferenceService) {
+        this.preferenceService = preferenceService;
+        this.displayedColumns = [];
+        this.showAddButton = false;
+        this.addButtonLabel = '';
+        this.showTableOptions = false;
+        this.showColumnViewer = true;
+        this.addButtonClick = new EventEmitter();
+        this.showPaginator = input(false, ...(ngDevMode ? [{ debugName: "showPaginator" }] : []));
+        this.hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : []));
+        this.showExpandButton = input(false, ...(ngDevMode ? [{ debugName: "showExpandButton" }] : []));
+        this.expandedElement = signal(null, ...(ngDevMode ? [{ debugName: "expandedElement" }] : []));
+        this.defaultAddButtonLabel = '';
+        this.allDisplayedColumns = signal([], ...(ngDevMode ? [{ debugName: "allDisplayedColumns" }] : []));
+        this.sort = null;
+        this.defaultAddButtonLabel = translateService.instant('add');
+    }
+    ngAfterContentInit() {
+        this.setUpPaginator(this.paginator, this.showPaginator());
+        this.setUpFilterPredicate();
+        if (this.table && this.regularColumns && this.rowDefs && this.columnDefs) {
+            this.applyColumns();
+        }
+        if (this.showTableOptions) {
+            this.preferenceService.preference.subscribe((preference) => {
+                this.preference = preference;
+            });
+        }
+        else {
+            this.showColumnsWhenTableOptionsIsFalse();
+            this.preference = new Preference();
+        }
+    }
+    ngOnChanges(changes) {
+        this.updateDataWhenNeeded(changes);
+        this.updateColumnsWhenNeeded(changes);
+    }
+    onExpand(element) {
+        if (this.expandedElement() === element) {
+            this.expandedElement.set(null);
+        }
+        else {
+            this.expandedElement.set(element);
+        }
+    }
+    clearFilter() {
+        this.header?.clearSearchValue();
+    }
+    renderRows() {
+        this.forceReloadFilter();
+        this.applyColumns();
+        this.table.renderRows();
+    }
+    onDensityChanged(density) {
+        this.preferenceService.setPreferenceDensity(density);
+    }
+    setUpPaginator(_paginator, _showPaginator) {
+        // nothing
+    }
+    onColumnsChanged(columns) {
+        this.allDisplayedColumns.set([...columns]);
+        const columnsToSave = this.removeMandatoryColumns([...columns]);
+        this.preferenceService.addOrUpdateGridPreference(this.resourceName, columnsToSave).subscribe();
+    }
+    applyColumns() {
+        this.regularColumns.forEach(dynColumn => this.table.addColumnDef(dynColumn.columnDef));
+        this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
+        this.table.setNoDataRow(this.noDataRow);
+        this.columnDefs.forEach(columnDef => {
+            this.table.addColumnDef(columnDef);
+            this.sort.register({ id: columnDef.name, start: 'desc', disableClear: false });
+        });
+    }
+    updateColumnsWhenNeeded(changes) {
+        if (changes.displayedColumns) {
+            this.allDisplayedColumns.set([...this.displayedColumns]);
+        }
+    }
+    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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: false, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: false, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: BaseDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: PreferenceService }], propDecorators: { resourceName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], displayedColumns: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], addButtonLabel: [{
+                type: Input
+            }], searchableColumns: [{
+                type: Input
+            }], showTableOptions: [{
+                type: Input
+            }], showColumnViewer: [{
+                type: Input
+            }], addButtonClick: [{
+                type: Output
+            }], header: [{
+                type: ViewChild,
+                args: [DataGridHeaderComponent]
+            }], table: [{
+                type: ViewChild,
+                args: [MatTable, { static: true }]
+            }], regularColumns: [{
+                type: ContentChildren,
+                args: [BaseGridColumnComponent]
+            }], columnDefs: [{
+                type: ContentChildren,
+                args: [MatColumnDef]
+            }], headerRowDef: [{
+                type: ContentChild,
+                args: [MatHeaderRowDef]
+            }], footerRowDef: [{
+                type: ContentChild,
+                args: [MatFooterRowDef]
+            }], rowDefs: [{
+                type: ContentChildren,
+                args: [MatRowDef]
+            }], noDataRow: [{
+                type: ContentChild,
+                args: [MatNoDataRow]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }] } });
+
+class ButtonPopoverComponent {
+    constructor() {
+        this.buttonLabel = input(null, ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
+        this.buttonIcon = input('', ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    }
+    ;
+    toggle() {
+        this.isActive.set(!this.isActive());
+    }
+    close() {
+        if (this.isActive()) {
+            this.isActive.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: ButtonPopoverComponent, isStandalone: true, selector: "cauca-button-popover", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\n  [cdkConnectedOverlayOpen]=\"isActive()\"\n  [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\n  (backdropClick)=\"toggle()\">\n  <ng-content></ng-content>\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ButtonPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\n  [cdkConnectedOverlayOpen]=\"isActive()\"\n  [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\n  (backdropClick)=\"toggle()\">\n  <ng-content></ng-content>\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"] }]
+        }] });
+
+class DataGridTableOptionsComponent {
+    get density() {
+        return Density;
+    }
+    get columns() {
+        return this.allColumns.filter(c => c.prop !== 'buttons' && c.prop !== 'menu' && c.prop !== '' && c.isInColumnChooser);
+    }
+    get currentDensityIcon() {
+        const currentDensity = this.preferenceService.getPreference()?.gridDensity;
+        if (currentDensity === Density.Compact) {
+            return 'density_small';
+        }
+        if (currentDensity === Density.Comfortable) {
+            return 'density_large';
+        }
+        return 'density_medium';
+    }
+    constructor(preferenceService) {
+        this.preferenceService = preferenceService;
+        this.showColumnViewer = true;
+        this.densityChanged = new EventEmitter();
+        this.allColumns = new QueryList();
+        this.columnsChanged = new EventEmitter();
+        this.columnsSearch = '';
+    }
+    ngOnInit() {
+        this.preferenceService.getPreferenceForGrid(this.gridName).subscribe({
+            next: configuration => {
+                if (configuration?.visibleColumns) {
+                    this.selectOnlyUserColumns(configuration.visibleColumns);
+                }
+                else {
+                    this.selectAllColumns();
+                }
+                this.onColumnsChanged();
+            }
+        });
+    }
+    closeColumnViewer() {
+        if (this.columnViewer) {
+            this.columnViewer.close();
+        }
+    }
+    changeDensity(newDensity) {
+        this.densityChanged.emit(newDensity);
+    }
+    onColumnsChanged() {
+        const newColumns = this.allColumns.filter(column => column.selected);
+        this.columnsChanged.emit(newColumns.map((column) => column.prop));
+    }
+    resetColumns() {
+        this.allColumns.forEach((column => column.selected = true));
+        this.columnsChanged.emit(this.allColumns.map((column) => column.prop));
+    }
+    selectOnlyUserColumns(configurationVisibleColumns) {
+        this.allColumns.forEach((column => {
+            const index = configurationVisibleColumns.findIndex(c => c === column.prop);
+            if (index === -1 && column.prop !== 'buttons' && column.prop !== 'menu' && column.prop !== '') {
+                column.selected = false;
+            }
+        }));
+    }
+    selectAllColumns() {
+        this.allColumns.forEach((column => {
+            column.selected = true;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridTableOptionsComponent, deps: [{ token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: "gridName", showColumnViewer: "showColumnViewer", allColumns: "allColumns" }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$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: i4.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: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-table-options', imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslateModule, MenuItemComponent], template: "<div class=\"table-options-bar\">\n  <div class=\"table-options\">\n    @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"columns\">\n            @for (column of columns; track column) {\n              <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n                (change)=\"onColumnsChanged()\">\n                {{column.label}}\n              </mat-checkbox>\n            }\n          </div>\n        </mat-card-content>\n        <mat-card-actions>\n          <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n          <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n        </mat-card-actions>\n      </mat-card>\n    </cauca-button-popover> }\n    <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n  </div>\n\n  <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n  <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n  <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n  <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
+        }], ctorParameters: () => [{ type: PreferenceService }], propDecorators: { gridName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], showColumnViewer: [{
+                type: Input
+            }], densityChanged: [{
+                type: Output
+            }], allColumns: [{
+                type: Input
+            }], columnsChanged: [{
+                type: Output
+            }], columnViewer: [{
+                type: ViewChild,
+                args: [ButtonPopoverComponent, { static: true }]
+            }] } });
+
+class DataGridProgressSpinerComponent {
+    constructor() {
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.useBackground = input(true, ...(ngDevMode ? [{ debugName: "useBackground" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridProgressSpinerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridProgressSpinerComponent, isStandalone: true, selector: "cauca-data-grid-progress-spiner", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, useBackground: { classPropertyName: "useBackground", publicName: "useBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\n    <mat-progress-spinner\n      color=\"primary\"\n      mode=\"indeterminate\">\n    </mat-progress-spinner>\n  </div>\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridProgressSpinerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-progress-spiner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\n  <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\n    <mat-progress-spinner\n      color=\"primary\"\n      mode=\"indeterminate\">\n    </mat-progress-spinner>\n  </div>\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"] }]
+        }] });
+
+class DataGridComponent extends BaseDataGridComponent {
+    constructor(translateService, preferenceService) {
+        super(translateService, preferenceService);
+        this.data = [];
+        this.showLoadingError = false;
+        this.isLoading = false;
+        this.allowReordering = false;
+        this.rowDrop = new EventEmitter();
+        this.showPaginator = input(false, ...(ngDevMode ? [{ debugName: "showPaginator" }] : []));
+        this.showFooter = input(false, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+        this.showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+        this.headerColor = input(undefined, ...(ngDevMode ? [{ debugName: "headerColor" }] : []));
+        this.showRefreshButton = input(false, ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : []));
+        this.refreshData = output();
+        this.dragDisabled = true;
+        this.currentFilter = '';
+        this.dataSource = new MatTableDataSource([]);
+        effect(() => {
+            this.setUpPaginator(this.paginator, this.showPaginator());
+        });
+    }
+    onRefreshData() {
+        this.dataSource.data = [];
+        this.refreshData.emit();
+    }
+    applyFilter(filter) {
+        if (this.paginator) {
+            this.paginator.firstPage();
+        }
+        this.dataSource.filter = toLowerCaseAndWithoutDiacritics(filter);
+    }
+    setUpSort(sort) {
+        this.sort = sort;
+        this.dataSource.sort = this.sort;
+    }
+    getData() {
+        return this.dataSource.data;
+    }
+    getFilteredData() {
+        return this.dataSource.filteredData;
+    }
+    refreshDisplayedColumns(columns) {
+        this.onColumnsChanged(columns);
+    }
+    rowDropped(event) {
+        const data = this.getData();
+        const filteredData = this.getFilteredData();
+        const fromIndex = data.findIndex((d) => d === filteredData[event.previousIndex]);
+        const toIndex = data.findIndex((d) => d === filteredData[event.currentIndex]);
+        if (fromIndex >= 0 && toIndex >= 0) {
+            moveItemInArray(data, fromIndex, toIndex);
+            this.renderRows();
+            this.rowDrop.emit(new DataGridRowDropEvent({
+                item: data[fromIndex],
+                data,
+                fromIndex,
+                toIndex,
+            }));
+        }
+    }
+    setUpPaginator(paginator, showPaginator) {
+        this.dataSource.paginator = paginator && showPaginator ? paginator : null;
+    }
+    showColumnsWhenTableOptionsIsFalse() {
+        if (this.allowReordering) {
+            this.allDisplayedColumns.set(['position', ...this.displayedColumns]);
+        }
+        else {
+            this.allDisplayedColumns.set([...this.displayedColumns]);
+        }
+        if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
+            this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
+        }
+    }
+    updateColumnsWhenNeeded(changes) {
+        if (changes.displayedColumns || changes.allowReordering) {
+            if (this.allowReordering && !this.allDisplayedColumns().includes('position')) {
+                this.allDisplayedColumns.set(['position', ...this.allDisplayedColumns()]);
+            }
+            else {
+                this.allDisplayedColumns.set([...this.allDisplayedColumns()]);
+            }
+        }
+        if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
+            this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
+        }
+    }
+    onColumnsChanged(columns) {
+        super.onColumnsChanged(columns);
+        if (this.allowReordering && !columns.includes('position')) {
+            this.allDisplayedColumns.set(['position', ...columns]);
+        }
+        else {
+            this.allDisplayedColumns.set([...columns]);
+        }
+        if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
+            this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
+        }
+    }
+    setUpFilterPredicate() {
+        if (this.filterPredicate) {
+            this.dataSource.filterPredicate = this.filterPredicate;
+        }
+        else if (this.searchableColumns?.length > 0) {
+            this.dataSource.filterPredicate = (data, filter) => {
+                return this.searchableColumns.some((column) => {
+                    const value = data[column];
+                    return value?.toString().toLowerCaseAndWithoutDiacritics().includes(filter);
+                });
+            };
+        }
+    }
+    forceReloadFilter() {
+        // eslint-disable-next-line no-self-assign
+        this.dataSource.filter = this.dataSource.filter;
+    }
+    updateDataWhenNeeded(changes) {
+        if (changes.data?.currentValue && this.data) {
+            this.setData(this.data);
+        }
+    }
+    async setData(data) {
+        if (Array.isArray(data)) {
+            this.dataSource.data = data;
+            setTimeout(() => {
+                this.table.setNoDataRow(this.noDataRow);
+                this.table.renderRows();
+            }, 0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$2.TranslateService }, { token: PreferenceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: false, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n  <cauca-data-grid-header [showAddButton]=\"showAddButton\" [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content\n      select=\"[customFilter]\"\n      ngProjectAs=\"[customFilter]\">\n    </ng-content>\n  </cauca-data-grid-table-options>\n}\n\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n\n  @if (showExpandButton()) {\n    <ng-container matColumnDef=\"expand\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"align-commands\">\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n        </div>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  @if (allowReordering) {\n    <ng-container matColumnDef=\"position\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  <ng-content></ng-content>\n\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\n\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n      @if (row === expandedElement()) {\n        <div class=\"grid-element-detail\" [@detailExpand]=\"row === expandedElement() ? 'expanded' : 'collapsed'\">\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n        </div>\n      }\n    </td>\n  </ng-container>\n\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n  @if (showFooter()) {\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\n  }\n\n  @if (!isLoading) {\n    <tr class=\"mat-row\" *matNoDataRow>\n      @if (!showLoadingError && !isLoading) {\n        <td class=\"mat-cell data-grid-message\"\n          [attr.colspan]=\"allDisplayedColumns().length\">\n          <div class=\"icon-text\">\n            <mat-icon>grid_off</mat-icon>\n            <span>{{ 'dataGrid.noDataLabel' | translate }}</span>\n          </div>\n        </td>\n      }\n      @if (showLoadingError) {\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\n          <div class=\"icon-text\">\n            <mat-icon>error</mat-icon>\n            <span>{{ 'dataGrid.errorLoadingDataLabel' | translate }}</span>\n          </div>\n        </td>\n      }\n    </tr>\n  }\n\n</table>\n\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading\" />\n\n@if (showPaginator()) {\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}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}.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}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
+                // Material Table structure:
+                MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: 
+                // Drag and Drop:
+                CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: 
+                // Material extras:
+                MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: 
+                // ngx-translate:
+                TranslateModule }, { kind: "component", type: 
+                // Custom Components:
+                DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel"], 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: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [
+            trigger('detailExpand', [
+                state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cauca-data-grid', animations: [
+                        trigger('detailExpand', [
+                            state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], imports: [
+                        NgTemplateOutlet, // still needed
+                        // Material Table structure:
+                        MatTable, MatSort, MatColumnDef,
+                        MatHeaderCell, MatHeaderCellDef, MatCellDef,
+                        MatFooterCell, MatFooterCellDef,
+                        MatRow, MatRowDef,
+                        MatHeaderRow, MatHeaderRowDef,
+                        MatFooterRow, MatFooterRowDef,
+                        MatNoDataRow,
+                        // Drag and Drop:
+                        CdkDropList, CdkDrag, CdkDragHandle,
+                        // Material extras:
+                        MatIcon, MatPaginator,
+                        // ngx-translate:
+                        TranslateModule,
+                        // Custom Components:
+                        DataGridHeaderComponent,
+                        DataGridTableOptionsComponent,
+                        DataGridProgressSpinerComponent,
+                        IconButtonComponent
+                    ], template: "@if (showHeader()) {\n  <cauca-data-grid-header [showAddButton]=\"showAddButton\" [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\n    [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content\n      select=\"[customFilter]\"\n      ngProjectAs=\"[customFilter]\">\n    </ng-content>\n  </cauca-data-grid-table-options>\n}\n\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\n  (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n\n  @if (showExpandButton()) {\n    <ng-container matColumnDef=\"expand\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"align-commands\">\n          <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n        </div>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  @if (allowReordering) {\n    <ng-container matColumnDef=\"position\">\n      <th mat-header-cell *matHeaderCellDef></th>\n      <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\n        <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n  }\n\n  <ng-content></ng-content>\n\n  <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n\n  <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\n    [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\n    [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\n  [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\n\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n      @if (row === expandedElement()) {\n        <div class=\"grid-element-detail\" [@detailExpand]=\"row === expandedElement() ? 'expanded' : 'collapsed'\">\n          <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n        </div>\n      }\n    </td>\n  </ng-container>\n\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n  @if (showFooter()) {\n    <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\n  }\n\n  @if (!isLoading) {\n    <tr class=\"mat-row\" *matNoDataRow>\n      @if (!showLoadingError && !isLoading) {\n        <td class=\"mat-cell data-grid-message\"\n          [attr.colspan]=\"allDisplayedColumns().length\">\n          <div class=\"icon-text\">\n            <mat-icon>grid_off</mat-icon>\n            <span>{{ 'dataGrid.noDataLabel' | translate }}</span>\n          </div>\n        </td>\n      }\n      @if (showLoadingError) {\n        <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\n          <div class=\"icon-text\">\n            <mat-icon>error</mat-icon>\n            <span>{{ 'dataGrid.errorLoadingDataLabel' | translate }}</span>\n          </div>\n        </td>\n      }\n    </tr>\n  }\n\n</table>\n\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading\" />\n\n@if (showPaginator()) {\n  <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}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}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: PreferenceService }], propDecorators: { data: [{
+                type: Input
+            }], showLoadingError: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], allowReordering: [{
+                type: Input
+            }], searchableColumns: [{
+                type: Input
+            }], filterPredicate: [{
+                type: Input
+            }], rowDrop: [{
+                type: Output
+            }], rowDetailTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class OdataListingService {
+    get data() {
+        return this.dataSource?.data ?? null;
+    }
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.dataSource = null;
+        this.error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.errorSubscription = null;
+        this.loadingSubscription = null;
+    }
+    initialize({ baseUrl, resourceName, paginator, sort, initialSort, filters }) {
+        const newDataSource = new ODataDataSource(this.httpClient, `${baseUrl}odata/${resourceName}`);
+        newDataSource.filters = filters;
+        if (initialSort) {
+            newDataSource.initialSort = initialSort;
+        }
+        if (sort) {
+            newDataSource.sort = sort;
+        }
+        newDataSource.paginator = paginator;
+        this.dataSource = newDataSource;
+        this.dataSource.refresh();
+        this.errorSubscription = this.dataSource.errors.subscribe((errors) => this.error.set(!!errors));
+        this.loadingSubscription = this.dataSource.loading
+            .pipe(distinctUntilChanged())
+            .subscribe((isLoading) => {
+            if (isLoading) {
+                this.loading.set(false);
+            }
+            this.loading.set(isLoading);
+        });
+        return newDataSource;
+    }
+    updateFilters(filters) {
+        if (this.dataSource) {
+            this.dataSource.filters = filters;
+        }
+    }
+    forceReloadFilter() {
+        if (this.dataSource) {
+            // eslint-disable-next-line no-self-assign
+            this.dataSource.filters = this.dataSource.filters;
+        }
+    }
+    isInitialized() {
+        return this.dataSource !== null;
+    }
+    refresh() {
+        this.dataSource?.refresh();
+    }
+    destroy() {
+        this.errorSubscription?.unsubscribe();
+        this.loadingSubscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OdataListingService, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OdataListingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OdataListingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
+
+class OdataGridComponent extends BaseDataGridComponent {
+    constructor(translateService, preferenceService, listing) {
+        super(translateService, preferenceService);
+        this.listing = listing;
+        this.showTableHeader = input(true, ...(ngDevMode ? [{ debugName: "showTableHeader" }] : []));
+        this.showHeader = true;
+        this.idField = 'id';
+        this.itemClick = new EventEmitter();
+        this.refreshRequested = new EventEmitter();
+        this.showRefreshButton = false;
+        this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
+    }
+    ngOnDestroy() {
+        this.listing.destroy();
+    }
+    refreshData() {
+        this.listing.refresh();
+        this.refreshRequested.emit();
+    }
+    ngOnChanges(changes) {
+        this.updateColumnsWhenNeeded(changes);
+    }
+    getData() {
+        return this.listing.data;
+    }
+    applyFilter(filter) {
+        if (this.filterPredicate) {
+            if (this.paginator) {
+                this.paginator.firstPage();
+            }
+            this.listing.updateFilters(this.filterPredicate(toLowerCaseAndWithoutDiacritics(filter)));
+        }
+    }
+    refreshFilter() {
+        if (this.filterPredicate) {
+            this.listing.updateFilters(this.filterPredicate(toLowerCaseAndWithoutDiacritics(this.header.filterControl?.value)));
+        }
+    }
+    setUpFilterPredicate() {
+        this.listing.initialize({
+            baseUrl: this.baseUrl,
+            resourceName: this.resourceName,
+            paginator: this.paginator,
+            sort: this.sort,
+            initialSort: this.baseSort,
+            filters: this.filterPredicate?.('') ?? [],
+        });
+    }
+    setUpSort(sort) {
+        this.sort = sort;
+    }
+    updateColumnsWhenNeeded(changes) {
+        if (changes.displayedColumns || changes.showExpandButton) {
+            let columns = [...this.displayedColumns];
+            if (this.showExpandButton()) {
+                columns = ['expand', ...columns];
+            }
+            this.allDisplayedColumns.set([...columns]);
+        }
+    }
+    forceReloadFilter() {
+        this.listing.forceReloadFilter();
+    }
+    updateDataWhenNeeded(_changes) {
+        // not implemented
+    }
+    onColumnsChanged(columns) {
+        if (this.showExpandButton() && columns.indexOf('expand') === -1) {
+            columns = ['expand', ...columns];
+        }
+        super.onColumnsChanged(columns);
+    }
+    showColumnsWhenTableOptionsIsFalse() {
+        let columns = [...this.displayedColumns];
+        if (this.showExpandButton()) {
+            columns = ['expand', ...columns];
+        }
+        this.allDisplayedColumns.set([...columns]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$5.TranslateService }, { token: PreferenceService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: false, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: false, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showHeader) {\n  <cauca-data-grid-header\n    [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n    [showAddButton]=\"showAddButton\"\n    [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n  </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n    @if (showExpandButton()) {\n      <ng-container matColumnDef=\"expand\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"align-commands\">\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <ng-content></ng-content>\n    @if(showTableHeader()) {\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n    }\n\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n      [class.showClick]=\"itemClick.observers.length > 0\"\n      [class.compact]=\"preference.gridDensity === density.Compact\"\n      [class.standard]=\"preference.gridDensity === density.Standard\"\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n      [class.selected]=\"selectedRowId === row[idField]\"\n      (click)=\"itemClick.emit(row)\"\n      onkeypress=\"itemClick.emit(row)\">\n    </tr>\n\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n        @if (row === expandedElement()) {\n          <div class=\"grid-element-detail\" [@detailExpand]=\"row === expandedElement() ? 'expanded' : 'collapsed'\">\n            <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n          </div>\n        }\n      </td>\n    </ng-container>\n\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n    <ng-container *matNoDataRow>\n      @if(listing.loading() === false) {\n        <ng-container>\n          <tr class=\"mat-row\">\n            @if (listing.error() === false) {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <div class=\"icon-text\">\n                  <mat-icon>grid_off</mat-icon>\n                  <span>{{ 'dataGrid.noDataLabel' | translate }}</span>\n                </div>\n              </th>\n            } @else {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <div class=\"icon-text\">\n                  <mat-icon>error</mat-icon>\n                  <span>{{ 'dataGrid.errorLoadingDataLabel' | translate }}</span>\n                </div>\n              </th>\n            }\n          </tr>\n        </ng-container>\n      }\n    </ng-container>\n  </table>\n\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.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}\n"], dependencies: [{ kind: "component", type: DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: 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: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [
+            trigger('detailExpand', [
+                state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: OdataGridComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cauca-odata-grid', providers: [OdataListingService], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], imports: [
+                        DataGridHeaderComponent, DataGridTableOptionsComponent,
+                        MatTable, MatColumnDef, MatHeaderCell, MatHeaderCellDef, IconButtonComponent,
+                        MatIcon, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef, NgTemplateOutlet,
+                        MatNoDataRow, DataGridProgressSpinerComponent, MatPaginatorModule, TranslateModule
+                    ], template: "@if (showHeader) {\n  <cauca-data-grid-header\n    [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n    [showAddButton]=\"showAddButton\"\n    [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n    (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n    <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n  </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n  <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n    <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n  </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n  <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n    @if (showExpandButton()) {\n      <ng-container matColumnDef=\"expand\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"align-commands\">\n            <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <ng-content></ng-content>\n    @if(showTableHeader()) {\n      <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n    }\n\n    <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n      [class.showClick]=\"itemClick.observers.length > 0\"\n      [class.compact]=\"preference.gridDensity === density.Compact\"\n      [class.standard]=\"preference.gridDensity === density.Standard\"\n      [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n      [class.selected]=\"selectedRowId === row[idField]\"\n      (click)=\"itemClick.emit(row)\"\n      onkeypress=\"itemClick.emit(row)\">\n    </tr>\n\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n        @if (row === expandedElement()) {\n          <div class=\"grid-element-detail\" [@detailExpand]=\"row === expandedElement() ? 'expanded' : 'collapsed'\">\n            <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n          </div>\n        }\n      </td>\n    </ng-container>\n\n    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n    <ng-container *matNoDataRow>\n      @if(listing.loading() === false) {\n        <ng-container>\n          <tr class=\"mat-row\">\n            @if (listing.error() === false) {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <div class=\"icon-text\">\n                  <mat-icon>grid_off</mat-icon>\n                  <span>{{ 'dataGrid.noDataLabel' | translate }}</span>\n                </div>\n              </th>\n            } @else {\n              <th class=\"mat-cell data-grid-message\"\n                [attr.colspan]=\"allDisplayedColumns().length\">\n                <div class=\"icon-text\">\n                  <mat-icon>error</mat-icon>\n                  <span>{{ 'dataGrid.errorLoadingDataLabel' | translate }}</span>\n                </div>\n              </th>\n            }\n          </tr>\n        </ng-container>\n      }\n    </ng-container>\n  </table>\n\n  <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.TranslateService }, { type: PreferenceService }, { type: OdataListingService }], propDecorators: { baseSort: [{
+                type: Input
+            }], filterPredicate: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], selectedRowId: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], refreshRequested: [{
+                type: Output
+            }], showRefreshButton: [{
+                type: Input
+            }], rowDetailTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }] } });
+
+class ColorDataGridColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorDataGridColumnComponent, isStandalone: true, selector: "cauca-color-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\">\r\n      {{ label ?? capitalize(prop) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorDataGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-color-data-grid-column', standalone: true, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, NgStyle, MatFooterCellDef], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\">\r\n      {{ label ?? capitalize(prop) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (row[prop]) {\r\n            <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop]\"></div>\r\n        }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }] });
+
+class CheckIconComponent {
+    constructor() {
+        this.checkIcon = input('check', ...(ngDevMode ? [{ debugName: "checkIcon" }] : []));
+        this.uncheckIcon = input('block', ...(ngDevMode ? [{ debugName: "uncheckIcon" }] : []));
+        this.isChecked = input(false, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+        this.icon = computed(() => (this.isChecked() ? this.checkIcon() : this.uncheckIcon()), ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.checkMark = computed(() => this.isChecked() && this.checkIcon() === 'check', ...(ngDevMode ? [{ debugName: "checkMark" }] : []));
+        this.check = computed(() => this.isChecked() && this.checkIcon() !== 'check', ...(ngDevMode ? [{ debugName: "check" }] : []));
+        this.uncheck = computed(() => !this.isChecked(), ...(ngDevMode ? [{ debugName: "uncheck" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: CheckIconComponent, isStandalone: true, selector: "cauca-check-icon", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <mat-icon
+      class="check-icon"
+      [class.check-mark]="checkMark()"
+      [class.check]="check()"
+      [class.uncheck]="uncheck()"
+      aria-hidden="false"
+      aria-label="State icon"
+      [fontIcon]="icon()" />
+  `, isInline: true, styles: [".check-mark{color:#2e7d32}.check{color:#006496}.uncheck{color:#12101461}.check-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-check-icon', template: `
+    <mat-icon
+      class="check-icon"
+      [class.check-mark]="checkMark()"
+      [class.check]="check()"
+      [class.uncheck]="uncheck()"
+      aria-hidden="false"
+      aria-label="State icon"
+      [fontIcon]="icon()" />
+  `, imports: [MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".check-mark{color:#2e7d32}.check{color:#006496}.uncheck{color:#12101461}.check-icon{vertical-align:middle}\n"] }]
+        }] });
+
+class DataGridCheckColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.checkIcon = 'check';
+        this.uncheckIcon = 'block';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DataGridCheckColumnComponent, isStandalone: true, selector: "cauca-data-grid-check-column", inputs: { checkIcon: "checkIcon", uncheckIcon: "uncheckIcon" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width, 'text-align': 'center'}\">\n        {{ label ?? capitalize(prop) }}\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n        <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\"  [isChecked]=\"row[prop]\" />\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCheckColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], imports: [CheckIconComponent, MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width, 'text-align': 'center'}\">\n        {{ label ?? capitalize(prop) }}\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n        <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\"  [isChecked]=\"row[prop]\" />\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { checkIcon: [{
+                type: Input
+            }], uncheckIcon: [{
+                type: Input
+            }] } });
+
+class DataGridColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.showToolTip = false;
+        this.summaryType = input('none', ...(ngDevMode ? [{ debugName: "summaryType" }] : []));
+        this.summaryLabel = input('', ...(ngDevMode ? [{ debugName: "summaryLabel" }] : []));
+        this.format = input('none', ...(ngDevMode ? [{ debugName: "format" }] : []));
+        this.isInitialized = false;
+        this.grid = null;
+        this.grid = grid ?? odata;
+        this.isInitialized = true;
+    }
+    calculateSummary() {
+        if (this.isInitialized && this.grid?.data) {
+            if (this.summaryType() === 'sum') {
+                return this.summaryLabel() + this.grid.data.reduce((acc, row) => acc + row[this.prop], 0) + this.summaryLabel();
+            }
+            if (this.summaryType() === 'count') {
+                return this.grid.data?.length + this.summaryLabel();
+            }
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridColumnComponent, isStandalone: true, selector: "cauca-data-grid-column", inputs: { showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: false, isRequired: false, transformFunction: null }, summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\n\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      @if (showToolTip) {<span [matTooltip]=\"row[prop]\" >{{ row[prop] }}</span>}\n      @else { <span>{{ row[prop] }}</span>}\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      @if (isInitialized) {\n        {{calculateSummary()}}\n      }\n    </td>\n\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n\n    <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      @if (showToolTip) {<span [matTooltip]=\"row[prop]\" >{{ row[prop] }}</span>}\n      @else { <span>{{ row[prop] }}</span>}\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      @if (isInitialized) {\n        {{calculateSummary()}}\n      }\n    </td>\n\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { showToolTip: [{
+                type: Input
+            }] } });
+
+class DataGridCommandIconColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.checkColor = '#F8B132';
+        this.checkIcon = 'star';
+        this.uncheckIcon = 'star_outline';
+        this.uncheckColor = 'default';
+        this.commandClick = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCommandIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridCommandIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-command-icon-column", inputs: { checkColor: "checkColor", checkIcon: "checkIcon", uncheckIcon: "uncheckIcon", uncheckColor: "uncheckColor" }, outputs: { commandClick: "commandClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\n        <div>\n            @if (label) {\n                {{ label }}\n            } @else {\n                <mat-icon [style.color]=\"uncheckColor\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon\" />\n            }\n        </div>\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n        <div>\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop] ? checkIcon : uncheckIcon\" [color]=\"row[prop] ? checkColor : uncheckColor\" />\n        </div>\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCommandIconColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-command-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatSortHeader, MatHeaderCellDef, MatIcon, MatCell, MatCellDef, IconButtonComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell mat-sort-header *matHeaderCellDef>\n        <div>\n            @if (label) {\n                {{ label }}\n            } @else {\n                <mat-icon [style.color]=\"uncheckColor\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon\" />\n            }\n        </div>\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n        <div>\n            <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop] ? checkIcon : uncheckIcon\" [color]=\"row[prop] ? checkColor : uncheckColor\" />\n        </div>\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { checkColor: [{
+                type: Input
+            }], checkIcon: [{
+                type: Input
+            }], uncheckIcon: [{
+                type: Input
+            }], uncheckColor: [{
+                type: Input
+            }], commandClick: [{
+                type: Output
+            }] } });
+
+class DataGridCommandsColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.canDelete = false;
+        this.canEdit = false;
+        this.canDuplicate = false;
+        this.deleteClick = new EventEmitter();
+        this.editClick = new EventEmitter();
+        this.duplicateClick = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCommandsColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridCommandsColumnComponent, isStandalone: true, selector: "cauca-data-grid-commands-column", inputs: { canDelete: "canDelete", canEdit: "canEdit", canDuplicate: "canDuplicate", editLinkField: "editLinkField" }, outputs: { deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"buttons\">\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\"> {{ label }} </th>\n  <td mat-cell *matCellDef=\"let row\">\n\n      <div class=\"align-commands\">\n\n        @if (canEdit) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField ? [row[editLinkField]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\n\n        @if (canDuplicate) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\n\n        @if (canDelete) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\n\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\n\n      </div>\n\n  </td>\n  <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridCommandsColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-commands-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconButtonComponent, NgTemplateOutlet, MatFooterCell, MatFooterCellDef, NgStyle, RouterLink], template: "<ng-container matColumnDef=\"buttons\">\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width}\"> {{ label }} </th>\n  <td mat-cell *matCellDef=\"let row\">\n\n      <div class=\"align-commands\">\n\n        @if (canEdit) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField ? [row[editLinkField]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\n\n        @if (canDuplicate) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\n\n        @if (canDelete) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\n\n        <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\n\n      </div>\n\n  </td>\n  <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { canDelete: [{
+                type: Input
+            }], canEdit: [{
+                type: Input
+            }], canDuplicate: [{
+                type: Input
+            }], editLinkField: [{
+                type: Input
+            }], menuTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], deleteClick: [{
+                type: Output
+            }], editClick: [{
+                type: Output
+            }], duplicateClick: [{
+                type: Output
+            }] } });
+
+class DataGridIconColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.alignRight = false;
+        this.useMatIcon = false;
+        this.icon = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DataGridIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-icon-column", inputs: { alignRight: "alignRight", useMatIcon: "useMatIcon", icon: "icon" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel ? label ?? capitalize(prop) : '' }} </th>\n    <td [ngClass]=\"alignRight ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\n        @if (useMatIcon) { <mat-icon>{{icon}}</mat-icon> }\n        @else { <cauca-icon [icon]=\"row[prop]\" /> }\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconComponent, selector: "cauca-icon", inputs: ["icon"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridIconColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconComponent, MatFooterCell, MatFooterCellDef, NgClass, MatIcon], template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef> {{ showLabel ? label ?? capitalize(prop) : '' }} </th>\n    <td [ngClass]=\"alignRight ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\n        @if (useMatIcon) { <mat-icon>{{icon}}</mat-icon> }\n        @else { <cauca-icon [icon]=\"row[prop]\" /> }\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { alignRight: [{
+                type: Input
+            }], useMatIcon: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class DataGridMenuColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.canDelete = model(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+        this.canDeleteByRow = null;
+        this.canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+        this.canDuplicate = model(false, ...(ngDevMode ? [{ debugName: "canDuplicate" }] : []));
+        this.canDuplicateByRow = null;
+        this.editLinkField = input(...(ngDevMode ? [undefined, { debugName: "editLinkField" }] : []));
+        this.duplicateLinkField = input(...(ngDevMode ? [undefined, { debugName: "duplicateLinkField" }] : []));
+        this.deleteClick = output();
+        this.editClick = output();
+        this.duplicateClick = output();
+    }
+    menuOpened(row) {
+        if (this.canDeleteByRow) {
+            this.canDelete.set(this.canDeleteByRow(row));
+        }
+        if (this.canDuplicateByRow) {
+            this.canDuplicate.set(this.canDuplicateByRow(row));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", 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: false, 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: false, 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\">\n    <th mat-header-cell *matHeaderCellDef> {{ label }} </th>\n    <td mat-cell *matCellDef=\"let row\">\n    <div class=\"align-commands\">\n\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\n\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\n            @if (canEdit()) { <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\n\n            @if (canDuplicate()) { <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\" /> }\n\n            @if (canDelete()) { <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\n\n        </mat-menu>\n\n        </div>\n\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.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: i4.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", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DataGridMenuColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-data-grid-menu-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, IconButtonComponent, MatMenuModule, MenuItemComponent, NgTemplateOutlet, MatFooterCell, MatFooterCellDef, RouterLink], template: "<ng-container matColumnDef=\"menu\">\n    <th mat-header-cell *matHeaderCellDef> {{ label }} </th>\n    <td mat-cell *matCellDef=\"let row\">\n    <div class=\"align-commands\">\n\n        <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\n\n        <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\n            @if (canEdit()) { <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\n\n            @if (canDuplicate()) { <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\" /> }\n\n            @if (canDelete()) { <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\n            <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\n\n        </mat-menu>\n\n        </div>\n\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { canDeleteByRow: [{
+                type: Input
+            }], canDuplicateByRow: [{
+                type: Input
+            }], menuTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+class TimeLabelComponent {
+    constructor() {
+        this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
+        this.minLimit = input(null, ...(ngDevMode ? [{ debugName: "minLimit" }] : []));
+        this.maxLimit = input(null, ...(ngDevMode ? [{ debugName: "maxLimit" }] : []));
+        this.showTime = input(true, ...(ngDevMode ? [{ debugName: "showTime" }] : []));
+        this.displayDate = computed(() => {
+            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;
+            }
+        }, ...(ngDevMode ? [{ debugName: "displayDate" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TimeLabelComponent, isStandalone: true, selector: "cauca-time-label", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, minLimit: { classPropertyName: "minLimit", publicName: "minLimit", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showTime())\r\n{\r\n    <span [matTooltip]=\"displayDate() | date:'dd/MM/yyyy HH:mm:ss'\">{{ displayDate() | date:'dd/MM/yyyy HH:mm:ss' }}</span>\r\n}\r\n@else\r\n{\r\n    <span [matTooltip]=\"displayDate() | date:'dd/MM/yyyy HH:mm:ss'\">{{ displayDate() | date:'dd/MM/yyyy' }}</span>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TimeLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-time-label', imports: [DatePipe, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showTime())\r\n{\r\n    <span [matTooltip]=\"displayDate() | date:'dd/MM/yyyy HH:mm:ss'\">{{ displayDate() | date:'dd/MM/yyyy HH:mm:ss' }}</span>\r\n}\r\n@else\r\n{\r\n    <span [matTooltip]=\"displayDate() | date:'dd/MM/yyyy HH:mm:ss'\">{{ displayDate() | date:'dd/MM/yyyy' }}</span>\r\n}\r\n" }]
+        }] });
+
+class DateGridColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.showWithTime = false;
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", type: DateGridColumnComponent, isStandalone: true, selector: "cauca-date-grid-column", inputs: { showWithTime: { classPropertyName: "showWithTime", publicName: "showWithTime", isSignal: false, 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 }}\">\n\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      <cauca-time-label [date]=\"row[prop]\" [showTime]=\"showWithTime\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "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"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DateGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-date-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatCell, MatCellDef, TimeLabelComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      <cauca-time-label [date]=\"row[prop]\" [showTime]=\"showWithTime\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { showWithTime: [{
+                type: Input
+            }] } });
+
+class SortableDataGridCheckColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.checkIcon = 'check';
+        this.uncheckIcon = 'block';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortableDataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SortableDataGridCheckColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-check-column", inputs: { checkIcon: "checkIcon", uncheckIcon: "uncheckIcon" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n        {{ label ?? capitalize(prop) }}\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width}\">\n        <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\" [isChecked]=\"row[prop]\" />\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortableDataGridCheckColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-sortable-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatTooltip, MatCell, MatCellDef, CheckIconComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n        {{ label ?? capitalize(prop) }}\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width}\">\n        <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\" [isChecked]=\"row[prop]\" />\n    </td>\n    <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { checkIcon: [{
+                type: Input
+            }], uncheckIcon: [{
+                type: Input
+            }] } });
+
+class ColumnLabelComponent {
+    constructor() {
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.format = input('none', ...(ngDevMode ? [{ debugName: "format" }] : []));
+        this.showToolTip = input(false, ...(ngDevMode ? [{ debugName: "showToolTip" }] : []));
+        this.displayValue = computed(() => {
+            if (this.format() === 'phone') {
+                return this.value()?.toString().replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
+            }
+            return this.value();
+        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColumnLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColumnLabelComponent, isStandalone: true, selector: "cauca-column-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showToolTip()) {<span [matTooltip]=\"displayValue()\" >{{ displayValue() }}</span>}\r\n@else { <span>{{displayValue()}}</span>}", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColumnLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-column-label', imports: [MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolTip()) {<span [matTooltip]=\"displayValue()\" >{{ displayValue() }}</span>}\r\n@else { <span>{{displayValue()}}</span>}" }]
+        }] });
+
+class SortableDataGridColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.showToolTip = false;
+        this.summaryType = input('none', ...(ngDevMode ? [{ debugName: "summaryType" }] : []));
+        this.summaryLabel = input('', ...(ngDevMode ? [{ debugName: "summaryLabel" }] : []));
+        this.format = input('none', ...(ngDevMode ? [{ debugName: "format" }] : []));
+        this.isInitialized = false;
+        this.grid = null;
+        this.grid = grid ?? odata;
+        this.isInitialized = true;
+    }
+    calculateSummary() {
+        if (this.isInitialized && this.grid?.data) {
+            if (this.summaryType() === 'sum') {
+                return this.summaryLabel() + this.grid.data.reduce((acc, row) => acc + row[this.prop], 0) + this.summaryLabel();
+            }
+            if (this.summaryType() === 'count') {
+                return this.grid.data?.length + this.summaryLabel();
+            }
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortableDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SortableDataGridColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-column", inputs: { showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: false, isRequired: false, transformFunction: null }, summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "\n<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header  [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      <cauca-column-label [value]=\"row[prop]\" [showToolTip]=\"showToolTip\" [format]=\"format()\" />\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      @if (isInitialized) {\n        {{calculateSummary()}}\n      }\n    </td>\n</ng-container>\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnLabelComponent, selector: "cauca-column-label", inputs: ["value", "format", "showToolTip"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SortableDataGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-sortable-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatCell, MatCellDef, MatTooltip, ColumnLabelComponent], template: "\n<ng-container matColumnDef=\"{{ prop }}\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header  [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n      {{ label ?? capitalize(prop) }}\n    </th>\n\n    <td mat-cell *matCellDef=\"let row\">\n      <cauca-column-label [value]=\"row[prop]\" [showToolTip]=\"showToolTip\" [format]=\"format()\" />\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      @if (isInitialized) {\n        {{calculateSummary()}}\n      }\n    </td>\n</ng-container>\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { showToolTip: [{
+                type: Input
+            }] } });
+
+class TranslationGridColumnComponent extends BaseGridColumnComponent {
+    constructor(odata, grid) {
+        super((grid ?? odata)?.table);
+        this.odata = odata;
+        this.grid = grid;
+        this.prefix = "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: "prefix" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label ?? capitalize(prop) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix && row[prop]) { <span>{{ prefix+'.'+row[prop] | translate }}</span> }\r\n        @else if(row[prop]) { <span>{{ row[prop] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TranslationGridColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslateModule, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\r\n\r\n    <th mat-header-cell *matHeaderCellDef>\r\n        {{ label ?? capitalize(prop) }}\r\n    </th>\r\n\r\n    <td mat-cell *matCellDef=\"let row\">\r\n        @if (prefix && row[prop]) { <span>{{ prefix+'.'+row[prop] | translate }}</span> }\r\n        @else if(row[prop]) { <span>{{ row[prop] | translate }}</span> }\r\n    </td>\r\n    <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
+                    type: Optional
+                }] }, { type: DataGridComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { prefix: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of cauca-datagrid
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseGridColumnComponent, ColorDataGridColumnComponent, DataGridCheckColumnComponent, DataGridColumnComponent, DataGridCommandIconColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, DataGridIconColumnComponent, DataGridMenuColumnComponent, DateGridColumnComponent, OdataGridComponent, SortableDataGridCheckColumnComponent, SortableDataGridColumnComponent, TranslationGridColumnComponent };
+//# sourceMappingURL=cauca-911-datagrid.mjs.map