chrv-components 1.12.80 → 1.12.82

package/fesm2022/chrv-components.mjs

@@ -6077,6 +6077,7 @@ class DataGrid {
         this.pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
         this.pageChange = output();
         this.pageSizeChange = output();
+        this.onInit = output();
         this.selectedColumn = signal(null, ...(ngDevMode ? [{ debugName: "selectedColumn" }] : []));
         this.sort = model(null, ...(ngDevMode ? [{ debugName: "sort" }] : []));
         this.filter = model({}, ...(ngDevMode ? [{ debugName: "filter" }] : []));
@@ -6413,7 +6414,10 @@ class DataGrid {
                         items.push({
                             label: 'Dupliquer la ligne',
                             action: () => {
-                                const newRow = { ...row.data };
+                                const newRow = {
+                                    [`${this.table()?.getRowIdentifier(row.data)}`]: this.addedRows().length + 1,
+                                    ...row.data,
+                                };
                                 this.addedRows.set([
                                     ...this.addedRows(),
                                     { index: this.addedRows().length, row: newRow },
@@ -6454,7 +6458,9 @@ class DataGrid {
             this.trackByMode.set(mode);
         });
     }
-    ngOnInit() { }
+    ngOnInit() {
+        this.onInit.emit();
+    }
     ngOnDestroy() { }
     getColumnTooltip(column) {
         return column.tooltip;
@@ -6592,7 +6598,7 @@ class DataGrid {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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", pageChange: "pageChange", pageSizeChange: "pageSizeChange", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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", pageChange: "pageChange", pageSizeChange: "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,
@@ -6602,7 +6608,7 @@ class DataGrid {
             //   provide: VIRTUAL_SCROLL_STRATEGY,
             //   useClass: DynamicSizeScrollStrategy,
             // },
-        ], 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\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\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\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\">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]\"\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;margin-top:.25rem;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", "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$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.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" }] }); }
+        ], 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]\"\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", "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$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.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: "21.0.8", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
@@ -6628,8 +6634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         //   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\" (click)=\"toggleSort(column.columnName)\" class=\"column-type\">{{\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\">arrow_upward</span>\r\n            } @else {\r\n            <span class=\"sort-icon mat-icon\">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]\"\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;margin-top:.25rem;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 }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], 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 }] }], 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 }] }], trackByMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByMode", required: false }] }, { type: i0.Output, args: ["trackByModeChange"] }] } });
+                    ], 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]\"\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 }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ 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 }] }], 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 }] }], trackByMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByMode", required: false }] }, { type: i0.Output, args: ["trackByModeChange"] }] } });
 
 class MessageBanner {
     constructor() {
@@ -7472,8 +7478,8 @@ class AutoDataSource {
         // Signaux internes
         this._datagrid = signal(null, ...(ngDevMode ? [{ debugName: "_datagrid" }] : []));
         this._data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
-        this._currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
-        this._pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+        // protected _currentPage = signal(1);
+        // protected _pageSize = signal(10);
         this._sort = signal(null, ...(ngDevMode ? [{ debugName: "_sort" }] : []));
         this._filter = signal({}, ...(ngDevMode ? [{ debugName: "_filter" }] : []));
         this._groupBy = signal(null, ...(ngDevMode ? [{ debugName: "_groupBy" }] : []));
@@ -7481,8 +7487,8 @@ class AutoDataSource {
         this._error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
         // Données exposées (read-only)
         this.data = this._data.asReadonly();
-        this.currentPage = this._currentPage.asReadonly();
-        this.pageSize = this._pageSize.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();
@@ -7519,7 +7525,7 @@ class AutoDataSource {
         if (this.config.initialData) {
             this._data.set(this.config.initialData);
         }
-        this._pageSize.set(this.config.pageSize);
+        // this._pageSize.set(this.config.pageSize);
         effect(() => {
             if (this.processedData() && this._datagrid()) {
                 this._datagrid().table.set(this.processedData());
@@ -7539,33 +7545,40 @@ class AutoDataSource {
             return;
         const datagrid = (element instanceof ElementRef ? element.nativeElement : element);
         this._datagrid.set(datagrid);
-        this._subscriptions.push(datagrid.pageChange.subscribe((page) => {
-            this._subscriptions.push(this.handlePageChange(page).subscribe());
-        }), datagrid.pageSizeChange.subscribe((pageSize) => {
-            this._subscriptions.push(this.handlePageSizeChange(pageSize).subscribe());
-        }), datagrid.sort.subscribe((sort) => {
+        this._subscriptions.push(
+        // datagrid.pageChange.subscribe((page: number) => {
+        //   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
-    handlePageChange(page) {
-        this._currentPage.set(page);
-        return this.onPageChange(page);
-    }
-    handlePageSizeChange(pageSize) {
-        this._pageSize.set(pageSize);
-        this._currentPage.set(1); // Reset à la première page
-        return this.onPageSizeChange(pageSize);
-    }
+    // 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._currentPage.set(1); // Reset à la première page
+        // this._currentPage.set(1); // Reset à la première page
         return this.onFilterChange(filter);
     }
     handleGroupChange(group) {
@@ -7587,7 +7600,7 @@ class AutoDataSource {
     setData(data) {
         this._data.set(data);
     }
-    // Méthodes virtuelles à surcharger
+    // 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);