chrv-components 1.12.230 → 1.12.232

package/fesm2022/chrv-components.mjs

@@ -7596,1851 +7596,1883 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { columnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrCellDef", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrCellDefType", required: false }] }] } });
 
-class DataGrid {
-    constructor() {
-        this.formatterService = inject(DataFormatterService);
-        this.id = signal(crypto.randomUUID(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.title = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.table = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "table" }] : /* istanbul ignore next */ []));
-        this.viewport = viewChild('viewport', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
-        this.headerScroll = viewChild('headerScroll', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerScroll" }] : /* istanbul ignore next */ []));
-        this.currentPage = model(1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-        this.pageSize = model(10, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-        // public pageChange = output<number>();
-        // public pageSizeChange = output<number>();
-        this.onInit = output();
-        this.selectedColumn = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedColumn" }] : /* istanbul ignore next */ []));
-        this.sort = model(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
-        this.filter = model({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
-        this.groupBy = model(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
-        this.cellChange = output();
-        this.rowClick = output();
-        this.enableVirtualization = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "enableVirtualization" }] : /* istanbul ignore next */ []));
-        this.allowFiltering = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowFiltering" }] : /* istanbul ignore next */ []));
-        this.allowGrouping = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowGrouping" }] : /* istanbul ignore next */ []));
-        this.allowInsert = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowInsert" }] : /* istanbul ignore next */ []));
-        this.allowUpdate = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowUpdate" }] : /* istanbul ignore next */ []));
-        this.allowDelete = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowDelete" }] : /* istanbul ignore next */ []));
-        this.allowDuplicate = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowDuplicate" }] : /* istanbul ignore next */ []));
-        this.allowSync = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowSync" }] : /* istanbul ignore next */ []));
-        this.allowRefresh = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowRefresh" }] : /* istanbul ignore next */ []));
-        this.allowNavigation = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowNavigation" }] : /* istanbul ignore next */ []));
-        this.allowExport = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowExport" }] : /* istanbul ignore next */ []));
-        this.allowManageTrackingPersistence = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowManageTrackingPersistence" }] : /* istanbul ignore next */ []));
-        this.allowManageDistincValueFetching = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowManageDistincValueFetching" }] : /* istanbul ignore next */ []));
-        this.maxHeight = input('100%', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
-        this.onExport = output();
-        this.onSync = output();
-        this.onRefresh = output();
-        this.onAddRow = output();
-        this.onDeleteRow = output();
-        /**
-         * Only supported for DB2 tables. For other types, use the onNavigate event.
-         */
-        this.onForeignTableNavigate = output();
-        this.onNavigate = output();
-        this.onFilterValueChange = output();
-        this.allowFetchDistinctValues = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowFetchDistinctValues" }] : /* istanbul ignore next */ []));
-        this.crossRequestTrackingPersistence = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "crossRequestTrackingPersistence" }] : /* istanbul ignore next */ []));
-        this.modifiedCells = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "modifiedCells" }] : /* istanbul ignore next */ []));
-        this.modifiedRows = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "modifiedRows" }] : /* istanbul ignore next */ []));
-        this.addedRows = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "addedRows" }] : /* istanbul ignore next */ []));
-        this.deletedRows = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "deletedRows" }] : /* istanbul ignore next */ []));
-        this.distinctValues = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
-        this.actions = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-        this.cellTemplates = contentChildren(ChrCellDefDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
-        this.templatesByColumn = computed(() => {
-            const map = new Map();
-            for (const t of this.cellTemplates()) {
-                const col = t.columnName();
-                if (col)
-                    map.set(col.toLowerCase(), t);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "templatesByColumn" }] : /* istanbul ignore next */ []));
-        this.templatesByType = computed(() => {
-            const map = new Map();
-            for (const t of this.cellTemplates()) {
-                const type = t.dataType();
-                if (type)
-                    map.set(type.toLowerCase(), t);
-            }
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "templatesByType" }] : /* istanbul ignore next */ []));
-        this.columnSuggestions = computed(() => {
-            const distinctVals = this.distinctValues();
-            // Si des valeurs distinctes sont fournies par le parent, on les utilise
-            if (Object.keys(distinctVals).length > 0) {
-                return distinctVals;
-            }
-            // Sinon, on utilise l'ancien comportement (valeurs locales)
-            const suggestions = {};
-            this.columns().forEach((column) => {
-                suggestions[column.columnName] = new Set();
-            });
-            this.table()?.rows.forEach((row) => {
-                this.columns().forEach((column) => {
-                    const value = row[column.columnName];
-                    if (value !== null && value !== undefined) {
-                        suggestions[column.columnName].add(value);
-                    }
-                });
-            });
-            return Object.entries(suggestions).reduce((acc, [key, value]) => {
-                acc[key] = Array.from(value);
-                return acc;
-            }, {});
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "columnSuggestions" }] : /* istanbul ignore next */ []));
-        // protected _addedRows = computed(() => this.addedRows().map((r) => r.row));
-        this.trackByMode = model('index', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "trackByMode" }] : /* istanbul ignore next */ []));
-        this.hasChanges = computed(() => {
-            return (this.addedRows().length > 0 ||
-                this.modifiedRows().length > 0 ||
-                this.deletedRows().length > 0);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
-        this.groupByMap = computed(() => {
-            const includedMap = {};
-            this.groupBy()?.included.forEach((col) => {
-                includedMap[col] = true;
-            });
-            return includedMap;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "groupByMap" }] : /* istanbul ignore next */ []));
-        this.columns = computed(() => {
-            const table = this.table();
-            const metadatas = table?.columnMetadatas || [];
-            const groupedColumns = this.groupBy()?.included || [];
-            //Sort grouped columns first then computed columns then the rest
-            if (this.groupBy() !== null)
-                return [
-                    ...metadatas.filter((col) => groupedColumns.includes(col.columnName)),
-                    ...metadatas.filter((col) => !groupedColumns.includes(col.columnName) && !col.tableName),
-                    ...metadatas.filter((col) => !groupedColumns.includes(col.columnName) && col.tableName),
-                ];
-            else
-                return metadatas;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-        this.rows = computed(() => {
-            const table = this.table();
-            if (!table)
-                return [];
-            const computedRows = [];
-            for (const row of table.rows) {
-                const rowId = table.getRowIdentifier(row);
-                const updated = this.modifiedRows().find((mr) => table.getRowIdentifier(mr.current) === rowId);
-                const deleted = this.deletedRows().find((dr) => table.getRowIdentifier(dr.row) === rowId);
-                computedRows.push({
-                    id: rowId,
-                    data: updated ? updated.current : row,
-                    flag: deleted ? 'deleted' : updated ? 'modified' : 'unchanged',
-                    valid: this.validateRow(deleted ? deleted.row : updated ? updated.current : row),
-                });
-            }
-            for (const addedEntry of this.addedRows()) {
-                const rowId = table.getRowIdentifier(addedEntry.row);
-                computedRows.push({
-                    id: rowId,
-                    data: addedEntry.row,
-                    flag: 'added',
-                    valid: this.validateRow(addedEntry.row),
-                });
-            }
-            return computedRows;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this.totalItems = computed(() => {
-            return 'total' in (this.table() || {})
-                ? this.table()?.total || -1
-                : this.table()?.count || -1;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-        this.currentItems = computed(() => {
-            return 'total' in (this.table() || {})
-                ? this.table()?.total || 0
-                : this.table()?.count || 0;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "currentItems" }] : /* istanbul ignore next */ []));
-        this.onFilterValue = (columnName, value) => {
-            if (this.allowFetchDistinctValues()) {
-                this.onFilterValueChange.emit({
-                    column: columnName,
-                    value: value,
-                });
-            }
-        };
-        this.onGroupByIncludedChange = (columnName, included) => {
-            this.groupBy.update((currentGroup) => {
-                if (currentGroup === null)
-                    return currentGroup;
-                if (included) {
-                    currentGroup?.included.push(columnName);
-                }
-                else {
-                    currentGroup.included = currentGroup.included.filter((c) => c !== columnName);
-                }
-                return { ...currentGroup };
-            });
-        };
-        this.onCellChange = (index, row, column, value) => {
-            const initial = { ...row.data };
-            row.data[column.columnName] = value;
-            // If the row is created, we don't track it as modified
-            switch (row.flag) {
-                case 'added':
-                    this.addedRows.update((rows) => rows.map((r) => {
-                        if (this.table()?.getRowIdentifier(r.row) ===
-                            this.table()?.getRowIdentifier(row.data)) {
-                            r.row[column.columnName] = value;
-                        }
-                        return r;
-                    }));
-                    // this.addedRows.update((rows) => {
-                    //   rows.find(
-                    //     (r) =>
-                    //       this.table()?.getRowIdentifier(r.row) ===
-                    //       this.table()?.getRowIdentifier(row.data)
-                    //   )!.row[column.columnName] = value;
-                    //   return [...rows];
-                    // });
-                    return;
-                case 'modified':
-                    this.modifiedRows.update((rows) => rows.map((r) => {
-                        if (r.index === index) {
-                            r.current = row.data;
-                        }
-                        return r;
-                    }));
-                    // this.modifiedRows.update((rows) => {
-                    //   const changed = this.modifiedRows().find(
-                    //     (modifiedRow) => modifiedRow.index === index
-                    //   );
-                    //   changed!.current = row.data;
-                    //   return [...rows];
-                    // });
-                    break;
-                case 'unchanged':
-                    this.modifiedRows.set([
-                        ...this.modifiedRows(),
-                        { index: index, original: initial, current: row.data },
-                    ]);
-                    break;
+class TableConstraint {
+    constructor(data = {}) {
+        this.columns = [];
+        this.constraintCatalog = data.constraintCatalog || '';
+        this.constraintSchema = data.constraintSchema || '';
+        this.constraintName = data.constraintName || '';
+        this.constraintType = data.constraintType || '';
+        this.tableCatalog = data.tableCatalog || '';
+        this.tableName = data.tableName || '';
+        this.tableSchema = data.tableSchema || '';
+        this.columns = data.columns
+            ? data.columns.map((d) => new TableConstraintColumn(d))
+            : [];
+    }
+    fullTableName() {
+        return `${this.tableSchema}.${this.tableName}`;
+    }
+    fullConstraintName() {
+        return `${this.constraintSchema}.${this.constraintName}`;
+    }
+    isPrimaryKey() {
+        return this.constraintType === 'PRIMARY KEY';
+    }
+    isForeignKey() {
+        return this.constraintType === 'FOREIGN KEY';
+    }
+    isUnique() {
+        return this.constraintType === 'UNIQUE';
+    }
+    isCheck() {
+        return this.constraintType === 'CHECK';
+    }
+}
+
+class BaseTable {
+    addRow(row) {
+        this.rows.push(row);
+        this.count += 1;
+        return row;
+    }
+    updateRow(row) {
+        const index = this.rows.findIndex((r) => this.compareRows(r, row));
+        if (index !== -1) {
+            this.rows[index] = row;
+            return true;
+        }
+        return false;
+    }
+    removeRow(row) {
+        const index = this.rows.findIndex((r) => this.compareRows(r, row));
+        if (index !== -1) {
+            this.rows.splice(index, 1);
+            this.count -= 1;
+            return true;
+        }
+        return false;
+    }
+    compareRows(row1, row2) {
+        return JSON.stringify(row1) === JSON.stringify(row2);
+    }
+    getColumnByName(columnName) {
+        return this.columnMetadatas.find((cmd) => cmd.columnName === columnName);
+    }
+    getConstraintsByType(type) {
+        return this.tableConstraints.filter((tc) => tc.constraintType === type);
+    }
+}
+class AnonymousTable extends BaseTable {
+    constructor(data) {
+        super();
+        this.catalog = data.catalog;
+        this.schema = data.schema;
+        this.name = data.name;
+        this.description = data.description;
+        this.isReadOnly = data.isReadOnly;
+        this.rowNumberIdentity = data.rowNumberIdentity;
+        this.columnMetadatas = data.columnMetadatas
+            ? data.columnMetadatas
+                .map((d) => new ColumnMetadata(d))
+                .sort((a, b) => a.ordinalPosition - b.ordinalPosition)
+            : [];
+        this.tableConstraints = data.tableConstraints
+            ? data.tableConstraints.map((d) => new TableConstraint(d))
+            : [];
+        this.hasPrimaryKey =
+            data.hasPrimaryKey === undefined ? false : Boolean(data.hasPrimaryKey);
+        this.rows = data.rows || [];
+        this.count = data.count || 0;
+        this.total = data.total || 0;
+    }
+    fullName() {
+        return `${this.schema}.${this.name}`;
+    }
+    primaryKeyColumns() {
+        const pkColumns = this.tableConstraints.filter((tc) => tc.isPrimaryKey())?.[0]?.columns;
+        if (!pkColumns || pkColumns.length === 0) {
+            const rn = this.columnMetadatas.find((cmd) => cmd.columnName === 'ROW_NUMBER');
+            return rn ? [rn] : [];
+        }
+        return this.columnMetadatas.filter((cmd) => pkColumns?.some((pc) => pc.columnName === cmd.columnName));
+    }
+    getRowIdentifier(row) {
+        if (!this.hasPrimaryKey) {
+            if (row[this.rowNumberIdentity] !== undefined) {
+                return `${row[this.rowNumberIdentity]}`;
             }
-        };
-        this.addRow = () => {
-            this.addedRows.set([
-                ...this.addedRows(),
-                { index: this.addedRows().length, row: {} },
-            ]);
-            this.onAddRow.emit();
-        };
-        this.getRowTrackBy = (row, index) => {
-            const table = this.table();
-            // return table ? table.getRowIdentifier(row) : `row-${index}`;
-            return table?.getRowNumber(row) ? table.getRowNumber(row) : index;
-        };
-        this.hasInvalidRows = () => {
-            const allRows = [
-                ...this.addedRows().map((r) => r.row),
-                ...this.modifiedRows().map((r) => r.current),
-            ];
-            return allRows.some((row) => !this.validateRow(row));
-        };
-        this.validateRow = (row) => {
-            if (this.groupBy() !== null)
-                return true;
-            return this.formatterService.validateRow(row, this.columns());
-        };
-        this.canEdit = (column) => {
-            const formatter = this.formatterService.getFormatter(null, column);
-            if (!formatter)
-                return false && this.allowUpdate();
-            return this.allowUpdate() && formatter.canEdit(null, column);
-        };
-        this.isPrimaryKeyColumn = (column) => {
-            const table = this.table();
-            if (!table)
-                return false;
-            return table
-                .primaryKeyColumns()
-                .some((pk) => pk.columnName === column.columnName);
-        };
-        this.isUniqueKeyColumn = (column) => {
-            const table = this.table();
-            if (!table)
-                return false;
-            const uniqueConstraints = table.tableConstraints.filter((tc) => tc.constraintType === 'UNIQUE');
-            for (const uc of uniqueConstraints) {
-                if (uc.columns.some((col) => col.columnName === column.columnName)) {
-                    return true;
+        }
+        const pkColumns = this.primaryKeyColumns();
+        if (this.hasPrimaryKey && pkColumns.length > 0) {
+            let key = '';
+            let index = 0;
+            for (const pc of pkColumns) {
+                if (row[pc.columnName] === undefined || row[pc.columnName] === null) {
+                    if (row[this.rowNumberIdentity] !== undefined)
+                        return `${row[this.rowNumberIdentity]}`;
+                    else
+                        break;
                 }
-            }
-            return false;
-        };
-        this.isEditSafe = (column) => {
-            if (this.groupBy() !== null)
-                return false;
-            if (this.trackByMode() === 'index')
-                return true;
-            if (this.crossRequestTrackingPersistence() === false)
-                return true;
-            return (this.trackByMode() === 'primaryKey' &&
-                this.table()
-                    ?.primaryKeyColumns()
-                    .some((pk) => pk.columnName === column.columnName) == false);
-        };
-        this.isForeignKeyColumn = (column) => {
-            const table = this.table();
-            if (!table)
-                return false;
-            const fkConstraints = table.tableConstraints.filter((tc) => tc.constraintType === 'FOREIGN KEY');
-            for (const fk of fkConstraints) {
-                if (fk.columns.some((col) => col.columnName === column.columnName)) {
-                    return true;
+                if (index == pkColumns.length - 1) {
+                    key += `${pc.columnName}:${row[pc.columnName]}`;
                 }
+                else
+                    key += `${pc.columnName}:${row[pc.columnName]}|`;
+                index++;
             }
-            return false;
-        };
-        this.datagridContextMenuActions = (column, filterElement, groupElement) => {
-            const actions = [
-                {
-                    label: 'Trier par ordre croissant',
-                    icon: 'arrow_upward',
-                    action: () => this.setSort(column, true),
-                },
-                {
-                    label: 'Trier par ordre décroissant',
-                    icon: 'arrow_downward',
-                    action: () => this.setSort(column, false),
-                },
-                {
-                    label: 'Effacer le tri',
-                    icon: 'clear',
-                    action: () => this.sort.set(null),
-                },
-            ];
-            if (filterElement && this.allowFiltering()) {
-                actions.push({
-                    label: 'Filtrer sur cette colonne...',
-                    icon: 'filter_list',
-                    action: () => filterElement.toggle(),
-                });
-            }
-            if (groupElement && this.allowGrouping()) {
-                actions.push({
-                    label: 'Grouper par cette colonne',
-                    icon: 'group',
-                    action: () => groupElement.isOpen.set(true),
-                });
-            }
-            return actions;
-        };
-        this.datarowContextMenuActions = (row, rowIndex) => {
-            const items = [];
-            for (const action of this.actions()) {
-                items.push({
-                    label: action.display,
-                    action: action.callback.bind(null, row.data),
-                    color: action.color,
-                    icon: action.icon,
-                });
-            }
-            switch (row.flag) {
-                case 'deleted':
-                    items.push({
-                        label: 'Annuler la suppression',
-                        action: () => this.deletedRows.set(this.deletedRows().filter((r) => r.index !== rowIndex)),
-                        icon: 'undo',
-                        color: 'primary',
-                    });
-                    break;
-                case 'added':
-                    items.push({
-                        label: 'Supprimer la ligne ajoutée',
-                        action: () => {
-                            this.addedRows.update((rows) => rows.filter((r) => this.table().getRowIdentifier(r.row) !== row.id));
-                            this.table()?.removeRow(row);
-                        },
-                        icon: 'delete',
-                        color: 'error',
-                    });
-                    break;
-                default:
-                    if (this.allowInsert() && this.allowDuplicate()) {
-                        items.push({
-                            label: 'Dupliquer la ligne',
-                            action: () => {
-                                const newRow = {
-                                    [`${this.table()?.getRowIdentifier(row.data)}`]: this.addedRows().length + 1,
-                                    ...row.data,
-                                };
-                                this.addedRows.set([
-                                    ...this.addedRows(),
-                                    { index: this.addedRows().length, row: newRow },
-                                ]);
-                            },
-                            icon: 'file_copy',
-                            color: 'primary',
-                        });
-                    }
-                    if (this.allowDelete()) {
-                        items.push({
-                            label: 'Supprimer la ligne',
-                            action: () => this.deleteRow(rowIndex, row.data),
-                            icon: 'delete',
-                            color: 'error',
-                        });
-                    }
-                    break;
-            }
-            return items;
-        };
-        this.onAdd = () => {
-            this.onAddRow.emit();
-            setTimeout(() => {
-                this.viewport()?.scrollTo({ bottom: 0 });
-            }, 250);
-        };
-        this.log = (event) => {
-            console.log(`[DataGrid-${this.id()}]`, event);
-        };
-        effect(() => {
-            if (this.table() && !this.crossRequestTrackingPersistence()) {
-                this.resetChanges();
-            }
-        });
-        effect(() => {
-            const mode = this.table()?.hasPrimaryKey ? 'primaryKey' : 'index';
-            this.trackByMode.set(mode);
-        });
+            return key;
+        }
+        return JSON.stringify(row);
     }
-    ngOnInit() {
-        this.onInit.emit();
+    getRowNumber(row) {
+        return row[this.rowNumberIdentity];
+    }
+    compareRows(row1, row2) {
+        if (!this.hasPrimaryKey) {
+            if (row1[this.rowNumberIdentity] !== undefined &&
+                row2[this.rowNumberIdentity] !== undefined) {
+                return row1[this.rowNumberIdentity] === row2[this.rowNumberIdentity];
+            }
+        }
+        const pkColumns = this.primaryKeyColumns();
+        if (this.hasPrimaryKey && pkColumns.length > 0) {
+            return pkColumns.every((pc) => row1[pc.columnName] === row2[pc.columnName]);
+        }
+        return super.compareRows(row1, row2);
     }
-    ngOnDestroy() { }
-    getColumnTooltip(column) {
-        return column.tooltip;
+    addRow(row) {
+        row[this.rowNumberIdentity] = this.generateTempRowIdentifier();
+        return super.addRow(row);
     }
-    toggleSort(columnName) {
-        const currentSort = this.sort();
-        let isAsc = true;
-        if (currentSort?.column === columnName)
-            isAsc = !currentSort.isAsc;
-        this.sort.set({ column: columnName, isAsc: isAsc });
+    generateTempRowIdentifier() {
+        return crypto.randomUUID();
     }
-    setSort(columnName, isAsc) {
-        this.sort.set({ column: columnName, isAsc: isAsc });
+}
+
+class AutoDataTable extends BaseTable {
+    get columnMetadatas() {
+        return this._columnMetadatas.sort((a, b) => a.ordinalPosition - b.ordinalPosition);
     }
-    onFilterBy(columnName, filter) {
-        const currentFilters = { ...this.filter() };
-        if (filter.value) {
-            currentFilters[columnName] = {
-                column: filter.column,
-                mode: filter.mode,
-                value: filter.value,
-            };
-        }
-        else {
-            delete currentFilters[columnName];
-        }
-        this.filter.set(currentFilters);
+    set columnMetadatas(value) {
+        this._columnMetadatas = value;
     }
-    onGroupBy(group) {
-        if (group.mode === null)
-            this.groupBy.set(null);
-        else {
-            // group.included =
-            //   this.table()?.columnMetadatas.map((c) => c.columnName) || [];
-            group.included = [group.column];
-            this.groupBy.set(group);
-        }
+    get rows() {
+        return this._rows;
     }
-    // Event handlers for pagination
-    onPageChange(page) {
-        this.currentPage.set(page);
+    set rows(value) {
+        this.count = value.length;
+        this._rows = value.map((row, index) => {
+            if (!this.hasPrimaryKey && !row.hasOwnProperty(this.rowNumberIdentity)) {
+                return { [this.rowNumberIdentity]: index + 1, ...row };
+            }
+            return row;
+        });
+        this.deduceColumnTypes();
     }
-    onPageSizeChange(pageSize) {
-        this.pageSize.set(pageSize);
+    constructor(name, primaryKey = null, metadatas = [], rowIdentifier = 'ROW_NUMBER') {
+        super();
+        this.name = '';
+        this.schema = '';
+        this.total = 0;
+        this._columnMetadatas = [];
+        this.tableConstraints = [];
+        this._primaryKey = null;
+        this.hasPrimaryKey = this._primaryKey !== null;
+        this._rows = [];
+        this.count = 0;
+        this.getRowIdentifier = (row) => {
+            if (this._primaryKey && row.hasOwnProperty(this._primaryKey)) {
+                if (Array.isArray(this._primaryKey)) {
+                    return this._primaryKey.map((key) => row[key]).join('_');
+                }
+                return row[this._primaryKey].toString();
+            }
+            return row[this.rowNumberIdentity].toString();
+        };
+        this.getRowNumber = (row) => {
+            return row[this.rowNumberIdentity];
+        };
+        this.primaryKeyColumns = () => {
+            if (!this._primaryKey) {
+                return [];
+            }
+            return this.columnMetadatas.filter((col) => col.columnName === this._primaryKey);
+        };
+        this.deduceColumnTypes = () => {
+            if (this.rows.length === 0) {
+                return;
+            }
+            if (this.columnMetadatas.length !== 0)
+                return;
+            for (const key of Object.keys(this.rows[0])) {
+                const inferredType = typeof this.rows[0][key];
+                const existingIndex = this.columnMetadatas.findIndex((md) => md.columnName === key);
+                const existingMetadata = this.columnMetadatas[existingIndex];
+                if (!existingMetadata) {
+                    const md = {
+                        ordinalPosition: this.columnMetadatas.length + 1,
+                        length: 0,
+                        tableName: this.name,
+                        tableSchema: this.schema,
+                        isIdentity: false,
+                        isGenerated: false,
+                        isUpdatable: false,
+                        tooltip: `${inferredType} ${length ? `(${inferredType})` : ''}`,
+                        columnName: key,
+                        dataType: inferredType,
+                        isNullable: false,
+                    };
+                    this.columnMetadatas.push(md);
+                }
+            }
+        };
+        /**
+         * Retourne une copie de l'AutoDataTable
+         */
+        this.clone = () => {
+            const copy = new AutoDataTable(this.name, this._primaryKey, this.columnMetadatas, this.rowNumberIdentity);
+            for (const key of Object.keys(this)) {
+                if (Array.isArray(this[key])) {
+                    copy[key] = [...this[key]];
+                }
+                else {
+                    copy[key] = this[key];
+                }
+            }
+            return copy;
+        };
+        this.name = name;
+        this._primaryKey = primaryKey;
+        this.hasPrimaryKey = this._primaryKey !== null;
+        this.rowNumberIdentity = rowIdentifier;
+        this.columnMetadatas = metadatas.map((md, index) => ({
+            displayName: md.displayName || md.columnName,
+            ordinalPosition: index + 1,
+            length: 0,
+            tableName: this.name,
+            tableSchema: this.schema,
+            isIdentity: false,
+            isGenerated: false,
+            isUpdatable: false,
+            tooltip: `${md.dataType?.toUpperCase()} ${md.length ? `(${md.length})` : ''}`,
+            ...md,
+        }));
     }
-    refresh() {
-        this.onRefresh.emit();
-        // this.sort.set(null);
-        // this.filter.set({});
+}
+
+class AutoDataSource {
+    constructor(config) {
+        this._subscriptions = [];
+        // Signaux internes
+        this._datagrid = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_datagrid" }] : /* istanbul ignore next */ []));
+        this._datagridElement = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_datagridElement" }] : /* istanbul ignore next */ []));
+        this._data = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+        // protected _currentPage = signal(1);
+        // protected _pageSize = signal(10);
+        this._sort = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_sort" }] : /* istanbul ignore next */ []));
+        this._filter = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
+        this._groupBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_groupBy" }] : /* istanbul ignore next */ []));
+        this._loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+        this._error = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
+        // Données exposées (read-only)
+        this.data = this._data.asReadonly();
+        // public readonly currentPage: Signal<number> = this._currentPage.asReadonly();
+        // public readonly pageSize: Signal<number> = this._pageSize.asReadonly();
+        this.sort = this._sort.asReadonly();
+        this.filter = this._filter.asReadonly();
+        this.groupBy = this._groupBy.asReadonly();
+        this.loading = this._loading.asReadonly();
+        this.error = this._error.asReadonly();
+        // Données traitées
+        this.processedData = computed(() => {
+            let result = this._data();
+            if (!result)
+                return undefined;
+            result.total = result.rows.length ?? -1;
+            // Filtrage côté client
+            if (this.config.enableClientSideFiltering) {
+                result = this.applyFilters(result, this.filter());
+            }
+            // Tri côté client
+            if (this.config.enableClientSideSorting) {
+                result = this.applySort(result, this._sort());
+            }
+            // Pagination côté client
+            if (this.config.enableClientSidePagination) {
+                // Do nothing, it is handled by the data grid directly
+            }
+            result.count = result.rows.length;
+            return result;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
+        this.config = {
+            initialData: config?.initialData,
+            pageSize: config?.pageSize ?? 10,
+            enableClientSidePagination: config?.enableClientSidePagination ?? true,
+            enableClientSideFiltering: config?.enableClientSideFiltering ?? true,
+            enableClientSideSorting: config?.enableClientSideSorting ?? true,
+        };
+        if (this.config.initialData) {
+            this._data.set(this.config.initialData);
+        }
+        // this._pageSize.set(this.config.pageSize);
+        effect(() => {
+            if (this.processedData() && this._datagrid()) {
+                this._datagrid().table.set(this.processedData());
+                this._datagrid().ngOnDestroy = () => {
+                    this._datagrid()?.ngOnDestroy();
+                    this._datagrid.set(null);
+                    for (const sub of this._subscriptions) {
+                        sub.unsubscribe();
+                    }
+                };
+            }
+        });
     }
-    getCellValue(row, columnName) {
-        return row && row[columnName] !== undefined ? row[columnName] : '';
+    // Méthode pour enregistrer la datagrid et écouter les événements de base
+    registerDataGrid(element) {
+        if (!element)
+            return;
+        this._datagridElement.set(element instanceof ElementRef ? element : null);
+        const datagrid = (element instanceof ElementRef ? element.nativeElement : element);
+        this._datagrid.set(datagrid);
+        this._subscriptions.push(
+        // datagrid.pageChange.subscribe((page: number) => {
+        //   console.log(
+        //     'Page change event received:',
+        //     page,
+        //     this._datagridElement(),
+        //     element,
+        //   );
+        //   // this._subscriptions.push(this.handlePageChange(page).subscribe());
+        // }),
+        // datagrid.pageSizeChange.subscribe((pageSize: number) => {
+        //   // this._subscriptions
+        //   //   .push(
+        //   //   this.handlePageSizeChange(pageSize).subscribe(),
+        //   //   );
+        // }),
+        datagrid.sort.subscribe((sort) => {
+            this._subscriptions.push(this.handleSortChange(sort).subscribe());
+        }), datagrid.filter.subscribe((filter) => {
+            this._subscriptions.push(this.handleFilterChange(filter).subscribe());
+        }), datagrid.groupBy.subscribe((group) => {
+            this._subscriptions.push(this.handleGroupChange(group).subscribe());
+        }));
     }
-    isRowAdded(row, index) {
-        return this.addedRows().some((addedRow) => addedRow.index === index);
+    // Méthodes publiques pour gérer les événements de la datagrid
+    // public handlePageChange(page: number): Observable<void> {
+    //   this._currentPage.set(page);
+    //   return this.onPageChange(page);
+    // }
+    // public handlePageSizeChange(pageSize: number): Observable<void> {
+    //   this._pageSize.set(pageSize);
+    //   this._currentPage.set(1); // Reset à la première page
+    //   return this.onPageSizeChange(pageSize);
+    // }
+    handleSortChange(sort) {
+        this._sort.set(sort);
+        return this.onSortChange(sort);
     }
-    isRowChanged(row, index) {
-        return this.modifiedRows().some((modifiedRow) => modifiedRow.index === index);
+    handleFilterChange(filter) {
+        this._filter.set(filter);
+        this._datagrid()?.currentPage.set(1); // Reset à la première page
+        return this.onFilterChange(filter);
     }
-    isCellChanged(rowIndex, columnName) {
-        return this.modifiedCells().some((cell) => cell.rowIndex === rowIndex && cell.columnName === columnName);
+    handleGroupChange(group) {
+        this._groupBy.set(group);
+        this._datagrid()?.currentPage.set(1); // Reset à la première page
+        return this.onGroupChange(group);
     }
-    isRowDeleted(row, index) {
-        return this.deletedRows().some((deletedRow) => deletedRow.index === index);
+    refresh() {
+        return this.loadData();
     }
-    deleteRow(index, row) {
-        // If the row was modified, we need to get the original value and remove it from modifiedRows
-        if (this.isRowChanged(row, index)) {
-            const original = this.modifiedRows().find((modifiedRow) => modifiedRow.index === index)
-                ?.original || row;
-            this.deletedRows.set([...this.deletedRows(), { index, row: original }]);
-            this.modifiedRows.set(this.modifiedRows().filter((modifiedRow) => modifiedRow.index !== index));
+    setRows(rows) {
+        if (!this._data()) {
             return;
         }
-        // If the row was added, we just remove it from addedRows
-        if (this.isRowAdded(row, index)) {
-            this.addedRows.set(this.addedRows().filter((addedRow) => addedRow.index !== index));
-        }
-        if (!this.isRowDeleted(row, index)) {
-            this.deletedRows.set([...this.deletedRows(), { index, row }]);
-        }
-        this.onDeleteRow.emit({ index, row });
+        const updated = this._data().clone();
+        updated.rows = rows;
+        updated.total = rows.length;
+        this._data.set(updated);
     }
-    navigateToForeignTable(column) {
-        if (!this.allowNavigation())
-            return;
-        if (column instanceof ColumnMetadata) {
-            this.table()
-                ?.getConstraintsByType('FOREIGN KEY')
-                .forEach((constraint) => {
-                const cstCol = constraint.columns.find((c) => c.columnName === column.columnName);
-                if (cstCol && cstCol instanceof TableConstraintColumn) {
-                    const reference = cstCol
-                        .reference;
-                    if (reference) {
-                        return this.onForeignTableNavigate.emit({
-                            targetTable: cstCol.reference.otherKey.tableName,
-                            targetSchema: cstCol.reference.otherKey.tableSchema,
-                        });
-                    }
-                }
-            });
-        }
-        else {
-            this.onNavigate.emit({ targetColumnMetadata: column });
-        }
+    setData(data) {
+        this._data.set(data);
     }
-    resetChanges() {
-        this.modifiedRows.set([]);
-        this.addedRows.set([]);
-        this.deletedRows.set([]);
+    // Méthodes virtuelles à surcharger pour créer une data source serveur-side
+    onPageChange(page) {
+        // Comportement par défaut : rien (pagination côté client)
+        return of(void 0);
     }
-    getChangeSummary() {
-        const modified = this.modifiedRows();
-        const added = this.addedRows();
-        const deleted = this.deletedRows();
-        return {
-            modified,
-            added,
-            deleted,
-            hasChanges: modified.length > 0 || added.length > 0 || deleted.length > 0,
-        };
+    onPageSizeChange(pageSize) {
+        // Comportement par défaut : rien (pagination côté client)
+        return of(void 0);
     }
-    getCellTemplate(columnName, dataType) {
-        const colMatch = this.templatesByColumn().get(columnName.toLowerCase());
-        if (colMatch)
-            return colMatch.template;
-        const typeMatch = this.templatesByType().get(dataType.toLowerCase());
-        if (typeMatch)
-            return typeMatch.template;
-        return null;
+    onSortChange(sort) {
+        // Comportement par défaut : rien (tri côté client)
+        return of(void 0);
     }
-    toggleCrossRequestTrackingPersistence() {
-        this.crossRequestTrackingPersistence.set(!this.crossRequestTrackingPersistence());
+    onFilterChange(filter) {
+        // Comportement par défaut : rien (filtrage côté client)
+        return of(void 0);
     }
-    toggleAllowFetchDistinctValues() {
-        this.allowFetchDistinctValues.set(!this.allowFetchDistinctValues());
+    onGroupChange(group) {
+        // Comportement par défaut : rien
+        return of(void 0);
     }
-    onViewportScroll(event) {
-        const viewport = event.target;
-        const headerScrollElement = this.headerScroll()?.nativeElement;
-        if (headerScrollElement) {
-            headerScrollElement.scrollLeft = viewport.scrollLeft;
-        }
+    loadData() {
+        // À surcharger pour charger les données
+        return of(void 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualization: { classPropertyName: "enableVirtualization", publicName: "enableVirtualization", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, allowGrouping: { classPropertyName: "allowGrouping", publicName: "allowGrouping", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicate: { classPropertyName: "allowDuplicate", publicName: "allowDuplicate", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, allowManageTrackingPersistence: { classPropertyName: "allowManageTrackingPersistence", publicName: "allowManageTrackingPersistence", isSignal: true, isRequired: false, transformFunction: null }, allowManageDistincValueFetching: { classPropertyName: "allowManageDistincValueFetching", publicName: "allowManageDistincValueFetching", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, allowFetchDistinctValues: { classPropertyName: "allowFetchDistinctValues", publicName: "allowFetchDistinctValues", isSignal: true, isRequired: false, transformFunction: null }, crossRequestTrackingPersistence: { classPropertyName: "crossRequestTrackingPersistence", publicName: "crossRequestTrackingPersistence", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, trackByMode: { classPropertyName: "trackByMode", publicName: "trackByMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { table: "tableChange", currentPage: "currentPageChange", pageSize: "pageSizeChange", onInit: "onInit", sort: "sortChange", filter: "filterChange", groupBy: "groupByChange", cellChange: "cellChange", rowClick: "rowClick", onExport: "onExport", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onForeignTableNavigate: "onForeignTableNavigate", onNavigate: "onNavigate", onFilterValueChange: "onFilterValueChange", allowFetchDistinctValues: "allowFetchDistinctValuesChange", crossRequestTrackingPersistence: "crossRequestTrackingPersistenceChange", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange", trackByMode: "trackByModeChange" }, providers: [
-            PaginationService,
-            {
-                provide: CHR_DEBOUNCE_DEFAULTS,
-                useValue: new DebounceDefaults({ hoverTitle: 0 }),
-            },
-            // {
-            //   provide: VIRTUAL_SCROLL_STRATEGY,
-            //   useClass: DynamicSizeScrollStrategy,
-            // },
-        ], queries: [{ propertyName: "cellTemplates", predicate: ChrCellDefDirective, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema ? `${table()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n        @if(table()?.description){\r\n        <span class=\"table-description\">{{ table()?.description }}</span>\r\n        }\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowManageDistincValueFetching()){\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n                    title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n            </div>\r\n            }\r\n            @if (allowSync() && allowManageTrackingPersistence()) {\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n                    (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n                    title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n            </div>\r\n            }\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            @if(allowExport()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n                title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n            }\r\n            @if(totalItems() !== -1){\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"grid-container data-grid-wrapper\"\r\n        [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n        [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n        <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            @let isForeignKey = isForeignKeyColumn(column);\r\n            @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n            @let isComputedColumn = column.isGenerated;\r\n            @let isUniqueColumn = isUniqueKeyColumn(column);\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"grid-body\">\r\n            @if(enableVirtualization()){\r\n            <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n                <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n                                    this.id(),\r\n                                    totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n                </ng-container>\r\n            </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n            @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n            this.id(),\r\n            totalItems: currentItems()};\r\n            track getRowTrackBy(row.data, $index)) {\r\n            <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n            </ng-container>\r\n            }\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n        let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n        <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n            [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n            [title]=\"getColumnTooltip(column)\">\r\n            @if(allowNavigation() && isForeignKey){\r\n            <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n                (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n                }}</span>\r\n            } @else {\r\n            <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n                column.columnName\r\n                }}</span>\r\n            }\r\n            <small class=\"sort-receiver column-type\" (click)=\"toggleSort(column.columnName)\">{{\r\n                column.dataType }}\r\n                {{column.length ?\r\n                `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n            <div class=\"column-icons\">\r\n                @if(isUniqueColumn){\r\n                <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n                }\r\n                @if(isPrimaryKey || isForeignKey){\r\n                <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n                    'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n                }\r\n                @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n                <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n                }\r\n            </div>\r\n            @if (sort()?.column === column.columnName) {\r\n            @if (sort()?.isAsc) {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_downward</span>\r\n            }\r\n            }\r\n            <div class=\"filter-group-controls\" #controls>\r\n                <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n                    [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n                    [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                    [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n                    (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n                    (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n                    class=\"filter\"></chr-column-filter>\r\n                @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n                <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n                    [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n                    [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n                    title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n                @if(isComputedColumn){\r\n                <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n                }@else if(!isGroupBySource && groupBy() !== null){\r\n                <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n                    <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n                    <span class=\"toggle faded\">Inclure</span>\r\n                    <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n                        (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n                        [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let contextMenuItems = datarowContextMenuActions(row, index);\r\n        <div #rowElement class=\"grid-row\"\r\n            [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n            [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n            (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n            [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n                <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\" [row]=\"row.data\"\r\n                    [customTemplate]=\"getCellTemplate(column.columnName, column.dataType ?? 'varchar')\"\r\n                    (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n                @if($last){\r\n                @if(actions().length > 0){\r\n                <div class=\"actions-menu\">\r\n                    <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n                        [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "customTemplate", "row", "value", "columnMetadata"], outputs: ["valueChange", "isEditingChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu", "openOnClick"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "suggestions", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ColumnGroup, selector: "chr-column-group", inputs: ["isOpen", "by", "mode"], outputs: ["isOpenChange", "modeChange", "groupChange"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataGrid, decorators: [{
-            type: Component,
-            args: [{ selector: 'chr-data-grid', imports: [
-                        CommonModule,
-                        ChrPaginatorComponent,
-                        NgxPaginationModule,
-                        EditableCell,
-                        ContextMenuDirective,
-                        ScrollIntoViewDirective,
-                        ControlClickDirective,
-                        ColumnFilter,
-                        ScrollingModule,
-                        ColumnGroup,
-                        ChrHoverTitleDirective,
-                    ], providers: [
-                        PaginationService,
-                        {
-                            provide: CHR_DEBOUNCE_DEFAULTS,
-                            useValue: new DebounceDefaults({ hoverTitle: 0 }),
-                        },
-                        // {
-                        //   provide: VIRTUAL_SCROLL_STRATEGY,
-                        //   useClass: DynamicSizeScrollStrategy,
-                        // },
-                    ], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema ? `${table()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n        @if(table()?.description){\r\n        <span class=\"table-description\">{{ table()?.description }}</span>\r\n        }\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowManageDistincValueFetching()){\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n                    title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n            </div>\r\n            }\r\n            @if (allowSync() && allowManageTrackingPersistence()) {\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n                    (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n                    title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n            </div>\r\n            }\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            @if(allowExport()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n                title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n            }\r\n            @if(totalItems() !== -1){\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"grid-container data-grid-wrapper\"\r\n        [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n        [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n        <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            @let isForeignKey = isForeignKeyColumn(column);\r\n            @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n            @let isComputedColumn = column.isGenerated;\r\n            @let isUniqueColumn = isUniqueKeyColumn(column);\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"grid-body\">\r\n            @if(enableVirtualization()){\r\n            <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n                <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n                                    this.id(),\r\n                                    totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n                </ng-container>\r\n            </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n            @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n            this.id(),\r\n            totalItems: currentItems()};\r\n            track getRowTrackBy(row.data, $index)) {\r\n            <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n            </ng-container>\r\n            }\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n        let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n        <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n            [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n            [title]=\"getColumnTooltip(column)\">\r\n            @if(allowNavigation() && isForeignKey){\r\n            <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n                (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n                }}</span>\r\n            } @else {\r\n            <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n                column.columnName\r\n                }}</span>\r\n            }\r\n            <small class=\"sort-receiver column-type\" (click)=\"toggleSort(column.columnName)\">{{\r\n                column.dataType }}\r\n                {{column.length ?\r\n                `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n            <div class=\"column-icons\">\r\n                @if(isUniqueColumn){\r\n                <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n                }\r\n                @if(isPrimaryKey || isForeignKey){\r\n                <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n                    'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n                }\r\n                @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n                <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n                }\r\n            </div>\r\n            @if (sort()?.column === column.columnName) {\r\n            @if (sort()?.isAsc) {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_downward</span>\r\n            }\r\n            }\r\n            <div class=\"filter-group-controls\" #controls>\r\n                <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n                    [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n                    [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                    [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n                    (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n                    (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n                    class=\"filter\"></chr-column-filter>\r\n                @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n                <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n                    [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n                    [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n                    title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n                @if(isComputedColumn){\r\n                <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n                }@else if(!isGroupBySource && groupBy() !== null){\r\n                <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n                    <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n                    <span class=\"toggle faded\">Inclure</span>\r\n                    <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n                        (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n                        [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let contextMenuItems = datarowContextMenuActions(row, index);\r\n        <div #rowElement class=\"grid-row\"\r\n            [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n            [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n            (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n            [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n                <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\" [row]=\"row.data\"\r\n                    [customTemplate]=\"getCellTemplate(column.columnName, column.dataType ?? 'varchar')\"\r\n                    (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n                @if($last){\r\n                @if(actions().length > 0){\r\n                <div class=\"actions-menu\">\r\n                    <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n                        [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }, { type: i0.Output, args: ["tableChange"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], onInit: [{ type: i0.Output, args: ["onInit"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }, { type: i0.Output, args: ["groupByChange"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], enableVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualization", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], allowGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGrouping", required: false }] }], allowInsert: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowInsert", required: false }] }], allowUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUpdate", required: false }] }], allowDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDelete", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], allowSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSync", required: false }] }], allowRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRefresh", required: false }] }], allowNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNavigation", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], allowManageTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageTrackingPersistence", required: false }] }], allowManageDistincValueFetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageDistincValueFetching", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], onExport: [{ type: i0.Output, args: ["onExport"] }], onSync: [{ type: i0.Output, args: ["onSync"] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }], onAddRow: [{ type: i0.Output, args: ["onAddRow"] }], onDeleteRow: [{ type: i0.Output, args: ["onDeleteRow"] }], onForeignTableNavigate: [{ type: i0.Output, args: ["onForeignTableNavigate"] }], onNavigate: [{ type: i0.Output, args: ["onNavigate"] }], onFilterValueChange: [{ type: i0.Output, args: ["onFilterValueChange"] }], allowFetchDistinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFetchDistinctValues", required: false }] }, { type: i0.Output, args: ["allowFetchDistinctValuesChange"] }], crossRequestTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossRequestTrackingPersistence", required: false }] }, { type: i0.Output, args: ["crossRequestTrackingPersistenceChange"] }], modifiedCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedCells", required: false }] }, { type: i0.Output, args: ["modifiedCellsChange"] }], modifiedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedRows", required: false }] }, { type: i0.Output, args: ["modifiedRowsChange"] }], addedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedRows", required: false }] }, { type: i0.Output, args: ["addedRowsChange"] }], deletedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedRows", required: false }] }, { type: i0.Output, args: ["deletedRowsChange"] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChrCellDefDirective), { isSignal: true }] }], trackByMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByMode", required: false }] }, { type: i0.Output, args: ["trackByModeChange"] }] } });
-
-class MessageBanner {
-    constructor() {
-        this.isVisible = signal(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
-        this.closable = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
-        this.title = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.icon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        this.message = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
-        this.type = input('none', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.close = () => {
-            this.isVisible.set(false);
-        };
+    // Méthodes de traitement côté client (peuvent être surchargées)
+    applyFilters(data, filters) {
+        if (Object.keys(filters).length === 0)
+            return data;
+        const filteredRows = data.rows.filter((row) => {
+            return Object.values(filters).every((filter) => {
+                const value = row[filter.column];
+                const filterValue = String(filter.value).toLowerCase();
+                const stringValue = String(value ?? '').toLowerCase();
+                switch (filter.mode) {
+                    case DGFilterMode.CONTAINS:
+                        return stringValue.includes(filterValue);
+                    case DGFilterMode.STARTS_WITH:
+                        return stringValue.startsWith(filterValue);
+                    case DGFilterMode.ENDS_WITH:
+                        return stringValue.endsWith(filterValue);
+                    case DGFilterMode.EQUALS:
+                        return stringValue === filterValue;
+                    case DGFilterMode.NOT_EQUALS:
+                        return stringValue !== filterValue;
+                    case DGFilterMode.GREATER_OR_EQUAL:
+                        return Number(value) >= Number(filter.value);
+                    case DGFilterMode.LOWER_OR_EQUAL:
+                        return Number(value) <= Number(filter.value);
+                    default:
+                        return true;
+                }
+            });
+        });
+        const cloned = data.clone();
+        cloned.rows = filteredRows;
+        return cloned;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        @if(icon()){\r\n        <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n        }\r\n        @if(title()){\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n        }\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, decorators: [{
-            type: Component,
-            args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        @if(icon()){\r\n        <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n        }\r\n        @if(title()){\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n        }\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
-        }], propDecorators: { closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
-
-class Spinner {
-    constructor() {
-        this.spinnerService = inject(SpinnerService);
-        this.shown = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
-        this.isLoading = this.spinnerService.isLoading;
-        this.shouldShow = computed(() => this.isLoading() || this.shown(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    applySort(data, sort) {
+        if (!sort)
+            return data;
+        const sortedRows = [...data.rows].sort((a, b) => {
+            const aValue = a[sort.column];
+            const bValue = b[sort.column];
+            if (aValue === bValue)
+                return 0;
+            if (aValue === null || aValue === undefined)
+                return 1;
+            if (bValue === null || bValue === undefined)
+                return -1;
+            const comparison = aValue > bValue ? 1 : -1;
+            return sort.isAsc ? comparison : -comparison;
+        });
+        const cloned = data.clone();
+        cloned.rows = sortedRows;
+        return cloned;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Spinner, isStandalone: true, selector: "chr-spinner", inputs: { shown: { classPropertyName: "shown", publicName: "shown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\r\n<div class=\"spinner-backdrop\">\r\n    <div class=\"spinner-container\">\r\n        <div class=\"pulse-rings\">\r\n            <div class=\"pulse-ring pulse-ring-1\"></div>\r\n            <div class=\"pulse-ring pulse-ring-2\"></div>\r\n            <div class=\"pulse-ring pulse-ring-3\"></div>\r\n            <div class=\"pulse-ring pulse-ring-4\"></div>\r\n        </div>\r\n\r\n        <div class=\"loading-text\">\r\n            <p>Chargement...</p>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";.spinner-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,black 40%,transparent);display:flex;justify-content:center;align-items:center;z-index:9997;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease-in-out}.spinner-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:3rem;border-radius:1.5rem;min-width:250px;animation:slideUp .4s ease-out}.pulse-rings{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;border:3px solid transparent;border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(.25,.46,.45,.94) infinite}.pulse-ring-1{width:40px;height:40px;border-color:var(--primary-color);animation-delay:0s;box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 30%,transparent)}.pulse-ring-2{width:60px;height:60px;border-color:var(--tertiary-color);animation-delay:.6s;box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 25%,transparent)}.pulse-ring-3{width:80px;height:80px;border-color:var(--secondary-color);animation-delay:1.2s;box-shadow:0 0 30px color-mix(in srgb,var(--secondary-color) 20%,transparent)}.pulse-ring-4{width:100px;height:100px;border-color:var(--primary-color);animation-delay:1.8s;opacity:.7;box-shadow:0 0 35px color-mix(in srgb,var(--primary-color) 15%,transparent)}.loading-text{text-align:center;color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loading-text p{margin:0;font-size:1.2rem;font-weight:500;color:var(--primary-color);letter-spacing:.5px;animation:text-pulse 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse-ring{0%{transform:scale(.6);opacity:1;border-width:4px}50%{opacity:.8;border-width:2px}to{transform:scale(1.3);opacity:0;border-width:1px}}@keyframes text-pulse{0%,to{opacity:.8}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--primary-color) 30%,transparent)}}@media(max-width:768px){.spinner-container{min-width:200px;padding:2rem;gap:1.5rem}.pulse-rings{width:100px;height:100px}.pulse-ring-1{width:35px;height:35px}.pulse-ring-2{width:50px;height:50px}.pulse-ring-3{width:65px;height:65px}.pulse-ring-4{width:80px;height:80px}.loading-text p{font-size:1rem}}.dark-theme .spinner-container{box-shadow:0 20px 40px color-mix(in srgb,black 40%,transparent);border-color:var(--neutral-color)}.dark-theme .pulse-ring-1{box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 50%,transparent)}.dark-theme .pulse-ring-2{box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 40%,transparent)}.as400-theme .pulse-ring{filter:drop-shadow(0 0 8px var(--primary-color))}.as400-theme .loading-text p{text-shadow:0 0 10px var(--primary-color)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Spinner, decorators: [{
-            type: Component,
-            args: [{ selector: 'chr-spinner', imports: [], template: "@if (shouldShow()) {\r\n<div class=\"spinner-backdrop\">\r\n    <div class=\"spinner-container\">\r\n        <div class=\"pulse-rings\">\r\n            <div class=\"pulse-ring pulse-ring-1\"></div>\r\n            <div class=\"pulse-ring pulse-ring-2\"></div>\r\n            <div class=\"pulse-ring pulse-ring-3\"></div>\r\n            <div class=\"pulse-ring pulse-ring-4\"></div>\r\n        </div>\r\n\r\n        <div class=\"loading-text\">\r\n            <p>Chargement...</p>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";.spinner-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,black 40%,transparent);display:flex;justify-content:center;align-items:center;z-index:9997;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease-in-out}.spinner-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:3rem;border-radius:1.5rem;min-width:250px;animation:slideUp .4s ease-out}.pulse-rings{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;border:3px solid transparent;border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(.25,.46,.45,.94) infinite}.pulse-ring-1{width:40px;height:40px;border-color:var(--primary-color);animation-delay:0s;box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 30%,transparent)}.pulse-ring-2{width:60px;height:60px;border-color:var(--tertiary-color);animation-delay:.6s;box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 25%,transparent)}.pulse-ring-3{width:80px;height:80px;border-color:var(--secondary-color);animation-delay:1.2s;box-shadow:0 0 30px color-mix(in srgb,var(--secondary-color) 20%,transparent)}.pulse-ring-4{width:100px;height:100px;border-color:var(--primary-color);animation-delay:1.8s;opacity:.7;box-shadow:0 0 35px color-mix(in srgb,var(--primary-color) 15%,transparent)}.loading-text{text-align:center;color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loading-text p{margin:0;font-size:1.2rem;font-weight:500;color:var(--primary-color);letter-spacing:.5px;animation:text-pulse 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse-ring{0%{transform:scale(.6);opacity:1;border-width:4px}50%{opacity:.8;border-width:2px}to{transform:scale(1.3);opacity:0;border-width:1px}}@keyframes text-pulse{0%,to{opacity:.8}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--primary-color) 30%,transparent)}}@media(max-width:768px){.spinner-container{min-width:200px;padding:2rem;gap:1.5rem}.pulse-rings{width:100px;height:100px}.pulse-ring-1{width:35px;height:35px}.pulse-ring-2{width:50px;height:50px}.pulse-ring-3{width:65px;height:65px}.pulse-ring-4{width:80px;height:80px}.loading-text p{font-size:1rem}}.dark-theme .spinner-container{box-shadow:0 20px 40px color-mix(in srgb,black 40%,transparent);border-color:var(--neutral-color)}.dark-theme .pulse-ring-1{box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 50%,transparent)}.dark-theme .pulse-ring-2{box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 40%,transparent)}.as400-theme .pulse-ring{filter:drop-shadow(0 0 8px var(--primary-color))}.as400-theme .loading-text p{text-shadow:0 0 10px var(--primary-color)}\n"] }]
-        }], propDecorators: { shown: [{ type: i0.Input, args: [{ isSignal: true, alias: "shown", required: false }] }] } });
 
-class ChrSimpleTableComponent {
+class DataGrid {
     constructor() {
-        this.id = input(crypto.randomUUID(), /* @ts-ignore */
+        this.formatterService = inject(DataFormatterService);
+        this.id = signal(crypto.randomUUID(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.data = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.layout = input('auto', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-        this.page = model(1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.title = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.table = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "table" }] : /* istanbul ignore next */ []));
+        this.viewport = viewChild('viewport', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+        this.headerScroll = viewChild('headerScroll', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerScroll" }] : /* istanbul ignore next */ []));
+        this.currentPage = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
         this.pageSize = model(10, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSimpleTableComponent, isStandalone: true, selector: "chr-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, read: TemplateRef }, { propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'chr-table', imports: [CommonModule, NgxPaginationModule, ChrPaginatorComponent], encapsulation: ViewEncapsulation.None, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], captionTemplate: [{
-                type: ContentChild,
-                args: ['caption', { read: TemplateRef }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { read: TemplateRef }]
-            }], rowTemplate: [{
-                type: ContentChild,
-                args: ['row', { read: TemplateRef }]
-            }] } });
-
-class TabToEnterHandlerDirective {
-    constructor() {
-        this.el = inject(ElementRef);
-    }
-    handleTab(event) {
-        if (event.key === 'Tab') {
-            const enter = new KeyboardEvent('keyup', {
-                ...event,
-                key: 'Enter',
-                code: 'Enter',
-                bubbles: true,
-                keyCode: 13,
+        // public pageChange = output<number>();
+        // public pageSizeChange = output<number>();
+        this.onInit = output();
+        this.selectedColumn = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColumn" }] : /* istanbul ignore next */ []));
+        this.sort = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.filter = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.groupBy = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+        this.cellChange = output();
+        this.rowClick = output();
+        this.enableVirtualization = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableVirtualization" }] : /* istanbul ignore next */ []));
+        this.allowFiltering = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowFiltering" }] : /* istanbul ignore next */ []));
+        this.allowGrouping = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowGrouping" }] : /* istanbul ignore next */ []));
+        this.allowInsert = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowInsert" }] : /* istanbul ignore next */ []));
+        this.allowUpdate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowUpdate" }] : /* istanbul ignore next */ []));
+        this.allowDelete = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowDelete" }] : /* istanbul ignore next */ []));
+        this.allowDuplicate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowDuplicate" }] : /* istanbul ignore next */ []));
+        this.allowSync = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowSync" }] : /* istanbul ignore next */ []));
+        this.allowRefresh = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowRefresh" }] : /* istanbul ignore next */ []));
+        this.allowNavigation = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowNavigation" }] : /* istanbul ignore next */ []));
+        this.allowExport = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowExport" }] : /* istanbul ignore next */ []));
+        this.allowManageTrackingPersistence = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowManageTrackingPersistence" }] : /* istanbul ignore next */ []));
+        this.allowManageDistincValueFetching = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowManageDistincValueFetching" }] : /* istanbul ignore next */ []));
+        this.maxHeight = input('100%', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        this.onExport = output();
+        this.onSync = output();
+        this.onRefresh = output();
+        this.onAddRow = output();
+        this.onDeleteRow = output();
+        /**
+         * Only supported for DB2 tables. For other types, use the onNavigate event.
+         */
+        this.onForeignTableNavigate = output();
+        this.onNavigate = output();
+        this.onFilterValueChange = output();
+        this.allowFetchDistinctValues = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allowFetchDistinctValues" }] : /* istanbul ignore next */ []));
+        this.crossRequestTrackingPersistence = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "crossRequestTrackingPersistence" }] : /* istanbul ignore next */ []));
+        this.modifiedCells = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifiedCells" }] : /* istanbul ignore next */ []));
+        this.modifiedRows = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifiedRows" }] : /* istanbul ignore next */ []));
+        this.addedRows = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addedRows" }] : /* istanbul ignore next */ []));
+        this.deletedRows = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deletedRows" }] : /* istanbul ignore next */ []));
+        this.distinctValues = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
+        this.actions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        this.cellTemplates = contentChildren(ChrCellDefDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+        this.templatesByColumn = computed(() => {
+            const map = new Map();
+            for (const t of this.cellTemplates()) {
+                const col = t.columnName();
+                if (col)
+                    map.set(col.toLowerCase(), t);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templatesByColumn" }] : /* istanbul ignore next */ []));
+        this.templatesByType = computed(() => {
+            const map = new Map();
+            for (const t of this.cellTemplates()) {
+                const type = t.dataType();
+                if (type)
+                    map.set(type.toLowerCase(), t);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templatesByType" }] : /* istanbul ignore next */ []));
+        this.columnSuggestions = computed(() => {
+            const distinctVals = this.distinctValues();
+            // Si des valeurs distinctes sont fournies par le parent, on les utilise
+            if (Object.keys(distinctVals).length > 0) {
+                return distinctVals;
+            }
+            // Sinon, on utilise l'ancien comportement (valeurs locales)
+            const suggestions = {};
+            this.columns().forEach((column) => {
+                suggestions[column.columnName] = new Set();
             });
-            event.target?.dispatchEvent(enter);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabToEnterHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TabToEnterHandlerDirective, isStandalone: true, selector: "[tab-enter]", host: { listeners: { "keydown": "handleTab($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabToEnterHandlerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tab-enter]',
-                    standalone: true,
-                }]
-        }], propDecorators: { handleTab: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class ChrPreventReloadDirective {
-    constructor() {
-        this.host = inject(ElementRef);
-        this.chrPreventReload = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrPreventReload" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPreventReloadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPreventReloadDirective, isStandalone: true, selector: "[chrPreventReload]", inputs: { chrPreventReload: { classPropertyName: "chrPreventReload", publicName: "chrPreventReload", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:beforeunload": "chrPreventReload() ? $event.preventDefault() : null" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPreventReloadDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chrPreventReload]',
-                    host: {
-                        '(window:beforeunload)': 'chrPreventReload() ? $event.preventDefault() : null',
-                    },
-                }]
-        }], propDecorators: { chrPreventReload: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPreventReload", required: false }] }] } });
-
-class ChrDebounceDirective {
-    constructor() {
-        this.host = inject(ElementRef);
-        this.defaults = inject(CHR_DEBOUNCE_DEFAULTS);
-        this.renderer = inject(Renderer2);
-        this.subject = new Subject();
-        this.chrDebounceTime = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrDebounceTime" }] : /* istanbul ignore next */ []));
-        this.debounceTimeValue = computed(() => {
-            const time = this.chrDebounceTime();
-            if (time !== null && !isNaN(Number(time))) {
-                return Number(time);
+            this.table()?.rows.forEach((row) => {
+                this.columns().forEach((column) => {
+                    const value = row[column.columnName];
+                    if (value !== null && value !== undefined) {
+                        suggestions[column.columnName].add(value);
+                    }
+                });
+            });
+            return Object.entries(suggestions).reduce((acc, [key, value]) => {
+                acc[key] = Array.from(value);
+                return acc;
+            }, {});
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnSuggestions" }] : /* istanbul ignore next */ []));
+        // protected _addedRows = computed(() => this.addedRows().map((r) => r.row));
+        this.trackByMode = model('index', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackByMode" }] : /* istanbul ignore next */ []));
+        this.hasChanges = computed(() => {
+            return (this.addedRows().length > 0 ||
+                this.modifiedRows().length > 0 ||
+                this.deletedRows().length > 0);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
+        this.groupByMap = computed(() => {
+            const includedMap = {};
+            this.groupBy()?.included.forEach((col) => {
+                includedMap[col] = true;
+            });
+            return includedMap;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupByMap" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => {
+            const table = this.table();
+            const metadatas = table?.columnMetadatas || [];
+            const groupedColumns = this.groupBy()?.included || [];
+            //Sort grouped columns first then computed columns then the rest
+            if (this.groupBy() !== null)
+                return [
+                    ...metadatas.filter((col) => groupedColumns.includes(col.columnName)),
+                    ...metadatas.filter((col) => !groupedColumns.includes(col.columnName) && !col.tableName),
+                    ...metadatas.filter((col) => !groupedColumns.includes(col.columnName) && col.tableName),
+                ];
+            else
+                return metadatas;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const table = this.table();
+            if (!table)
+                return [];
+            const computedRows = [];
+            for (const row of table.rows) {
+                const rowId = table.getRowIdentifier(row);
+                const updated = this.modifiedRows().find((mr) => table.getRowIdentifier(mr.current) === rowId);
+                const deleted = this.deletedRows().find((dr) => table.getRowIdentifier(dr.row) === rowId);
+                computedRows.push({
+                    id: rowId,
+                    data: updated ? updated.current : row,
+                    flag: deleted ? 'deleted' : updated ? 'modified' : 'unchanged',
+                    valid: this.validateRow(deleted ? deleted.row : updated ? updated.current : row),
+                });
             }
-            return this.defaults.baseInputs;
+            for (const addedEntry of this.addedRows()) {
+                const rowId = table.getRowIdentifier(addedEntry.row);
+                computedRows.push({
+                    id: rowId,
+                    data: addedEntry.row,
+                    flag: 'added',
+                    valid: this.validateRow(addedEntry.row),
+                });
+            }
+            return computedRows;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "debounceTimeValue" }] : /* istanbul ignore next */ []));
-        this.subscription = of();
-        this.isDispatching = false;
-    }
-    ngOnInit() {
-        const element = this.host.nativeElement;
-        this.subscription = this.subject.pipe(debounceTime$1(this.debounceTimeValue()));
-        // Listener en phase CAPTURE pour intercepter AVANT tous les listeners Angular
-        this.captureListener = this.renderer.listen(element, 'input', (event) => {
-            if (this.isDispatching) {
-                return;
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.totalItems = computed(() => {
+            return 'total' in (this.table() || {})
+                ? this.table()?.total || -1
+                : this.table()?.count || -1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+        this.currentItems = computed(() => {
+            return 'total' in (this.table() || {})
+                ? this.table()?.total || 0
+                : this.table()?.count || 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentItems" }] : /* istanbul ignore next */ []));
+        // Properties to allow the datagrid to work in standalone without weird hacks.
+        this.data = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.name = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.primaryKey = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryKey" }] : /* istanbul ignore next */ []));
+        this.metadata = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "metadata" }] : /* istanbul ignore next */ []));
+        this.autoDataSource = null;
+        this.onFilterValue = (columnName, value) => {
+            if (this.allowFetchDistinctValues()) {
+                this.onFilterValueChange.emit({
+                    column: columnName,
+                    value: value,
+                });
             }
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            event.stopPropagation();
-            this.subject.next(event);
-        }, { capture: true });
-        this.subscription.subscribe((event) => {
-            this.isDispatching = true;
-            const newEvent = new InputEvent('input', {
-                bubbles: true,
-                cancelable: true,
-                data: event.data,
-                inputType: event.inputType,
+        };
+        this.onGroupByIncludedChange = (columnName, included) => {
+            this.groupBy.update((currentGroup) => {
+                if (currentGroup === null)
+                    return currentGroup;
+                if (included) {
+                    currentGroup?.included.push(columnName);
+                }
+                else {
+                    currentGroup.included = currentGroup.included.filter((c) => c !== columnName);
+                }
+                return { ...currentGroup };
             });
-            element.dispatchEvent(newEvent);
-            setTimeout(() => (this.isDispatching = false), 0);
-        });
-    }
-    ngOnDestroy() {
-        this.captureListener?.();
-        this.subject.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrDebounceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrDebounceDirective, isStandalone: true, selector: "[chrDebounce]", inputs: { chrDebounceTime: { classPropertyName: "chrDebounceTime", publicName: "chrDebounceTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrDebounceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chrDebounce]',
-                }]
-        }], propDecorators: { chrDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrDebounceTime", required: false }] }] } });
-
-class ChrHoverDirective {
-    constructor() {
-        this.el = inject((ElementRef));
-        this.overlay = inject(Overlay);
-        this.vcr = inject(ViewContainerRef);
-        this.renderer = inject(Renderer2);
-        this.eventListeners = [];
-        this.chrHoverContext = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrHoverContext" }] : /* istanbul ignore next */ []));
-        this.chrHoverSnap = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrHoverSnap" }] : /* istanbul ignore next */ []));
-        this.chrHoverPosition = input('right', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrHoverPosition" }] : /* istanbul ignore next */ []));
-        this.chrHoverCloseDelay = input(10, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "chrHoverCloseDelay" }] : /* istanbul ignore next */ []));
-        this.closeTimeout = null;
-        this.overlayEventListeners = [];
-        this.mousePositionStrategy = (mousemove) => {
-            const positionOffset = { left: mousemove.clientX, top: mousemove.clientY };
-            const componentSize = this.overlayRef?.overlayElement.getBoundingClientRect();
-            switch (this.chrHoverPosition()) {
-                case 'above':
-                    positionOffset.top -= (componentSize?.height || 0) + 20;
-                    positionOffset.left -= (componentSize?.width || 0) / 2;
-                    break;
-                case 'below':
-                    positionOffset.top += 20;
-                    positionOffset.left -= (componentSize?.width || 0) / 2;
-                    break;
-                case 'left':
-                    positionOffset.left -= (componentSize?.width || 0) + 20;
-                    positionOffset.top -= (componentSize?.height || 0) / 2;
+        };
+        this.onCellChange = (index, row, column, value) => {
+            const initial = { ...row.data };
+            row.data[column.columnName] = value;
+            // If the row is created, we don't track it as modified
+            switch (row.flag) {
+                case 'added':
+                    this.addedRows.update((rows) => rows.map((r) => {
+                        if (this.table()?.getRowIdentifier(r.row) ===
+                            this.table()?.getRowIdentifier(row.data)) {
+                            r.row[column.columnName] = value;
+                        }
+                        return r;
+                    }));
+                    // this.addedRows.update((rows) => {
+                    //   rows.find(
+                    //     (r) =>
+                    //       this.table()?.getRowIdentifier(r.row) ===
+                    //       this.table()?.getRowIdentifier(row.data)
+                    //   )!.row[column.columnName] = value;
+                    //   return [...rows];
+                    // });
+                    return;
+                case 'modified':
+                    this.modifiedRows.update((rows) => rows.map((r) => {
+                        if (r.index === index) {
+                            r.current = row.data;
+                        }
+                        return r;
+                    }));
+                    // this.modifiedRows.update((rows) => {
+                    //   const changed = this.modifiedRows().find(
+                    //     (modifiedRow) => modifiedRow.index === index
+                    //   );
+                    //   changed!.current = row.data;
+                    //   return [...rows];
+                    // });
                     break;
-                case 'right':
-                    positionOffset.left += 20;
-                    positionOffset.top -= (componentSize?.height || 0) / 2;
+                case 'unchanged':
+                    this.modifiedRows.set([
+                        ...this.modifiedRows(),
+                        { index: index, original: initial, current: row.data },
+                    ]);
                     break;
             }
-            const positionStrategy = this.overlay
-                .position()
-                .global()
-                .left(`${positionOffset.left}px`)
-                .top(`${positionOffset.top}px`);
-            return positionStrategy;
         };
-        this.snappedStrategy = () => {
-            const positionStrategy = this.overlay
-                .position()
-                .flexibleConnectedTo(this.el);
-            switch (this.chrHoverPosition()) {
-                case 'above':
-                    positionStrategy.withPositions([
-                        {
-                            originX: 'center',
-                            originY: 'top',
-                            overlayX: 'center',
-                            overlayY: 'bottom',
-                        },
-                        {
-                            originX: 'center',
-                            originY: 'bottom',
-                            overlayX: 'center',
-                            overlayY: 'top',
-                        },
-                    ]);
-                    break;
-                case 'below':
-                    positionStrategy.withPositions([
-                        {
-                            originX: 'center',
-                            originY: 'bottom',
-                            overlayX: 'center',
-                            overlayY: 'top',
-                        },
-                        {
-                            originX: 'center',
-                            originY: 'top',
-                            overlayX: 'center',
-                            overlayY: 'bottom',
-                        },
-                    ]);
+        this.addRow = () => {
+            this.addedRows.set([
+                ...this.addedRows(),
+                { index: this.addedRows().length, row: {} },
+            ]);
+            this.onAddRow.emit();
+        };
+        this.getRowTrackBy = (row, index) => {
+            const table = this.table();
+            // return table ? table.getRowIdentifier(row) : `row-${index}`;
+            return table?.getRowNumber(row) ? table.getRowNumber(row) : index;
+        };
+        this.hasInvalidRows = () => {
+            const allRows = [
+                ...this.addedRows().map((r) => r.row),
+                ...this.modifiedRows().map((r) => r.current),
+            ];
+            return allRows.some((row) => !this.validateRow(row));
+        };
+        this.validateRow = (row) => {
+            if (this.groupBy() !== null)
+                return true;
+            return this.formatterService.validateRow(row, this.columns());
+        };
+        this.canEdit = (column) => {
+            const formatter = this.formatterService.getFormatter(null, column);
+            if (!formatter)
+                return false && this.allowUpdate();
+            return this.allowUpdate() && formatter.canEdit(null, column);
+        };
+        this.isPrimaryKeyColumn = (column) => {
+            const table = this.table();
+            if (!table)
+                return false;
+            return table
+                .primaryKeyColumns()
+                .some((pk) => pk.columnName === column.columnName);
+        };
+        this.isUniqueKeyColumn = (column) => {
+            const table = this.table();
+            if (!table)
+                return false;
+            const uniqueConstraints = table.tableConstraints.filter((tc) => tc.constraintType === 'UNIQUE');
+            for (const uc of uniqueConstraints) {
+                if (uc.columns.some((col) => col.columnName === column.columnName)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.isEditSafe = (column) => {
+            if (this.groupBy() !== null)
+                return false;
+            if (this.trackByMode() === 'index')
+                return true;
+            if (this.crossRequestTrackingPersistence() === false)
+                return true;
+            return (this.trackByMode() === 'primaryKey' &&
+                this.table()
+                    ?.primaryKeyColumns()
+                    .some((pk) => pk.columnName === column.columnName) == false);
+        };
+        this.isForeignKeyColumn = (column) => {
+            const table = this.table();
+            if (!table)
+                return false;
+            const fkConstraints = table.tableConstraints.filter((tc) => tc.constraintType === 'FOREIGN KEY');
+            for (const fk of fkConstraints) {
+                if (fk.columns.some((col) => col.columnName === column.columnName)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.datagridContextMenuActions = (column, filterElement, groupElement) => {
+            const actions = [
+                {
+                    label: 'Trier par ordre croissant',
+                    icon: 'arrow_upward',
+                    action: () => this.setSort(column, true),
+                },
+                {
+                    label: 'Trier par ordre décroissant',
+                    icon: 'arrow_downward',
+                    action: () => this.setSort(column, false),
+                },
+                {
+                    label: 'Effacer le tri',
+                    icon: 'clear',
+                    action: () => this.sort.set(null),
+                },
+            ];
+            if (filterElement && this.allowFiltering()) {
+                actions.push({
+                    label: 'Filtrer sur cette colonne...',
+                    icon: 'filter_list',
+                    action: () => filterElement.toggle(),
+                });
+            }
+            if (groupElement && this.allowGrouping()) {
+                actions.push({
+                    label: 'Grouper par cette colonne',
+                    icon: 'group',
+                    action: () => groupElement.isOpen.set(true),
+                });
+            }
+            return actions;
+        };
+        this.datarowContextMenuActions = (row, rowIndex) => {
+            const items = [];
+            for (const action of this.actions()) {
+                items.push({
+                    label: action.display,
+                    action: action.callback.bind(null, row.data),
+                    color: action.color,
+                    icon: action.icon,
+                });
+            }
+            switch (row.flag) {
+                case 'deleted':
+                    items.push({
+                        label: 'Annuler la suppression',
+                        action: () => this.deletedRows.set(this.deletedRows().filter((r) => r.index !== rowIndex)),
+                        icon: 'undo',
+                        color: 'primary',
+                    });
                     break;
-                case 'left':
-                    positionStrategy.withPositions([
-                        {
-                            originX: 'start',
-                            originY: 'center',
-                            overlayX: 'end',
-                            overlayY: 'center',
-                        },
-                        {
-                            originX: 'end',
-                            originY: 'center',
-                            overlayX: 'start',
-                            overlayY: 'center',
+                case 'added':
+                    items.push({
+                        label: 'Supprimer la ligne ajoutée',
+                        action: () => {
+                            this.addedRows.update((rows) => rows.filter((r) => this.table().getRowIdentifier(r.row) !== row.id));
+                            this.table()?.removeRow(row);
                         },
-                    ]);
+                        icon: 'delete',
+                        color: 'error',
+                    });
                     break;
-                case 'right':
-                    positionStrategy.withPositions([
-                        {
-                            originX: 'end',
-                            originY: 'center',
-                            overlayX: 'start',
-                            overlayY: 'center',
-                        },
-                        {
-                            originX: 'start',
-                            originY: 'center',
-                            overlayX: 'end',
-                            overlayY: 'center',
-                        },
-                    ]);
+                default:
+                    if (this.allowInsert() && this.allowDuplicate()) {
+                        items.push({
+                            label: 'Dupliquer la ligne',
+                            action: () => {
+                                const newRow = {
+                                    [`${this.table()?.getRowIdentifier(row.data)}`]: this.addedRows().length + 1,
+                                    ...row.data,
+                                };
+                                this.addedRows.set([
+                                    ...this.addedRows(),
+                                    { index: this.addedRows().length, row: newRow },
+                                ]);
+                            },
+                            icon: 'file_copy',
+                            color: 'primary',
+                        });
+                    }
+                    if (this.allowDelete()) {
+                        items.push({
+                            label: 'Supprimer la ligne',
+                            action: () => this.deleteRow(rowIndex, row.data),
+                            icon: 'delete',
+                            color: 'error',
+                        });
+                    }
                     break;
             }
-            return positionStrategy;
+            return items;
         };
-        const positionStrategy = this.snappedStrategy();
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            hasBackdrop: false,
-            disposeOnNavigation: true,
-            disableClose: true,
+        this.onAdd = () => {
+            this.onAddRow.emit();
+            setTimeout(() => {
+                this.viewport()?.scrollTo({ bottom: 0 });
+            }, 250);
+        };
+        this.log = (event) => {
+            console.log(`[DataGrid-${this.id()}]`, event);
+        };
+        this.autoDataSource = new AutoDataSource({
+            enableClientSideFiltering: true,
+            enableClientSidePagination: true,
+            enableClientSideSorting: true,
+            pageSize: this.pageSize(),
+        });
+        effect(() => {
+            if (this.table() && !this.crossRequestTrackingPersistence()) {
+                this.resetChanges();
+            }
+        });
+        effect(() => {
+            const mode = this.table()?.hasPrimaryKey ? 'primaryKey' : 'index';
+            this.trackByMode.set(mode);
+        });
+        effect(() => {
+            const data = this.data();
+            if (!data)
+                return;
+            if (this.table() === undefined || this.table() === null) {
+                if (this.autoDataSource != null)
+                    this.autoDataSource.setRows(data);
+            }
         });
     }
     ngOnInit() {
-        this.overlayRef.updatePositionStrategy(this.snappedStrategy());
-        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
-            this.clearCloseTimeout();
-            this.open();
-        }));
-        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
-            this.startCloseTimeout();
-        }));
-        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mousemove', (event) => {
-            if (!this.chrHoverSnap()) {
-                const positionStrategy = this.mousePositionStrategy(event);
-                this.overlayRef.updatePositionStrategy(positionStrategy);
+        this.onInit.emit();
+        if (this.table() === undefined || this.table() === null) {
+            if (this.autoDataSource) {
+                this.autoDataSource.setData(new AutoDataTable(this.name() ?? '', this.primaryKey(), this.metadata()));
+                this.autoDataSource.registerDataGrid(this);
+                this.autoDataSource.setRows(this.data() ?? []);
             }
-        }));
+        }
     }
-    ngOnDestroy() {
-        this.clearCloseTimeout();
-        this.clearOverlayListeners();
-        this.overlayRef.dispose();
-        this.removeEventListeners();
+    ngOnDestroy() { }
+    getColumnTooltip(column) {
+        return column.tooltip;
     }
-    removeEventListeners() {
-        this.eventListeners.forEach((unlisten) => unlisten());
-        this.eventListeners = [];
+    toggleSort(columnName) {
+        const currentSort = this.sort();
+        let isAsc = true;
+        if (currentSort?.column === columnName)
+            isAsc = !currentSort.isAsc;
+        this.sort.set({ column: columnName, isAsc: isAsc });
     }
-    startCloseTimeout() {
-        this.clearCloseTimeout();
-        this.closeTimeout = window.setTimeout(() => this.close(), this.chrHoverCloseDelay());
+    setSort(columnName, isAsc) {
+        this.sort.set({ column: columnName, isAsc: isAsc });
     }
-    clearCloseTimeout() {
-        if (this.closeTimeout != null) {
-            clearTimeout(this.closeTimeout);
-            this.closeTimeout = null;
+    onFilterBy(columnName, filter) {
+        const currentFilters = { ...this.filter() };
+        if (filter.value) {
+            currentFilters[columnName] = {
+                column: filter.column,
+                mode: filter.mode,
+                value: filter.value,
+            };
+        }
+        else {
+            delete currentFilters[columnName];
+        }
+        this.filter.set(currentFilters);
+    }
+    onGroupBy(group) {
+        if (group.mode === null)
+            this.groupBy.set(null);
+        else {
+            // group.included =
+            //   this.table()?.columnMetadatas.map((c) => c.columnName) || [];
+            group.included = [group.column];
+            this.groupBy.set(group);
         }
     }
-    clearOverlayListeners() {
-        this.overlayEventListeners.forEach((u) => u());
-        this.overlayEventListeners = [];
+    // Event handlers for pagination
+    onPageChange(page) {
+        this.currentPage.set(page);
+    }
+    onPageSizeChange(pageSize) {
+        this.pageSize.set(pageSize);
+    }
+    refresh() {
+        this.onRefresh.emit();
+        // this.sort.set(null);
+        // this.filter.set({});
+    }
+    getCellValue(row, columnName) {
+        return row && row[columnName] !== undefined ? row[columnName] : '';
+    }
+    isRowAdded(row, index) {
+        return this.addedRows().some((addedRow) => addedRow.index === index);
     }
-    open() {
-        if (!this.overlayRef.hasAttached()) {
-            if (!this.portal) {
-                this.portal = new TemplatePortal(this.template, this.vcr, this.chrHoverContext());
-            }
-            const ref = this.overlayRef.attach(this.portal);
-            // keep overlay open when overlay itself is hovered
-            const overlayEl = this.overlayRef.overlayElement;
-            this.clearOverlayListeners();
-            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseenter', () => {
-                this.clearCloseTimeout();
-            }));
-            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseleave', () => {
-                this.startCloseTimeout();
-            }));
-        }
+    isRowChanged(row, index) {
+        return this.modifiedRows().some((modifiedRow) => modifiedRow.index === index);
     }
-    close() {
-        this.clearCloseTimeout();
-        this.clearOverlayListeners();
-        this.overlayRef.detach();
+    isCellChanged(rowIndex, columnName) {
+        return this.modifiedCells().some((cell) => cell.rowIndex === rowIndex && cell.columnName === columnName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrHoverCloseDelay: { classPropertyName: "chrHoverCloseDelay", publicName: "chrHoverCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
-                useFactory: () => {
-                    disableClose: true;
-                },
-            },
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrHoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chrHover]',
-                    providers: [
-                        {
-                            provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
-                            useFactory: () => {
-                                disableClose: true;
-                            },
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { template: [{
-                type: Input,
-                args: ['chrHover']
-            }], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }], chrHoverCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverCloseDelay", required: false }] }] } });
-
-class CsvExporter {
-    export(data, columns) {
-        const csvRows = [];
-        csvRows.push(columns.join(','));
-        data.forEach((row) => {
-            const values = columns.map((col) => {
-                const cell = row[col];
-                return typeof cell === 'string' ? cell.replace(/;/g, ',') : cell;
-            });
-            csvRows.push(values.join(','));
-        });
-        const csvContent = csvRows.join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        return URL.createObjectURL(blob);
+    isRowDeleted(row, index) {
+        return this.deletedRows().some((deletedRow) => deletedRow.index === index);
     }
-    canExport(filetype) {
-        const supportedTypes = ['.csv', 'text/csv', 'csv'];
-        return supportedTypes.includes(filetype);
+    deleteRow(index, row) {
+        // If the row was modified, we need to get the original value and remove it from modifiedRows
+        if (this.isRowChanged(row, index)) {
+            const original = this.modifiedRows().find((modifiedRow) => modifiedRow.index === index)
+                ?.original || row;
+            this.deletedRows.set([...this.deletedRows(), { index, row: original }]);
+            this.modifiedRows.set(this.modifiedRows().filter((modifiedRow) => modifiedRow.index !== index));
+            return;
+        }
+        // If the row was added, we just remove it from addedRows
+        if (this.isRowAdded(row, index)) {
+            this.addedRows.set(this.addedRows().filter((addedRow) => addedRow.index !== index));
+        }
+        if (!this.isRowDeleted(row, index)) {
+            this.deletedRows.set([...this.deletedRows(), { index, row }]);
+        }
+        this.onDeleteRow.emit({ index, row });
     }
-}
-
-class JsonExporter {
-    export(data, columns) {
-        const jsonData = data.map((row) => {
-            const obj = {};
-            columns.forEach((col) => {
-                obj[col] = row[col];
+    navigateToForeignTable(column) {
+        if (!this.allowNavigation())
+            return;
+        if (column instanceof ColumnMetadata) {
+            this.table()
+                ?.getConstraintsByType('FOREIGN KEY')
+                .forEach((constraint) => {
+                const cstCol = constraint.columns.find((c) => c.columnName === column.columnName);
+                if (cstCol && cstCol instanceof TableConstraintColumn) {
+                    const reference = cstCol
+                        .reference;
+                    if (reference) {
+                        return this.onForeignTableNavigate.emit({
+                            targetTable: cstCol.reference.otherKey.tableName,
+                            targetSchema: cstCol.reference.otherKey.tableSchema,
+                        });
+                    }
+                }
             });
-            return obj;
-        });
-        const blob = new Blob([JSON.stringify(jsonData, null, 2)], {
-            type: 'application/json;charset=utf-8;',
-        });
-        return URL.createObjectURL(blob);
+        }
+        else {
+            this.onNavigate.emit({ targetColumnMetadata: column });
+        }
     }
-    canExport(filetype) {
-        const supportedTypes = ['.json', 'application/json', 'json'];
-        return supportedTypes.includes(filetype);
+    resetChanges() {
+        this.modifiedRows.set([]);
+        this.addedRows.set([]);
+        this.deletedRows.set([]);
     }
-}
-
-class DataExporterService {
-    constructor() {
-        this.exporter = [new CsvExporter(), new JsonExporter()];
+    getChangeSummary() {
+        const modified = this.modifiedRows();
+        const added = this.addedRows();
+        const deleted = this.deletedRows();
+        return {
+            modified,
+            added,
+            deleted,
+            hasChanges: modified.length > 0 || added.length > 0 || deleted.length > 0,
+        };
     }
-    setExporters(exporters) {
-        this.exporter = exporters;
+    getCellTemplate(columnName, dataType) {
+        const colMatch = this.templatesByColumn().get(columnName.toLowerCase());
+        if (colMatch)
+            return colMatch.template;
+        const typeMatch = this.templatesByType().get(dataType.toLowerCase());
+        if (typeMatch)
+            return typeMatch.template;
+        return null;
     }
-    registerExporter(exporter) {
-        this.exporter.push(exporter);
+    toggleCrossRequestTrackingPersistence() {
+        this.crossRequestTrackingPersistence.set(!this.crossRequestTrackingPersistence());
     }
-    export(data, columns, filetype, filename = 'export', autodownload = false) {
-        const exporter = this.exporter.find((exp) => exp.canExport(filetype));
-        if (exporter) {
-            const url = exporter.export(data, columns);
-            if (autodownload) {
-                const link = document.createElement('a');
-                link.href = url;
-                link.download = `${filename}.${filetype.split('.').pop()}`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            }
-            return url;
+    toggleAllowFetchDistinctValues() {
+        this.allowFetchDistinctValues.set(!this.allowFetchDistinctValues());
+    }
+    onViewportScroll(event) {
+        const viewport = event.target;
+        const headerScrollElement = this.headerScroll()?.nativeElement;
+        if (headerScrollElement) {
+            headerScrollElement.scrollLeft = viewport.scrollLeft;
         }
-        return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DataGrid, isStandalone: true, selector: "chr-data-grid", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, enableVirtualization: { classPropertyName: "enableVirtualization", publicName: "enableVirtualization", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, allowGrouping: { classPropertyName: "allowGrouping", publicName: "allowGrouping", isSignal: true, isRequired: false, transformFunction: null }, allowInsert: { classPropertyName: "allowInsert", publicName: "allowInsert", isSignal: true, isRequired: false, transformFunction: null }, allowUpdate: { classPropertyName: "allowUpdate", publicName: "allowUpdate", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicate: { classPropertyName: "allowDuplicate", publicName: "allowDuplicate", isSignal: true, isRequired: false, transformFunction: null }, allowSync: { classPropertyName: "allowSync", publicName: "allowSync", isSignal: true, isRequired: false, transformFunction: null }, allowRefresh: { classPropertyName: "allowRefresh", publicName: "allowRefresh", isSignal: true, isRequired: false, transformFunction: null }, allowNavigation: { classPropertyName: "allowNavigation", publicName: "allowNavigation", isSignal: true, isRequired: false, transformFunction: null }, allowExport: { classPropertyName: "allowExport", publicName: "allowExport", isSignal: true, isRequired: false, transformFunction: null }, allowManageTrackingPersistence: { classPropertyName: "allowManageTrackingPersistence", publicName: "allowManageTrackingPersistence", isSignal: true, isRequired: false, transformFunction: null }, allowManageDistincValueFetching: { classPropertyName: "allowManageDistincValueFetching", publicName: "allowManageDistincValueFetching", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, allowFetchDistinctValues: { classPropertyName: "allowFetchDistinctValues", publicName: "allowFetchDistinctValues", isSignal: true, isRequired: false, transformFunction: null }, crossRequestTrackingPersistence: { classPropertyName: "crossRequestTrackingPersistence", publicName: "crossRequestTrackingPersistence", isSignal: true, isRequired: false, transformFunction: null }, modifiedCells: { classPropertyName: "modifiedCells", publicName: "modifiedCells", isSignal: true, isRequired: false, transformFunction: null }, modifiedRows: { classPropertyName: "modifiedRows", publicName: "modifiedRows", isSignal: true, isRequired: false, transformFunction: null }, addedRows: { classPropertyName: "addedRows", publicName: "addedRows", isSignal: true, isRequired: false, transformFunction: null }, deletedRows: { classPropertyName: "deletedRows", publicName: "deletedRows", isSignal: true, isRequired: false, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, trackByMode: { classPropertyName: "trackByMode", publicName: "trackByMode", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, primaryKey: { classPropertyName: "primaryKey", publicName: "primaryKey", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { table: "tableChange", currentPage: "currentPageChange", pageSize: "pageSizeChange", onInit: "onInit", sort: "sortChange", filter: "filterChange", groupBy: "groupByChange", cellChange: "cellChange", rowClick: "rowClick", onExport: "onExport", onSync: "onSync", onRefresh: "onRefresh", onAddRow: "onAddRow", onDeleteRow: "onDeleteRow", onForeignTableNavigate: "onForeignTableNavigate", onNavigate: "onNavigate", onFilterValueChange: "onFilterValueChange", allowFetchDistinctValues: "allowFetchDistinctValuesChange", crossRequestTrackingPersistence: "crossRequestTrackingPersistenceChange", modifiedCells: "modifiedCellsChange", modifiedRows: "modifiedRowsChange", addedRows: "addedRowsChange", deletedRows: "deletedRowsChange", trackByMode: "trackByModeChange" }, providers: [
+            PaginationService,
+            {
+                provide: CHR_DEBOUNCE_DEFAULTS,
+                useValue: new DebounceDefaults({ hoverTitle: 0 }),
+            },
+            // {
+            //   provide: VIRTUAL_SCROLL_STRATEGY,
+            //   useClass: DynamicSizeScrollStrategy,
+            // },
+        ], queries: [{ propertyName: "cellTemplates", predicate: ChrCellDefDirective, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema ? `${table()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n        @if(table()?.description){\r\n        <span class=\"table-description\">{{ table()?.description }}</span>\r\n        }\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowManageDistincValueFetching()){\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n                    title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n            </div>\r\n            }\r\n            @if (allowSync() && allowManageTrackingPersistence()) {\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n                    (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n                    title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n            </div>\r\n            }\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            @if(allowExport()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n                title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n            }\r\n            @if(totalItems() !== -1){\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"grid-container data-grid-wrapper\"\r\n        [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n        [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n        <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            @let isForeignKey = isForeignKeyColumn(column);\r\n            @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n            @let isComputedColumn = column.isGenerated;\r\n            @let isUniqueColumn = isUniqueKeyColumn(column);\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"grid-body\">\r\n            @if(enableVirtualization()){\r\n            <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n                <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n                                    this.id(),\r\n                                    totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n                </ng-container>\r\n            </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n            @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n            this.id(),\r\n            totalItems: currentItems()};\r\n            track getRowTrackBy(row.data, $index)) {\r\n            <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n            </ng-container>\r\n            }\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n        let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n        <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n            [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n            [title]=\"getColumnTooltip(column)\">\r\n            @if(allowNavigation() && isForeignKey){\r\n            <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n                (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n                }}</span>\r\n            } @else {\r\n            <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n                column.columnName\r\n                }}</span>\r\n            }\r\n            <small class=\"sort-receiver column-type\" (click)=\"toggleSort(column.columnName)\">{{\r\n                column.dataType }}\r\n                {{column.length ?\r\n                `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n            <div class=\"column-icons\">\r\n                @if(isUniqueColumn){\r\n                <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n                }\r\n                @if(isPrimaryKey || isForeignKey){\r\n                <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n                    'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n                }\r\n                @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n                <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n                }\r\n            </div>\r\n            @if (sort()?.column === column.columnName) {\r\n            @if (sort()?.isAsc) {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_downward</span>\r\n            }\r\n            }\r\n            <div class=\"filter-group-controls\" #controls>\r\n                <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n                    [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n                    [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                    [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n                    (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n                    (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n                    class=\"filter\"></chr-column-filter>\r\n                @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n                <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n                    [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n                    [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n                    title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n                @if(isComputedColumn){\r\n                <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n                }@else if(!isGroupBySource && groupBy() !== null){\r\n                <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n                    <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n                    <span class=\"toggle faded\">Inclure</span>\r\n                    <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n                        (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n                        [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let contextMenuItems = datarowContextMenuActions(row, index);\r\n        <div #rowElement class=\"grid-row\"\r\n            [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n            [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n            (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n            [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n                <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\" [row]=\"row.data\"\r\n                    [customTemplate]=\"getCellTemplate(column.columnName, column.dataType ?? 'varchar')\"\r\n                    (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n                @if($last){\r\n                @if(actions().length > 0){\r\n                <div class=\"actions-menu\">\r\n                    <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n                        [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: EditableCell, selector: "chr-editable-cell", inputs: ["allowUpdate", "customTemplate", "row", "value", "columnMetadata"], outputs: ["valueChange", "isEditingChange"] }, { kind: "directive", type: ContextMenuDirective, selector: "[contextMenu], [chrContextMenu], [chr-right-click]", inputs: ["contextMenu", "openOnClick"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }, { kind: "directive", type: ControlClickDirective, selector: "[CtrlClick], [ControlClick]", inputs: ["callback"], outputs: ["ctrlClick"] }, { kind: "component", type: ColumnFilter, selector: "chr-column-filter", inputs: ["isOpen", "by", "suggestions", "mode", "columnMetadata", "value"], outputs: ["isOpenChange", "modeChange", "valueChange", "filterChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ColumnGroup, selector: "chr-column-group", inputs: ["isOpen", "by", "mode"], outputs: ["isOpenChange", "modeChange", "groupChange"] }, { kind: "directive", type: ChrHoverTitleDirective, selector: "[chrTitle], [title]", inputs: ["chrTitle", "chrTitlePosition", "chrTitleSnap", "chrTitleDebounce"], outputs: ["chrTitleChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'chr-data-grid', imports: [
+                        CommonModule,
+                        ChrPaginatorComponent,
+                        NgxPaginationModule,
+                        EditableCell,
+                        ContextMenuDirective,
+                        ScrollIntoViewDirective,
+                        ControlClickDirective,
+                        ColumnFilter,
+                        ScrollingModule,
+                        ColumnGroup,
+                        ChrHoverTitleDirective,
+                    ], providers: [
+                        PaginationService,
+                        {
+                            provide: CHR_DEBOUNCE_DEFAULTS,
+                            useValue: new DebounceDefaults({ hoverTitle: 0 }),
+                        },
+                        // {
+                        //   provide: VIRTUAL_SCROLL_STRATEGY,
+                        //   useClass: DynamicSizeScrollStrategy,
+                        // },
+                    ], template: "@if (table()) {\r\n<div class=\"data-grid-container\">\r\n    <div class=\"data-grid-header\">\r\n        <h3>{{ title() ? title() : `${table()?.schema ? `${table()?.schema}.` : ''}${table()?.name}` }}</h3>\r\n        @if(table()?.description){\r\n        <span class=\"table-description\">{{ table()?.description }}</span>\r\n        }\r\n        <div class=\"data-grid-info\">\r\n            <!-- {{allowSync()}} {{hasChanges()}} {{!hasInvalidRows()}} -->\r\n            @if(allowManageDistincValueFetching()){\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"allowFetchDistinctValues()\" (click)=\"toggleAllowFetchDistinctValues()\"\r\n                    title=\"R\u00E9cup\u00E9ration des valeurs distinctes d'une colonne lors du filtrage\">filter_list</span>\r\n            </div>\r\n            }\r\n            @if (allowSync() && allowManageTrackingPersistence()) {\r\n            <div>\r\n                <span class=\"mat-icon icon-button tracking-persistence-button\"\r\n                    [attr.data-enabled]=\"crossRequestTrackingPersistence()\"\r\n                    (click)=\"toggleCrossRequestTrackingPersistence()\"\r\n                    title=\"Persistance du suivi des modifications entre les requ\u00EAtes\">track_changes</span>\r\n            </div>\r\n            }\r\n            @if(allowSync() && hasChanges() && !hasInvalidRows()){\r\n            <span class=\"mat-icon icon-button sync-button\" (click)=\"onSync.emit()\"\r\n                title=\"Synchroniser les changements\">file_upload</span>\r\n            }\r\n            @if(allowRefresh()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"refresh()\" title=\"Recharger les donn\u00E9es\">refresh</span>\r\n            }\r\n            @if(allowInsert()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onAdd()\" title=\"Ajouter une ligne\">add</span>\r\n            }\r\n            @if(allowExport()){\r\n            <span class=\"mat-icon icon-button\" (click)=\"onExport.emit()\"\r\n                title=\"T\u00E9l\u00E9charger les donn\u00E9es\">file_download</span>\r\n            }\r\n            @if(totalItems() !== -1){\r\n            <span>Total: {{ totalItems() }} enregistrements</span>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div class=\"grid-container data-grid-wrapper\"\r\n        [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n        [style.max-height]=\"maxHeight()\" [style.overflow-y]=\"enableVirtualization() ? 'clip': 'auto'\">\r\n        <div class=\"grid-header\" [style.column-span]=\"'all'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            @let isForeignKey = isForeignKeyColumn(column);\r\n            @let isPrimaryKey = isPrimaryKeyColumn(column);\r\n            @let isComputedColumn = column.isGenerated;\r\n            @let isUniqueColumn = isUniqueKeyColumn(column);\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{column: column, isForeignKey: isForeignKey, isPrimaryKey: isPrimaryKey, isComputedColumn: isComputedColumn, isUniqueColumn: isUniqueColumn}\"></ng-container>\r\n            }\r\n        </div>\r\n        <div class=\"grid-body\">\r\n            @if(enableVirtualization()){\r\n            <cdk-virtual-scroll-viewport #viewport [itemSize]=\"41\" [style.height]=\"maxHeight()\" class=\"viewport\">\r\n                <ng-container *cdkVirtualFor=\"let row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n                                    this.id(),\r\n                                    totalItems: totalItems()}; let $index = index\" [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutlet]=\"rowTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n                </ng-container>\r\n            </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n            @for (row of rows() | paginate: {itemsPerPage: pageSize(), currentPage: currentPage(), id:\r\n            this.id(),\r\n            totalItems: currentItems()};\r\n            track getRowTrackBy(row.data, $index)) {\r\n            <ng-container [ngTemplateOutlet]=\"rowTemplate\"\r\n                [ngTemplateOutletContext]=\"{$implicit: row, index: getRowTrackBy(row.data, $index)}\">\r\n            </ng-container>\r\n            }\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #headerTemplate let-column=\"column\" let-isForeignKey=\"isForeignKey\" let-isPrimaryKey=\"isPrimaryKey\"\r\n        let-isComputedColumn=\"isComputedColumn\" let-isUniqueColumn=\"isUniqueColumn\">\r\n        <div class=\"grid-header-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\"\r\n            [contextMenu]=\"datagridContextMenuActions(column.columnName, filterElement, groupElement)\"\r\n            [title]=\"getColumnTooltip(column)\">\r\n            @if(allowNavigation() && isForeignKey){\r\n            <span ControlClick class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\"\r\n                (ctrlClick)=\"navigateToForeignTable(column)\">{{ column.displayName || column.columnName\r\n                }}</span>\r\n            } @else {\r\n            <span class=\"sort-receiver\" (click)=\"toggleSort(column.columnName)\">{{ column.displayName ||\r\n                column.columnName\r\n                }}</span>\r\n            }\r\n            <small class=\"sort-receiver column-type\" (click)=\"toggleSort(column.columnName)\">{{\r\n                column.dataType }}\r\n                {{column.length ?\r\n                `(${column.length}${column.scale ? `, ${column.scale}` : ''})`: ''}}</small>\r\n            <div class=\"column-icons\">\r\n                @if(isUniqueColumn){\r\n                <span class=\"mat-icon unique-key-icon\" title=\"Colonne avec contrainte d'unicit\u00E9\">looks_one</span>\r\n                }\r\n                @if(isPrimaryKey || isForeignKey){\r\n                <span class=\"mat-icon\" [class.primary-key-icon]=\"isPrimaryKey\" [title]=\"'Colonne de la clef ' + (isPrimaryKey ?\r\n                    'primaire' : '\u00E9trang\u00E8re')\" [class.key-icon]=\"isForeignKey\">key</span>\r\n                }\r\n                @if(allowSync() && (!canEdit(column) || !isEditSafe(column))){\r\n                <span class=\"lock-icon mat-icon\" title=\"Colonne verrouill\u00E9e\">lock</span>\r\n                }\r\n            </div>\r\n            @if (sort()?.column === column.columnName) {\r\n            @if (sort()?.isAsc) {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\" (click)=\"toggleSort(column.columnName)\">arrow_downward</span>\r\n            }\r\n            }\r\n            <div class=\"filter-group-controls\" #controls>\r\n                <chr-column-filter #filterElement [class.hidden]=\"!allowFiltering()\" [by]=\"column.columnName\"\r\n                    [mode]=\"filter()[column.columnName]?.mode ?? null\" [attr.data-applied]=\"\"\r\n                    [value]=\"filter()[column.columnName]?.value ?? ''\" [columnMetadata]=\"column\"\r\n                    [suggestions]=\"columnSuggestions()[column.columnName]\"\r\n                    (valueChange)=\"onFilterValue(column.columnName, $event)\"\r\n                    (filterChange)=\"onFilterBy(column.columnName, $event)\" title=\"Double-clic pour d\u00E9finir un filtre\"\r\n                    class=\"filter\"></chr-column-filter>\r\n                @let isGroupBySource = groupBy() == null || groupBy()?.column === column.columnName;\r\n                <chr-column-group #groupElement [class.hidden]=\"!allowGrouping()\"\r\n                    [style.display]=\"!isGroupBySource ? 'none' : ''\" [by]=\"column.columnName\"\r\n                    [mode]=\"groupBy()?.mode ?? null\" (groupChange)=\"onGroupBy($event)\" class=\"group\"\r\n                    title=\"Double-clic pour d\u00E9finir un groupement\"></chr-column-group>\r\n                @if(isComputedColumn){\r\n                <span class=\"filter-icon mat-icon\" title=\"Colonne calcul\u00E9e\">functions</span>\r\n                }@else if(!isGroupBySource && groupBy() !== null){\r\n                <div class=\"group-by-include\" title=\"Inclure cette colonne dans le r\u00E9sultat group\u00E9\">\r\n                    <span class=\"mat-icon filter-icon disabled\">stack</span>\r\n                    <span class=\"toggle faded\">Inclure</span>\r\n                    <input #checkbox [checked]=\"groupByMap()[column.columnName]\"\r\n                        (change)=\"onGroupByIncludedChange(column.columnName, checkbox.checked)\"\r\n                        [name]=\"column.columnName+'-include'\" type=\"checkbox\" />\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #rowTemplate let-row let-index=\"index\">\r\n        @let contextMenuItems = datarowContextMenuActions(row, index);\r\n        <div #rowElement class=\"grid-row\"\r\n            [style.grid-template-columns]=\"'repeat(' + columns().length + ', minmax(15rem, auto))'\"\r\n            [attr.data-is-added]=\"row.flag === 'added'\" [scrollIntoView]=\"!row.valid\" [attr.data-is-valid]=\"row.valid\"\r\n            (click)=\"rowClick.emit({ rowIndex: index, row: row.data, event: $event })\" [contextMenu]=\"contextMenuItems\"\r\n            [attr.data-has-changed]=\"row.flag === 'modified'\" [attr.data-is-deleted]=\"row.flag === 'deleted'\">\r\n            @for (column of columns(); track column.columnName) {\r\n            <div class=\"grid-cell\" [attr.data-selected]=\"selectedColumn() === column.columnName\">\r\n                <chr-editable-cell class=\"cell\" [value]=\"row.data[column.columnName]\" [row]=\"row.data\"\r\n                    [customTemplate]=\"getCellTemplate(column.columnName, column.dataType ?? 'varchar')\"\r\n                    (isEditingChange)=\"$event ? selectedColumn.set(column.columnName) : selectedColumn.set(null)\"\r\n                    (valueChange)=\"onCellChange(index, row, column, $event)\"\r\n                    [allowUpdate]=\"allowUpdate() && (isEditSafe(column)||row.flag === 'added') && row.flag !== 'deleted' && canEdit(column)\"\r\n                    [columnMetadata]=\"column\"></chr-editable-cell>\r\n                @if($last){\r\n                @if(actions().length > 0){\r\n                <div class=\"actions-menu\">\r\n                    <span class=\"actions-menu-trigger mat-icon icon-button\" [style.cursor]=\"'pointer'\"\r\n                        [openOnClick]=\"true\" [contextMenu]=\"contextMenuItems\">more_vert</span>\r\n                </div>\r\n                }\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </ng-template>\r\n\r\n    <chr-paginator [id]=\"id()\" [page]=\"currentPage()\" [pageSize]=\"pageSize()\" (pageChange)=\"onPageChange($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"></chr-paginator>\r\n</div>\r\n} @else {\r\n<div class=\"empty-state\">\r\n    <p>Aucune donn\u00E9e</p>\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.hidden{display:none}.data-grid-wrapper{position:relative;display:grid!important;overflow:auto}.data-grid-container{background:inherit;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:1rem 0;--faded-text-color: color-mix( in srgb, var(--text-color) 40%, var(--background-color) 50% )}.data-grid-container .data-grid-header{border-top-left-radius:inherit;border-top-right-radius:inherit;background:var(--primary-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.data-grid-container .data-grid-header h3{margin:0;color:var(--primary-contrast-color);font-size:1.25rem;font-weight:600}.data-grid-container .data-grid-header .table-description{color:var(--primary-contrast-color);font-size:.875rem;font-style:italic}.data-grid-container .data-grid-header .data-grid-info{display:flex;align-items:center;gap:1rem;color:var(--text-color);font-size:.875rem}.data-grid-container .data-grid-header .data-grid-info span{background:var(--background-color);padding:.25rem .75rem;border-radius:1.25rem}.data-grid-container .data-grid-header .data-grid-info .sync-button{border:2px solid var(--warn-color);box-shadow:0 0 .5rem .15rem var(--warn-color)}.data-grid-container .data-grid-header .data-grid-info .sync-button:hover{background-color:var(--warn-color);color:var(--warn-contrast-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button{color:var(--success-contrast-color);background-color:var(--error-color)}.data-grid-container .data-grid-header .data-grid-info .tracking-persistence-button[data-enabled=true]{background-color:var(--success-color)}.data-grid-container .data-grid-header .data-grid-info .icon-button{cursor:pointer;padding:.1rem .25rem;font-size:1rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.data-grid-container .data-grid-header .data-grid-info .icon-button:hover{background-color:color-mix(in srgb,var(--background-color) 80%,var(--secondary-color) 80%);color:var(--secondary-contrast-color)}.data-grid-container .viewport{font-size:.875rem;scrollbar-width:none;grid-column:1/-1}.data-grid-container .viewport ::-webkit-scrollbar{display:none}.data-grid-container .viewport{-ms-overflow-style:none}.data-grid-container .grid-header,.data-grid-container .grid-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;font-size:.875rem}.data-grid-container .grid-row{display:grid!important;grid-column:1/-1}.data-grid-container .grid-header{position:sticky!important;top:0;z-index:10;background:color-mix(in srgb,var(--background-color) 80%,transparent 40%);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-bottom:2px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%)}.data-grid-container .grid-header-cell{position:relative;padding:.75rem 1rem;text-align:left;font-weight:600;color:color-mix(in srgb,var(--text-color) 90%,var(--background-color) 30%);-webkit-user-select:none;user-select:none}.data-grid-container .grid-header-cell .sort-receiver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.data-grid-container .grid-header-cell .sort-icon{position:absolute;right:.75rem;top:calc(50% - .75rem);font-size:1rem;color:var(--tertiary-color)}.data-grid-container .grid-header-cell .column-icons{position:absolute;right:.75rem;top:.5rem;display:flex;gap:.25rem;align-items:center}.data-grid-container .grid-header-cell .column-icons span,.data-grid-container .grid-header-cell .column-icons .mat-icon{font-size:1rem}.data-grid-container .grid-header-cell .primary-key-icon{color:var(--primary-color)}.data-grid-container .grid-header-cell .key-icon{color:var(--tertiary-color)}.data-grid-container .grid-header-cell .lock-icon{color:var(--warn-color)}.data-grid-container .grid-header-cell .column-type{font-weight:400;color:var(--faded-text-color);font-size:.75rem;text-transform:uppercase}.data-grid-container .grid-header-cell .filter-group-controls{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:calc(100% - .875rem)}.data-grid-container .grid-header-cell .group-by-include{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;accent-color:var(--primary-color)}.data-grid-container .grid-header-cell .filter-icon{font-size:1rem}.data-grid-container .grid-row{border-bottom:1px solid color-mix(in srgb,var(--text-color) 20%,var(--background-color) 90%);transition:background-color .2s ease;position:relative}.data-grid-container .grid-row:nth-child(2n){background-color:color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-row:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.25rem;background-color:transparent}.data-grid-container .grid-row[data-is-deleted=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--error-color) 20%)}.data-grid-container .grid-row[data-is-deleted=true]:after{background-color:var(--error-color)}.data-grid-container .grid-row[data-has-changed=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--warn-color) 20%)}.data-grid-container .grid-row[data-has-changed=true]:after{background-color:var(--warn-color)}.data-grid-container .grid-row[data-is-added=true]{background-color:color-mix(in srgb,var(--background-color) 90%,var(--primary-color) 20%)}.data-grid-container .grid-row[data-is-added=true]:after{background-color:var(--primary-color)}.data-grid-container .grid-row[data-is-valid=false]{box-shadow:inset 0 0 .25rem var(--error-color)}.data-grid-container .grid-row:hover{background-color:var(--neutral-color)}.data-grid-container .grid-cell{position:relative;padding:.75rem 1rem;border-right:1px solid color-mix(in srgb,var(--background-color) 90%,var(--neutral-color) 20%)}.data-grid-container .grid-cell .cell{display:inline-block;min-width:100%;max-width:12rem}.data-grid-container .grid-cell .cell[data-changed=true]{font-weight:600;color:var(--warn-color)}.data-grid-container .grid-cell:last-child{border-right:none}.data-grid-container .grid-cell .actions-menu{position:absolute;right:0rem;top:50%;transform:translateY(-50%)}.data-grid-container .no-data-row{padding:2rem;text-align:center}.data-grid-container .no-data-row .no-data{color:var(--faded-text-color);font-style:italic}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }, { type: i0.Output, args: ["tableChange"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], headerScroll: [{ type: i0.ViewChild, args: ['headerScroll', { isSignal: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], onInit: [{ type: i0.Output, args: ["onInit"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }, { type: i0.Output, args: ["groupByChange"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], enableVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVirtualization", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], allowGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGrouping", required: false }] }], allowInsert: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowInsert", required: false }] }], allowUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUpdate", required: false }] }], allowDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDelete", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], allowSync: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSync", required: false }] }], allowRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRefresh", required: false }] }], allowNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNavigation", required: false }] }], allowExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExport", required: false }] }], allowManageTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageTrackingPersistence", required: false }] }], allowManageDistincValueFetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManageDistincValueFetching", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], onExport: [{ type: i0.Output, args: ["onExport"] }], onSync: [{ type: i0.Output, args: ["onSync"] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }], onAddRow: [{ type: i0.Output, args: ["onAddRow"] }], onDeleteRow: [{ type: i0.Output, args: ["onDeleteRow"] }], onForeignTableNavigate: [{ type: i0.Output, args: ["onForeignTableNavigate"] }], onNavigate: [{ type: i0.Output, args: ["onNavigate"] }], onFilterValueChange: [{ type: i0.Output, args: ["onFilterValueChange"] }], allowFetchDistinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFetchDistinctValues", required: false }] }, { type: i0.Output, args: ["allowFetchDistinctValuesChange"] }], crossRequestTrackingPersistence: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossRequestTrackingPersistence", required: false }] }, { type: i0.Output, args: ["crossRequestTrackingPersistenceChange"] }], modifiedCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedCells", required: false }] }, { type: i0.Output, args: ["modifiedCellsChange"] }], modifiedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiedRows", required: false }] }, { type: i0.Output, args: ["modifiedRowsChange"] }], addedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedRows", required: false }] }, { type: i0.Output, args: ["addedRowsChange"] }], deletedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedRows", required: false }] }, { type: i0.Output, args: ["deletedRowsChange"] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChrCellDefDirective), { isSignal: true }] }], trackByMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByMode", required: false }] }, { type: i0.Output, args: ["trackByModeChange"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], primaryKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryKey", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }] } });
 
-class CachingDefaults {
-    constructor(init) {
-        this.duration = 1000 * 60 * 5; // 5 minutes par défaut;
-        Object.assign(this, init);
+class MessageBanner {
+    constructor() {
+        this.isVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.closable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        this.title = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.message = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
+        this.type = input('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.close = () => {
+            this.isVisible.set(false);
+        };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageBanner, isStandalone: true, selector: "chr-message-banner", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        @if(icon()){\r\n        <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n        }\r\n        @if(title()){\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n        }\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }); }
 }
-const CHR_CACHING_DEFAULTS = new InjectionToken('CHR_CACHING_DEFAULTS', {
-    factory: () => new CachingDefaults(),
-});
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageBanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'chr-message-banner', imports: [], template: "@if(isVisible()){\r\n<div class=\"message-banner\" [attr.data-type]=\"type()\">\r\n    <div class=\"banner-header\">\r\n        @if(icon()){\r\n        <span class=\"mat-icon material-symbols banner-icon\" [attr.data-icon]=\"icon()\">{{ icon() }}</span>\r\n\r\n        }\r\n        @if(title()){\r\n        <strong class=\"banner-title\">{{title()}}</strong>\r\n        }\r\n    </div>\r\n    <div class=\"message-content\">\r\n        {{message()}}\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(closable()){\r\n    <span class=\"mat-icon material-symbols close-icon\" (click)=\"close()\">close</span>\r\n    }\r\n</div>\r\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols:opsz,wght,FILL,GRAD@24,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons\";.mat-icon:not(mat-icon),.material-symbols{font-family:Material Symbols;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.mat-icon:not(mat-icon).small,.material-symbols.small{font-size:1rem}.mat-icon:not(mat-icon).large,.material-symbols.large{font-size:2rem}.message-banner[data-type=none]{--banner-color: var(--neutral-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--neutral-color) 10% );--banner-icon-color: var(--text-color)}.message-banner[data-type=info]{--banner-color: var(--primary-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--primary-color) 10% );--banner-icon-color: var(--primary-color)}.message-banner[data-type=warning]{--banner-color: var(--warn-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--warn-color) 10% );--banner-icon-color: var(--warn-color)}.message-banner[data-type=error]{--banner-color: var(--error-color);--banner-bg-color: color-mix( in srgb, var(--background-color) 90%, var(--error-color) 10% );--banner-icon-color: var(--error-color)}.message-banner{flex:1 1 auto;border:1px solid var(--banner-color);background-color:var(--banner-bg-color);color:var(--text-color);padding:.65rem 1rem;margin:.5rem 0;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative;font-size:.875rem}.message-banner .banner-header{position:absolute;display:flex;align-items:center;gap:.5rem;top:-.75rem;left:.5rem;-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.25rem;padding:0 .5rem;font-size:.75rem}.message-banner .banner-header .banner-icon{color:var(--banner-icon-color);fill:var(--banner-icon-color)}.message-banner ::ng-deep .message-content{display:flex;flex-direction:column;justify-items:center;width:100%}.message-banner ::ng-deep .message-content *{display:flex;align-items:center}\n"] }]
+        }], propDecorators: { closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
-/**
- * Token de contexte HTTP mettre cache la réponse d'une requête via l'intercepteur CachingInterceptor.
- * La ressource doit être spécifiée pour identifier l'entrée de cache.
- * Vous êtes responsable de l'invalidation du cache via le token INVALIDATE_CACHE.
- */
-const ENABLE_CACHE = new HttpContextToken(() => null);
-/**
- * Token de contexte HTTP pour invalider une entrée de cache spécifique.
- * La ressource doit être spécifiée pour identifier l'entrée de cache à invalider.
- */
-const INVALIDATE_CACHE = new HttpContextToken(() => null);
-class CacheService {
+class Spinner {
     constructor() {
-        this._default = inject(CHR_CACHING_DEFAULTS);
-        this._cache = {};
-        /**
-         * Récupère une valeur mise en cache par sa clé
-         * @param key La clé de la valeur à récupérer
-         * @returns La valeur mise en cache ou undefined si elle n'existe pas
-         */
-        this.get = (key) => {
-            const entry = this._cache[key];
-            if (entry) {
-                // Vérifie si l'entrée est expirée
-                if (entry.status != 'expired' && Date.now() < entry.expiry) {
-                    return entry.value;
-                }
-                else {
-                    // Marque l'entrée comme expirée
-                    entry.status = 'expired';
-                    return null;
-                }
-            }
-            return null;
-        };
-        /**
-         * Met en cache une valeur avec une clé spécifique
-         * @param key La clé sous laquelle stocker la valeur
-         * @param value La valeur à mettre en cache
-         */
-        this.set = (key, value) => {
-            this._cache[key] = {
-                value: value,
-                expiry: Date.now() + this._cacheValidityDuration,
-                status: 'valid',
-            };
-        };
-        /**
-         * Invalide une entrée de cache spécifique
-         * @param key La clé de l'entrée à invalider
-         */
-        this.invalidate = (key) => {
-            if (this._cache[key]) {
-                this._cache[key].status = 'expired';
-            }
-        };
-        /**
-         * Mets à jour la durée de validité du cache
-         * @param duration Durée en millisecondes
-         */
-        this.setCacheValidityDuration = (duration) => {
-            this._cacheValidityDuration = duration;
-        };
-        this._cacheValidityDuration = this._default.duration;
+        this.spinnerService = inject(SpinnerService);
+        this.shown = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+        this.isLoading = this.spinnerService.isLoading;
+        this.shouldShow = computed(() => this.isLoading() || this.shown(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldShow" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Spinner, isStandalone: true, selector: "chr-spinner", inputs: { shown: { classPropertyName: "shown", publicName: "shown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\r\n<div class=\"spinner-backdrop\">\r\n    <div class=\"spinner-container\">\r\n        <div class=\"pulse-rings\">\r\n            <div class=\"pulse-ring pulse-ring-1\"></div>\r\n            <div class=\"pulse-ring pulse-ring-2\"></div>\r\n            <div class=\"pulse-ring pulse-ring-3\"></div>\r\n            <div class=\"pulse-ring pulse-ring-4\"></div>\r\n        </div>\r\n\r\n        <div class=\"loading-text\">\r\n            <p>Chargement...</p>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";.spinner-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,black 40%,transparent);display:flex;justify-content:center;align-items:center;z-index:9997;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease-in-out}.spinner-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:3rem;border-radius:1.5rem;min-width:250px;animation:slideUp .4s ease-out}.pulse-rings{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;border:3px solid transparent;border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(.25,.46,.45,.94) infinite}.pulse-ring-1{width:40px;height:40px;border-color:var(--primary-color);animation-delay:0s;box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 30%,transparent)}.pulse-ring-2{width:60px;height:60px;border-color:var(--tertiary-color);animation-delay:.6s;box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 25%,transparent)}.pulse-ring-3{width:80px;height:80px;border-color:var(--secondary-color);animation-delay:1.2s;box-shadow:0 0 30px color-mix(in srgb,var(--secondary-color) 20%,transparent)}.pulse-ring-4{width:100px;height:100px;border-color:var(--primary-color);animation-delay:1.8s;opacity:.7;box-shadow:0 0 35px color-mix(in srgb,var(--primary-color) 15%,transparent)}.loading-text{text-align:center;color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loading-text p{margin:0;font-size:1.2rem;font-weight:500;color:var(--primary-color);letter-spacing:.5px;animation:text-pulse 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse-ring{0%{transform:scale(.6);opacity:1;border-width:4px}50%{opacity:.8;border-width:2px}to{transform:scale(1.3);opacity:0;border-width:1px}}@keyframes text-pulse{0%,to{opacity:.8}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--primary-color) 30%,transparent)}}@media(max-width:768px){.spinner-container{min-width:200px;padding:2rem;gap:1.5rem}.pulse-rings{width:100px;height:100px}.pulse-ring-1{width:35px;height:35px}.pulse-ring-2{width:50px;height:50px}.pulse-ring-3{width:65px;height:65px}.pulse-ring-4{width:80px;height:80px}.loading-text p{font-size:1rem}}.dark-theme .spinner-container{box-shadow:0 20px 40px color-mix(in srgb,black 40%,transparent);border-color:var(--neutral-color)}.dark-theme .pulse-ring-1{box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 50%,transparent)}.dark-theme .pulse-ring-2{box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 40%,transparent)}.as400-theme .pulse-ring{filter:drop-shadow(0 0 8px var(--primary-color))}.as400-theme .loading-text p{text-shadow:0 0 10px var(--primary-color)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Spinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'chr-spinner', imports: [], template: "@if (shouldShow()) {\r\n<div class=\"spinner-backdrop\">\r\n    <div class=\"spinner-container\">\r\n        <div class=\"pulse-rings\">\r\n            <div class=\"pulse-ring pulse-ring-1\"></div>\r\n            <div class=\"pulse-ring pulse-ring-2\"></div>\r\n            <div class=\"pulse-ring pulse-ring-3\"></div>\r\n            <div class=\"pulse-ring pulse-ring-4\"></div>\r\n        </div>\r\n\r\n        <div class=\"loading-text\">\r\n            <p>Chargement...</p>\r\n        </div>\r\n    </div>\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";.spinner-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:color-mix(in srgb,black 40%,transparent);display:flex;justify-content:center;align-items:center;z-index:9997;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease-in-out}.spinner-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:3rem;border-radius:1.5rem;min-width:250px;animation:slideUp .4s ease-out}.pulse-rings{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;border:3px solid transparent;border-radius:50%;animation:pulse-ring 2.5s cubic-bezier(.25,.46,.45,.94) infinite}.pulse-ring-1{width:40px;height:40px;border-color:var(--primary-color);animation-delay:0s;box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 30%,transparent)}.pulse-ring-2{width:60px;height:60px;border-color:var(--tertiary-color);animation-delay:.6s;box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 25%,transparent)}.pulse-ring-3{width:80px;height:80px;border-color:var(--secondary-color);animation-delay:1.2s;box-shadow:0 0 30px color-mix(in srgb,var(--secondary-color) 20%,transparent)}.pulse-ring-4{width:100px;height:100px;border-color:var(--primary-color);animation-delay:1.8s;opacity:.7;box-shadow:0 0 35px color-mix(in srgb,var(--primary-color) 15%,transparent)}.loading-text{text-align:center;color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.loading-text p{margin:0;font-size:1.2rem;font-weight:500;color:var(--primary-color);letter-spacing:.5px;animation:text-pulse 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse-ring{0%{transform:scale(.6);opacity:1;border-width:4px}50%{opacity:.8;border-width:2px}to{transform:scale(1.3);opacity:0;border-width:1px}}@keyframes text-pulse{0%,to{opacity:.8}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--primary-color) 30%,transparent)}}@media(max-width:768px){.spinner-container{min-width:200px;padding:2rem;gap:1.5rem}.pulse-rings{width:100px;height:100px}.pulse-ring-1{width:35px;height:35px}.pulse-ring-2{width:50px;height:50px}.pulse-ring-3{width:65px;height:65px}.pulse-ring-4{width:80px;height:80px}.loading-text p{font-size:1rem}}.dark-theme .spinner-container{box-shadow:0 20px 40px color-mix(in srgb,black 40%,transparent);border-color:var(--neutral-color)}.dark-theme .pulse-ring-1{box-shadow:0 0 20px color-mix(in srgb,var(--primary-color) 50%,transparent)}.dark-theme .pulse-ring-2{box-shadow:0 0 25px color-mix(in srgb,var(--tertiary-color) 40%,transparent)}.as400-theme .pulse-ring{filter:drop-shadow(0 0 8px var(--primary-color))}.as400-theme .loading-text p{text-shadow:0 0 10px var(--primary-color)}\n"] }]
+        }], propDecorators: { shown: [{ type: i0.Input, args: [{ isSignal: true, alias: "shown", required: false }] }] } });
 
-const ENABLE_PROGRESS = new HttpContextToken(() => null);
-class ProgressService {
+class ChrSimpleTableComponent {
     constructor() {
-        this._progressStates = {};
-        /**
-         * Récupère l'état de progression pour une clé spécifique
-         * @param key La clé de l'état de progression à récupérer
-         * @returns L'état de progression ou null si inexistant
-         */
-        this.get = (key) => {
-            const obs = this._progressStates[key];
-            if (!obs)
-                return null;
-            return this._progressStates[key].asObservable();
-        };
-        /**
-         * Met à jour l'état de progression pour une clé spécifique
-         * @param key La clé de l'état de progression à mettre à jour
-         * @param state Le nouvel état de progression
-         */
-        this.set = (key, state) => {
-            if (this._progressStates[key]) {
-                this._progressStates[key].next(state);
-            }
-            else {
-                this._progressStates[key] = new BehaviorSubject(state);
-            }
-        };
+        this.id = input(crypto.randomUUID(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.data = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.layout = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.page = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.pageSize = model(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSimpleTableComponent, isStandalone: true, selector: "chr-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, read: TemplateRef }, { propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: ChrPaginatorComponent, selector: "app-chr-paginator,chr-paginator, chr-paginator", inputs: ["page", "pageSize", "id", "allowSizeChange", "allowPageEdit", "isPageEditing"], outputs: ["pageChange", "pageSizeChange", "isPageEditingChange"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSimpleTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chr-table', imports: [CommonModule, NgxPaginationModule, ChrPaginatorComponent], encapsulation: ViewEncapsulation.None, template: "<table class=\"chr-table\" [attr.data-layout]=\"layout()\">\n    @if (captionTemplate) {\n    <caption>\n        <ng-container [ngTemplateOutlet]=\"captionTemplate\"></ng-container>\n    </caption>\n    }\n    @if (headerTemplate) {\n    <thead>\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n    </thead>\n    }\n    @if (rowTemplate) {\n    <tbody>\n        @for (entry of data() | paginate: { id: id(), itemsPerPage: pageSize(), currentPage: page() }; track $index) {\n        <ng-container [ngTemplateOutlet]=\"rowTemplate\" [ngTemplateOutletContext]=\"{ $implicit: entry }\">\n        </ng-container>\n        } @empty {\n        <tr>\n            <td>Aucune donn\u00E9e disponible</td>\n        </tr>\n        }\n    </tbody>\n    }\n</table>\n<chr-paginator [id]=\"id()\" [(page)]=\"page\" [(pageSize)]=\"pageSize\"></chr-paginator>", styles: [":host{display:block}.chr-table{table-layout:auto;width:100%;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 .125rem .5rem #00000012}.chr-table[data-layout=fixed]{table-layout:fixed}.chr-table thead th{text-align:left}.chr-table thead th:last-child:not(:first-child){text-align:right}.chr-table tbody th{text-align:center}.chr-table tbody td{text-align:left}.chr-table tbody td:last-child:not(:first-child){text-align:right}.chr-table th,.chr-table td{padding:.75rem;text-align:left}.chr-table td{padding:.25rem .75rem}.chr-table caption{padding:.75rem;text-align:left;width:100%}.chr-table th,.chr-table caption{background-color:var(--primary-color);color:var(--primary-contrast-color);font-weight:600}.chr-table tr:nth-child(2n){background-color:var(--neutral-color)}.chr-table tr:hover{box-shadow:inset 0 0 0 .125rem color-mix(in srgb,var(--primary-color) 30%,transparent)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], captionTemplate: [{
+                type: ContentChild,
+                args: ['caption', { read: TemplateRef }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { read: TemplateRef }]
+            }], rowTemplate: [{
+                type: ContentChild,
+                args: ['row', { read: TemplateRef }]
+            }] } });
 
-class CookiesService {
-    constructor() { }
-    /**
-     * delete cookie
-     * @param name
-     */
-    deleteCookie(name) {
-        this.setCookie(name, "", -1);
+class TabToEnterHandlerDirective {
+    constructor() {
+        this.el = inject(ElementRef);
     }
-    /**
-     * get cookie
-     * @param {string} name
-     * @returns {string}
-     */
-    getCookie(name) {
-        const ca = decodeURIComponent(document.cookie).split(";");
-        const caLen = ca.length;
-        const cookieName = `${name}=`;
-        let c;
-        for (let i = 0; i < caLen; i += 1) {
-            c = ca[i].replace(/^\s+/g, "");
-            if (c.indexOf(cookieName) === 0) {
-                return c.substring(cookieName.length, c.length);
-            }
+    handleTab(event) {
+        if (event.key === 'Tab') {
+            const enter = new KeyboardEvent('keyup', {
+                ...event,
+                key: 'Enter',
+                code: 'Enter',
+                bubbles: true,
+                keyCode: 13,
+            });
+            event.target?.dispatchEvent(enter);
         }
-        return "";
-    }
-    /**
-     * set cookie
-     * @param {string} name
-     * @param {string} value
-     * @param {number} expireDays
-     * @param {string} path
-     */
-    setCookie(name, value, expireDays, path = "") {
-        const d = new Date();
-        d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
-        const expires = `expires=${d.toUTCString()}`;
-        const cpath = path ? `; path=${path}` : "";
-        document.cookie = `${name}=${value}; ${expires}${cpath}; SameSite=Lax`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabToEnterHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: TabToEnterHandlerDirective, isStandalone: true, selector: "[tab-enter]", host: { listeners: { "keydown": "handleTab($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabToEnterHandlerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: "root",
+                    selector: '[tab-enter]',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [] });
-
-const SHOW_SPINNER = new HttpContextToken(() => true);
+        }], propDecorators: { handleTab: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
-class TableConstraint {
-    constructor(data = {}) {
-        this.columns = [];
-        this.constraintCatalog = data.constraintCatalog || '';
-        this.constraintSchema = data.constraintSchema || '';
-        this.constraintName = data.constraintName || '';
-        this.constraintType = data.constraintType || '';
-        this.tableCatalog = data.tableCatalog || '';
-        this.tableName = data.tableName || '';
-        this.tableSchema = data.tableSchema || '';
-        this.columns = data.columns
-            ? data.columns.map((d) => new TableConstraintColumn(d))
-            : [];
-    }
-    fullTableName() {
-        return `${this.tableSchema}.${this.tableName}`;
-    }
-    fullConstraintName() {
-        return `${this.constraintSchema}.${this.constraintName}`;
-    }
-    isPrimaryKey() {
-        return this.constraintType === 'PRIMARY KEY';
-    }
-    isForeignKey() {
-        return this.constraintType === 'FOREIGN KEY';
-    }
-    isUnique() {
-        return this.constraintType === 'UNIQUE';
-    }
-    isCheck() {
-        return this.constraintType === 'CHECK';
+class ChrPreventReloadDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.chrPreventReload = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrPreventReload" }] : /* istanbul ignore next */ []));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPreventReloadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPreventReloadDirective, isStandalone: true, selector: "[chrPreventReload]", inputs: { chrPreventReload: { classPropertyName: "chrPreventReload", publicName: "chrPreventReload", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:beforeunload": "chrPreventReload() ? $event.preventDefault() : null" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPreventReloadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[chrPreventReload]',
+                    host: {
+                        '(window:beforeunload)': 'chrPreventReload() ? $event.preventDefault() : null',
+                    },
+                }]
+        }], propDecorators: { chrPreventReload: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPreventReload", required: false }] }] } });
 
-class BaseTable {
-    addRow(row) {
-        this.rows.push(row);
-        this.count += 1;
-        return row;
-    }
-    updateRow(row) {
-        const index = this.rows.findIndex((r) => this.compareRows(r, row));
-        if (index !== -1) {
-            this.rows[index] = row;
-            return true;
-        }
-        return false;
+class ChrDebounceDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.defaults = inject(CHR_DEBOUNCE_DEFAULTS);
+        this.renderer = inject(Renderer2);
+        this.subject = new Subject();
+        this.chrDebounceTime = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrDebounceTime" }] : /* istanbul ignore next */ []));
+        this.debounceTimeValue = computed(() => {
+            const time = this.chrDebounceTime();
+            if (time !== null && !isNaN(Number(time))) {
+                return Number(time);
+            }
+            return this.defaults.baseInputs;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "debounceTimeValue" }] : /* istanbul ignore next */ []));
+        this.subscription = of();
+        this.isDispatching = false;
     }
-    removeRow(row) {
-        const index = this.rows.findIndex((r) => this.compareRows(r, row));
-        if (index !== -1) {
-            this.rows.splice(index, 1);
-            this.count -= 1;
-            return true;
-        }
-        return false;
+    ngOnInit() {
+        const element = this.host.nativeElement;
+        this.subscription = this.subject.pipe(debounceTime$1(this.debounceTimeValue()));
+        // Listener en phase CAPTURE pour intercepter AVANT tous les listeners Angular
+        this.captureListener = this.renderer.listen(element, 'input', (event) => {
+            if (this.isDispatching) {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            this.subject.next(event);
+        }, { capture: true });
+        this.subscription.subscribe((event) => {
+            this.isDispatching = true;
+            const newEvent = new InputEvent('input', {
+                bubbles: true,
+                cancelable: true,
+                data: event.data,
+                inputType: event.inputType,
+            });
+            element.dispatchEvent(newEvent);
+            setTimeout(() => (this.isDispatching = false), 0);
+        });
     }
-    compareRows(row1, row2) {
-        return JSON.stringify(row1) === JSON.stringify(row2);
+    ngOnDestroy() {
+        this.captureListener?.();
+        this.subject.complete();
     }
-    getColumnByName(columnName) {
-        return this.columnMetadatas.find((cmd) => cmd.columnName === columnName);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrDebounceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrDebounceDirective, isStandalone: true, selector: "[chrDebounce]", inputs: { chrDebounceTime: { classPropertyName: "chrDebounceTime", publicName: "chrDebounceTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrDebounceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[chrDebounce]',
+                }]
+        }], propDecorators: { chrDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrDebounceTime", required: false }] }] } });
+
+class ChrHoverDirective {
+    constructor() {
+        this.el = inject((ElementRef));
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.eventListeners = [];
+        this.chrHoverContext = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrHoverContext" }] : /* istanbul ignore next */ []));
+        this.chrHoverSnap = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrHoverSnap" }] : /* istanbul ignore next */ []));
+        this.chrHoverPosition = input('right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrHoverPosition" }] : /* istanbul ignore next */ []));
+        this.chrHoverCloseDelay = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chrHoverCloseDelay" }] : /* istanbul ignore next */ []));
+        this.closeTimeout = null;
+        this.overlayEventListeners = [];
+        this.mousePositionStrategy = (mousemove) => {
+            const positionOffset = { left: mousemove.clientX, top: mousemove.clientY };
+            const componentSize = this.overlayRef?.overlayElement.getBoundingClientRect();
+            switch (this.chrHoverPosition()) {
+                case 'above':
+                    positionOffset.top -= (componentSize?.height || 0) + 20;
+                    positionOffset.left -= (componentSize?.width || 0) / 2;
+                    break;
+                case 'below':
+                    positionOffset.top += 20;
+                    positionOffset.left -= (componentSize?.width || 0) / 2;
+                    break;
+                case 'left':
+                    positionOffset.left -= (componentSize?.width || 0) + 20;
+                    positionOffset.top -= (componentSize?.height || 0) / 2;
+                    break;
+                case 'right':
+                    positionOffset.left += 20;
+                    positionOffset.top -= (componentSize?.height || 0) / 2;
+                    break;
+            }
+            const positionStrategy = this.overlay
+                .position()
+                .global()
+                .left(`${positionOffset.left}px`)
+                .top(`${positionOffset.top}px`);
+            return positionStrategy;
+        };
+        this.snappedStrategy = () => {
+            const positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(this.el);
+            switch (this.chrHoverPosition()) {
+                case 'above':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'center',
+                            originY: 'top',
+                            overlayX: 'center',
+                            overlayY: 'bottom',
+                        },
+                        {
+                            originX: 'center',
+                            originY: 'bottom',
+                            overlayX: 'center',
+                            overlayY: 'top',
+                        },
+                    ]);
+                    break;
+                case 'below':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'center',
+                            originY: 'bottom',
+                            overlayX: 'center',
+                            overlayY: 'top',
+                        },
+                        {
+                            originX: 'center',
+                            originY: 'top',
+                            overlayX: 'center',
+                            overlayY: 'bottom',
+                        },
+                    ]);
+                    break;
+                case 'left':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'start',
+                            originY: 'center',
+                            overlayX: 'end',
+                            overlayY: 'center',
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'center',
+                            overlayX: 'start',
+                            overlayY: 'center',
+                        },
+                    ]);
+                    break;
+                case 'right':
+                    positionStrategy.withPositions([
+                        {
+                            originX: 'end',
+                            originY: 'center',
+                            overlayX: 'start',
+                            overlayY: 'center',
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'center',
+                            overlayX: 'end',
+                            overlayY: 'center',
+                        },
+                    ]);
+                    break;
+            }
+            return positionStrategy;
+        };
+        const positionStrategy = this.snappedStrategy();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            disposeOnNavigation: true,
+            disableClose: true,
+        });
     }
-    getConstraintsByType(type) {
-        return this.tableConstraints.filter((tc) => tc.constraintType === type);
+    ngOnInit() {
+        this.overlayRef.updatePositionStrategy(this.snappedStrategy());
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
+            this.clearCloseTimeout();
+            this.open();
+        }));
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
+            this.startCloseTimeout();
+        }));
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mousemove', (event) => {
+            if (!this.chrHoverSnap()) {
+                const positionStrategy = this.mousePositionStrategy(event);
+                this.overlayRef.updatePositionStrategy(positionStrategy);
+            }
+        }));
     }
-}
-class AnonymousTable extends BaseTable {
-    constructor(data) {
-        super();
-        this.catalog = data.catalog;
-        this.schema = data.schema;
-        this.name = data.name;
-        this.description = data.description;
-        this.isReadOnly = data.isReadOnly;
-        this.rowNumberIdentity = data.rowNumberIdentity;
-        this.columnMetadatas = data.columnMetadatas
-            ? data.columnMetadatas
-                .map((d) => new ColumnMetadata(d))
-                .sort((a, b) => a.ordinalPosition - b.ordinalPosition)
-            : [];
-        this.tableConstraints = data.tableConstraints
-            ? data.tableConstraints.map((d) => new TableConstraint(d))
-            : [];
-        this.hasPrimaryKey =
-            data.hasPrimaryKey === undefined ? false : Boolean(data.hasPrimaryKey);
-        this.rows = data.rows || [];
-        this.count = data.count || 0;
-        this.total = data.total || 0;
+    ngOnDestroy() {
+        this.clearCloseTimeout();
+        this.clearOverlayListeners();
+        this.overlayRef.dispose();
+        this.removeEventListeners();
     }
-    fullName() {
-        return `${this.schema}.${this.name}`;
+    removeEventListeners() {
+        this.eventListeners.forEach((unlisten) => unlisten());
+        this.eventListeners = [];
     }
-    primaryKeyColumns() {
-        const pkColumns = this.tableConstraints.filter((tc) => tc.isPrimaryKey())?.[0]?.columns;
-        if (!pkColumns || pkColumns.length === 0) {
-            const rn = this.columnMetadatas.find((cmd) => cmd.columnName === 'ROW_NUMBER');
-            return rn ? [rn] : [];
-        }
-        return this.columnMetadatas.filter((cmd) => pkColumns?.some((pc) => pc.columnName === cmd.columnName));
+    startCloseTimeout() {
+        this.clearCloseTimeout();
+        this.closeTimeout = window.setTimeout(() => this.close(), this.chrHoverCloseDelay());
     }
-    getRowIdentifier(row) {
-        if (!this.hasPrimaryKey) {
-            if (row[this.rowNumberIdentity] !== undefined) {
-                return `${row[this.rowNumberIdentity]}`;
-            }
-        }
-        const pkColumns = this.primaryKeyColumns();
-        if (this.hasPrimaryKey && pkColumns.length > 0) {
-            let key = '';
-            let index = 0;
-            for (const pc of pkColumns) {
-                if (row[pc.columnName] === undefined || row[pc.columnName] === null) {
-                    if (row[this.rowNumberIdentity] !== undefined)
-                        return `${row[this.rowNumberIdentity]}`;
-                    else
-                        break;
-                }
-                if (index == pkColumns.length - 1) {
-                    key += `${pc.columnName}:${row[pc.columnName]}`;
-                }
-                else
-                    key += `${pc.columnName}:${row[pc.columnName]}|`;
-                index++;
-            }
-            return key;
+    clearCloseTimeout() {
+        if (this.closeTimeout != null) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = null;
         }
-        return JSON.stringify(row);
     }
-    getRowNumber(row) {
-        return row[this.rowNumberIdentity];
+    clearOverlayListeners() {
+        this.overlayEventListeners.forEach((u) => u());
+        this.overlayEventListeners = [];
     }
-    compareRows(row1, row2) {
-        if (!this.hasPrimaryKey) {
-            if (row1[this.rowNumberIdentity] !== undefined &&
-                row2[this.rowNumberIdentity] !== undefined) {
-                return row1[this.rowNumberIdentity] === row2[this.rowNumberIdentity];
+    open() {
+        if (!this.overlayRef.hasAttached()) {
+            if (!this.portal) {
+                this.portal = new TemplatePortal(this.template, this.vcr, this.chrHoverContext());
             }
+            const ref = this.overlayRef.attach(this.portal);
+            // keep overlay open when overlay itself is hovered
+            const overlayEl = this.overlayRef.overlayElement;
+            this.clearOverlayListeners();
+            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseenter', () => {
+                this.clearCloseTimeout();
+            }));
+            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseleave', () => {
+                this.startCloseTimeout();
+            }));
         }
-        const pkColumns = this.primaryKeyColumns();
-        if (this.hasPrimaryKey && pkColumns.length > 0) {
-            return pkColumns.every((pc) => row1[pc.columnName] === row2[pc.columnName]);
-        }
-        return super.compareRows(row1, row2);
-    }
-    addRow(row) {
-        row[this.rowNumberIdentity] = this.generateTempRowIdentifier();
-        return super.addRow(row);
-    }
-    generateTempRowIdentifier() {
-        return crypto.randomUUID();
-    }
-}
-
-class MinFileNameLengthValidator {
-    constructor() {
-        this.max = input(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     }
-    validate(control) {
-        const max = this.max();
-        return max ? minFileNameLength(max)(control) : null;
+    close() {
+        this.clearCloseTimeout();
+        this.clearOverlayListeners();
+        this.overlayRef.detach();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MinFileNameLengthValidator, isStandalone: true, selector: "[app-min-file-name-length]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrHoverCloseDelay: { classPropertyName: "chrHoverCloseDelay", publicName: "chrHoverCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
-                provide: NG_VALIDATORS,
-                useExisting: MinFileNameLengthValidator,
-                multi: true,
+                provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
+                useFactory: () => {
+                    disableClose: true;
+                },
             },
         ], ngImport: i0 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrHoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[app-min-file-name-length]',
+                    selector: '[chrHover]',
                     providers: [
                         {
-                            provide: NG_VALIDATORS,
-                            useExisting: MinFileNameLengthValidator,
-                            multi: true,
+                            provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
+                            useFactory: () => {
+                                disableClose: true;
+                            },
                         },
                     ],
-                    standalone: true,
                 }]
-        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
-function minFileNameLength(minLength) {
-    return (control) => {
-        const value = control.value;
-        const files = Array.isArray(value) ? value : [value];
-        if (!value)
-            return null;
-        const errors = {};
-        for (let i = 0; i < files.length; i++) {
-            const fileNameLength = files[i].name?.length;
-            if (fileNameLength === undefined)
-                continue;
-            if (fileNameLength < minLength)
-                errors[i] = fileNameLength;
-        }
-        if (Object.keys(errors).length <= 0)
-            return null;
-        return {
-            minFileNameLength: {
-                minFileNameLength: minLength,
-                indexes: errors,
-            },
-            indexes: errors,
-        };
-    };
-}
+        }], ctorParameters: () => [], propDecorators: { template: [{
+                type: Input,
+                args: ['chrHover']
+            }], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }], chrHoverCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverCloseDelay", required: false }] }] } });
 
-class AutoDataTable extends BaseTable {
-    get columnMetadatas() {
-        return this._columnMetadatas.sort((a, b) => a.ordinalPosition - b.ordinalPosition);
-    }
-    set columnMetadatas(value) {
-        this._columnMetadatas = value;
-    }
-    get rows() {
-        return this._rows;
-    }
-    set rows(value) {
-        this.count = value.length;
-        this._rows = value.map((row, index) => {
-            if (!this.hasPrimaryKey && !row.hasOwnProperty(this.rowNumberIdentity)) {
-                return { [this.rowNumberIdentity]: index + 1, ...row };
-            }
-            return row;
+class CsvExporter {
+    export(data, columns) {
+        const csvRows = [];
+        csvRows.push(columns.join(','));
+        data.forEach((row) => {
+            const values = columns.map((col) => {
+                const cell = row[col];
+                return typeof cell === 'string' ? cell.replace(/;/g, ',') : cell;
+            });
+            csvRows.push(values.join(','));
         });
-        this.deduceColumnTypes();
+        const csvContent = csvRows.join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        return URL.createObjectURL(blob);
     }
-    constructor(name, primaryKey = null, metadatas = [], rowIdentifier = 'ROW_NUMBER') {
-        super();
-        this.name = '';
-        this.schema = '';
-        this.total = 0;
-        this._columnMetadatas = [];
-        this.tableConstraints = [];
-        this._primaryKey = null;
-        this.hasPrimaryKey = this._primaryKey !== null;
-        this._rows = [];
-        this.count = 0;
-        this.getRowIdentifier = (row) => {
-            if (this._primaryKey && row.hasOwnProperty(this._primaryKey)) {
-                if (Array.isArray(this._primaryKey)) {
-                    return this._primaryKey.map((key) => row[key]).join('_');
-                }
-                return row[this._primaryKey].toString();
-            }
-            return row[this.rowNumberIdentity].toString();
-        };
-        this.getRowNumber = (row) => {
-            return row[this.rowNumberIdentity];
-        };
-        this.primaryKeyColumns = () => {
-            if (!this._primaryKey) {
-                return [];
-            }
-            return this.columnMetadatas.filter((col) => col.columnName === this._primaryKey);
-        };
-        this.deduceColumnTypes = () => {
-            if (this.rows.length === 0) {
-                return;
-            }
-            if (this.columnMetadatas.length !== 0)
-                return;
-            for (const key of Object.keys(this.rows[0])) {
-                const inferredType = typeof this.rows[0][key];
-                const existingIndex = this.columnMetadatas.findIndex((md) => md.columnName === key);
-                const existingMetadata = this.columnMetadatas[existingIndex];
-                if (!existingMetadata) {
-                    const md = {
-                        ordinalPosition: this.columnMetadatas.length + 1,
-                        length: 0,
-                        tableName: this.name,
-                        tableSchema: this.schema,
-                        isIdentity: false,
-                        isGenerated: false,
-                        isUpdatable: false,
-                        tooltip: `${inferredType} ${length ? `(${inferredType})` : ''}`,
-                        columnName: key,
-                        dataType: inferredType,
-                        isNullable: false,
-                    };
-                    this.columnMetadatas.push(md);
-                }
+    canExport(filetype) {
+        const supportedTypes = ['.csv', 'text/csv', 'csv'];
+        return supportedTypes.includes(filetype);
+    }
+}
+
+class JsonExporter {
+    export(data, columns) {
+        const jsonData = data.map((row) => {
+            const obj = {};
+            columns.forEach((col) => {
+                obj[col] = row[col];
+            });
+            return obj;
+        });
+        const blob = new Blob([JSON.stringify(jsonData, null, 2)], {
+            type: 'application/json;charset=utf-8;',
+        });
+        return URL.createObjectURL(blob);
+    }
+    canExport(filetype) {
+        const supportedTypes = ['.json', 'application/json', 'json'];
+        return supportedTypes.includes(filetype);
+    }
+}
+
+class DataExporterService {
+    constructor() {
+        this.exporter = [new CsvExporter(), new JsonExporter()];
+    }
+    setExporters(exporters) {
+        this.exporter = exporters;
+    }
+    registerExporter(exporter) {
+        this.exporter.push(exporter);
+    }
+    export(data, columns, filetype, filename = 'export', autodownload = false) {
+        const exporter = this.exporter.find((exp) => exp.canExport(filetype));
+        if (exporter) {
+            const url = exporter.export(data, columns);
+            if (autodownload) {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `${filename}.${filetype.split('.').pop()}`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
             }
-        };
+            return url;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DataExporterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class CachingDefaults {
+    constructor(init) {
+        this.duration = 1000 * 60 * 5; // 5 minutes par défaut;
+        Object.assign(this, init);
+    }
+}
+const CHR_CACHING_DEFAULTS = new InjectionToken('CHR_CACHING_DEFAULTS', {
+    factory: () => new CachingDefaults(),
+});
+
+/**
+ * Token de contexte HTTP mettre cache la réponse d'une requête via l'intercepteur CachingInterceptor.
+ * La ressource doit être spécifiée pour identifier l'entrée de cache.
+ * Vous êtes responsable de l'invalidation du cache via le token INVALIDATE_CACHE.
+ */
+const ENABLE_CACHE = new HttpContextToken(() => null);
+/**
+ * Token de contexte HTTP pour invalider une entrée de cache spécifique.
+ * La ressource doit être spécifiée pour identifier l'entrée de cache à invalider.
+ */
+const INVALIDATE_CACHE = new HttpContextToken(() => null);
+class CacheService {
+    constructor() {
+        this._default = inject(CHR_CACHING_DEFAULTS);
+        this._cache = {};
         /**
-         * Retourne une copie de l'AutoDataTable
+         * Récupère une valeur mise en cache par sa clé
+         * @param key La clé de la valeur à récupérer
+         * @returns La valeur mise en cache ou undefined si elle n'existe pas
          */
-        this.clone = () => {
-            const copy = new AutoDataTable(this.name, this._primaryKey, this.columnMetadatas, this.rowNumberIdentity);
-            for (const key of Object.keys(this)) {
-                if (Array.isArray(this[key])) {
-                    copy[key] = [...this[key]];
+        this.get = (key) => {
+            const entry = this._cache[key];
+            if (entry) {
+                // Vérifie si l'entrée est expirée
+                if (entry.status != 'expired' && Date.now() < entry.expiry) {
+                    return entry.value;
                 }
                 else {
-                    copy[key] = this[key];
+                    // Marque l'entrée comme expirée
+                    entry.status = 'expired';
+                    return null;
                 }
             }
-            return copy;
+            return null;
         };
-        this.name = name;
-        this._primaryKey = primaryKey;
-        this.hasPrimaryKey = this._primaryKey !== null;
-        this.rowNumberIdentity = rowIdentifier;
-        this.columnMetadatas = metadatas.map((md, index) => ({
-            displayName: md.displayName || md.columnName,
-            ordinalPosition: index + 1,
-            length: 0,
-            tableName: this.name,
-            tableSchema: this.schema,
-            isIdentity: false,
-            isGenerated: false,
-            isUpdatable: false,
-            tooltip: `${md.dataType?.toUpperCase()} ${md.length ? `(${md.length})` : ''}`,
-            ...md,
-        }));
-    }
-}
-
-class AutoDataSource {
-    constructor(config) {
-        this._subscriptions = [];
-        // Signaux internes
-        this._datagrid = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_datagrid" }] : /* istanbul ignore next */ []));
-        this._datagridElement = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_datagridElement" }] : /* istanbul ignore next */ []));
-        this._data = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
-        // protected _currentPage = signal(1);
-        // protected _pageSize = signal(10);
-        this._sort = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_sort" }] : /* istanbul ignore next */ []));
-        this._filter = signal({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
-        this._groupBy = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_groupBy" }] : /* istanbul ignore next */ []));
-        this._loading = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
-        this._error = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
-        // Données exposées (read-only)
-        this.data = this._data.asReadonly();
-        // public readonly currentPage: Signal<number> = this._currentPage.asReadonly();
-        // public readonly pageSize: Signal<number> = this._pageSize.asReadonly();
-        this.sort = this._sort.asReadonly();
-        this.filter = this._filter.asReadonly();
-        this.groupBy = this._groupBy.asReadonly();
-        this.loading = this._loading.asReadonly();
-        this.error = this._error.asReadonly();
-        // Données traitées
-        this.processedData = computed(() => {
-            let result = this._data();
-            if (!result)
-                return undefined;
-            result.total = result.rows.length ?? -1;
-            // Filtrage côté client
-            if (this.config.enableClientSideFiltering) {
-                result = this.applyFilters(result, this.filter());
-            }
-            // Tri côté client
-            if (this.config.enableClientSideSorting) {
-                result = this.applySort(result, this._sort());
-            }
-            // Pagination côté client
-            if (this.config.enableClientSidePagination) {
-                // Do nothing, it is handled by the data grid directly
-            }
-            result.count = result.rows.length;
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
-        this.config = {
-            initialData: config?.initialData,
-            pageSize: config?.pageSize ?? 10,
-            enableClientSidePagination: config?.enableClientSidePagination ?? true,
-            enableClientSideFiltering: config?.enableClientSideFiltering ?? true,
-            enableClientSideSorting: config?.enableClientSideSorting ?? true,
+        /**
+         * Met en cache une valeur avec une clé spécifique
+         * @param key La clé sous laquelle stocker la valeur
+         * @param value La valeur à mettre en cache
+         */
+        this.set = (key, value) => {
+            this._cache[key] = {
+                value: value,
+                expiry: Date.now() + this._cacheValidityDuration,
+                status: 'valid',
+            };
         };
-        if (this.config.initialData) {
-            this._data.set(this.config.initialData);
-        }
-        // this._pageSize.set(this.config.pageSize);
-        effect(() => {
-            if (this.processedData() && this._datagrid()) {
-                this._datagrid().table.set(this.processedData());
-                this._datagrid().ngOnDestroy = () => {
-                    this._datagrid()?.ngOnDestroy();
-                    this._datagrid.set(null);
-                    for (const sub of this._subscriptions) {
-                        sub.unsubscribe();
-                    }
-                };
-            }
-        });
-    }
-    // Méthode pour enregistrer la datagrid et écouter les événements de base
-    registerDataGrid(element) {
-        if (!element)
-            return;
-        this._datagridElement.set(element instanceof ElementRef ? element : null);
-        const datagrid = (element instanceof ElementRef ? element.nativeElement : element);
-        this._datagrid.set(datagrid);
-        this._subscriptions.push(
-        // datagrid.pageChange.subscribe((page: number) => {
-        //   console.log(
-        //     'Page change event received:',
-        //     page,
-        //     this._datagridElement(),
-        //     element,
-        //   );
-        //   // this._subscriptions.push(this.handlePageChange(page).subscribe());
-        // }),
-        // datagrid.pageSizeChange.subscribe((pageSize: number) => {
-        //   // this._subscriptions
-        //   //   .push(
-        //   //   this.handlePageSizeChange(pageSize).subscribe(),
-        //   //   );
-        // }),
-        datagrid.sort.subscribe((sort) => {
-            this._subscriptions.push(this.handleSortChange(sort).subscribe());
-        }), datagrid.filter.subscribe((filter) => {
-            this._subscriptions.push(this.handleFilterChange(filter).subscribe());
-        }), datagrid.groupBy.subscribe((group) => {
-            this._subscriptions.push(this.handleGroupChange(group).subscribe());
-        }));
-    }
-    // Méthodes publiques pour gérer les événements de la datagrid
-    // public handlePageChange(page: number): Observable<void> {
-    //   this._currentPage.set(page);
-    //   return this.onPageChange(page);
-    // }
-    // public handlePageSizeChange(pageSize: number): Observable<void> {
-    //   this._pageSize.set(pageSize);
-    //   this._currentPage.set(1); // Reset à la première page
-    //   return this.onPageSizeChange(pageSize);
-    // }
-    handleSortChange(sort) {
-        this._sort.set(sort);
-        return this.onSortChange(sort);
-    }
-    handleFilterChange(filter) {
-        this._filter.set(filter);
-        this._datagrid()?.currentPage.set(1); // Reset à la première page
-        return this.onFilterChange(filter);
+        /**
+         * Invalide une entrée de cache spécifique
+         * @param key La clé de l'entrée à invalider
+         */
+        this.invalidate = (key) => {
+            if (this._cache[key]) {
+                this._cache[key].status = 'expired';
+            }
+        };
+        /**
+         * Mets à jour la durée de validité du cache
+         * @param duration Durée en millisecondes
+         */
+        this.setCacheValidityDuration = (duration) => {
+            this._cacheValidityDuration = duration;
+        };
+        this._cacheValidityDuration = this._default.duration;
     }
-    handleGroupChange(group) {
-        this._groupBy.set(group);
-        this._datagrid()?.currentPage.set(1); // Reset à la première page
-        return this.onGroupChange(group);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const ENABLE_PROGRESS = new HttpContextToken(() => null);
+class ProgressService {
+    constructor() {
+        this._progressStates = {};
+        /**
+         * Récupère l'état de progression pour une clé spécifique
+         * @param key La clé de l'état de progression à récupérer
+         * @returns L'état de progression ou null si inexistant
+         */
+        this.get = (key) => {
+            const obs = this._progressStates[key];
+            if (!obs)
+                return null;
+            return this._progressStates[key].asObservable();
+        };
+        /**
+         * Met à jour l'état de progression pour une clé spécifique
+         * @param key La clé de l'état de progression à mettre à jour
+         * @param state Le nouvel état de progression
+         */
+        this.set = (key, state) => {
+            if (this._progressStates[key]) {
+                this._progressStates[key].next(state);
+            }
+            else {
+                this._progressStates[key] = new BehaviorSubject(state);
+            }
+        };
     }
-    refresh() {
-        return this.loadData();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ProgressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CookiesService {
+    constructor() { }
+    /**
+     * delete cookie
+     * @param name
+     */
+    deleteCookie(name) {
+        this.setCookie(name, "", -1);
     }
-    setRows(rows) {
-        if (!this._data()) {
-            return;
+    /**
+     * get cookie
+     * @param {string} name
+     * @returns {string}
+     */
+    getCookie(name) {
+        const ca = decodeURIComponent(document.cookie).split(";");
+        const caLen = ca.length;
+        const cookieName = `${name}=`;
+        let c;
+        for (let i = 0; i < caLen; i += 1) {
+            c = ca[i].replace(/^\s+/g, "");
+            if (c.indexOf(cookieName) === 0) {
+                return c.substring(cookieName.length, c.length);
+            }
         }
-        const updated = this._data().clone();
-        updated.rows = rows;
-        updated.total = rows.length;
-        this._data.set(updated);
-    }
-    setData(data) {
-        this._data.set(data);
-    }
-    // Méthodes virtuelles à surcharger pour créer une data source serveur-side
-    onPageChange(page) {
-        // Comportement par défaut : rien (pagination côté client)
-        return of(void 0);
-    }
-    onPageSizeChange(pageSize) {
-        // Comportement par défaut : rien (pagination côté client)
-        return of(void 0);
-    }
-    onSortChange(sort) {
-        // Comportement par défaut : rien (tri côté client)
-        return of(void 0);
-    }
-    onFilterChange(filter) {
-        // Comportement par défaut : rien (filtrage côté client)
-        return of(void 0);
-    }
-    onGroupChange(group) {
-        // Comportement par défaut : rien
-        return of(void 0);
+        return "";
     }
-    loadData() {
-        // À surcharger pour charger les données
-        return of(void 0);
+    /**
+     * set cookie
+     * @param {string} name
+     * @param {string} value
+     * @param {number} expireDays
+     * @param {string} path
+     */
+    setCookie(name, value, expireDays, path = "") {
+        const d = new Date();
+        d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
+        const expires = `expires=${d.toUTCString()}`;
+        const cpath = path ? `; path=${path}` : "";
+        document.cookie = `${name}=${value}; ${expires}${cpath}; SameSite=Lax`;
     }
-    // Méthodes de traitement côté client (peuvent être surchargées)
-    applyFilters(data, filters) {
-        if (Object.keys(filters).length === 0)
-            return data;
-        const filteredRows = data.rows.filter((row) => {
-            return Object.values(filters).every((filter) => {
-                const value = row[filter.column];
-                const filterValue = String(filter.value).toLowerCase();
-                const stringValue = String(value ?? '').toLowerCase();
-                switch (filter.mode) {
-                    case DGFilterMode.CONTAINS:
-                        return stringValue.includes(filterValue);
-                    case DGFilterMode.STARTS_WITH:
-                        return stringValue.startsWith(filterValue);
-                    case DGFilterMode.ENDS_WITH:
-                        return stringValue.endsWith(filterValue);
-                    case DGFilterMode.EQUALS:
-                        return stringValue === filterValue;
-                    case DGFilterMode.NOT_EQUALS:
-                        return stringValue !== filterValue;
-                    case DGFilterMode.GREATER_OR_EQUAL:
-                        return Number(value) >= Number(filter.value);
-                    case DGFilterMode.LOWER_OR_EQUAL:
-                        return Number(value) <= Number(filter.value);
-                    default:
-                        return true;
-                }
-            });
-        });
-        const cloned = data.clone();
-        cloned.rows = filteredRows;
-        return cloned;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CookiesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+const SHOW_SPINNER = new HttpContextToken(() => true);
+
+class MinFileNameLengthValidator {
+    constructor() {
+        this.max = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     }
-    applySort(data, sort) {
-        if (!sort)
-            return data;
-        const sortedRows = [...data.rows].sort((a, b) => {
-            const aValue = a[sort.column];
-            const bValue = b[sort.column];
-            if (aValue === bValue)
-                return 0;
-            if (aValue === null || aValue === undefined)
-                return 1;
-            if (bValue === null || bValue === undefined)
-                return -1;
-            const comparison = aValue > bValue ? 1 : -1;
-            return sort.isAsc ? comparison : -comparison;
-        });
-        const cloned = data.clone();
-        cloned.rows = sortedRows;
-        return cloned;
+    validate(control) {
+        const max = this.max();
+        return max ? minFileNameLength(max)(control) : null;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MinFileNameLengthValidator, isStandalone: true, selector: "[app-min-file-name-length]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: MinFileNameLengthValidator,
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MinFileNameLengthValidator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }, {
+            type: Directive,
+            args: [{
+                    selector: '[app-min-file-name-length]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: MinFileNameLengthValidator,
+                            multi: true,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+function minFileNameLength(minLength) {
+    return (control) => {
+        const value = control.value;
+        const files = Array.isArray(value) ? value : [value];
+        if (!value)
+            return null;
+        const errors = {};
+        for (let i = 0; i < files.length; i++) {
+            const fileNameLength = files[i].name?.length;
+            if (fileNameLength === undefined)
+                continue;
+            if (fileNameLength < minLength)
+                errors[i] = fileNameLength;
+        }
+        if (Object.keys(errors).length <= 0)
+            return null;
+        return {
+            minFileNameLength: {
+                minFileNameLength: minLength,
+                indexes: errors,
+            },
+            indexes: errors,
+        };
+    };
 }
 
 const OldSpinnerInterceptor = (req, next) => {