@oneteme/jquery-table 0.0.1 → 0.0.2

package/fesm2022/oneteme-jquery-table.mjs

@@ -1,25 +1,82 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, Input, EventEmitter, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, Output, ViewChild, ElementRef, NgZone, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, Output, ViewChild, ElementRef, ContentChildren } from '@angular/core';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/menu';
+import * as i7 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4 from '@angular/material/paginator';
+import * as i5 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i9 from '@angular/material/select';
+import * as i10 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i5 from '@angular/material/sort';
+import * as i6 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Subject, take, takeUntil } from 'rxjs';
-import * as i8 from '@angular/material/form-field';
-import * as i10 from '@angular/material/core';
+import '@oneteme/jquery-core';
+import * as i9 from '@angular/material/form-field';
+import * as i11 from '@angular/material/core';
+
+/**
+ * Raccourci pour déclarer une colonne de base.
+ *
+ * ```ts
+ * columns: [
+ *   col('name', 'Nom'),
+ *   col('status', 'Statut', { sortable: false }),
+ * ]
+ * ```
+ */
+function col(key, header, overrides) {
+    return { key, header, ...overrides };
+}
+
+/** Valeurs par défaut (français). Toutes les propriétés sont garanties non nulles. */
+const JQT_I18N_DEFAULTS = {
+    searchPlaceholder: 'Rechercher...',
+    expandFilterTitle: 'Déplier le filtre',
+    collapseFilterTitle: 'Replier le filtre',
+    viewMenuFields: 'Champs',
+    viewMenuGroupBy: 'Grouper par',
+    viewMenuSliceBy: 'Filtrer par',
+    viewNoneSelected: 'Aucun',
+    groupRemove: 'Retirer le groupe',
+    groupSortLabel: 'Trier :',
+    groupSortAsc: 'A → Z',
+    groupSortDesc: 'Z → A',
+    groupRowsPerGroup: 'Lignes par groupe :',
+    groupShowAll: 'Toutes',
+    groupTooMany: (count) => `⚠ Trop de groupes (${count}) — affinez les données ou choisissez une autre colonne`,
+    lazyRetry: 'Réessayer',
+    lazyErrorTitle: 'Erreur de chargement — cliquer pour réessayer',
+    lazyErrorMenuTitle: 'Erreur de chargement',
+    cellEmpty: 'N/A',
+    emptyState: 'Aucune donnée',
+    loadingState: 'Chargement des données...',
+    filterPanelTitle: (count) => count > 1 ? 'Filtres' : 'Filtre',
+    filterBlockDefaultTitle: 'Filtrer',
+    filterEmptyState: 'Aucune donnée',
+    exportButtonLabel: 'Exporter',
+    preferencesMenuLabel: 'Préférences',
+    preferencesEdit: 'Mode édition',
+    preferencesSave: 'Enregistrer la configuration',
+    preferencesClear: 'Effacer la configuration',
+    preferencesSavedMessage: 'Configuration enregistrée. Vous pouvez la réinitialiser à tout moment via Préférences → Effacer.',
+    preferencesClearedMessage: 'Configuration réinitialisée.',
+    preferencesConfirmEdit: 'Valider les modifications',
+};
+/**
+ * Token d'injection pour surcharger tout ou partie des labels de jquery-table.
+ * Accepte un `Partial<JqtI18n>` — seules les clés fournies écrasent les défauts.
+ */
+const JQT_I18N = new InjectionToken('JQT_I18N');
 
 /**
  * Directive permettant de définir un template de cellule personnalisé pour une colonne.
@@ -72,26 +129,21 @@ class SlicePanelComponent {
         this.dynamicSliceKeysChange = new EventEmitter();
         this.collapsedChange = new EventEmitter();
         this._cdr = inject(ChangeDetectorRef);
+        this._i18nRaw = inject(JQT_I18N, { optional: true });
+        this.i18n = { ...JQT_I18N_DEFAULTS, ...(this._i18nRaw ?? {}) };
         this.isCollapsed = false;
         this.activeKeysBySlice = new Map();
         this._expandedSlices = new Set();
         this._dynamicSlices = [];
-        this._hiddenStaticSliceKeys = new Set();
-        // ── Cache ─────────────────────────────────────────────────────
+        // ── Cache
         this._cachedSlices = [];
         this._countCache = new Map();
         this.trackBySliceIndex = (index, _) => index;
         this.trackByCategoryKey = (_, cat) => cat.key;
     }
-    // ── Lifecycle ─────────────────────────────────────────────────
+    // ── Lifecycle
     ngOnInit() {
         this.isCollapsed = this.collapsedByDefault;
-        const initiallyHidden = (this.sliceConfigs || [])
-            .filter(s => s.hidden === true && !!s.columnKey)
-            .map(s => s.columnKey);
-        if (initiallyHidden.length) {
-            this._hiddenStaticSliceKeys = new Set([...this._hiddenStaticSliceKeys, ...initiallyHidden]);
-        }
     }
     ngOnChanges(changes) {
         if (changes['sliceConfigs'] || changes['data'] || changes['columns'] || changes['lazyData'] || changes['lazyStatus']) {
@@ -100,10 +152,9 @@ class SlicePanelComponent {
             this._cdr.markForCheck();
         }
     }
-    // ── Computed ──────────────────────────────────────────────────
+    // ── Computed
     get showPanel() {
-        const visibleStaticCount = (this.sliceConfigs || []).filter((s) => !s.columnKey || !this._hiddenStaticSliceKeys.has(s.columnKey)).length;
-        const hasCfg = visibleStaticCount > 0 || this._dynamicSlices.length > 0;
+        const hasCfg = (this.sliceConfigs || []).length > 0 || this._dynamicSlices.length > 0;
         if (this.alwaysShow)
             return hasCfg;
         return hasCfg && (this.data?.length ?? 0) > 0;
@@ -112,7 +163,7 @@ class SlicePanelComponent {
         return this._cachedSlices;
     }
     get staticSliceCount() {
-        return (this.sliceConfigs || []).filter((s) => !s.columnKey || !this._hiddenStaticSliceKeys.has(s.columnKey)).length;
+        return (this.sliceConfigs || []).length;
     }
     get staticSlicesForMenu() {
         return (this.sliceConfigs || [])
@@ -137,19 +188,19 @@ class SlicePanelComponent {
         });
     }
     get activeSliceByLabel() {
-        const staticActiveCount = (this.sliceConfigs || []).filter((s) => !s.columnKey || !this._hiddenStaticSliceKeys.has(s.columnKey)).length;
+        const staticActiveCount = (this.sliceConfigs || []).length;
         const total = staticActiveCount + this._dynamicSlices.length;
         if (total === 0)
             return 'Aucun';
         if (total === 1) {
-            const first = (this.sliceConfigs || []).find((s) => !s.columnKey || !this._hiddenStaticSliceKeys.has(s.columnKey));
+            const first = (this.sliceConfigs || [])[0];
             if (first)
                 return first.title || first.columnKey || '1';
             return this.activeDynamicSliceColumns[0]?.header || '1';
         }
         return `${total} actifs`;
     }
-    // ── UI state ──────────────────────────────────────────────────
+    // ── UI state
     isSliceCollapsed(sliceIndex) {
         if (this._cachedSlices.length === 1) {
             return this._expandedSlices.has(-1 - sliceIndex);
@@ -206,21 +257,13 @@ class SlicePanelComponent {
         const status = this.lazyStatus.get(key) ?? 'idle';
         return status === 'loading' || status === 'idle';
     }
-    isStaticSliceVisible(columnKey) {
-        return !this._hiddenStaticSliceKeys.has(columnKey);
+    isStaticSliceVisible(_columnKey) {
+        return true;
     }
-    toggleStaticSlice(columnKey) {
-        const next = new Set(this._hiddenStaticSliceKeys);
-        if (next.has(columnKey))
-            next.delete(columnKey);
-        else
-            next.add(columnKey);
-        this._hiddenStaticSliceKeys = next;
-        this._rebuildCache();
-        this._emitFilter();
-        this._cdr.markForCheck();
+    toggleStaticSlice(_columnKey) {
+        // Délégué à table.component via _staticSliceHiddenKeys — ne rien faire ici.
     }
-    // ── Selection ─────────────────────────────────────────────────
+    // ── Selection
     getSliceIcon(slice) {
         if (slice.icon)
             return slice.icon;
@@ -289,7 +332,24 @@ class SlicePanelComponent {
         this._emitFilter();
         this._cdr.markForCheck();
     }
-    // ── Dynamic slice management ──────────────────────────────────
+    /** Retourne l'état des filtres actifs sous forme sérialisable (sliceIndex → tableau de clés).
+     * Inclut les slices sans sélection (tableau vide) pour distinguer "aucune tranche sélectionnée"
+     * (= filtre ouvert, rien coché) de "slice absente". */
+    getActiveFilters() {
+        const result = {};
+        this._cachedSlices.forEach((_, idx) => {
+            const keys = this.activeKeysBySlice.get(idx);
+            result[idx] = keys ? [...keys] : [];
+        });
+        return result;
+    }
+    /** Restaure les filtres actifs depuis un snapshot sérialisé et réémet le filtre. */
+    restoreFilters(filters) {
+        this.activeKeysBySlice = new Map(Object.entries(filters).map(([idx, keys]) => [Number(idx), new Set(keys)]));
+        this._emitFilter();
+        this._cdr.markForCheck();
+    }
+    // ── Dynamic slice management
     addDynamicSlice(column) {
         const distinctValues = this._computeDistinctValues(column.key);
         const newSlice = {
@@ -328,7 +388,7 @@ class SlicePanelComponent {
         const sliceIndex = this.staticSliceCount + dynamicIndex;
         this.removeDynamicSlice(sliceIndex);
     }
-    // ── Private helpers ───────────────────────────────────────────
+    // ── Private helpers
     _emitFilter() {
         const slices = this.slices;
         const activeKeysBySlice = this.activeKeysBySlice;
@@ -342,7 +402,10 @@ class SlicePanelComponent {
                 return true;
             return [...activeKeys].some((key) => {
                 const category = (slice.categories || []).find((c) => c.key === key);
-                return category ? category.filter(row) : false;
+                // Si pas de filter défini (usage chart), on ne filtre pas en mémoire
+                if (!category?.filter)
+                    return true;
+                return category.filter(row);
             });
         });
         this.filterChange.emit(pred);
@@ -416,8 +479,7 @@ class SlicePanelComponent {
         return row[columnKey];
     }
     _rebuildCache() {
-        const staticSlices = (this.sliceConfigs || []).filter((s) => !s.columnKey || !this._hiddenStaticSliceKeys.has(s.columnKey));
-        const allSlices = [...staticSlices, ...this._dynamicSlices.map((d) => d.slice)];
+        const allSlices = [...(this.sliceConfigs || []), ...this._dynamicSlices.map((d) => d.slice)];
         this._cachedSlices = allSlices.map((slice) => this._materializeSlice(slice));
         this._countCache.clear();
     }
@@ -445,11 +507,11 @@ class SlicePanelComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlicePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlicePanelComponent, isStandalone: true, selector: "slice-panel", inputs: { sliceConfigs: "sliceConfigs", columns: "columns", data: "data", lazyData: "lazyData", lazyStatus: "lazyStatus", showToggle: "showToggle", showCounts: "showCounts", collapsedByDefault: "collapsedByDefault", alwaysShow: "alwaysShow" }, outputs: { filterChange: "filterChange", activeKeysChange: "activeKeysChange", dynamicSliceKeysChange: "dynamicSliceKeysChange", collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "slicePanelBodyRef", first: true, predicate: ["slicePanelBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"slice-panel-wrapper\" [class.collapsed]=\"isCollapsed\">\n  <aside class=\"slice-panel\" [class.collapsed]=\"isCollapsed\">\n    <div class=\"slice-panel-header\">\n      <span *ngIf=\"!isCollapsed\" class=\"slice-panel-title\">\n        <mat-icon class=\"slice-panel-title-icon\" fontSet=\"material-icons-outlined\">filter_list</mat-icon>\n        {{ slices.length > 1 ? 'Filtres' : 'Filtre' }}\n      </span>\n      <button\n        *ngIf=\"showToggle\"\n        type=\"button\"\n        class=\"slice-toggle\"\n        [attr.aria-label]=\"isCollapsed ? 'D\u00E9plier le filtre' : 'Replier le filtre'\"\n        (click)=\"togglePanel()\"\n      >\n        <span class=\"slice-toggle-icon\">{{ isCollapsed ? '\u203A' : '\u2039' }}</span>\n      </button>\n    </div>\n\n    <div class=\"slice-panel-body\" *ngIf=\"!isCollapsed\" #slicePanelBody>\n      <ng-container *ngFor=\"let slice of slices; let si = index; trackBy: trackBySliceIndex\">\n        <div class=\"slice-title-row\" [attr.data-slice-index]=\"si\" (click)=\"toggleSliceCollapse(si)\">\n          <span class=\"slice-title-chevron\" [class.expanded]=\"!isSliceCollapsed(si)\">\u203A</span>\n          <mat-icon *ngIf=\"getSliceIcon(slice)\" class=\"slice-title-icon\" fontSet=\"material-icons-outlined\">{{ getSliceIcon(slice) }}</mat-icon>\n          <p class=\"slice-title\">{{ slice.title || 'Filtrer' }}</p>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            (click)=\"$event.stopPropagation(); removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div class=\"slice-section-items\" *ngIf=\"!isSliceCollapsed(si)\">\n          <ng-container *ngIf=\"isSliceLoading(si); else sliceContent\">\n            <div class=\"slice-lazy-loading\">\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n            </div>\n          </ng-container>\n          <ng-template #sliceContent>\n            <ng-container *ngFor=\"let category of slice.categories; trackBy: trackByCategoryKey\">\n              <button\n                *ngIf=\"sliceCategoryCount(si, category.key) > 0\"\n                class=\"slice-item\"\n                type=\"button\"\n                [class.active]=\"isSliceCategoryActive(si, category.key)\"\n                [attr.data-category-key]=\"category.key\"\n                [title]=\"category.label\"\n                (click)=\"onSliceCategorySelected(si, category.key)\"\n              >\n                <span>{{ category.label }}</span>\n                <span *ngIf=\"showCounts\">{{ sliceCategoryCount(si, category.key) }}</span>\n              </button>\n            </ng-container>\n            <div *ngIf=\"isSliceEmpty(si)\" class=\"slice-empty-state\">Aucune donn\u00E9e</div>\n          </ng-template>\n        </div>\n\n        <hr *ngIf=\"si < slices.length - 1\" class=\"slice-divider\" />\n      </ng-container>\n    </div>\n  </aside>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.slice-panel-wrapper{height:100%;max-height:100%;overflow-y:auto;box-sizing:border-box}.slice-panel{margin-top:0;border:1px solid var(--jqt-border-color);border-radius:10px;background:var(--jqt-surface-color);display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;box-sizing:border-box}.slice-panel-header{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;height:34px;padding:0 8px;margin-bottom:8px}.slice-panel-header:has(.slice-panel-title){justify-content:space-between;padding-left:12px}.slice-panel-body{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-panel-body::-webkit-scrollbar{width:2px}.slice-panel-body::-webkit-scrollbar-thumb{background:var(--jqt-primary-color);border-radius:4px}.slice-panel-title{margin:0;padding-top:2px;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--jqt-text-color);-webkit-user-select:none;user-select:none;align-self:center;display:inline-flex;align-items:center;gap:5px}.slice-panel-title .slice-panel-title-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.slice-section-items{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-section-items::-webkit-scrollbar{width:2px}.slice-section-items .slice-empty-state{padding:8px 10px;font-size:12px;color:var(--jqt-text-muted, #9ca3af);font-style:italic;text-align:center}.slice-section-items::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.slice-toggle{border:0;background:var(--jqt-surface-color);color:var(--jqt-text-color);border-radius:6px;width:22px;height:22px;padding:0;font-size:14px;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-toggle-icon{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-panel.collapsed{border-color:transparent;background:transparent;overflow:visible}.slice-panel.collapsed .slice-panel-header{height:34px;padding:0;justify-content:center;align-items:center}.slice-panel.collapsed .slice-toggle{width:34px;height:34px;border:1px solid var(--jqt-border-color);background:var(--jqt-surface-color);border-radius:8px;font-size:16px}.slice-panel.collapsed .slice-toggle:hover{border-color:var(--jqt-text-muted)}.slice-title-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.slice-title-row:hover .slice-title{color:var(--jqt-text-color)}.slice-title-row:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--jqt-text-muted);transition:transform .15s ease;transform:rotate(0);position:relative;top:-1px}.slice-title-chevron.expanded{transform:rotate(90deg)}.slice-title{flex:1 1 auto;margin:0;font-size:14px;font-weight:600;color:var(--jqt-title-color)}.slice-title-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-title-color)}.slice-remove-btn{background:none;border:none;cursor:pointer;color:var(--jqt-border-color);font-size:12px;padding:0 2px;line-height:1;flex-shrink:0;opacity:.5;transition:opacity .15s,color .15s}.slice-remove-btn:hover{color:var(--jqt-text-secondary);opacity:1}.slice-title-row:hover .slice-remove-btn{opacity:.8}.slice-item{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:5px 10px 5px 16px;background:transparent;border:0;cursor:pointer;border-radius:8px;color:var(--jqt-text-color);box-sizing:border-box;min-width:0;gap:8px}.slice-item.active{background:var(--jqt-row-hover-bg);font-weight:600}.slice-item.slice-multi{padding-left:6px}.slice-item span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slice-item span:last-child{flex:0 0 auto;min-width:1.2em;text-align:right}.slice-check-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--jqt-text-muted);border-radius:4px;background:var(--jqt-surface-color);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .15s,border-color .15s}.slice-check-box.checked{background:var(--jqt-text-secondary);border-color:var(--jqt-text-secondary)}.slice-check-box.checked:after{content:\"\";display:block;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}.slice-divider{border:none;border-top:1px solid var(--jqt-border-color);margin:6px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.slice-lazy-loading{display:flex;flex-direction:column;gap:8px;padding:8px 10px}.slice-lazy-loading .lazy-skeleton{width:80%}.slice-lazy-loading .lazy-skeleton:nth-child(2){width:60%}.slice-lazy-loading .lazy-skeleton:nth-child(3){width:45%}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlicePanelComponent, isStandalone: true, selector: "slice-panel", inputs: { sliceConfigs: "sliceConfigs", columns: "columns", data: "data", lazyData: "lazyData", lazyStatus: "lazyStatus", showToggle: "showToggle", showCounts: "showCounts", collapsedByDefault: "collapsedByDefault", alwaysShow: "alwaysShow" }, outputs: { filterChange: "filterChange", activeKeysChange: "activeKeysChange", dynamicSliceKeysChange: "dynamicSliceKeysChange", collapsedChange: "collapsedChange" }, viewQueries: [{ propertyName: "slicePanelBodyRef", first: true, predicate: ["slicePanelBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"slice-panel-wrapper\" [class.collapsed]=\"isCollapsed\">\n  <aside class=\"slice-panel\" [class.collapsed]=\"isCollapsed\">\n    <div class=\"slice-panel-header\">\n      <span *ngIf=\"!isCollapsed\" class=\"slice-panel-title\">\n        <mat-icon class=\"slice-panel-title-icon\">filter_list</mat-icon>\n        {{ i18n.filterPanelTitle(slices.length) }}\n      </span>\n      <button\n        *ngIf=\"showToggle\"\n        type=\"button\"\n        class=\"slice-toggle\"\n        [attr.aria-label]=\"isCollapsed ? i18n.expandFilterTitle : i18n.collapseFilterTitle\"\n        (click)=\"togglePanel()\"\n      >\n        <mat-icon class=\"slice-toggle-mat-icon\">{{ isCollapsed ? 'menu' : 'menu_open' }}</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"slice-panel-body\" *ngIf=\"!isCollapsed\" #slicePanelBody>\n      <ng-container *ngFor=\"let slice of slices; let si = index; trackBy: trackBySliceIndex\">\n        <div class=\"slice-title-row\" [attr.data-slice-index]=\"si\" (click)=\"toggleSliceCollapse(si)\">\n          <span class=\"slice-title-chevron\" [class.expanded]=\"!isSliceCollapsed(si)\">\u203A</span>\n          <mat-icon *ngIf=\"getSliceIcon(slice)\" class=\"slice-title-icon\">{{ getSliceIcon(slice) }}</mat-icon>\n          <p class=\"slice-title\">{{ slice.title || i18n.filterBlockDefaultTitle }}</p>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            (click)=\"$event.stopPropagation(); removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div class=\"slice-section-items\" *ngIf=\"!isSliceCollapsed(si)\">\n          <ng-container *ngIf=\"isSliceLoading(si); else sliceContent\">\n            <div class=\"slice-lazy-loading\">\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n            </div>\n          </ng-container>\n          <ng-template #sliceContent>\n            <ng-container *ngFor=\"let category of slice.categories; trackBy: trackByCategoryKey\">\n              <button\n                *ngIf=\"sliceCategoryCount(si, category.key) > 0\"\n                class=\"slice-item\"\n                type=\"button\"\n                [class.active]=\"isSliceCategoryActive(si, category.key)\"\n                [attr.data-category-key]=\"category.key\"\n                [title]=\"category.label\"\n                (click)=\"onSliceCategorySelected(si, category.key)\"\n              >\n                <span>{{ category.label }}</span>\n                <span *ngIf=\"showCounts\">{{ sliceCategoryCount(si, category.key) }}</span>\n              </button>\n            </ng-container>\n            <div *ngIf=\"isSliceEmpty(si)\" class=\"slice-empty-state\">{{ i18n.filterEmptyState }}</div>\n          </ng-template>\n        </div>\n\n        <hr *ngIf=\"si < slices.length - 1\" class=\"slice-divider\" />\n      </ng-container>\n    </div>\n  </aside>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.slice-panel-wrapper{height:100%;max-height:100%;overflow-y:auto;box-sizing:border-box}.slice-panel{margin-top:0;border:1px solid var(--jqt-border-color);border-radius:10px;background:var(--jqt-surface-color);display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;box-sizing:border-box}.slice-panel-header{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;height:34px;padding:0 8px;margin-bottom:8px}.slice-panel-header:has(.slice-panel-title){justify-content:space-between;padding-left:12px}.slice-panel-body{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-panel-body::-webkit-scrollbar{width:2px}.slice-panel-body::-webkit-scrollbar-thumb{background:var(--jqt-primary-color);border-radius:4px}.slice-panel-title{margin:0;padding-top:2px;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--jqt-text-color);-webkit-user-select:none;user-select:none;align-self:center;display:inline-flex;align-items:center;gap:5px}.slice-panel-title .slice-panel-title-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.slice-section-items{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-section-items::-webkit-scrollbar{width:2px}.slice-section-items .slice-empty-state{padding:8px 10px;font-size:12px;color:var(--jqt-text-muted, #9ca3af);font-style:italic;text-align:center}.slice-section-items::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.slice-toggle{border:0;background:var(--jqt-surface-color);color:var(--jqt-text-color);border-radius:6px;width:22px;height:22px;padding:0;font-size:14px;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-toggle-mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.slice-panel.collapsed{border-color:transparent;background:transparent;overflow:visible}.slice-panel.collapsed .slice-panel-header{height:34px;padding:0;justify-content:center;align-items:center}.slice-panel.collapsed .slice-toggle{width:34px;height:34px;border:1px solid var(--jqt-border-color);background:var(--jqt-surface-color);border-radius:8px}.slice-panel.collapsed .slice-toggle:hover{border-color:var(--jqt-text-muted)}.slice-panel.collapsed .slice-toggle .slice-toggle-mat-icon{font-size:18px;width:18px;height:18px}.slice-title-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.slice-title-row:hover .slice-title{color:var(--jqt-text-color)}.slice-title-row:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--jqt-text-muted);transition:transform .15s ease;transform:rotate(0);position:relative;top:-1px}.slice-title-chevron.expanded{transform:rotate(90deg)}.slice-title{flex:1 1 auto;margin:0;font-size:14px;font-weight:600;color:var(--jqt-title-color)}.slice-title-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-title-color)}.slice-remove-btn{background:none;border:none;cursor:pointer;color:var(--jqt-border-color);font-size:12px;padding:0 2px;line-height:1;flex-shrink:0;opacity:.5;transition:opacity .15s,color .15s}.slice-remove-btn:hover{color:var(--jqt-text-secondary);opacity:1}.slice-title-row:hover .slice-remove-btn{opacity:.8}.slice-item{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:5px 10px 5px 16px;background:transparent;border:0;cursor:pointer;border-radius:8px;color:var(--jqt-text-color);box-sizing:border-box;min-width:0;gap:8px}.slice-item.active{background:var(--jqt-row-hover-bg);font-weight:600}.slice-item.slice-multi{padding-left:6px}.slice-item span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slice-item span:last-child{flex:0 0 auto;min-width:1.2em;text-align:right}.slice-check-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--jqt-text-muted);border-radius:4px;background:var(--jqt-surface-color);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .15s,border-color .15s}.slice-check-box.checked{background:var(--jqt-text-secondary);border-color:var(--jqt-text-secondary)}.slice-check-box.checked:after{content:\"\";display:block;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}.slice-divider{border:none;border-top:1px solid var(--jqt-border-color);margin:6px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.slice-lazy-loading{display:flex;flex-direction:column;gap:8px;padding:8px 10px}.slice-lazy-loading .lazy-skeleton{width:80%}.slice-lazy-loading .lazy-skeleton:nth-child(2){width:60%}.slice-lazy-loading .lazy-skeleton:nth-child(3){width:45%}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlicePanelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'slice-panel', imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slice-panel-wrapper\" [class.collapsed]=\"isCollapsed\">\n  <aside class=\"slice-panel\" [class.collapsed]=\"isCollapsed\">\n    <div class=\"slice-panel-header\">\n      <span *ngIf=\"!isCollapsed\" class=\"slice-panel-title\">\n        <mat-icon class=\"slice-panel-title-icon\" fontSet=\"material-icons-outlined\">filter_list</mat-icon>\n        {{ slices.length > 1 ? 'Filtres' : 'Filtre' }}\n      </span>\n      <button\n        *ngIf=\"showToggle\"\n        type=\"button\"\n        class=\"slice-toggle\"\n        [attr.aria-label]=\"isCollapsed ? 'D\u00E9plier le filtre' : 'Replier le filtre'\"\n        (click)=\"togglePanel()\"\n      >\n        <span class=\"slice-toggle-icon\">{{ isCollapsed ? '\u203A' : '\u2039' }}</span>\n      </button>\n    </div>\n\n    <div class=\"slice-panel-body\" *ngIf=\"!isCollapsed\" #slicePanelBody>\n      <ng-container *ngFor=\"let slice of slices; let si = index; trackBy: trackBySliceIndex\">\n        <div class=\"slice-title-row\" [attr.data-slice-index]=\"si\" (click)=\"toggleSliceCollapse(si)\">\n          <span class=\"slice-title-chevron\" [class.expanded]=\"!isSliceCollapsed(si)\">\u203A</span>\n          <mat-icon *ngIf=\"getSliceIcon(slice)\" class=\"slice-title-icon\" fontSet=\"material-icons-outlined\">{{ getSliceIcon(slice) }}</mat-icon>\n          <p class=\"slice-title\">{{ slice.title || 'Filtrer' }}</p>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            (click)=\"$event.stopPropagation(); removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div class=\"slice-section-items\" *ngIf=\"!isSliceCollapsed(si)\">\n          <ng-container *ngIf=\"isSliceLoading(si); else sliceContent\">\n            <div class=\"slice-lazy-loading\">\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n            </div>\n          </ng-container>\n          <ng-template #sliceContent>\n            <ng-container *ngFor=\"let category of slice.categories; trackBy: trackByCategoryKey\">\n              <button\n                *ngIf=\"sliceCategoryCount(si, category.key) > 0\"\n                class=\"slice-item\"\n                type=\"button\"\n                [class.active]=\"isSliceCategoryActive(si, category.key)\"\n                [attr.data-category-key]=\"category.key\"\n                [title]=\"category.label\"\n                (click)=\"onSliceCategorySelected(si, category.key)\"\n              >\n                <span>{{ category.label }}</span>\n                <span *ngIf=\"showCounts\">{{ sliceCategoryCount(si, category.key) }}</span>\n              </button>\n            </ng-container>\n            <div *ngIf=\"isSliceEmpty(si)\" class=\"slice-empty-state\">Aucune donn\u00E9e</div>\n          </ng-template>\n        </div>\n\n        <hr *ngIf=\"si < slices.length - 1\" class=\"slice-divider\" />\n      </ng-container>\n    </div>\n  </aside>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.slice-panel-wrapper{height:100%;max-height:100%;overflow-y:auto;box-sizing:border-box}.slice-panel{margin-top:0;border:1px solid var(--jqt-border-color);border-radius:10px;background:var(--jqt-surface-color);display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;box-sizing:border-box}.slice-panel-header{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;height:34px;padding:0 8px;margin-bottom:8px}.slice-panel-header:has(.slice-panel-title){justify-content:space-between;padding-left:12px}.slice-panel-body{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-panel-body::-webkit-scrollbar{width:2px}.slice-panel-body::-webkit-scrollbar-thumb{background:var(--jqt-primary-color);border-radius:4px}.slice-panel-title{margin:0;padding-top:2px;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--jqt-text-color);-webkit-user-select:none;user-select:none;align-self:center;display:inline-flex;align-items:center;gap:5px}.slice-panel-title .slice-panel-title-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.slice-section-items{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-section-items::-webkit-scrollbar{width:2px}.slice-section-items .slice-empty-state{padding:8px 10px;font-size:12px;color:var(--jqt-text-muted, #9ca3af);font-style:italic;text-align:center}.slice-section-items::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.slice-toggle{border:0;background:var(--jqt-surface-color);color:var(--jqt-text-color);border-radius:6px;width:22px;height:22px;padding:0;font-size:14px;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-toggle-icon{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-panel.collapsed{border-color:transparent;background:transparent;overflow:visible}.slice-panel.collapsed .slice-panel-header{height:34px;padding:0;justify-content:center;align-items:center}.slice-panel.collapsed .slice-toggle{width:34px;height:34px;border:1px solid var(--jqt-border-color);background:var(--jqt-surface-color);border-radius:8px;font-size:16px}.slice-panel.collapsed .slice-toggle:hover{border-color:var(--jqt-text-muted)}.slice-title-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.slice-title-row:hover .slice-title{color:var(--jqt-text-color)}.slice-title-row:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--jqt-text-muted);transition:transform .15s ease;transform:rotate(0);position:relative;top:-1px}.slice-title-chevron.expanded{transform:rotate(90deg)}.slice-title{flex:1 1 auto;margin:0;font-size:14px;font-weight:600;color:var(--jqt-title-color)}.slice-title-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-title-color)}.slice-remove-btn{background:none;border:none;cursor:pointer;color:var(--jqt-border-color);font-size:12px;padding:0 2px;line-height:1;flex-shrink:0;opacity:.5;transition:opacity .15s,color .15s}.slice-remove-btn:hover{color:var(--jqt-text-secondary);opacity:1}.slice-title-row:hover .slice-remove-btn{opacity:.8}.slice-item{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:5px 10px 5px 16px;background:transparent;border:0;cursor:pointer;border-radius:8px;color:var(--jqt-text-color);box-sizing:border-box;min-width:0;gap:8px}.slice-item.active{background:var(--jqt-row-hover-bg);font-weight:600}.slice-item.slice-multi{padding-left:6px}.slice-item span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slice-item span:last-child{flex:0 0 auto;min-width:1.2em;text-align:right}.slice-check-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--jqt-text-muted);border-radius:4px;background:var(--jqt-surface-color);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .15s,border-color .15s}.slice-check-box.checked{background:var(--jqt-text-secondary);border-color:var(--jqt-text-secondary)}.slice-check-box.checked:after{content:\"\";display:block;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}.slice-divider{border:none;border-top:1px solid var(--jqt-border-color);margin:6px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.slice-lazy-loading{display:flex;flex-direction:column;gap:8px;padding:8px 10px}.slice-lazy-loading .lazy-skeleton{width:80%}.slice-lazy-loading .lazy-skeleton:nth-child(2){width:60%}.slice-lazy-loading .lazy-skeleton:nth-child(3){width:45%}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+            args: [{ standalone: true, selector: 'slice-panel', imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slice-panel-wrapper\" [class.collapsed]=\"isCollapsed\">\n  <aside class=\"slice-panel\" [class.collapsed]=\"isCollapsed\">\n    <div class=\"slice-panel-header\">\n      <span *ngIf=\"!isCollapsed\" class=\"slice-panel-title\">\n        <mat-icon class=\"slice-panel-title-icon\">filter_list</mat-icon>\n        {{ i18n.filterPanelTitle(slices.length) }}\n      </span>\n      <button\n        *ngIf=\"showToggle\"\n        type=\"button\"\n        class=\"slice-toggle\"\n        [attr.aria-label]=\"isCollapsed ? i18n.expandFilterTitle : i18n.collapseFilterTitle\"\n        (click)=\"togglePanel()\"\n      >\n        <mat-icon class=\"slice-toggle-mat-icon\">{{ isCollapsed ? 'menu' : 'menu_open' }}</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"slice-panel-body\" *ngIf=\"!isCollapsed\" #slicePanelBody>\n      <ng-container *ngFor=\"let slice of slices; let si = index; trackBy: trackBySliceIndex\">\n        <div class=\"slice-title-row\" [attr.data-slice-index]=\"si\" (click)=\"toggleSliceCollapse(si)\">\n          <span class=\"slice-title-chevron\" [class.expanded]=\"!isSliceCollapsed(si)\">\u203A</span>\n          <mat-icon *ngIf=\"getSliceIcon(slice)\" class=\"slice-title-icon\">{{ getSliceIcon(slice) }}</mat-icon>\n          <p class=\"slice-title\">{{ slice.title || i18n.filterBlockDefaultTitle }}</p>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            (click)=\"$event.stopPropagation(); removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div class=\"slice-section-items\" *ngIf=\"!isSliceCollapsed(si)\">\n          <ng-container *ngIf=\"isSliceLoading(si); else sliceContent\">\n            <div class=\"slice-lazy-loading\">\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n              <span class=\"lazy-skeleton\"></span>\n            </div>\n          </ng-container>\n          <ng-template #sliceContent>\n            <ng-container *ngFor=\"let category of slice.categories; trackBy: trackByCategoryKey\">\n              <button\n                *ngIf=\"sliceCategoryCount(si, category.key) > 0\"\n                class=\"slice-item\"\n                type=\"button\"\n                [class.active]=\"isSliceCategoryActive(si, category.key)\"\n                [attr.data-category-key]=\"category.key\"\n                [title]=\"category.label\"\n                (click)=\"onSliceCategorySelected(si, category.key)\"\n              >\n                <span>{{ category.label }}</span>\n                <span *ngIf=\"showCounts\">{{ sliceCategoryCount(si, category.key) }}</span>\n              </button>\n            </ng-container>\n            <div *ngIf=\"isSliceEmpty(si)\" class=\"slice-empty-state\">{{ i18n.filterEmptyState }}</div>\n          </ng-template>\n        </div>\n\n        <hr *ngIf=\"si < slices.length - 1\" class=\"slice-divider\" />\n      </ng-container>\n    </div>\n  </aside>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.slice-panel-wrapper{height:100%;max-height:100%;overflow-y:auto;box-sizing:border-box}.slice-panel{margin-top:0;border:1px solid var(--jqt-border-color);border-radius:10px;background:var(--jqt-surface-color);display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;box-sizing:border-box}.slice-panel-header{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;height:34px;padding:0 8px;margin-bottom:8px}.slice-panel-header:has(.slice-panel-title){justify-content:space-between;padding-left:12px}.slice-panel-body{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-panel-body::-webkit-scrollbar{width:2px}.slice-panel-body::-webkit-scrollbar-thumb{background:var(--jqt-primary-color);border-radius:4px}.slice-panel-title{margin:0;padding-top:2px;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--jqt-text-color);-webkit-user-select:none;user-select:none;align-self:center;display:inline-flex;align-items:center;gap:5px}.slice-panel-title .slice-panel-title-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.slice-section-items{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.slice-section-items::-webkit-scrollbar{width:2px}.slice-section-items .slice-empty-state{padding:8px 10px;font-size:12px;color:var(--jqt-text-muted, #9ca3af);font-style:italic;text-align:center}.slice-section-items::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.slice-toggle{border:0;background:var(--jqt-surface-color);color:var(--jqt-text-color);border-radius:6px;width:22px;height:22px;padding:0;font-size:14px;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}.slice-toggle-mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.slice-panel.collapsed{border-color:transparent;background:transparent;overflow:visible}.slice-panel.collapsed .slice-panel-header{height:34px;padding:0;justify-content:center;align-items:center}.slice-panel.collapsed .slice-toggle{width:34px;height:34px;border:1px solid var(--jqt-border-color);background:var(--jqt-surface-color);border-radius:8px}.slice-panel.collapsed .slice-toggle:hover{border-color:var(--jqt-text-muted)}.slice-panel.collapsed .slice-toggle .slice-toggle-mat-icon{font-size:18px;width:18px;height:18px}.slice-title-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.slice-title-row:hover .slice-title{color:var(--jqt-text-color)}.slice-title-row:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--jqt-text-muted);transition:transform .15s ease;transform:rotate(0);position:relative;top:-1px}.slice-title-chevron.expanded{transform:rotate(90deg)}.slice-title{flex:1 1 auto;margin:0;font-size:14px;font-weight:600;color:var(--jqt-title-color)}.slice-title-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-title-color)}.slice-remove-btn{background:none;border:none;cursor:pointer;color:var(--jqt-border-color);font-size:12px;padding:0 2px;line-height:1;flex-shrink:0;opacity:.5;transition:opacity .15s,color .15s}.slice-remove-btn:hover{color:var(--jqt-text-secondary);opacity:1}.slice-title-row:hover .slice-remove-btn{opacity:.8}.slice-item{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:5px 10px 5px 16px;background:transparent;border:0;cursor:pointer;border-radius:8px;color:var(--jqt-text-color);box-sizing:border-box;min-width:0;gap:8px}.slice-item.active{background:var(--jqt-row-hover-bg);font-weight:600}.slice-item.slice-multi{padding-left:6px}.slice-item span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slice-item span:last-child{flex:0 0 auto;min-width:1.2em;text-align:right}.slice-check-box{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--jqt-text-muted);border-radius:4px;background:var(--jqt-surface-color);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .15s,border-color .15s}.slice-check-box.checked{background:var(--jqt-text-secondary);border-color:var(--jqt-text-secondary)}.slice-check-box.checked:after{content:\"\";display:block;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}.slice-divider{border:none;border-top:1px solid var(--jqt-border-color);margin:6px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.slice-lazy-loading{display:flex;flex-direction:column;gap:8px;padding:8px 10px}.slice-lazy-loading .lazy-skeleton{width:80%}.slice-lazy-loading .lazy-skeleton:nth-child(2){width:60%}.slice-lazy-loading .lazy-skeleton:nth-child(3){width:45%}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { sliceConfigs: [{
                 type: Input
             }], columns: [{
@@ -512,7 +574,7 @@ function normalizeCellValue(value) {
         return '';
     }
     if (value instanceof Date) {
-        return value.toLocaleString('fr-FR');
+        return value.toLocaleString();
     }
     if (Array.isArray(value)) {
         return value.map((item) => normalizeCellValue(item)).join(', ');
@@ -539,6 +601,611 @@ function humanizeKey(key) {
         .replace(/^./, (value) => value.toUpperCase());
 }
 
+// ── Facade
+/**
+ * Centralise l'état et les actions du panneau View (Champs / Group by / Slice by).
+ * Pas de dépendance Angular/DOM : peut être extraite vers jquery-core à terme.
+ *
+ * Usage :
+ *   this._view = new ViewFacade();
+ *   this._view.events$.subscribe(e => { ... });
+ *   this._view.update({ config, columns, sliceConfigs });
+ */
+class ViewFacade {
+    constructor() {
+        // ── State
+        this.fields = {
+            activeColumns: [],
+            userCustomized: false,
+        };
+        this.groupBy = {
+            activeKey: null,
+        };
+        this.sliceBy = {
+            activeDynamicColumns: [],
+            availableForDynamic: [],
+            allDynamicColumns: [],
+            activeLabel: 'Aucun',
+        };
+        this._panelConfig = { columns: [], sliceConfigs: [] };
+        this._hiddenStaticKeys = new Set();
+        // ── Events
+        this._events$ = new Subject();
+        this.events$ = this._events$.asObservable();
+    }
+    // ── Computed flags
+    get enabled() {
+        return this._panelConfig.config?.enabled === true;
+    }
+    get showFields() {
+        return this.enabled;
+    }
+    get showGroupBySection() {
+        return this.enabled && this.groupByColumns.length > 0;
+    }
+    get showSliceBySection() {
+        return this.enabled && ((this._panelConfig.sliceConfigs?.length ?? 0) > 0 ||
+            this.sliceBy.allDynamicColumns.length > 0);
+    }
+    get allowColumnRemoval() {
+        return this._panelConfig.config?.enableColumnRemoval !== false;
+    }
+    get isColumnDragDropEnabled() {
+        return this._panelConfig.config?.enableColumnDragDrop === true;
+    }
+    get menuBaseColumns() {
+        return this._uniqueByKey((this._panelConfig.columns || []).filter(c => !c.optional));
+    }
+    get menuOptionalColumns() {
+        return this._uniqueByKey((this._panelConfig.columns || []).filter(c => c.optional));
+    }
+    get totalColumnCount() {
+        return new Set((this._panelConfig.columns || []).map(c => c.key)).size;
+    }
+    get groupByColumns() {
+        const seen = new Set();
+        return (this._panelConfig.columns || []).filter(c => {
+            if (c.groupable === false || seen.has(c.key))
+                return false;
+            if (!c.header && c.groupable !== true)
+                return false;
+            seen.add(c.key);
+            return true;
+        });
+    }
+    get activeGroupByLabel() {
+        if (!this.groupBy.activeKey)
+            return this._panelConfig.noneLabel ?? 'Aucun';
+        const col = this.groupByColumns.find(c => c.key === this.groupBy.activeKey);
+        return col?.header || this.groupBy.activeKey;
+    }
+    get staticSlicesForMenu() {
+        return (this._panelConfig.sliceConfigs ?? [])
+            .filter(s => !!s.columnKey)
+            .map(s => {
+            const colIcon = (this._panelConfig.columns ?? []).find(c => c.key === s.columnKey)?.icon;
+            return { key: s.columnKey, title: s.title || humanizeKey(s.columnKey), icon: s.icon ?? colIcon };
+        });
+    }
+    colLabel(col) {
+        return col.header || humanizeKey(col.key);
+    }
+    // ── Mise à jour de la config (appelée depuis refreshViewModel)
+    update(panelConfig) {
+        this._panelConfig = panelConfig;
+        this._refreshDefaultColumns();
+        this._refreshDynamicSliceMeta();
+    }
+    // ── Actions Fields
+    setActiveColumns(columns) {
+        this.fields.activeColumns = columns;
+        this.fields.userCustomized = true;
+    }
+    setUserCustomized(value) {
+        this.fields.userCustomized = value;
+    }
+    /** Remet la vue dans son état initial : colonnes par défaut, pas de groupBy, pas de dynamic slices. */
+    resetToDefaults() {
+        this.fields.userCustomized = false;
+        this._refreshDefaultColumns();
+        this.groupBy.activeKey = null;
+        this.sliceBy.activeDynamicColumns = [];
+        this._refreshDynamicSliceMeta();
+    }
+    addColumn(column) {
+        const configCols = this._panelConfig.columns ?? [];
+        const configIndex = configCols.findIndex(c => c.key === column.key);
+        if (configIndex === -1) {
+            this.fields.activeColumns = [...this.fields.activeColumns, column];
+        }
+        else {
+            const insertBefore = this.fields.activeColumns.findIndex(c => {
+                const ci = configCols.findIndex(cc => cc.key === c.key);
+                return ci !== -1 && ci > configIndex;
+            });
+            if (insertBefore === -1) {
+                this.fields.activeColumns = [...this.fields.activeColumns, column];
+            }
+            else {
+                const copy = [...this.fields.activeColumns];
+                copy.splice(insertBefore, 0, column);
+                this.fields.activeColumns = copy;
+            }
+        }
+        this.fields.userCustomized = true;
+        this._events$.next({ type: 'fieldsChanged', fieldIds: this.fields.activeColumns.map(c => c.key) });
+    }
+    removeColumn(columnKey) {
+        const col = this.fields.activeColumns.find(c => c.key === columnKey);
+        if (!col)
+            return false;
+        if (!col.optional && !this.allowColumnRemoval)
+            return false;
+        if (this.fields.activeColumns.length <= 1)
+            return false;
+        this.fields.activeColumns = this.fields.activeColumns.filter(c => c.key !== columnKey);
+        this.fields.userCustomized = true;
+        this._events$.next({ type: 'fieldsChanged', fieldIds: this.fields.activeColumns.map(c => c.key) });
+        return true;
+    }
+    toggleColumnVisibility(column, visible) {
+        const isVisible = this.isColumnVisible(column.key);
+        if (visible && !isVisible) {
+            this.addColumn(column);
+        }
+        else if (!visible && isVisible) {
+            this.removeColumn(column.key);
+        }
+    }
+    reorderColumns(fromKey, toKey) {
+        const prev = this.fields.activeColumns.findIndex(c => c.key === fromKey);
+        const curr = this.fields.activeColumns.findIndex(c => c.key === toKey);
+        if (prev === -1 || curr === -1 || prev === curr)
+            return false;
+        const reordered = [...this.fields.activeColumns];
+        const [moved] = reordered.splice(prev, 1);
+        reordered.splice(curr, 0, moved);
+        this.fields.activeColumns = reordered;
+        this.fields.userCustomized = true;
+        this._events$.next({ type: 'fieldsChanged', fieldIds: this.fields.activeColumns.map(c => c.key) });
+        return true;
+    }
+    isColumnVisible(key) {
+        return this.fields.activeColumns.some(c => c.key === key);
+    }
+    // ── Actions Group by
+    setGroupBy(key) {
+        this.groupBy.activeKey = key;
+        this._events$.next({ type: 'groupByChanged', key });
+    }
+    // ── Actions Slice by (dynamique)
+    /** Appelée quand le SlicePanelComponent émet dynamicSliceKeysChange */
+    onDynamicSliceKeysChange(keys) {
+        const allCols = this._panelConfig.columns ?? [];
+        const staticKeys = new Set((this._panelConfig.sliceConfigs ?? []).map(s => s.columnKey).filter((k) => !!k));
+        const dynamicKeySet = new Set(keys);
+        const existingKeys = new Set([...staticKeys, ...dynamicKeySet]);
+        this.sliceBy.activeDynamicColumns = keys
+            .map(k => allCols.find(c => c.key === k))
+            .filter((c) => !!c);
+        const seen = new Set();
+        this.sliceBy.availableForDynamic = allCols.filter(c => {
+            if (c.sliceable === false || existingKeys.has(c.key) || seen.has(c.key))
+                return false;
+            seen.add(c.key);
+            return true;
+        });
+        this._computeSliceLabel();
+        this._events$.next({ type: 'dynamicSlicesChanged', keys });
+    }
+    isDynamicSliceActive(key) {
+        return this.sliceBy.activeDynamicColumns.some(c => c.key === key);
+    }
+    // ── Contrat core
+    /** Retourne un snapshot ViewState (contrat core) de l'état courant. */
+    toViewState() {
+        return {
+            selectedFieldIds: this.fields.activeColumns.map(c => c.key),
+            groupByKey: this.groupBy.activeKey,
+            dynamicSliceKeys: this.sliceBy.activeDynamicColumns.map(c => c.key),
+        };
+    }
+    /** Convertit une TableColumnProvider en ViewField (contrat core). */
+    static toViewField(col) {
+        return {
+            id: col.key,
+            label: col.header,
+            icon: col.icon,
+            groupable: col.groupable,
+            sliceable: col.sliceable,
+            optional: col.optional,
+        };
+    }
+    // ── Destructor
+    destroy() {
+        this._events$.complete();
+    }
+    // ── Helpers privés
+    _refreshDefaultColumns() {
+        const defaultCols = (this._panelConfig.columns || []).filter(c => !c.optional);
+        if (!this.fields.userCustomized || this.fields.activeColumns.length === 0) {
+            this.fields.activeColumns = [...defaultCols];
+        }
+        else {
+            const allowedKeys = new Set((this._panelConfig.columns || []).map(c => c.key));
+            this.fields.activeColumns = this.fields.activeColumns.filter(c => allowedKeys.has(c.key));
+        }
+    }
+    _refreshDynamicSliceMeta() {
+        const allCols = this._panelConfig.columns ?? [];
+        const staticKeys = new Set((this._panelConfig.sliceConfigs ?? []).map(s => s.columnKey).filter((k) => !!k));
+        const activeDynKeys = new Set(this.sliceBy.activeDynamicColumns.map(c => c.key));
+        const seen1 = new Set();
+        this.sliceBy.availableForDynamic = allCols.filter(c => {
+            if (c.sliceable === false || staticKeys.has(c.key) || activeDynKeys.has(c.key) || seen1.has(c.key))
+                return false;
+            if (!c.header && c.sliceable !== true)
+                return false;
+            seen1.add(c.key);
+            return true;
+        });
+        const seen2 = new Set();
+        this.sliceBy.allDynamicColumns = allCols.filter(c => {
+            if (c.sliceable === false || staticKeys.has(c.key) || seen2.has(c.key))
+                return false;
+            if (!c.header && c.sliceable !== true)
+                return false;
+            seen2.add(c.key);
+            return true;
+        });
+        this._computeSliceLabel();
+    }
+    /** Notifie la facade des slices statiques actuellement cachées (géré par table.component).
+     * Recalcule le label slice afin qu'il reflète uniquement les slices visibles. */
+    updateHiddenStaticKeys(keys) {
+        this._hiddenStaticKeys = keys;
+        this._computeSliceLabel();
+    }
+    _computeSliceLabel() {
+        const visibleStatics = (this._panelConfig.sliceConfigs ?? []).filter(s => !s.columnKey || !this._hiddenStaticKeys.has(s.columnKey));
+        const visibleStaticCount = visibleStatics.length;
+        const total = visibleStaticCount + this.sliceBy.activeDynamicColumns.length;
+        if (total === 0) {
+            this.sliceBy.activeLabel = this._panelConfig.noneLabel ?? 'Aucun';
+            return;
+        }
+        if (total === 1) {
+            if (visibleStaticCount === 1) {
+                const first = visibleStatics[0];
+                this.sliceBy.activeLabel = first?.title || first?.columnKey || '1';
+                return;
+            }
+            this.sliceBy.activeLabel = this.sliceBy.activeDynamicColumns[0]?.header || '1';
+            return;
+        }
+        this.sliceBy.activeLabel = `${total} actifs`;
+    }
+    _uniqueByKey(cols) {
+        const seen = new Set();
+        return cols.filter(c => {
+            if (seen.has(c.key))
+                return false;
+            seen.add(c.key);
+            return true;
+        });
+    }
+}
+
+/**
+ * Constantes sentinel utilisées pour les identifiants de colonnes et les valeurs
+ * projetées dans le datasource interne de la table.
+ *
+ * Centraliser ici évite les typos silencieuses et facilite les tests unitaires.
+ */
+/** Identifiant de la colonne virtuelle rendue sur toute la largeur pour les en-têtes de groupe. */
+const GROUP_ROW_COLUMN = '__group_row';
+/** Marqueur posé sur les objets de ligne pour signaler une ligne d'en-tête de groupe. */
+const GROUP_HEADER_MARKER = '__groupHeader';
+/** Clé du groupe spéciale « chargement lazy en cours ». */
+const GROUP_KEY_LAZY_LOADING = '__lazy_loading__';
+/** Clé du groupe spéciale « trop de groupes ». */
+const GROUP_KEY_TOO_MANY = '__too_many_groups__';
+/** Propriété injectée dans chaque ligne projetée : référence vers la ligne brute d'origine. */
+const ROW_RAW_KEY = '__raw';
+/** Propriété injectée dans chaque ligne projetée : index global de la ligne dans le jeu de données filtré. */
+const ROW_INDEX_KEY = '__index';
+/** Propriété injectée dans chaque ligne projetée : clé du groupe auquel appartient la ligne d'en-tête. */
+const ROW_GROUP_KEY = '__groupKey';
+/** Propriété injectée dans chaque ligne projetée : nombre de lignes dans le groupe. */
+const ROW_GROUP_COUNT = '__groupCount';
+/** Propriété injectée dans chaque ligne projetée : page courante du groupe. */
+const ROW_GROUP_PAGE = '__groupPage';
+/** Propriété injectée dans chaque ligne projetée : nombre de pages du groupe. */
+const ROW_GROUP_PAGE_COUNT = '__groupPageCount';
+/** Valeur sentinelle posée dans une cellule lazy en cours de chargement. */
+const LAZY_LOADING_VALUE = '__lazy_loading__';
+/** Valeur sentinelle posée dans une cellule lazy en erreur. */
+const LAZY_ERROR_VALUE = '__lazy_error__';
+
+/**
+ * Gère le cycle de vie des colonnes à chargement différé (lazy) :
+ * statuts, données, annulation des requêtes en cours.
+ *
+ * Pas de dépendance Angular/DOM — peut être instancié manuellement dans le composant.
+ */
+class LazyColumnManager {
+    constructor() {
+        this._status = new Map();
+        this._data = new Map();
+        this._cancels = new Map();
+    }
+    get status() {
+        return this._status;
+    }
+    get data() {
+        return this._data;
+    }
+    getStatus(key) {
+        return this._status.get(key) ?? 'idle';
+    }
+    getRenderType(rowValue) {
+        if (rowValue === LAZY_LOADING_VALUE)
+            return 'loading';
+        if (rowValue === LAZY_ERROR_VALUE)
+            return 'error';
+        return 'value';
+    }
+    /** Annule tous les fetches en cours et réinitialise l'état (appeler lors d'un changement de données). */
+    cancelAll() {
+        this._cancels.forEach(s => { s.next(); s.complete(); });
+        this._cancels.clear();
+        this._status = new Map();
+        this._data = new Map();
+    }
+    /** Réinitialise une colonne et relance son fetch. */
+    retry(column, resolvedData, callbacks) {
+        const k = column.key;
+        const prev = this._cancels.get(k);
+        if (prev) {
+            prev.next();
+            prev.complete();
+        }
+        this._cancels.delete(k);
+        const newStatus = new Map(this._status);
+        newStatus.delete(k);
+        this._status = newStatus;
+        const newData = new Map(this._data);
+        newData.delete(k);
+        this._data = newData;
+        this.fetch(column, resolvedData, callbacks);
+    }
+    /** Lance le chargement différé d'une colonne. No-op si déjà en cours. */
+    fetch(column, resolvedData, callbacks) {
+        if (!column.lazy)
+            return;
+        const k = column.key;
+        if (this._status.get(k) === 'loading')
+            return;
+        const prev = this._cancels.get(k);
+        if (prev) {
+            prev.next();
+            prev.complete();
+        }
+        const cancel$ = new Subject();
+        this._cancels.set(k, cancel$);
+        const newStatus = new Map(this._status);
+        newStatus.set(k, 'loading');
+        this._status = newStatus;
+        callbacks.onRefresh();
+        column.lazy.fetchFn().pipe(take(1), takeUntil(cancel$)).subscribe({
+            next: (values) => {
+                const rowMap = new Map();
+                values.forEach((value, i) => {
+                    if (i < resolvedData.length)
+                        rowMap.set(resolvedData[i], value);
+                });
+                const newData = new Map(this._data);
+                newData.set(k, rowMap);
+                this._data = newData;
+                const newStatus2 = new Map(this._status);
+                newStatus2.set(k, 'loaded');
+                this._status = newStatus2;
+                callbacks.onRefresh();
+                callbacks.onMarkForCheck();
+            },
+            error: () => {
+                const newStatusErr = new Map(this._status);
+                newStatusErr.set(k, 'error');
+                this._status = newStatusErr;
+                callbacks.onRefresh();
+                callbacks.onMarkForCheck();
+            },
+        });
+    }
+}
+
+const STORAGE_PREFIX = 'jqt_prefs_';
+/**
+ * Gère la persistance de la configuration d'un tableau dans le localStorage.
+ * Identifie chaque tableau par un `tableId` unique fourni par l'utilisateur.
+ */
+class TablePreferencesManager {
+    constructor(tableId) {
+        this.key = STORAGE_PREFIX + tableId;
+    }
+    /** Retourne la configuration sauvegardée, ou `null` si absente / corrompue. */
+    load() {
+        try {
+            const raw = localStorage.getItem(this.key);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Persiste la configuration dans le localStorage. */
+    save(config) {
+        try {
+            localStorage.setItem(this.key, JSON.stringify(config));
+        }
+        catch {
+            // localStorage peut être indisponible (mode privé strict, quota dépassé…)
+        }
+    }
+    /** Supprime la configuration sauvegardée. */
+    clear() {
+        localStorage.removeItem(this.key);
+    }
+    /** Indique si une configuration est actuellement sauvegardée. */
+    hasSaved() {
+        return localStorage.getItem(this.key) !== null;
+    }
+}
+
+/**
+ * GroupByManager
+ *
+ * Encapsule tout l'état et la logique liés au mode Group By :
+ * - état collapsed / expanded des groupes
+ * - pagination interne par groupe
+ * - tri des groupes (asc / desc)
+ * - scroll vers un groupe
+ *
+ * Le composant TableComponent l'instancie et lui passe deux callbacks :
+ *   - `onNeedProjection` : demande une reprojection légère de la page courante
+ *   - `onNeedRender`     : demande un rebuild complet (tri changé etc.)
+ */
+class GroupByManager {
+    constructor(onNeedProjection, onNeedRender) {
+        this.onNeedProjection = onNeedProjection;
+        this.onNeedRender = onNeedRender;
+        /** Groupes actuellement ouverts (mode default-collapsed) ou fermés (mode default-expanded). */
+        this._collapsedGroups = new Set();
+        /** Page courante par clé de groupe. */
+        this._groupPages = new Map();
+        /** Taille de page pour la pagination interne des groupes. */
+        this.groupPageSize = 5;
+        /** Ordre de tri des groupes ('asc' | 'desc'). */
+        this.groupSortOrder = 'asc';
+        /**
+         * Quand `true`, tous les groupes sont collapsés par défaut.
+         * `_collapsedGroups` contient alors le seul groupe ouvert.
+         */
+        this._defaultGroupCollapsed = false;
+    }
+    // ── API publique
+    /** Initialise le mode par défaut selon qu'un groupBy vient d'être activé. */
+    setDefaultCollapsed(collapsed) {
+        this._defaultGroupCollapsed = collapsed;
+    }
+    /** Réinitialise l'état (à appeler quand le groupBy change de colonne). */
+    reset() {
+        this._collapsedGroups.clear();
+        this._groupPages.clear();
+    }
+    isGroupCollapsed(groupKey) {
+        return this._defaultGroupCollapsed
+            ? !this._collapsedGroups.has(groupKey)
+            : this._collapsedGroups.has(groupKey);
+    }
+    toggleGroupCollapse(groupKey, scrollTo) {
+        if (this._collapsedGroups.has(groupKey)) {
+            this._collapsedGroups.delete(groupKey);
+        }
+        else {
+            this._collapsedGroups.clear();
+            this._collapsedGroups.add(groupKey);
+            scrollTo(groupKey);
+        }
+        this.onNeedProjection();
+    }
+    /** Retourne le groupe actuellement ouvert (seulement en mode default-collapsed avec exactement 1 ouvert). */
+    getSingleOpenGroup() {
+        return this._defaultGroupCollapsed && this._collapsedGroups.size === 1
+            ? [...this._collapsedGroups][0]
+            : null;
+    }
+    // ── Pagination par groupe
+    getPage(groupKey) {
+        return this._groupPages.get(groupKey) ?? 0;
+    }
+    groupPageBack(groupKey) {
+        const current = this._groupPages.get(groupKey) ?? 0;
+        if (current > 0) {
+            this._groupPages.set(groupKey, current - 1);
+            this.onNeedProjection();
+        }
+    }
+    groupPageForward(groupKey, totalCount) {
+        const maxPage = Math.ceil(totalCount / this.groupPageSize) - 1;
+        const current = this._groupPages.get(groupKey) ?? 0;
+        if (current < maxPage) {
+            this._groupPages.set(groupKey, current + 1);
+            this.onNeedProjection();
+        }
+    }
+    onGroupPageSizeChange(size) {
+        this.groupPageSize = size;
+        this._groupPages.clear();
+        this.onNeedRender();
+    }
+    onGroupSortToggle(dir, scrollTo) {
+        if (this.groupSortOrder === dir)
+            return;
+        this.groupSortOrder = dir;
+        this._groupPages.clear();
+        this.onNeedRender();
+        const openGroup = this.getSingleOpenGroup();
+        if (openGroup)
+            scrollTo(openGroup);
+    }
+}
+
+/**
+ * ExportManager
+ *
+ * Encapsule l'export CSV : construction du fichier BOM/UTF-8, échappement et déclenchement du téléchargement.
+ * Aucune dépendance Angular — indépendant du cycle de vie du composant.
+ */
+class ExportManager {
+    constructor(getRows, getColumns, getConfig, resolveCellValue) {
+        this.getRows = getRows;
+        this.getColumns = getColumns;
+        this.getConfig = getConfig;
+        this.resolveCellValue = resolveCellValue;
+    }
+    export() {
+        const cfg = this.getConfig();
+        if (!cfg?.enabled)
+            return;
+        const rows = this.getRows();
+        const columns = this.getColumns();
+        const filename = (cfg.filename || 'export') + '.csv';
+        const header = columns.map(c => this._csvEscape(c.header || c.key)).join(',');
+        const lines = rows.map((row, idx) => {
+            if (cfg.transform) {
+                const t = cfg.transform(row);
+                return columns.map(c => this._csvEscape(String(t[c.key] ?? ''))).join(',');
+            }
+            return columns.map(c => this._csvEscape(String(this.resolveCellValue(c, row, idx) ?? ''))).join(',');
+        });
+        // BOM UTF-8 pour une ouverture correcte sous Excel
+        const blob = new Blob(['\uFEFF' + [header, ...lines].join('\n')], { type: 'text/csv;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename.endsWith('.csv') ? filename : filename + '.csv';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    _csvEscape(value) {
+        if (value.includes(',') || value.includes('"') || value.includes('\n')) {
+            return '"' + value.replace(/"/g, '""') + '"';
+        }
+        return value;
+    }
+}
+
 class TableComponent {
     constructor() {
         this.isLoading = false;
@@ -547,8 +1214,35 @@ class TableComponent {
         this.columnRemoved = new EventEmitter();
         this.categorySelected = new EventEmitter();
         this.rowSelected = new EventEmitter();
+        /** Émis à chaque changement de tri (y compris le tri initial). */
+        this.sortChange = new EventEmitter();
+        /** Émis à chaque changement de page ou de taille de page. */
+        this.pageChange = new EventEmitter();
+        /** Émis à chaque changement de la recherche texte. */
+        this.searchChange = new EventEmitter();
+        /** Émis quand le Group by change (clé de colonne, ou `null` si désactivé). */
+        this.groupByChange = new EventEmitter();
+        /** Émis quand la liste des colonnes visibles change (clés dans l’ordre d’affichage). */
+        this.columnsChange = new EventEmitter();
+        /** Map clé→TemplateRef pré-calculée depuis _cellDefs. Mise à jour dans ngAfterContentInit et sur _cellDefs.changes. */
+        this._cellDefMap = new Map();
         this.renderedColumns = [];
         this.tableDataSource = new MatTableDataSource([]);
+        /** Constante exposée au template pour le matColumnDef de la ligne de groupe. */
+        this._GROUP_ROW_COLUMN = GROUP_ROW_COLUMN;
+        /** Clés d'accès aux propriétés des lignes projetées — exposées pour le template. */
+        this._ROW_RAW_KEY = ROW_RAW_KEY;
+        this._ROW_INDEX_KEY = ROW_INDEX_KEY;
+        this._ROW_GROUP_KEY = ROW_GROUP_KEY;
+        this._ROW_GROUP_COUNT = ROW_GROUP_COUNT;
+        this._ROW_GROUP_PAGE = ROW_GROUP_PAGE;
+        this._ROW_GROUP_PAGE_COUNT = ROW_GROUP_PAGE_COUNT;
+        /** Facade View : état et actions centralisés (Champs / Group by / Slice by) */
+        this._view = new ViewFacade();
+        /**
+         * Snapshot stable synchronisé depuis _view.fields.activeColumns dans refreshViewModel().
+         * Propriété (non getter) pour qu'Angular puisse la suivre sans NG0100.
+         */
         this.activeColumns = [];
         this.activeSliceFilter = () => true;
         // Propriétés stables pour les bindings du template (contre erreur NG0100)
@@ -556,55 +1250,69 @@ class TableComponent {
         this._sliceColumns = [];
         this._sliceData = [];
         this._sliceShowToggle = true;
-        this._staticSlicesForMenu = [];
-        this._activeDynamicSliceColumns = [];
-        this._availableColumnsForDynamicSlice = [];
-        this._allDynamicSliceColumns = [];
-        this._activeSliceByLabel = 'Aucun';
+        /** Snapshot stable de la visibilité du panneau slice — jamais calculé depuis @ViewChild */
+        this._showSlicePanel = false;
+        /** Snapshot stable de l'état collapsed du panneau slice, mis à jour via (collapsedChange) */
+        this._slicePanelCollapsed = false;
+        this._sliceByMenuItems = [];
         this.searchQuery = '';
-        this.activeGroupByKey = null;
         this._matSortActive = '';
         this._matSortDirection = '';
-        this._collapsedGroups = new Set();
         this._activeSort = { active: '', direction: '' };
         this._sortSubscribed = null;
         this._destroy$ = new Subject();
-        this._defaultGroupCollapsed = false;
-        this._groupPages = new Map();
         this._totalFilteredCount = 0;
-        this._lazyColumnStatus = new Map();
-        this._lazyColumnData = new Map();
-        this._lazyFetchCancels = new Map();
+        /** Gestionnaire du mode Group By (état collapsed, pagination, tri des groupes). */
+        this._groupBy = new GroupByManager(() => { this._projectCurrentPage(); this._cdr.markForCheck(); }, () => this.refreshViewModel());
+        /** Gestionnaire du cycle de vie des colonnes lazy (fetch, annulation, statuts, données). */
+        this._lazy = new LazyColumnManager();
         this._cdr = inject(ChangeDetectorRef);
         this._el = inject((ElementRef));
-        this.isGroupHeader = (_, row) => row.__groupHeader === true;
-        // ── Lifecycle ──────────────────────────────────────────────────────────────
+        this._ngZone = inject(NgZone);
+        this._i18nRaw = inject(JQT_I18N, { optional: true });
+        /** Labels de l’interface. Fusionnés depuis JQT_I18N_DEFAULTS et le token JQT_I18N injecté. */
+        this.i18n = { ...JQT_I18N_DEFAULTS, ...(this._i18nRaw ?? {}) };
+        this.isGroupHeader = (_, row) => row[GROUP_HEADER_MARKER] === true;
+        /** Gestionnaire export CSV. */
+        this._export = new ExportManager(() => this._allFilteredRows, () => this.activeColumns, () => this.resolvedConfig.export, (col, row, idx) => this.resolveCellValue(col, row, idx));
+        // ── Lifecycle
         this.pageSize = 5;
         this.pageSizeOptions = [5, 10, 20];
         this.pageSizeOptionsGroupBy = [5, 10, 20];
-        this.groupPageSize = 5;
-        this.groupSortOrder = 'asc';
         this.draggedColumnKey = null;
         this.dragOverColumnKey = null;
-        this.userCustomizedColumns = false;
+        // ── Mode édition (Préférences)
+        /** Vrai quand le mode édition est actif (resize + drag colonnes, interactions désactivées). */
+        this._editMode = false;
+        /** Largeurs de colonnes personnalisées par l'utilisateur (clé → px). */
+        this._columnWidths = {};
+        /** Message de feedback après save/clear. `null` = pas de message. */
+        this._preferencesMessage = null;
+        /** Vrai si une configuration est sauvegardée pour ce tableau. */
+        this._hasSavedConfig = false;
+        this._preferencesManager = null;
+        this._resizeState = null;
+        /** Dynamic slice keys à restaurer après ngAfterViewInit (slicePanelRef pas encore dispo). */
+        this._pendingDynamicSliceKeys = null;
+        /** Filtres de slice à restaurer après ngAfterViewInit (slicePanelRef pas encore dispo). */
+        this._pendingSliceFilters = null;
         this.resolvedConfig = { columns: [] };
         this._columnMap = new Map();
         this._resolvedData = [];
         this._preservePageIndex = null;
         this._initialSearchApplied = false;
-        // ── Optimisation performance ─────────────────────────────────────────────
+        // ── Optimisation performance
         this._allFilteredRows = [];
         this._paginatorSubscribed = null;
-        // Cache groupBy : invalide uniquement quand les données/tri/groupKey changent
-        this._groupCacheRows = null;
-        this._groupCacheKey = null;
-        this._groupCacheSortOrder = 'asc';
-        this._groupCacheSortActive = '';
-        this._groupCacheSortDir = '';
-        this._groupCacheOrder = [];
-        this._groupCacheMap = new Map();
+        /** Cache groupBy — invalidé dès que rows/key/tri changent. */
+        this._groupCache = null;
         this._pendingRender = null;
-        this.trackRowFn = (_index, row) => row.__groupHeader ? `__group_${row.__groupKey}` : row.__index ?? _index;
+        this._staticSliceHiddenKeys = new Set();
+        this._configHiddenKeys = new Set();
+        /** Clés des colonnes visibles du dernier émission columnsChange (pour éviter les émissions dupliquement). */
+        this._prevColumnKeys = [];
+        this.trackRowFn = (_index, row) => row[GROUP_HEADER_MARKER] ? `__group_${row[ROW_GROUP_KEY]}` : row[ROW_INDEX_KEY] ?? _index;
+        this._preferencesMessageTimer = null;
     }
     set paginator(value) {
         this._paginator = value;
@@ -614,15 +1322,40 @@ class TableComponent {
         }
     }
     get paginator() { return this._paginator; }
+    // Délégués vers _view (conservés pour compatibilité template sans refactoring HTML)
+    get _staticSlicesForMenu() { return this._view.staticSlicesForMenu; }
+    get _activeDynamicSliceColumns() { return this._view.sliceBy.activeDynamicColumns; }
+    get _availableColumnsForDynamicSlice() { return this._view.sliceBy.availableForDynamic; }
+    get _allDynamicSliceColumns() { return this._view.sliceBy.allDynamicColumns; }
+    get _activeSliceByLabel() { return this._view.sliceBy.activeLabel; }
+    get activeGroupByKey() { return this._view.groupBy.activeKey; }
+    /** Délégués vers GroupByManager pour la compatibilité des templates. */
+    get groupPageSize() { return this._groupBy.groupPageSize; }
+    set groupPageSize(v) { this._groupBy.groupPageSize = v; }
+    get groupSortOrder() { return this._groupBy.groupSortOrder; }
+    set groupSortOrder(v) { this._groupBy.groupSortOrder = v; }
+    /** Compatibilité template : retourne la map de statuts lazy. */
+    get _lazyColumnStatus() { return this._lazy.status; }
+    /** Compatibilité template : retourne la map de données lazy. */
+    get _lazyColumnData() { return this._lazy.data; }
+    /** Retourne true si la ligne de groupe est une ligne normale (ni lazy, ni too-many). */
+    isNormalGroupRow(row) {
+        return row[ROW_GROUP_KEY] !== GROUP_KEY_LAZY_LOADING && row[ROW_GROUP_KEY] !== GROUP_KEY_TOO_MANY;
+    }
+    isGroupRowLoading(row) { return row[ROW_GROUP_KEY] === GROUP_KEY_LAZY_LOADING; }
+    isGroupRowTooMany(row) { return row[ROW_GROUP_KEY] === GROUP_KEY_TOO_MANY; }
+    /** Gère le clic sur une ligne d'en-tête de groupe (no-op pour les états spéciaux). */
+    onGroupHeaderClick(row) {
+        if (!this.isNormalGroupRow(row))
+            return;
+        this.toggleGroupCollapse(row[ROW_GROUP_KEY]);
+    }
     // Seuil au-delà duquel le rendu groupé est bloqué pour protéger le navigateur
     static { this.MAX_GROUP_COUNT = 500; }
     ngOnChanges(changes) {
         const dataChanged = !!(changes['config'] || changes['data'] || changes['dataSource']);
         if (dataChanged) {
-            this._lazyFetchCancels.forEach(s => { s.next(); s.complete(); });
-            this._lazyFetchCancels.clear();
-            this._lazyColumnStatus = new Map();
-            this._lazyColumnData = new Map();
+            this._lazy.cancelAll();
         }
         if (changes['config'] && !this._initialSearchApplied) {
             const initial = this.config?.search?.initialQuery;
@@ -636,28 +1369,81 @@ class TableComponent {
             this.activeColumns.filter(c => c.lazy).forEach(c => this.triggerLazyFetch(c));
         }
     }
+    ngAfterContentInit() {
+        this._rebuildCellDefMap();
+        this._cellDefs.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this._rebuildCellDefMap();
+            this._cdr.markForCheck();
+        });
+    }
     ngAfterViewInit() {
         this.attachPaginator();
         this.attachSort();
         this._measureHeaderHeight();
+        this._applyPendingDynamicSliceKeys();
+    }
+    _applyPendingDynamicSliceKeys() {
+        const hasPendingDynamic = !!this._pendingDynamicSliceKeys;
+        const hasPendingFilters = !!this._pendingSliceFilters;
+        if (!hasPendingDynamic && !hasPendingFilters)
+            return;
+        const allCols = this.resolvedConfig.columns ?? [];
+        const keys = hasPendingDynamic ? [...this._pendingDynamicSliceKeys] : [];
+        const filters = this._pendingSliceFilters ? { ...this._pendingSliceFilters } : null;
+        this._pendingDynamicSliceKeys = null;
+        this._pendingSliceFilters = null;
+        // Tout est différé dans le même setTimeout pour :
+        // 1. Éviter NG0100 (modifications après vérification dans ngAfterViewInit)
+        // 2. Garantir que les dynamic slices sont ajoutées AVANT la restauration des filtres
+        //    (les indices dans sliceFilters dépendent de l'ordre final de _cachedSlices)
+        setTimeout(() => {
+            keys.forEach(key => {
+                const col = allCols.find(c => c.key === key);
+                if (col)
+                    this.addDynamicSlice(col);
+            });
+            if (filters) {
+                if (this.slicePanelRef) {
+                    this.slicePanelRef.restoreFilters(filters);
+                }
+                else {
+                    // slicePanelRef toujours null (données pas encore arrivées) :
+                    // remettre en attente pour que _recomputeShowSlicePanel les applique
+                    this._pendingSliceFilters = filters;
+                }
+            }
+            this._cdr.markForCheck();
+        });
     }
     ngOnDestroy() {
         if (this._pendingRender !== null) {
             clearTimeout(this._pendingRender);
         }
+        if (this._preferencesMessageTimer !== null) {
+            clearTimeout(this._preferencesMessageTimer);
+        }
+        // Nettoie un éventuel resize en cours (listeners window non retirés)
+        this._resizeState = null;
         this._destroy$.next();
         this._destroy$.complete();
+        this._view.destroy();
     }
     _measureHeaderHeight() {
-        const headerRow = this._el.nativeElement.querySelector('tr.mat-mdc-header-row');
-        if (headerRow) {
-            const h = headerRow.getBoundingClientRect().height;
-            if (h > 0) {
-                this._el.nativeElement.style.setProperty('--actual-header-height', h + 'px');
+        const measure = () => {
+            const headerRow = this._el.nativeElement.querySelector('tr.mat-mdc-header-row');
+            if (headerRow) {
+                const h = headerRow.getBoundingClientRect().height;
+                if (h > 0) {
+                    this._el.nativeElement.style.setProperty('--actual-header-height', h + 'px');
+                    return;
+                }
             }
-        }
+            // Header pas encore rendu (ex: lazy Angular Material), on réessaie après le prochain frame
+            this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => measure()));
+        };
+        this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => measure()));
     }
-    // ── Getters d'affichage ────────────────────────────────────────────────────
+    // ── Getters d'affichage
     get title() {
         return this.resolvedConfig.title ?? '';
     }
@@ -668,60 +1454,48 @@ class TableComponent {
         return this.activeColumns;
     }
     get showSearchBar() { return this.resolvedConfig.search?.enabled === true; }
-    get showViewButton() { return this.resolvedConfig.view?.enabled === true; }
-    get showToolbar() { return this.showSearchBar || this.showViewButton; }
-    get showFields() { return this.showViewButton; }
-    get showGroupBySection() { return this.showViewButton && this.groupByColumns.length > 0; }
-    get filteredRowCount() {
-        return this.activeGroupByKey ? this._totalFilteredCount : this._allFilteredRows.length;
-    }
-    get activeGroupByLabel() {
-        if (!this.activeGroupByKey)
-            return 'Aucun';
-        const col = this.groupByColumns.find((c) => c.key === this.activeGroupByKey);
-        return col?.header || this.activeGroupByKey;
+    get showViewButton() { return this._view.enabled || this.showExportButton || this.showPreferencesMenu; }
+    get showSliceExpandBtn() { return this._showSlicePanel && this._slicePanelCollapsed && this._sliceShowToggle; }
+    get showExportButton() {
+        return this.resolvedConfig.export?.enabled === true;
     }
-    get totalColumnCount() {
-        return new Set((this.resolvedConfig.columns || []).map((c) => c.key)).size;
+    get showPreferencesMenu() {
+        return this.resolvedConfig.preferences?.enabled === true;
     }
-    get activeSliceByLabel() {
-        return this._activeSliceByLabel;
+    get hasSavedPreferences() { return this._hasSavedConfig; }
+    get showToolbar() { return this.showSearchBar || this.showViewButton || this.showSliceExpandBtn; }
+    expandSlicePanel() {
+        this.slicePanelRef?.togglePanel();
     }
-    get activeDynamicSliceColumns() {
-        return this._activeDynamicSliceColumns;
+    get showFields() { return this._view.showFields; }
+    get showGroupBySection() { return this._view.showGroupBySection; }
+    get filteredRowCount() {
+        return this.activeGroupByKey ? this._totalFilteredCount : this._allFilteredRows.length;
     }
+    get activeGroupByLabel() { return this._view.activeGroupByLabel; }
+    get totalColumnCount() { return this._view.totalColumnCount; }
+    get activeSliceByLabel() { return this._view.sliceBy.activeLabel; }
+    get activeDynamicSliceColumns() { return this._view.sliceBy.activeDynamicColumns; }
     removeDynamicSliceByKey(key) {
         this.slicePanelRef?.removeDynamicSliceByKey(key);
     }
-    get groupByColumns() {
-        const all = this.resolvedConfig.columns || [];
-        const seen = new Set();
-        return all.filter((c) => {
-            if (c.groupable === false || seen.has(c.key))
-                return false;
-            if (!c.header && c.groupable !== true)
-                return false;
-            seen.add(c.key);
-            return true;
-        });
-    }
-    colLabel(col) {
-        return col.header || humanizeKey(col.key);
-    }
-    // ── Actions utilisateur ────────────────────────────────────────────────────
+    get groupByColumns() { return this._view.groupByColumns; }
+    colLabel(col) { return this._view.colLabel(col); }
+    // ── Actions utilisateur
     onSearchChange() {
         this._preservePageIndex = 0;
         this.refreshViewModel();
         this.paginator?.firstPage();
+        this.searchChange.emit(this.searchQuery);
     }
     onGroupByChange(key) {
-        this.activeGroupByKey = key;
-        this._defaultGroupCollapsed = key !== null;
-        this._collapsedGroups.clear();
-        this._groupPages.clear();
-        this.groupPageSize = this.resolveDefaultGroupPageSize();
+        this._view.setGroupBy(key);
+        this._groupBy.setDefaultCollapsed(key !== null);
+        this._groupBy.reset();
+        this._groupBy.groupPageSize = this.resolveDefaultGroupPageSize();
         this.refreshViewModel();
         this.paginator?.firstPage();
+        this.groupByChange.emit(key);
         if (key) {
             this.viewMenuTrigger?.closeMenu();
             const colDef = (this.resolvedConfig.columns || []).find(c => c.key === key);
@@ -730,113 +1504,43 @@ class TableComponent {
             }
         }
         else {
-            setTimeout(() => {
+            this._ngZone.runOutsideAngular(() => setTimeout(() => {
                 this.tableBodyScrollRef?.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
-            }, 0);
+            }, 0));
         }
     }
     onGroupPageSizeChange(size) {
-        this.groupPageSize = Number(size);
-        this._groupPages.clear();
-        this.refreshViewModel();
+        this._groupBy.onGroupPageSizeChange(Number(size));
     }
     onGroupSortToggle(dir) {
-        if (this.groupSortOrder === dir)
-            return;
-        this.groupSortOrder = dir;
-        this._groupPages.clear();
-        this.refreshViewModel();
-        const openGroup = this._defaultGroupCollapsed
-            ? (this._collapsedGroups.size === 1 ? [...this._collapsedGroups][0] : null)
-            : null;
-        if (openGroup) {
-            setTimeout(() => this.scrollToGroupHeader(openGroup), 0);
-        }
+        this._groupBy.onGroupSortToggle(dir, (key) => {
+            this._ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToGroupHeader(key), 0));
+        });
     }
-    // ── Lazy loading ─────────────────────────────────────────────────────────
+    // ── Lazy loading
     getLazyColumnStatus(key) {
-        return this._lazyColumnStatus.get(key) ?? 'idle';
+        return this._lazy.getStatus(key);
     }
     getLazyRenderType(rowValue) {
-        if (rowValue === '__lazy_loading__')
-            return 'loading';
-        if (rowValue === '__lazy_error__')
-            return 'error';
-        return 'value';
+        return this._lazy.getRenderType(rowValue);
     }
     retryLazyColumn(column) {
-        const k = column.key;
-        const prev = this._lazyFetchCancels.get(k);
-        if (prev) {
-            prev.next();
-            prev.complete();
-        }
-        this._lazyFetchCancels.delete(k);
-        const newStatus = new Map(this._lazyColumnStatus);
-        newStatus.delete(k);
-        this._lazyColumnStatus = newStatus;
-        const newData = new Map(this._lazyColumnData);
-        newData.delete(k);
-        this._lazyColumnData = newData;
-        this.triggerLazyFetch(column);
+        this._lazy.retry(column, this._resolvedData, this._lazyCallbacks());
     }
     triggerLazyFetch(column) {
-        if (!column.lazy)
-            return;
-        const k = column.key;
-        if (this._lazyColumnStatus.get(k) === 'loading')
-            return;
-        const prev = this._lazyFetchCancels.get(k);
-        if (prev) {
-            prev.next();
-            prev.complete();
-        }
-        const cancel$ = new Subject();
-        this._lazyFetchCancels.set(k, cancel$);
-        const newStatus1 = new Map(this._lazyColumnStatus);
-        newStatus1.set(k, 'loading');
-        this._lazyColumnStatus = newStatus1;
-        this.refreshViewModel();
-        column.lazy.fetchFn().pipe(take(1), takeUntil(cancel$)).subscribe({
-            next: (values) => {
-                const rowMap = new Map();
-                const data = this._resolvedData;
-                values.forEach((value, i) => {
-                    if (i < data.length)
-                        rowMap.set(data[i], value);
-                });
-                const newData = new Map(this._lazyColumnData);
-                newData.set(k, rowMap);
-                this._lazyColumnData = newData;
-                const newStatus2 = new Map(this._lazyColumnStatus);
-                newStatus2.set(k, 'loaded');
-                this._lazyColumnStatus = newStatus2;
-                this.refreshViewModel();
-                this._cdr.markForCheck();
-            },
-            error: () => {
-                const newStatusErr = new Map(this._lazyColumnStatus);
-                newStatusErr.set(k, 'error');
-                this._lazyColumnStatus = newStatusErr;
-                this.refreshViewModel();
-                this._cdr.markForCheck();
-            },
-        });
+        this._lazy.fetch(column, this._resolvedData, this._lazyCallbacks());
+    }
+    _lazyCallbacks() {
+        return {
+            onRefresh: () => this.refreshViewModel(),
+            onMarkForCheck: () => this._cdr.markForCheck(),
+        };
     }
-    // ── Groupement ────────────────────────────────────────────────────────────
+    // ── Groupement
     toggleGroupCollapse(groupKey) {
-        if (this._collapsedGroups.has(groupKey)) {
-            this._collapsedGroups.delete(groupKey);
-        }
-        else {
-            this._collapsedGroups.clear();
-            this._collapsedGroups.add(groupKey);
-            setTimeout(() => this.scrollToGroupHeader(groupKey), 0);
-        }
-        // Court-circuit de refreshViewModel : la data et les colonnes n'ont pas changé,
-        // seul l'état collapsed change — reprojection directe sans rebuild complet
-        this._projectCurrentPage();
-        this._cdr.markForCheck();
+        this._groupBy.toggleGroupCollapse(groupKey, (key) => {
+            this._ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToGroupHeader(key), 0));
+        });
     }
     scrollToGroupHeader(groupKey) {
         const container = this.tableBodyScrollRef?.nativeElement;
@@ -853,63 +1557,86 @@ class TableComponent {
         container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
     }
     isGroupCollapsed(groupKey) {
-        return this._defaultGroupCollapsed ? !this._collapsedGroups.has(groupKey) : this._collapsedGroups.has(groupKey);
+        return this._groupBy.isGroupCollapsed(groupKey);
     }
     groupPageBack(groupKey) {
-        const current = this._groupPages.get(groupKey) ?? 0;
-        if (current > 0) {
-            this._groupPages.set(groupKey, current - 1);
-            this._projectCurrentPage();
-            this._cdr.markForCheck();
-        }
+        this._groupBy.groupPageBack(groupKey);
     }
     groupPageForward(groupKey, totalCount) {
-        const maxPage = Math.ceil(totalCount / this.groupPageSize) - 1;
-        const current = this._groupPages.get(groupKey) ?? 0;
-        if (current < maxPage) {
-            this._groupPages.set(groupKey, current + 1);
-            this._projectCurrentPage();
-            this._cdr.markForCheck();
-        }
+        this._groupBy.groupPageForward(groupKey, totalCount);
     }
-    // ── Colonnes ──────────────────────────────────────────────────────────────
+    // ── Colonnes
     get hasAddableColumns() {
-        return this.menuBaseColumns.length > 0 || this.menuOptionalColumns.length > 0;
+        return this._view.menuBaseColumns.length > 0 || this._view.menuOptionalColumns.length > 0;
     }
     get menuBaseColumns() {
-        return this.uniqueColumnsByKey((this.resolvedConfig.columns || []).filter((c) => !c.optional));
+        return this._view.menuBaseColumns;
     }
     get menuOptionalColumns() {
-        return this.uniqueColumnsByKey((this.resolvedConfig.columns || []).filter((c) => c.optional));
+        return this._view.menuOptionalColumns;
     }
     get availableColumnsToAdd() {
         const activeKeys = new Set(this.activeColumns.map((column) => column.key));
         return (this.resolvedConfig.columns || []).filter((c) => c.optional && !activeKeys.has(c.key));
     }
     get allowColumnRemoval() {
-        return this.resolvedConfig.view?.enableColumnRemoval !== false;
+        return this._view.allowColumnRemoval;
     }
-    // ── Slices ────────────────────────────────────────────────────────────────
+    // ── Slices
     get hasSliceConfig() {
         return (this.resolvedConfig.slices?.length ?? 0) > 0;
     }
     get showSlicePanel() {
-        return this.slicePanelRef?.showPanel ?? (this.hasSliceConfig && this._resolvedData.length > 0);
+        return this._showSlicePanel;
+    }
+    onSlicePanelCollapsedChange(collapsed) {
+        this._slicePanelCollapsed = collapsed;
+        this._cdr.markForCheck();
+    }
+    _recomputeShowSlicePanel() {
+        const hasCfg = this._sliceConfigs.length > 0 || this._view.sliceBy.activeDynamicColumns.length > 0;
+        const wasVisible = this._showSlicePanel;
+        this._showSlicePanel = hasCfg && this._resolvedData.length > 0;
+        // Le SlicePanelComponent vient d'être rendu pour la 1ère fois
+        // (données arrivées) → appliquer les filtres en attente
+        if (!wasVisible && this._showSlicePanel && this._pendingSliceFilters) {
+            const filters = this._pendingSliceFilters;
+            this._pendingSliceFilters = null;
+            setTimeout(() => {
+                this.slicePanelRef?.restoreFilters(filters);
+                this._cdr.markForCheck();
+            });
+        }
     }
     get showAddSliceButton() {
-        return this.showViewButton && ((this.resolvedConfig.slices?.length ?? 0) > 0 || this._allDynamicSliceColumns.length > 0);
+        return this._view.showSliceBySection;
     }
     get staticSlicesForMenu() {
-        return this._staticSlicesForMenu;
+        return this._view.staticSlicesForMenu;
     }
     get availableColumnsForDynamicSlice() {
-        return this._availableColumnsForDynamicSlice;
+        return this._view.sliceBy.availableForDynamic;
     }
     isStaticSliceVisible(columnKey) {
-        return this.slicePanelRef?.isStaticSliceVisible(columnKey) ?? true;
+        return !this._staticSliceHiddenKeys.has(columnKey);
     }
     toggleStaticSlice(columnKey) {
-        this.slicePanelRef?.toggleStaticSlice(columnKey);
+        const next = new Set(this._staticSliceHiddenKeys);
+        if (next.has(columnKey))
+            next.delete(columnKey);
+        else
+            next.add(columnKey);
+        this._staticSliceHiddenKeys = next;
+        this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+        this._sliceConfigs = this._computeSliceConfigs();
+        // Si une slice vient d'être cachée, réinitialise le filtre actif pour éviter
+        // un filtre orphelin (la slice n'est plus visible mais son filtre resterait actif)
+        if (next.has(columnKey)) {
+            this.activeSliceFilter = () => true;
+        }
+        this._recomputeShowSlicePanel();
+        this._scheduleRender();
+        this._cdr.markForCheck();
     }
     addDynamicSlice(column) {
         this.slicePanelRef?.addDynamicSlice(column);
@@ -921,7 +1648,7 @@ class TableComponent {
         return this._allDynamicSliceColumns;
     }
     isDynamicSliceActive(key) {
-        return this._activeDynamicSliceColumns.some(c => c.key === key);
+        return this._view.isDynamicSliceActive(key);
     }
     toggleDynamicSlice(col) {
         if (this.isDynamicSliceActive(col.key)) {
@@ -938,34 +1665,22 @@ class TableComponent {
         this.paginator?.firstPage();
     }
     onDynamicSliceKeysChange(keys) {
-        const allCols = this.resolvedConfig.columns ?? [];
-        const staticKeys = new Set((this.resolvedConfig.slices ?? []).map(s => s.columnKey).filter((k) => !!k));
-        const dynamicKeySet = new Set(keys);
-        const existingKeys = new Set([...staticKeys, ...dynamicKeySet]);
-        this._activeDynamicSliceColumns = keys
-            .map(k => allCols.find(c => c.key === k))
-            .filter((c) => !!c);
-        const seen = new Set();
-        this._availableColumnsForDynamicSlice = allCols.filter(c => {
-            if (c.sliceable === false || existingKeys.has(c.key) || seen.has(c.key))
-                return false;
-            seen.add(c.key);
-            return true;
-        });
-        this._computeSliceLabel();
+        this._view.onDynamicSliceKeysChange(keys);
+        this._recomputeShowSlicePanel();
         this._cdr.markForCheck();
     }
     get emptyStateLabel() {
-        return this.resolvedConfig.labels?.empty || 'Aucune donnée';
+        return this.resolvedConfig.labels?.empty || this.i18n.emptyState;
     }
     get loadingStateLabel() {
-        return this.resolvedConfig.labels?.loading || 'Chargement des données...';
+        return this.resolvedConfig.labels?.loading || this.i18n.loadingState;
     }
     get effectiveIsLoading() {
-        return this.isLoading || this._pendingRender !== null;
+        return this.isLoading;
     }
     get isEmpty() {
-        return !this.effectiveIsLoading && this._allFilteredRows.length === 0;
+        // _pendingRender : le rendu interne n'est pas encore terminé → pas de message vide prématuré
+        return !this.isLoading && this._pendingRender === null && this._allFilteredRows.length === 0;
     }
     get showPagination() {
         if (this.activeGroupByKey !== null)
@@ -973,35 +1688,16 @@ class TableComponent {
         return this.resolvedConfig.pagination?.enabled !== false;
     }
     get isColumnDragDropEnabled() {
-        return this.resolvedConfig.view?.enableColumnDragDrop === true;
+        return this._view.isColumnDragDropEnabled;
     }
     get totalRows() {
         return this.activeGroupByKey
-            ? this.tableDataSource.data.filter((r) => !r.__groupHeader).length
+            ? this.tableDataSource.data.filter((r) => !r[GROUP_HEADER_MARKER]).length
             : this._allFilteredRows.length;
     }
-    // ── Gestion des colonnes ─────────────────────────────────────────────────
+    // ── Gestion des colonnes
     onAddColumn(column) {
-        this.userCustomizedColumns = true;
-        const configCols = this.resolvedConfig.columns ?? [];
-        const configIndex = configCols.findIndex(c => c.key === column.key);
-        if (configIndex === -1) {
-            this.activeColumns = [...this.activeColumns, column];
-        }
-        else {
-            const insertBefore = this.activeColumns.findIndex(c => {
-                const ci = configCols.findIndex(cc => cc.key === c.key);
-                return ci !== -1 && ci > configIndex;
-            });
-            if (insertBefore === -1) {
-                this.activeColumns = [...this.activeColumns, column];
-            }
-            else {
-                const copy = [...this.activeColumns];
-                copy.splice(insertBefore, 0, column);
-                this.activeColumns = copy;
-            }
-        }
+        this._view.addColumn(column);
         this._preservePageIndex = this.paginator?.pageIndex ?? null;
         this.refreshViewModel();
         if (column.lazy) {
@@ -1011,70 +1707,87 @@ class TableComponent {
         this.columnAdded.emit(column);
     }
     onColumnVisibilityChange(column, checked) {
-        const isVisible = this.isColumnVisible(column.key);
+        const isVisible = this._view.isColumnVisible(column.key);
         if (checked && !isVisible) {
             this.onAddColumn(column);
             return;
         }
         if (!checked && isVisible) {
-            if (!column.optional && !this.allowColumnRemoval) {
-                return;
-            }
-            if (this.activeColumns.length <= 1) {
+            const removed = this._view.removeColumn(column.key);
+            if (!removed)
                 return;
-            }
-            this.userCustomizedColumns = true;
-            this.activeColumns = this.activeColumns.filter((item) => item.key !== column.key);
             this._preservePageIndex = this.paginator?.pageIndex ?? null;
             this.refreshViewModel();
             this.columnRemoved.emit(column);
         }
     }
     isColumnVisible(columnKey) {
-        return this.activeColumns.some((column) => column.key === columnKey);
+        return this.activeColumns.some(c => c.key === columnKey);
     }
     onRemoveColumn(columnKey, event) {
         event?.stopPropagation();
-        if (!this.allowColumnRemoval) {
+        const column = this.activeColumns.find(item => item.key === columnKey);
+        if (!column)
             return;
-        }
-        const column = this.activeColumns.find((item) => item.key === columnKey);
-        if (!column || !this.canRemoveColumn(column)) {
+        const removed = this._view.removeColumn(columnKey);
+        if (!removed)
             return;
-        }
-        this.userCustomizedColumns = true;
-        this.activeColumns = this.activeColumns.filter((item) => item.key !== columnKey);
         this.refreshViewModel();
         this.columnRemoved.emit(column);
     }
-    // ── Lignes ────────────────────────────────────────────────────────────────
+    // ── Lignes
+    _rebuildCellDefMap() {
+        this._cellDefMap = new Map((this._cellDefs ?? []).map(d => [d.columnKey, d.template]));
+    }
     getCellTemplate(key) {
-        return this._cellDefs?.find((d) => d.columnKey === key)?.template ?? null;
+        return this._cellDefMap.get(key) ?? null;
     }
     get hasCustomCellDefs() {
-        return (this._cellDefs?.length ?? 0) > 0;
+        return this._cellDefMap.size > 0;
     }
     get hasRowClickHandler() {
-        return this.rowSelected.observed || !!this.config?.onRowSelected;
+        return this.rowSelected.observed || !!this.resolvedConfig.onRowSelected;
+    }
+    /** Largeur minimale du tableau en px, calculée depuis les largeurs explicites des colonnes actives.
+     * Retourne null si aucune colonne n'a de largeur définie (le tableau remplit alors 100% du conteneur).
+     * Seules les valeurs explicitement en `px` sont sommables ; les pourcentages ou autres unités sont ignorés. */
+    get tableMinWidth() {
+        const hasSomeExplicitWidth = this.activeColumns.some(c => c.width);
+        if (!hasSomeExplicitWidth)
+            return null;
+        let sum = 0;
+        for (const col of this.activeColumns) {
+            if (col.width) {
+                const isPx = col.width.trim().toLowerCase().endsWith('px');
+                const px = Number.parseFloat(col.width);
+                if (isPx && !Number.isNaN(px)) {
+                    sum += px;
+                }
+            }
+            else {
+                sum += 120; // largeur minimale estimée pour une colonne sans largeur explicite
+            }
+        }
+        return sum + 'px';
     }
     getRowClass(row) {
         const fn = this.resolvedConfig.rowClass;
-        if (!fn || row?.__groupHeader)
+        if (!fn || row?.[GROUP_HEADER_MARKER])
             return {};
-        return fn(row.__raw ?? row, row.__index ?? 0);
+        return fn(row[ROW_RAW_KEY] ?? row, row[ROW_INDEX_KEY] ?? 0);
     }
     onRowClick(row, event) {
-        if (row?.__groupHeader)
+        if (row?.[GROUP_HEADER_MARKER])
             return;
         if (!this.hasRowClickHandler)
             return;
-        const resolved = (row?.__raw ?? row);
+        const resolved = (row?.[ROW_RAW_KEY] ?? row);
+        this.resolvedConfig.onRowSelected?.(resolved, event);
         this.rowSelected.emit(resolved);
-        this.config?.onRowSelected?.(resolved, event);
     }
-    // ── Drag & drop ───────────────────────────────────────────────────────────
+    // ── Drag & drop
     onHeaderDragStart(columnKey, event) {
-        if (!this.isColumnDragDropEnabled) {
+        if (!this.isColumnDragDropEnabled && !this._editMode) {
             return;
         }
         this.draggedColumnKey = columnKey;
@@ -1085,28 +1798,22 @@ class TableComponent {
         }
     }
     onHeaderDragOver(columnKey, event) {
-        if (!this.isColumnDragDropEnabled || !this.draggedColumnKey) {
+        if ((!this.isColumnDragDropEnabled && !this._editMode) || !this.draggedColumnKey) {
             return;
         }
         event.preventDefault();
         this.dragOverColumnKey = columnKey;
     }
     onHeaderDrop(targetColumnKey, event) {
-        if (!this.isColumnDragDropEnabled || !this.draggedColumnKey) {
+        if ((!this.isColumnDragDropEnabled && !this._editMode) || !this.draggedColumnKey) {
             return;
         }
         event.preventDefault();
-        const previousIndex = this.activeColumns.findIndex((column) => column.key === this.draggedColumnKey);
-        const currentIndex = this.activeColumns.findIndex((column) => column.key === targetColumnKey);
-        if (previousIndex === -1 || currentIndex === -1 || previousIndex === currentIndex) {
+        const moved = this._view.reorderColumns(this.draggedColumnKey, targetColumnKey);
+        if (!moved) {
             this.onHeaderDragEnd();
             return;
         }
-        this.userCustomizedColumns = true;
-        const reordered = [...this.activeColumns];
-        const [moved] = reordered.splice(previousIndex, 1);
-        reordered.splice(currentIndex, 0, moved);
-        this.activeColumns = reordered;
         this.refreshViewModel();
         this.onHeaderDragEnd();
     }
@@ -1117,8 +1824,177 @@ class TableComponent {
     isHeaderDropTarget(columnKey) {
         return !!this.draggedColumnKey && this.dragOverColumnKey === columnKey && this.draggedColumnKey !== columnKey;
     }
+    // ── Préférences : mode édition
+    enterEditMode() {
+        this._editMode = true;
+        this._preferencesMessage = null;
+        this._cdr.markForCheck();
+    }
+    confirmEditMode() {
+        this._editMode = false;
+        this._cdr.markForCheck();
+    }
+    /** Démarre le resize d'une colonne (mousedown sur la poignée droite). */
+    onResizeStart(columnKey, event) {
+        if (!this._editMode)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const th = event.target.closest('th');
+        if (!th)
+            return;
+        this._resizeState = { key: columnKey, startX: event.clientX, startWidth: th.offsetWidth };
+        const onMove = (e) => {
+            if (!this._resizeState) {
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', onUp);
+                return;
+            }
+            const delta = e.clientX - this._resizeState.startX;
+            const newWidth = Math.max(60, this._resizeState.startWidth + delta);
+            this._columnWidths = { ...this._columnWidths, [this._resizeState.key]: newWidth };
+            // detectChanges() pour forcer la mise à jour immédiate en mode OnPush
+            // (les listeners window tournent hors zone Angular avec runOutsideAngular)
+            this._cdr.detectChanges();
+        };
+        const onUp = () => {
+            this._resizeState = null;
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+        // Listeners hors zone Angular pour éviter des cycles CD à chaque mousemove
+        this._ngZone.runOutsideAngular(() => {
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+        });
+    }
+    /** Retourne la largeur CSS d'une colonne (px si personnalisée, sinon la valeur de config ou auto). */
+    getColumnWidth(key) {
+        if (this._columnWidths[key] != null)
+            return this._columnWidths[key] + 'px';
+        const col = this._columnMap.get(key);
+        return col?.width ?? 'auto';
+    }
+    // ── Préférences : save / clear
+    savePreferences() {
+        if (!this._preferencesManager)
+            return;
+        const dynamicSliceKeys = this._view.sliceBy.activeDynamicColumns.map(c => c.key);
+        const config = {
+            search: this.searchQuery || undefined,
+            groupBy: this.activeGroupByKey,
+            columnOrder: this.activeColumns.map(c => c.key),
+            visibleColumns: this.activeColumns.map(c => c.key),
+            columnWidths: Object.keys(this._columnWidths).length ? { ...this._columnWidths } : undefined,
+            slicePanelCollapsed: this._slicePanelCollapsed,
+            hiddenSliceKeys: [...this._staticSliceHiddenKeys],
+            dynamicSliceKeys: dynamicSliceKeys.length ? dynamicSliceKeys : undefined,
+            sliceFilters: this.slicePanelRef ? this.slicePanelRef.getActiveFilters() : undefined,
+        };
+        this._preferencesManager.save(config);
+        this._hasSavedConfig = true;
+        this._showPreferencesMessage(this.i18n.preferencesSavedMessage);
+    }
+    clearPreferences() {
+        if (!this._preferencesManager)
+            return;
+        this._preferencesManager.clear();
+        this._hasSavedConfig = false;
+        // Capturer les dynamic slices actives AVANT le reset (resetToDefaults() les vide)
+        const dynamicSlicesToRemove = this._view.sliceBy.activeDynamicColumns.slice();
+        // Reset complet de l'état vers les valeurs par défaut de la config
+        this.searchQuery = '';
+        this._columnWidths = {};
+        this._slicePanelCollapsed = false;
+        this._groupBy.reset();
+        this._groupBy.setDefaultCollapsed(false);
+        // Slices statiques : revenir aux seules celles cachées par la config (pas par l'utilisateur)
+        this._staticSliceHiddenKeys = new Set(this._configHiddenKeys);
+        this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+        // Colonnes et groupBy : reset via la facade (retire les optionnelles, remet l'ordre config)
+        this._view.resetToDefaults();
+        // Dynamic slices : les retirer du slice panel avec la liste capturée avant le reset
+        dynamicSlicesToRemove.forEach(col => {
+            this.slicePanelRef?.removeDynamicSliceByKey(col.key);
+        });
+        // Filtre de slice actif
+        this.activeSliceFilter = () => true;
+        if (this.slicePanelRef)
+            this.slicePanelRef.restoreFilters({});
+        // Rafraîchit toute la vue
+        this.activeColumns = this._view.fields.activeColumns;
+        this.renderedColumns = this.activeColumns.map(c => c.key);
+        this._pendingDynamicSliceKeys = null;
+        this._pendingSliceFilters = null;
+        this.refreshViewModel();
+        this._showPreferencesMessage(this.i18n.preferencesClearedMessage);
+    }
+    _showPreferencesMessage(msg) {
+        if (this._preferencesMessageTimer !== null)
+            clearTimeout(this._preferencesMessageTimer);
+        this._preferencesMessage = msg;
+        this._cdr.markForCheck();
+        this._preferencesMessageTimer = setTimeout(() => {
+            this._preferencesMessageTimer = null;
+            this._preferencesMessage = null;
+            this._cdr.markForCheck();
+        }, 4000);
+    }
+    _applyPreferences(saved) {
+        if (!saved)
+            return;
+        // Recherche
+        if (saved.search)
+            this.searchQuery = saved.search;
+        // Largeurs colonnes
+        if (saved.columnWidths)
+            this._columnWidths = { ...saved.columnWidths };
+        // Group by
+        if (saved.groupBy !== undefined) {
+            this._view.setGroupBy(saved.groupBy);
+            if (saved.groupBy) {
+                this._groupBy.setDefaultCollapsed(true);
+                this._groupBy.reset();
+            }
+        }
+        // État panneau slice
+        if (saved.slicePanelCollapsed !== undefined)
+            this._slicePanelCollapsed = saved.slicePanelCollapsed;
+        // Slices statiques cachées — on utilise la valeur exacte sauvegardée (pas les defaults de config)
+        if (saved.hiddenSliceKeys !== undefined) {
+            this._staticSliceHiddenKeys = new Set(saved.hiddenSliceKeys);
+            this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+        }
+        // Colonnes visibles + ordre — reconstruit activeColumns en une seule passe.
+        // On part de saved.columnOrder (ordre sauvegardé) si disponible, sinon saved.visibleColumns.
+        // Cela gère à la fois : colonnes optionnelles ajoutées, colonnes retirées, et réordonnancement.
+        const targetKeys = saved.columnOrder ?? saved.visibleColumns;
+        if (targetKeys?.length) {
+            const allByKey = new Map((this.resolvedConfig.columns ?? []).map(c => [c.key, c]));
+            // Colonnes dans l'ordre sauvegardé (on ne garde que celles connues de la config)
+            const ordered = targetKeys
+                .map(key => allByKey.get(key))
+                .filter((c) => c !== undefined);
+            // Colonnes actives actuelllement non présentes dans targetKeys (non-optional passées sous silence)
+            // → on les exclut : l'utilisateur avait explicitement choisi ce sous-ensemble
+            if (ordered.length > 0) {
+                this._view.setActiveColumns(ordered);
+            }
+        }
+        // Dynamic slices — différé : slicePanelRef pas encore disponible au moment de ngOnChanges
+        if (saved.dynamicSliceKeys?.length) {
+            this._pendingDynamicSliceKeys = saved.dynamicSliceKeys;
+        }
+        // Filtres actifs du slice panel
+        // Filtres actifs du slice panel — toujours stockés en pending :
+        // appliqués par _applyPendingDynamicSliceKeys (si dynamic slices) ou
+        // par _recomputeShowSlicePanel (quand les données arrivent et rendent le panel visible)
+        if (saved.sliceFilters && Object.keys(saved.sliceFilters).length) {
+            this._pendingSliceFilters = saved.sliceFilters;
+        }
+    }
     canRemoveColumn(column) {
-        return (this.allowColumnRemoval &&
+        return (this._view.allowColumnRemoval &&
             column.removable !== false &&
             this.activeColumns.length > 1);
     }
@@ -1131,20 +2007,40 @@ class TableComponent {
         }
         return String(value);
     }
-    // ── Pipeline de données (privé) ──────────────────────────────────────────
+    // ── Export CSV
+    onExport() {
+        this._export.export();
+    }
+    // ── Pipeline de données (privé)
     refreshViewModel() {
         this._resolvedData = this.resolveData();
         this.resolvedConfig = this.buildEffectiveConfig();
         this._columnMap = new Map((this.resolvedConfig.columns || []).map(c => [c.key, c]));
-        const defaultColumns = (this.resolvedConfig.columns || []).filter(c => !c.optional);
-        if (!this.userCustomizedColumns || this.activeColumns.length === 0) {
-            this.activeColumns = [...defaultColumns];
-        }
-        else {
-            const allowedKeys = new Set((this.resolvedConfig.columns || []).map((column) => column.key));
-            this.activeColumns = this.activeColumns.filter((column) => allowedKeys.has(column.key));
-        }
-        this.renderedColumns = this.activeColumns.map((column) => column.key);
+        // ── Initialiser le gestionnaire de préférences si l'option est activée
+        const prefsId = this.resolvedConfig.preferences?.enabled
+            ? this.resolvedConfig.preferences.tableId
+            : null;
+        const currentId = prefsId ?? null;
+        // Préférences à appliquer après _view.update() (quand activeColumns est déjà peuplé)
+        let pendingPrefs = null;
+        if (currentId && this._preferencesManager?.key !== ('jqt_prefs_' + currentId)) {
+            this._preferencesManager = new TablePreferencesManager(currentId);
+            this._hasSavedConfig = this._preferencesManager.hasSaved();
+            pendingPrefs = this._preferencesManager.load();
+        }
+        else if (!currentId) {
+            this._preferencesManager = null;
+            this._hasSavedConfig = false;
+        }
+        // Délègue à la facade : mise à jour de l'état View (colonnes, groupBy meta, sliceBy meta)
+        this._view.update({
+            config: this.resolvedConfig.view,
+            columns: this.resolvedConfig.columns ?? [],
+            sliceConfigs: this.resolvedConfig.slices ?? [],
+        });
+        // Synchronise la propriété stable (évite NG0100 — la facade est source de vérité)
+        this.activeColumns = this._view.fields.activeColumns;
+        this.renderedColumns = this.activeColumns.map(c => c.key);
         this.pageSize = this.paginator?.pageSize || this.resolvePageSize();
         this.pageSizeOptions = this.resolvePageSizeOptions();
         this.pageSizeOptionsGroupBy = this.resolvePageSizeOptionsGroupBy();
@@ -1153,72 +2049,100 @@ class TableComponent {
         }
         this.attachPaginator();
         this.attachSort();
-        // Mise à jour des propriétés stables pour les bindings du template
-        this._sliceConfigs = this.resolvedConfig.slices ?? [];
+        // Réinitialise _staticSliceHiddenKeys seulement si les clés hidden de la config ont vraiment changé
+        // ET qu'il n'y a pas de préférences sauvegardées (qui géreront hiddenSliceKeys elles-mêmes).
+        const newConfigHidden = new Set((this.resolvedConfig.slices ?? []).filter(s => s.hidden && s.columnKey).map(s => s.columnKey));
+        if (!TableComponent._setsEqual(newConfigHidden, this._configHiddenKeys)) {
+            this._configHiddenKeys = newConfigHidden;
+            // N'écraser _staticSliceHiddenKeys que si on n'est PAS en train d'appliquer des prefs
+            // (pendingPrefs les gèrera lui-même via _applyPreferences → hiddenSliceKeys)
+            if (!pendingPrefs) {
+                this._staticSliceHiddenKeys = new Set(newConfigHidden);
+                this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+            }
+        }
+        // Applique les préférences ICI, APRÈS _view.update() ET après _configHiddenKeys mis à jour,
+        // mais avant _computeSliceConfigs() pour que hiddenSliceKeys soit déjà restauré.
+        if (pendingPrefs) {
+            this._applyPreferences(pendingPrefs);
+        }
+        // Propriétés stables pour les bindings du template
+        // On recalcule _sliceConfigs en reflétant l'état courant des slices cachées,
+        // pour que SlicePanelComponent.ngOnInit reçoive la bonne valeur de `hidden`
+        // même quand le composant est créé pour la 1ère fois après un toggle.
+        this._sliceConfigs = this._computeSliceConfigs();
         this._sliceColumns = this.resolvedConfig.columns ?? [];
         this._sliceData = this._resolvedData;
         this._sliceShowToggle = this.resolvedConfig.enableSliceToggle !== false;
-        this._staticSlicesForMenu = (this.resolvedConfig.slices ?? [])
-            .filter(s => !!s.columnKey)
-            .map(s => {
-            const colIcon = (this.resolvedConfig.columns ?? []).find(c => c.key === s.columnKey)?.icon;
-            return { key: s.columnKey, title: s.title || humanizeKey(s.columnKey), icon: s.icon ?? colIcon };
-        });
+        this._recomputeShowSlicePanel();
         if (!this._activeSort.active && this.resolvedConfig.defaultSort) {
             this._matSortActive = this.resolvedConfig.defaultSort.active;
             this._matSortDirection = this.resolvedConfig.defaultSort.direction;
         }
-        const staticKeys = new Set((this.resolvedConfig.slices ?? []).map(s => s.columnKey).filter((k) => !!k));
-        const activeDynKeys = new Set(this._activeDynamicSliceColumns.map(c => c.key));
-        const seen = new Set();
-        this._availableColumnsForDynamicSlice = (this.resolvedConfig.columns ?? []).filter(c => {
-            if (c.sliceable === false || staticKeys.has(c.key) || activeDynKeys.has(c.key) || seen.has(c.key))
-                return false;
-            if (!c.header && c.sliceable !== true)
-                return false;
-            seen.add(c.key);
-            return true;
-        });
-        const seen2 = new Set();
-        this._allDynamicSliceColumns = (this.resolvedConfig.columns ?? []).filter(c => {
-            if (c.sliceable === false || staticKeys.has(c.key) || seen2.has(c.key))
-                return false;
-            if (!c.header && c.sliceable !== true)
-                return false;
-            seen2.add(c.key);
-            return true;
-        });
-        this._computeSliceLabel();
+        this._buildSliceByMenuItems();
         this._scheduleRender();
     }
-    _computeSliceLabel() {
-        const visibleStaticCount = this.slicePanelRef?.staticSliceCount
-            ?? this._sliceConfigs.length;
-        const total = visibleStaticCount + this._activeDynamicSliceColumns.length;
-        if (total === 0) {
-            this._activeSliceByLabel = 'Aucun';
-            return;
+    /** Retourne uniquement les slices visibles (non cachées par _staticSliceHiddenKeys).
+     * Le SlicePanelComponent affiche tout ce qu'il reçoit — c'est ici que se fait le filtrage. */
+    _computeSliceConfigs() {
+        return (this.resolvedConfig.slices ?? []).filter(s => !s.columnKey || !this._staticSliceHiddenKeys.has(s.columnKey));
+    }
+    static _setsEqual(a, b) {
+        if (a.size !== b.size)
+            return false;
+        for (const v of a)
+            if (!b.has(v))
+                return false;
+        return true;
+    }
+    _buildSliceByMenuItems() {
+        const staticSliceMap = new Map(this._staticSlicesForMenu.map(s => [s.key, s]));
+        const dynamicSliceSet = new Set(this._allDynamicSliceColumns.map(c => c.key));
+        const seen = new Set();
+        const items = [];
+        for (const col of this.resolvedConfig.columns ?? []) {
+            if (seen.has(col.key))
+                continue;
+            if (staticSliceMap.has(col.key)) {
+                const s = staticSliceMap.get(col.key);
+                items.push({ isStatic: true, key: s.key, title: s.title, icon: s.icon });
+                seen.add(col.key);
+            }
+            else if (dynamicSliceSet.has(col.key)) {
+                items.push({ isStatic: false, key: col.key, title: this.colLabel(col), icon: col.icon, col });
+                seen.add(col.key);
+            }
         }
-        if (total === 1) {
-            if (visibleStaticCount === 1) {
-                const first = this._sliceConfigs.find(s => !s.columnKey || this.isStaticSliceVisible(s.columnKey));
-                this._activeSliceByLabel = first?.title || first?.columnKey || '1';
-                return;
+        for (const s of this._staticSlicesForMenu) {
+            if (!seen.has(s.key)) {
+                items.push({ isStatic: true, key: s.key, title: s.title, icon: s.icon });
             }
-            this._activeSliceByLabel = this._activeDynamicSliceColumns[0]?.header || '1';
-            return;
         }
-        this._activeSliceByLabel = `${total} actifs`;
+        this._sliceByMenuItems = items;
+    }
+    get sliceByMenuItems() { return this._sliceByMenuItems; }
+    onSliceMenuItemClick(item) {
+        if (item.isStatic) {
+            this.toggleStaticSlice(item.key);
+        }
+        else if (item.col) {
+            this.toggleDynamicSlice(item.col);
+        }
+    }
+    isSliceMenuItemActive(item) {
+        return item.isStatic ? this.isStaticSliceVisible(item.key) : this.isDynamicSliceActive(item.key);
     }
     _scheduleRender() {
         if (this._pendingRender !== null) {
             clearTimeout(this._pendingRender);
             this._pendingRender = null;
         }
-        this._pendingRender = setTimeout(() => {
-            this._pendingRender = null;
-            this._executeRender();
-        }, 0);
+        this._ngZone.runOutsideAngular(() => {
+            this._pendingRender = setTimeout(() => {
+                this._pendingRender = null;
+                this._ngZone.run(() => this._executeRender());
+            }, 0);
+        });
     }
     _executeRender() {
         const categoryRows = this.getCategoryFilteredData();
@@ -1239,7 +2163,9 @@ class TableComponent {
             this._preservePageIndex = null;
         }
         this._projectCurrentPage();
-        this._cdr.markForCheck();
+        // detectChanges() au lieu de markForCheck() : met à jour uniquement CE composant
+        // sans déclencher un cycle CD global qui provoquerait NG0100 dans les parents.
+        this._cdr.detectChanges();
     }
     _projectCurrentPage() {
         if (this.activeGroupByKey) {
@@ -1252,7 +2178,7 @@ class TableComponent {
         const projected = [];
         pageRows.forEach((row, i) => {
             const idx = start + i;
-            const p = { __raw: row, __index: idx };
+            const p = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: idx };
             this.activeColumns.forEach((col) => {
                 p[col.key] = this.resolveCellValue(col, row, idx);
             });
@@ -1266,9 +2192,12 @@ class TableComponent {
         const columns = config.columns ||
             this.columnsConfig ||
             this.resolveColumnsFromCompat(rows);
+        // Mode HTML : [view] prend le dessus sur config.view si fourni (Phase 3).
+        const view = this.view ?? config.view;
         return {
             ...config,
             columns,
+            view,
             slices: config.slices || [],
             enableSliceToggle: config.enableSliceToggle ?? true,
         };
@@ -1306,8 +2235,12 @@ class TableComponent {
         let filtered = data.filter(this.activeSliceFilter);
         const query = this.searchQuery?.trim().toLowerCase();
         if (query) {
-            filtered = filtered.filter((row) => this.activeColumns.some((col) => {
-                const val = this.getLazyAwareValue(col.key, row);
+            const restrictedKeys = this.resolvedConfig.search?.searchColumns;
+            const searchCols = restrictedKeys?.length
+                ? [...this._columnMap.values()].filter(col => restrictedKeys.includes(col.key))
+                : [...this._columnMap.values()];
+            filtered = filtered.filter((row) => searchCols.some((col) => {
+                const val = this.getDisplayValueForSearch(col, row);
                 return val != null && String(val).toLowerCase().includes(query);
             }));
         }
@@ -1318,7 +2251,7 @@ class TableComponent {
         if (!groupKey) {
             const result = [];
             rows.forEach((row, index) => {
-                const projected = { __raw: row, __index: index };
+                const projected = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: index };
                 this.activeColumns.forEach((col) => {
                     projected[col.key] = this.resolveCellValue(col, row, index);
                 });
@@ -1330,22 +2263,23 @@ class TableComponent {
         const groupLazyStatus = groupColDef?.lazy ? (this._lazyColumnStatus.get(groupKey) ?? 'idle') : 'loaded';
         if (groupLazyStatus !== 'loaded') {
             this._totalFilteredCount = rows.length;
-            return [{ __groupHeader: true, __groupKey: '__lazy_loading__', __groupCount: rows.length, __groupPage: 0, __groupPageCount: 1 }];
+            return [{ [GROUP_HEADER_MARKER]: true, [ROW_GROUP_KEY]: GROUP_KEY_LAZY_LOADING, [ROW_GROUP_COUNT]: rows.length, [ROW_GROUP_PAGE]: 0, [ROW_GROUP_PAGE_COUNT]: 1 }];
         }
         const effectiveSort = this._activeSort.active && this._activeSort.direction
             ? this._activeSort
             : this.resolvedConfig.defaultSort ?? { active: '', direction: '' };
         // Vérifie si le cache est encore valide (même référence de rows + même paramètres de tri/groupe)
-        const cacheValid = this._groupCacheRows === rows &&
-            this._groupCacheKey === groupKey &&
-            this._groupCacheSortOrder === this.groupSortOrder &&
-            this._groupCacheSortActive === (effectiveSort.active ?? '') &&
-            this._groupCacheSortDir === (effectiveSort.direction ?? '');
+        const cacheValid = this._groupCache !== null &&
+            this._groupCache.rows === rows &&
+            this._groupCache.key === groupKey &&
+            this._groupCache.sortOrder === this._groupBy.groupSortOrder &&
+            this._groupCache.sortActive === (effectiveSort.active ?? '') &&
+            this._groupCache.sortDir === (effectiveSort.direction ?? '');
         let groupOrder;
         let groupMap;
         if (cacheValid) {
-            groupOrder = this._groupCacheOrder;
-            groupMap = this._groupCacheMap;
+            groupOrder = this._groupCache.order;
+            groupMap = this._groupCache.map;
         }
         else {
             // Pré-calcul des valeurs de groupe en un seul passage (évite O(n) find() par comparaison)
@@ -1376,7 +2310,7 @@ class TableComponent {
                 const va = groupValueCache.get(a);
                 const vb = groupValueCache.get(b);
                 const cmp = va.localeCompare(vb);
-                return this.groupSortOrder === 'desc' ? -cmp : cmp;
+                return this._groupBy.groupSortOrder === 'desc' ? -cmp : cmp;
             });
             groupOrder = [];
             groupMap = new Map();
@@ -1396,34 +2330,36 @@ class TableComponent {
                 });
             }
             // Mise en cache
-            this._groupCacheRows = rows;
-            this._groupCacheKey = groupKey;
-            this._groupCacheSortOrder = this.groupSortOrder;
-            this._groupCacheSortActive = effectiveSort.active ?? '';
-            this._groupCacheSortDir = effectiveSort.direction ?? '';
-            this._groupCacheOrder = groupOrder;
-            this._groupCacheMap = groupMap;
+            this._groupCache = {
+                rows,
+                key: groupKey,
+                sortOrder: this._groupBy.groupSortOrder,
+                sortActive: effectiveSort.active ?? '',
+                sortDir: effectiveSort.direction ?? '',
+                order: groupOrder,
+                map: groupMap,
+            };
         }
         this._totalFilteredCount = rows.length;
         // Protection contre les jeux de données à trop haute cardinalité
         if (groupOrder.length > TableComponent.MAX_GROUP_COUNT) {
-            return [{ __groupHeader: true, __groupKey: '__too_many_groups__', __groupCount: groupOrder.length, __groupPage: 0, __groupPageCount: 1 }];
+            return [{ [GROUP_HEADER_MARKER]: true, [ROW_GROUP_KEY]: GROUP_KEY_TOO_MANY, [ROW_GROUP_COUNT]: groupOrder.length, [ROW_GROUP_PAGE]: 0, [ROW_GROUP_PAGE_COUNT]: 1 }];
         }
         const pageSize = this.groupPageSize;
         const result = [];
         groupOrder.forEach((groupValue) => {
             const groupRows = groupMap.get(groupValue);
             const totalCount = groupRows.length;
-            const currentPage = pageSize === 0 ? 0 : (this._groupPages.get(groupValue) ?? 0);
+            const currentPage = pageSize === 0 ? 0 : this._groupBy.getPage(groupValue);
             const pageCount = pageSize === 0 ? 1 : Math.max(1, Math.ceil(totalCount / pageSize));
             const collapsed = this.isGroupCollapsed(groupValue);
-            result.push({ __groupHeader: true, __groupKey: groupValue, __groupCount: totalCount, __groupPage: currentPage, __groupPageCount: pageCount });
+            result.push({ [GROUP_HEADER_MARKER]: true, [ROW_GROUP_KEY]: groupValue, [ROW_GROUP_COUNT]: totalCount, [ROW_GROUP_PAGE]: currentPage, [ROW_GROUP_PAGE_COUNT]: pageCount });
             if (!collapsed) {
                 const start = pageSize === 0 ? 0 : currentPage * pageSize;
                 const end = pageSize === 0 ? totalCount : Math.min(start + pageSize, totalCount);
                 groupRows.slice(start, end).forEach((row, i) => {
                     const idx = start + i;
-                    const projected = { __raw: row, __index: idx };
+                    const projected = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: idx };
                     this.activeColumns.forEach((col) => {
                         projected[col.key] = this.resolveCellValue(col, row, idx);
                     });
@@ -1455,6 +2391,25 @@ class TableComponent {
             return direction === 'asc' ? cmp : -cmp;
         };
     }
+    /**
+     * Retourne la valeur telle qu'elle est affichée dans la cellule, en suivant exactement
+     * le même chemin que resolveCellValue — utilisée pour la recherche plein-texte.
+     * Ne passe pas par sortValue (valeur brute de tri) contrairement à getLazyAwareValue.
+     */
+    getDisplayValueForSearch(col, row) {
+        if (col.lazy) {
+            const status = this._lazyColumnStatus.get(col.key) ?? 'idle';
+            if (status !== 'loaded')
+                return null;
+            const rowMap = this._lazyColumnData.get(col.key);
+            return normalizeCellValue(rowMap?.get(row) ?? '');
+        }
+        if (col.searchValue) {
+            return col.searchValue(row, 0);
+        }
+        const rawValue = col.value ? col.value(row, 0) : row?.[col.key];
+        return normalizeCellValue(rawValue);
+    }
     getLazyAwareValue(columnKey, row) {
         const colDef = this._columnMap.get(columnKey);
         if (colDef?.lazy) {
@@ -1472,9 +2427,9 @@ class TableComponent {
         if (col.lazy) {
             const status = this._lazyColumnStatus.get(col.key) ?? 'idle';
             if (status === 'loading')
-                return '__lazy_loading__';
+                return LAZY_LOADING_VALUE;
             if (status === 'error')
-                return '__lazy_error__';
+                return LAZY_ERROR_VALUE;
             if (status === 'loaded') {
                 const rowMap = this._lazyColumnData.get(col.key);
                 return normalizeCellValue(rowMap?.get(row) ?? '');
@@ -1534,6 +2489,7 @@ class TableComponent {
             this._paginatorSubscribed = this.paginator;
             this.paginator.page.pipe(takeUntil(this._destroy$)).subscribe(() => {
                 this.pageSize = this.paginator.pageSize;
+                this.pageChange.emit({ pageIndex: this.paginator.pageIndex, pageSize: this.paginator.pageSize });
                 if (this._pendingRender !== null)
                     return;
                 this._projectCurrentPage();
@@ -1552,16 +2508,17 @@ class TableComponent {
                     active: this.sort.active,
                     direction: this.sort.direction,
                 };
+                this.sortChange.emit({ active: this.sort.active, direction: this.sort.direction });
                 this._scheduleRender();
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "jquery-table", inputs: { config: "config", dataSource: "dataSource", data: "data", displayedColumns: "displayedColumns", columnsConfig: "columnsConfig", columnLabels: "columnLabels", isLoading: "isLoading" }, outputs: { addRequested: "addRequested", columnAdded: "columnAdded", columnRemoved: "columnRemoved", categorySelected: "categorySelected", rowSelected: "rowSelected" }, providers: [{ provide: MatPaginatorIntl, useFactory: getFrenchPaginatorIntl }], queries: [{ propertyName: "_cellDefs", predicate: JqtCellDefDirective }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableBodyScrollRef", first: true, predicate: ["tableBodyScroll"], descendants: true }, { propertyName: "slicePanelRef", first: true, predicate: SlicePanelComponent, descendants: true }, { propertyName: "viewMenuTrigger", first: true, predicate: ["viewMenuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"jquery-table-wrapper\">\n  <header class=\"table-header\" *ngIf=\"showTitle\">\n    <h3>{{ title }}</h3>\n  </header>\n\n  <div\n    class=\"table-layout\"\n    [class.slice-collapsed]=\"showSlicePanel && (slicePanelRef?.isCollapsed ?? false)\"\n    [class.no-slice]=\"!showSlicePanel\"\n  >\n    <slice-panel\n      [style.display]=\"showSlicePanel ? null : 'none'\"\n      [sliceConfigs]=\"_sliceConfigs\"\n      [columns]=\"_sliceColumns\"\n      [data]=\"_sliceData\"\n      [lazyData]=\"_lazyColumnData\"\n      [lazyStatus]=\"_lazyColumnStatus\"\n      [showToggle]=\"_sliceShowToggle\"\n      (filterChange)=\"onSliceFilterChange($event)\"\n      (dynamicSliceKeysChange)=\"onDynamicSliceKeysChange($event)\"\n    ></slice-panel>\n\n    <div class=\"table-shell\">\n      <div class=\"table-toolbar\" *ngIf=\"showToolbar\">\n        <div class=\"table-toolbar-left\">\n          <div *ngIf=\"showSearchBar\" class=\"search-input-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <path d=\"M13 13L17 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"search-input\"\n              type=\"text\"\n              [(ngModel)]=\"searchQuery\"\n              (ngModelChange)=\"onSearchChange()\"\n              placeholder=\"Rechercher...\"\n              autocomplete=\"off\"\n            />\n            <button *ngIf=\"searchQuery\" type=\"button\" class=\"search-clear-btn\" (click)=\"searchQuery = ''; onSearchChange()\">\u00D7</button>\n            <span class=\"search-count\">{{ filteredRowCount }}</span>\n          </div>\n        </div>\n        <div *ngIf=\"showViewButton\" class=\"table-toolbar-right\">\n          <button type=\"button\" class=\"view-btn\" [matMenuTriggerFor]=\"viewMenu\" #viewMenuTrigger=\"matMenuTrigger\">\n            <mat-icon class=\"view-btn-icon\">settings</mat-icon>\n            View\n          </button>\n\n          <mat-menu #viewMenu=\"matMenu\" [panelClass]=\"'view-menu-panel'\">\n            <button *ngIf=\"showFields\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Champs</span>\n              <span class=\"view-menu-sub-value\">{{ visibleColumns.length }}/{{ totalColumnCount }}</span>\n            </button>\n            <button *ngIf=\"showGroupBySection\" mat-menu-item [matMenuTriggerFor]=\"groupBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Group by</span>\n              <span class=\"view-menu-sub-value\">{{ activeGroupByLabel }}</span>\n            </button>\n            <button *ngIf=\"showAddSliceButton\" mat-menu-item [matMenuTriggerFor]=\"sliceBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Slice by</span>\n              <span class=\"view-menu-sub-value\">{{ activeSliceByLabel }}</span>\n            </button>\n          </mat-menu>\n\n          <mat-menu #fieldsSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuBaseColumns\"\n                [disabled]=\"!column.optional && !allowColumnRemoval\"\n                (click)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                {{ colLabel(column) }}\n              </button>\n              <ng-container *ngIf=\"menuOptionalColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuOptionalColumns\"\n                  [disabled]=\"(isColumnVisible(column.key) && visibleColumns.length === 1) || getLazyColumnStatus(column.key) === 'loading'\"\n                  (click)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                  <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                  {{ colLabel(column) }}\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'loading'\" class=\"lazy-menu-spinner\">\u21BB</span>\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'error'\" class=\"lazy-menu-error\" title=\"Erreur de chargement\">\u26A0</span>\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n\n          <mat-menu #groupBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of groupByColumns\"\n                [class.active]=\"activeGroupByKey === col.key\"\n                (click)=\"onGroupByChange(activeGroupByKey === col.key ? null : col.key)\">\n                <span class=\"view-menu-check\">{{ activeGroupByKey === col.key ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                {{ colLabel(col) }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #sliceBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let s of staticSlicesForMenu\"\n                (click)=\"toggleStaticSlice(s.key)\">\n                <span class=\"view-menu-check\">{{ isStaticSliceVisible(s.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"s.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ s.icon }}</mat-icon>\n                {{ s.title }}\n              </button>\n              <ng-container *ngIf=\"allDynamicSliceColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of allDynamicSliceColumns\"\n                  [class.active]=\"isDynamicSliceActive(col.key)\"\n                  (click)=\"toggleDynamicSlice(col)\">\n                  <span class=\"view-menu-check\">{{ isDynamicSliceActive(col.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                  {{ colLabel(col) }}\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n\n      <div class=\"table-body-wrapper\">\n      <div class=\"table-body-scroll\" #tableBodyScroll>\n      <table mat-table matSort [dataSource]=\"tableDataSource\" class=\"jquery-table\"\n             [trackBy]=\"trackRowFn\"\n             [matSortActive]=\"_matSortActive\" [matSortDirection]=\"_matSortDirection\">\n        <ng-container *ngFor=\"let column of visibleColumns\" [matColumnDef]=\"column.key\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [mat-sort-header]=\"column.sortable !== false ? column.key : ''\"\n            [disabled]=\"column.sortable === false\"\n            [style.width]=\"column.width || null\"\n            [style.min-width]=\"column.width || null\"\n            [class.drag-enabled]=\"isColumnDragDropEnabled\"\n            [class.drop-target]=\"isHeaderDropTarget(column.key)\"\n            (dragover)=\"onHeaderDragOver(column.key, $event)\"\n            (drop)=\"onHeaderDrop(column.key, $event)\"\n          >\n            <div class=\"head-cell\">\n              <mat-icon *ngIf=\"column.icon\" class=\"head-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n              <span class=\"head-text\" [title]=\"column.header\">{{ column.header }}</span>\n              <span\n                *ngIf=\"isColumnDragDropEnabled\"\n                class=\"drag-handle\"\n                draggable=\"true\"\n                (dragstart)=\"onHeaderDragStart(column.key, $event)\"\n                (dragend)=\"onHeaderDragEnd()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>drag_indicator</mat-icon>\n              </span>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n            [style.width]=\"column.width || null\"\n            [style.min-width]=\"column.width || null\">\n            <ng-container *ngIf=\"getCellTemplate(column.key) as customTpl; else defaultCellTpl\">\n              <ng-container *ngTemplateOutlet=\"customTpl; context: { $implicit: row.__raw, index: row.__index }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultCellTpl>\n              <ng-container [ngSwitch]=\"column.lazy ? getLazyRenderType(row[column.key]) : 'value'\">\n                <span *ngSwitchCase=\"'loading'\" class=\"lazy-skeleton\"></span>\n                <button *ngSwitchCase=\"'error'\" type=\"button\" class=\"lazy-error-btn\" (click)=\"retryLazyColumn(column)\" title=\"Erreur de chargement \u2014 cliquer pour r\u00E9essayer\">\n                  <span class=\"lazy-error-icon\">\u26A0</span>\n                  <span class=\"lazy-error-label\">R\u00E9essayer</span>\n                </button>\n                <span *ngSwitchDefault class=\"cell-text\" [class.cell-empty]=\"isCellEmpty(row[column.key])\" [title]=\"asTitle(row[column.key])\">{{ isCellEmpty(row[column.key]) ? 'N/A' : row[column.key] }}</span>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"renderedColumns; sticky: true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: renderedColumns; when: !isGroupHeader\"\n          [attr.tabindex]=\"hasRowClickHandler ? 0 : null\"\n          [ngClass]=\"getRowClass(row)\"\n          [class.no-pointer]=\"!hasRowClickHandler\"\n          (click)=\"onRowClick(row, $event)\"\n          (keydown.enter)=\"onRowClick(row, null)\"\n          (keydown.space)=\"onRowClick(row, null)\"\n        ></tr>\n        <ng-container matColumnDef=\"__group_row\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"renderedColumns.length\" class=\"group-header-cell\">\n            <div class=\"group-header-label\">\n              <span class=\"group-chevron\" [class.collapsed]=\"isGroupCollapsed(row.__groupKey)\" *ngIf=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__'\">\u203A</span>\n              <span *ngIf=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__'\" class=\"group-key-label\">{{ row.__groupKey }}</span>\n              <span *ngIf=\"row.__groupKey === '__lazy_loading__'\" class=\"lazy-skeleton group-lazy-key-skeleton\"></span>\n              <span *ngIf=\"row.__groupKey === '__too_many_groups__'\" class=\"group-too-many-label\">\u26A0 Trop de groupes ({{ row.__groupCount }}) \u2014 affinez les donn\u00E9es ou choisissez une autre colonne</span>\n              <span class=\"group-count-badge\">{{ row.__groupCount }}</span>\n              <div class=\"group-pagination\" *ngIf=\"!isGroupCollapsed(row.__groupKey) && row.__groupPageCount > 1\" (click)=\"$event.stopPropagation()\">\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row.__groupPage === 0\" (click)=\"groupPageBack(row.__groupKey)\">\u2039</button>\n                <span class=\"group-page-info\">{{ row.__groupPage + 1 }}\u00A0/\u00A0{{ row.__groupPageCount }}</span>\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row.__groupPage >= row.__groupPageCount - 1\" (click)=\"groupPageForward(row.__groupKey, row.__groupCount)\">\u203A</button>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-row *matRowDef=\"let row; columns: ['__group_row']; when: isGroupHeader\"\n            class=\"group-header-row\"\n            [class.group-header-loading]=\"row.__groupKey === '__lazy_loading__'\"\n            [class.group-header-too-many]=\"row.__groupKey === '__too_many_groups__'\"\n            [attr.data-group-key]=\"row.__groupKey\"\n            (click)=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__' && toggleGroupCollapse(row.__groupKey)\"></tr>\n        <tr class=\"mat-mdc-row no-data-row\" *matNoDataRow>\n          <td class=\"mat-mdc-cell no-data-cell\" [attr.colspan]=\"renderedColumns.length\"></td>\n        </tr>\n      </table>\n      </div><!-- /table-body-scroll -->\n      <div class=\"table-body-overlay\" *ngIf=\"effectiveIsLoading || isEmpty\">\n        <span class=\"table-body-overlay-text\">{{ effectiveIsLoading ? loadingStateLabel : emptyStateLabel }}</span>\n      </div>\n      </div><!-- /table-body-wrapper -->\n\n      <div class=\"bottom-bar\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        ></mat-paginator>\n      </div>\n\n      <div class=\"group-bottom-bar\" *ngIf=\"activeGroupByKey\">\n        <div class=\"group-bottom-bar-container\">\n          <div class=\"group-bottom-bar-left\">\n            <button type=\"button\" class=\"group-reset-btn\" (click)=\"onGroupByChange(null)\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"group-reset-icon\">\n                <path d=\"M3 8a5 5 0 1 0 5-5 5 5 0 0 0-3.54 1.46L3 3\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M3 3v2.5H5.5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              Retirer le groupe\n            </button>\n            <div class=\"group-bar-separator\"></div>\n            <div class=\"group-sort-controls\">\n              <span class=\"group-sort-label\">Trier :</span>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'asc'\" (click)=\"onGroupSortToggle('asc')\" title=\"A \u2192 Z\">\n                <mat-icon>arrow_upward</mat-icon>\n              </button>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'desc'\" (click)=\"onGroupSortToggle('desc')\" title=\"Z \u2192 A\">\n                <mat-icon>arrow_downward</mat-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"mat-mdc-paginator-page-size\">\n            <div class=\"mat-mdc-paginator-page-size-label\">Lignes par groupe :</div>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mat-mdc-paginator-page-size-select\">\n              <mat-select\n                [(ngModel)]=\"groupPageSize\"\n                (ngModelChange)=\"onGroupPageSizeChange($event)\"\n                panelClass=\"mat-mdc-paginator-select-page-size group-page-size-panel\"\n                [panelWidth]=\"'auto'\"\n              >\n                <mat-select-trigger>{{ groupPageSize === 0 ? 'Toutes' : groupPageSize }}</mat-select-trigger>\n                <mat-option *ngFor=\"let opt of pageSizeOptionsGroupBy\" [value]=\"opt\">{{ opt }}</mat-option>\n                <mat-option [value]=\"0\">Toutes</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;max-height:100%;min-height:inherit;--jqt-title-color: #1f2937;--jqt-text-color: #111827;--jqt-text-secondary: #6b7280;--jqt-text-muted: #9ca3af;--jqt-surface-color: #ffffff;--jqt-surface-alt-color: #f9fafb;--jqt-row-hover-bg: #f3f4f6;--jqt-border-color: #e5e7eb;--jqt-group-bg: #eef2f7;--jqt-group-bg-hover: #e4ecf4;--jqt-group-accent: #94a3b8;--jqt-group-border: #d1d9e4;--jqt-primary-color: #1d4ed8;--jqt-danger-color: #dc2626;--jqt-danger-hover-bg: #fef2f2;--jqt-danger-border: #fca5a5;--jqt-header-bg: #f5f5f5;--jqt-header-text-color: #374151;--jqt-cell-bg: #ffffff;--jqt-footer-bg: #f5f5f5;--jqt-footer-text-color: #374151;--jqt-footer-icon-color: #374151}.jquery-table-wrapper{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;padding:2px 2px 0;box-sizing:border-box}.table-header{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px}.table-header h3{margin:0;font-size:20px;font-weight:600;color:var(--jqt-title-color)}.table-layout{display:grid;grid-template-columns:minmax(155px,190px) minmax(0,1fr);gap:12px;align-items:stretch;min-height:inherit;height:100%}.table-layout.no-slice{grid-template-columns:minmax(0,1fr)}.table-layout.slice-collapsed{grid-template-columns:40px minmax(0,1fr)}.table-shell{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:100%}.table-body-wrapper{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}.table-body-scroll{flex:1 1 0;overflow-y:auto;min-height:0;border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:8px 8px 0 0;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.table-body-scroll::-webkit-scrollbar{width:6px}.table-body-scroll::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.table-body-overlay{position:absolute;top:var(--actual-header-height, 56px);left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--jqt-surface-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);pointer-events:none}.table-body-overlay-text{font-size:14px;color:var(--jqt-text-secondary)}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}.table-toolbar-left{flex:1 1 auto;min-width:0}.table-toolbar-right{flex:0 0 auto}.search-input-wrapper{position:relative;display:inline-flex;align-items:center;width:100%;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 8px;box-sizing:border-box;gap:6px}.search-input-wrapper:focus-within{border-color:var(--jqt-text-muted)}.search-input-wrapper .search-icon{flex-shrink:0;width:14px;height:14px;color:var(--jqt-text-muted)}.search-input{flex:1;border:none;outline:none;font-size:13px;color:var(--jqt-text-color);background:transparent;padding:7px 0;min-width:0}.search-input::placeholder{color:var(--jqt-text-muted)}.search-count{flex-shrink:0;font-size:12px;font-weight:600;color:var(--jqt-text-secondary);background:var(--jqt-row-hover-bg);border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;line-height:18px}.search-clear-btn{background:none;border:none;cursor:pointer;color:var(--jqt-text-muted);font-size:16px;padding:0;line-height:1;flex-shrink:0}.search-clear-btn:hover{color:var(--jqt-text-color)}.view-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.view-btn:hover{border-color:var(--jqt-text-muted)}.view-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.group-header-row{cursor:pointer}:host ::ng-deep .jquery-table{border-spacing:0}:host ::ng-deep .group-header-row td{padding:0!important;background:var(--jqt-group-bg);border-bottom:1px solid var(--jqt-group-border);border-top:1px solid var(--jqt-group-border);border-left:3px solid var(--jqt-group-accent);position:sticky;top:var(--actual-header-height, 56px);z-index:2;box-shadow:-4px 0 0 0 var(--jqt-group-bg)}:host ::ng-deep .group-header-row:hover td{background:var(--jqt-group-bg-hover);box-shadow:-4px 0 0 0 var(--jqt-group-bg-hover)}:host ::ng-deep .group-header-loading td,:host ::ng-deep .group-header-loading:hover td,:host ::ng-deep .group-header-too-many td,:host ::ng-deep .group-header-too-many:hover td{cursor:default;background:var(--jqt-surface-alt-color)}.group-too-many-label{font-size:12px;font-weight:500;color:var(--jqt-warn-color, #b45309);font-style:italic}.group-header-cell{padding:0!important}.group-header-label{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--jqt-text-color);text-transform:uppercase;letter-spacing:.04em}.group-key-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count-badge{flex-shrink:0;font-size:11px;line-height:1;font-weight:600;color:#fff;background:var(--jqt-text-secondary, #6b7280);border-radius:10px;padding:3px 7px;min-width:20px;text-align:center;text-transform:none;letter-spacing:0}.group-pagination{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.group-page-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--jqt-border-color);border-radius:5px;background:var(--jqt-surface-color);cursor:pointer;font-size:14px;color:var(--jqt-text-color);line-height:1;padding:0 0 3px;text-transform:none;letter-spacing:0}.group-page-btn:hover:not(:disabled){border-color:var(--jqt-text-muted);background:var(--jqt-surface-alt-color)}.group-page-btn:disabled{opacity:.35;cursor:default}.group-page-info{font-size:11px;color:var(--jqt-text-secondary);min-width:36px;text-align:center;font-weight:500;text-transform:none;letter-spacing:0}.group-chevron{flex-shrink:0;font-size:14px;font-weight:700;padding-bottom:3px;transition:transform .15s ease;transform:rotate(90deg)}.group-chevron.collapsed{transform:rotate(0)}.no-data-row{cursor:default!important}.no-data-cell{padding:0!important;height:0!important;border:none!important}.jquery-table{width:100%;table-layout:fixed}:host ::ng-deep .mat-mdc-table{width:100%;background:transparent}:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .mat-mdc-header-row{background:var(--jqt-header-bg)}:host ::ng-deep .mat-mdc-header-cell{background:var(--jqt-header-bg);color:var(--jqt-header-text-color)}:host ::ng-deep .mat-mdc-row,:host ::ng-deep .mat-mdc-cell{background:var(--jqt-cell-bg)}:host ::ng-deep .mat-mdc-row{cursor:pointer;border-bottom-color:var(--jqt-border-color)}:host ::ng-deep .mat-mdc-row.no-pointer{cursor:auto}:host ::ng-deep .mat-mdc-row.no-data-row{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drag-enabled{-webkit-user-select:none;user-select:none}:host ::ng-deep .mat-mdc-header-cell.drag-enabled:active{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drop-target{background:var(--jqt-row-hover-bg)}.head-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}.drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--jqt-border-color);flex-shrink:0;padding:0 2px;border-radius:4px;line-height:1}.drag-handle:active{cursor:grabbing}.drag-handle:hover{color:var(--jqt-text-muted)}.drag-handle mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.head-icon{font-size:14px;width:14px;height:14px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.head-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.05em}.head-actions{display:inline-flex;align-items:center;gap:6px}.cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-empty{color:var(--jqt-empty-cell-color, #9ca3af);font-style:italic}.bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}:host ::ng-deep .bottom-bar mat-paginator{flex:1 1 auto;background:transparent;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-paginator-outer-container{display:flex}:host ::ng-deep .bottom-bar .mat-mdc-paginator-container{display:flex;align-items:center;flex-wrap:nowrap;min-height:0;height:var(--actual-header-height, 56px);padding:0 8px;box-sizing:border-box}:host ::ng-deep .bottom-bar .mat-mdc-paginator-range-label,:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button{color:var(--jqt-footer-icon-color);width:28px;height:28px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;--mdc-icon-button-state-layer-size: 28px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mdc-icon-button__state-layer{width:28px;height:28px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button:disabled{opacity:.35}:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}.group-bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}.group-bottom-bar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:var(--actual-header-height, 56px);padding:0 16px;gap:16px;width:100%;box-sizing:border-box}.group-bar-separator{width:1px;height:20px;background:#9ca3af;flex-shrink:0;margin:0 4px}.group-bottom-bar-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.group-sort-controls{display:flex;align-items:center;gap:2px}.group-sort-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap;margin-right:2px}.group-sort-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--jqt-footer-icon-color);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.group-sort-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.group-sort-btn:hover{background:#0000000a}.group-sort-btn.active{color:var(--jqt-primary-color, #1976d2);border-color:var(--jqt-primary-color, #1976d2);background:#1976d214}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size{display:flex;align-items:center;gap:8px}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .group-bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .group-bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .group-bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .group-bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .group-bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}:host ::ng-deep .group-bottom-bar .mat-mdc-select-arrow{color:var(--jqt-footer-text-color)}.group-reset-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);color:var(--jqt-text-secondary);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;flex-shrink:0}.group-reset-btn:hover{background:var(--jqt-danger-hover-bg);color:var(--jqt-danger-color);border-color:var(--jqt-danger-border)}.group-reset-icon{width:14px;height:14px;flex-shrink:0}::ng-deep .mat-mdc-paginator-select-page-size .mat-pseudo-checkbox{display:none!important}::ng-deep .group-page-size-panel{min-width:90px!important}::ng-deep .group-page-size-panel .mat-mdc-option{justify-content:center;min-height:40px}::ng-deep .group-page-size-panel .mdc-list-item__primary-text{text-align:center;width:100%}@media (max-width: 960px){.table-layout{grid-template-columns:1fr}}::ng-deep .view-menu-panel .mat-mdc-menu-panel{min-width:220px!important;overflow:visible!important}::ng-deep .view-menu-panel .mat-mdc-menu-content{padding:4px 0!important}::ng-deep .view-submenu-panel .mat-mdc-menu-panel{min-width:200px!important}::ng-deep .view-submenu-panel .mat-mdc-menu-content{padding:0!important}::ng-deep .view-menu-panel .view-menu-sub-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}::ng-deep .view-menu-panel .view-menu-sub-trigger .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;gap:0;overflow:hidden}::ng-deep .view-menu-sub-label{font-size:13px;font-weight:500;color:var(--jqt-text-color);flex:0 0 auto;white-space:nowrap;padding-right:8px}::ng-deep .view-menu-sub-value{font-size:12px;color:var(--jqt-text-secondary);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}::ng-deep .view-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}::ng-deep .view-submenu .view-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:var(--jqt-text-color);cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}::ng-deep .view-submenu .view-menu-item:hover{background:var(--jqt-row-hover-bg)}::ng-deep .view-submenu .view-menu-item.active{font-weight:600}::ng-deep .view-submenu .view-menu-item:disabled{opacity:.4;cursor:default}::ng-deep .view-menu-col-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-text-muted)}::ng-deep .view-menu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:var(--jqt-text-color)}::ng-deep .view-menu-separator{border:none;border-top:1px solid var(--jqt-border-color);margin:4px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.group-lazy-key-skeleton{flex:1 1 auto;min-width:80px;height:13px;border-radius:4px}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.lazy-error-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid #fca5a5;border-radius:4px;padding:2px 6px;cursor:pointer;color:#ef4444;font-size:12px;opacity:.85;transition:opacity .15s}.lazy-error-btn:hover{opacity:1;background:#fef2f2}.lazy-error-icon{font-size:12px}.lazy-error-label{font-size:11px;font-weight:500}::ng-deep .lazy-menu-spinner{display:inline-block;margin-left:auto;font-size:13px;color:var(--jqt-text-secondary);animation:lazy-spin 1s linear infinite}::ng-deep .lazy-menu-error{display:inline-block;margin-left:auto;font-size:13px;color:#ef4444}@keyframes lazy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i9.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: SlicePanelComponent, selector: "slice-panel", inputs: ["sliceConfigs", "columns", "data", "lazyData", "lazyStatus", "showToggle", "showCounts", "collapsedByDefault", "alwaysShow"], outputs: ["filterChange", "activeKeysChange", "dynamicSliceKeysChange", "collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "jquery-table", inputs: { config: "config", dataSource: "dataSource", data: "data", displayedColumns: "displayedColumns", columnsConfig: "columnsConfig", view: "view", columnLabels: "columnLabels", isLoading: "isLoading" }, outputs: { addRequested: "addRequested", columnAdded: "columnAdded", columnRemoved: "columnRemoved", categorySelected: "categorySelected", rowSelected: "rowSelected", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange", groupByChange: "groupByChange", columnsChange: "columnsChange" }, providers: [{ provide: MatPaginatorIntl, useFactory: getFrenchPaginatorIntl }], queries: [{ propertyName: "_cellDefs", predicate: JqtCellDefDirective }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableBodyScrollRef", first: true, predicate: ["tableBodyScroll"], descendants: true }, { propertyName: "slicePanelRef", first: true, predicate: SlicePanelComponent, descendants: true }, { propertyName: "viewMenuTrigger", first: true, predicate: ["viewMenuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"jquery-table-wrapper\">\n  <header class=\"table-header\" *ngIf=\"showTitle\">\n    <h3>{{ title }}</h3>\n  </header>\n\n  <div\n    class=\"table-layout\"\n    [class.no-slice]=\"!_showSlicePanel || _slicePanelCollapsed\"\n  >\n    <slice-panel\n      [style.display]=\"!_showSlicePanel || _slicePanelCollapsed ? 'none' : null\"\n      [sliceConfigs]=\"_sliceConfigs\"\n      [columns]=\"_sliceColumns\"\n      [data]=\"_sliceData\"\n      [lazyData]=\"_lazyColumnData\"\n      [lazyStatus]=\"_lazyColumnStatus\"\n      [showToggle]=\"_sliceShowToggle\"\n      [collapsedByDefault]=\"_slicePanelCollapsed\"\n      (filterChange)=\"onSliceFilterChange($event)\"\n      (dynamicSliceKeysChange)=\"onDynamicSliceKeysChange($event)\"\n      (collapsedChange)=\"onSlicePanelCollapsedChange($event)\"\n    ></slice-panel>\n\n    <div class=\"table-shell\">\n      <div class=\"table-toolbar\" *ngIf=\"showToolbar\">\n        <div class=\"table-toolbar-left\">\n          <button\n            *ngIf=\"showSliceExpandBtn\"\n            type=\"button\"\n            class=\"slice-expand-btn\"\n            [title]=\"i18n.expandFilterTitle\"\n            (click)=\"expandSlicePanel()\"\n          ><mat-icon class=\"slice-expand-mat-icon\">menu</mat-icon></button>\n          <div *ngIf=\"showSearchBar\" class=\"search-input-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <path d=\"M13 13L17 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"search-input\"\n              type=\"text\"\n              [(ngModel)]=\"searchQuery\"\n              (ngModelChange)=\"onSearchChange()\"\n              [placeholder]=\"i18n.searchPlaceholder\"\n              autocomplete=\"off\"\n            />\n            <button *ngIf=\"searchQuery\" type=\"button\" class=\"search-clear-btn\" (click)=\"searchQuery = ''; onSearchChange()\">\u00D7</button>\n            <span class=\"search-count\">{{ filteredRowCount }}</span>\n          </div>\n        </div>\n        <div *ngIf=\"showViewButton\" class=\"table-toolbar-right\">\n          <button *ngIf=\"showViewButton\" type=\"button\" class=\"view-btn\" [matMenuTriggerFor]=\"viewMenu\" #viewMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"'View'\">\n            <mat-icon class=\"view-btn-icon\">settings</mat-icon>\n          </button>\n\n          <mat-menu #viewMenu=\"matMenu\" [panelClass]=\"'view-menu-panel'\">\n            <button *ngIf=\"showFields\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuFields }}</span>\n              <span class=\"view-menu-sub-value\">{{ visibleColumns.length }}/{{ totalColumnCount }}</span>\n            </button>\n            <button *ngIf=\"showGroupBySection\" mat-menu-item [matMenuTriggerFor]=\"groupBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuGroupBy }}</span>\n              <span class=\"view-menu-sub-value\">{{ activeGroupByLabel }}</span>\n            </button>\n            <button *ngIf=\"showAddSliceButton\" mat-menu-item [matMenuTriggerFor]=\"sliceBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuSliceBy }}</span>\n              <span class=\"view-menu-sub-value\">{{ activeSliceByLabel }}</span>\n            </button>\n            <mat-divider *ngIf=\"showExportButton\" class=\"view-menu-export-divider\"></mat-divider>\n            <button *ngIf=\"showExportButton\" mat-menu-item type=\"button\" class=\"view-menu-export-item\"\n              (click)=\"onExport(); viewMenuTrigger.closeMenu()\">\n              <mat-icon class=\"view-menu-export-icon\">download</mat-icon>\n              <span class=\"view-menu-sub-label\">{{ i18n.exportButtonLabel }}</span>\n            </button>\n            <mat-divider *ngIf=\"showPreferencesMenu\" class=\"view-menu-export-divider\"></mat-divider>\n            <button *ngIf=\"showPreferencesMenu\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.preferencesMenuLabel }}</span>\n            </button>\n          </mat-menu>\n\n          <mat-menu #preferencesSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" (mousedown)=\"enterEditMode(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">edit</mat-icon>\n                {{ i18n.preferencesEdit }}\n              </button>\n              <button type=\"button\" class=\"view-menu-item\" (mousedown)=\"savePreferences(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">save</mat-icon>\n                {{ i18n.preferencesSave }}\n              </button>\n              <button type=\"button\" class=\"view-menu-item\" [disabled]=\"!hasSavedPreferences\" (mousedown)=\"clearPreferences(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">delete_outline</mat-icon>\n                {{ i18n.preferencesClear }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #fieldsSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuBaseColumns\"\n                [disabled]=\"!column.optional && !allowColumnRemoval\"\n                (mousedown)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                {{ colLabel(column) }}\n              </button>\n              <ng-container *ngIf=\"menuOptionalColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuOptionalColumns\"\n                  [disabled]=\"(isColumnVisible(column.key) && visibleColumns.length === 1) || getLazyColumnStatus(column.key) === 'loading'\"\n                  (mousedown)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                  <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                  {{ colLabel(column) }}\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'loading'\" class=\"lazy-menu-spinner\">\u21BB</span>\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'error'\" class=\"lazy-menu-error\" [title]=\"i18n.lazyErrorMenuTitle\">\u26A0</span>\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n\n          <mat-menu #groupBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of groupByColumns\"\n                [class.active]=\"activeGroupByKey === col.key\"\n                (mousedown)=\"onGroupByChange(activeGroupByKey === col.key ? null : col.key)\">\n                <span class=\"view-menu-check\">{{ activeGroupByKey === col.key ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                {{ colLabel(col) }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #sliceBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let item of sliceByMenuItems\"\n                [class.active]=\"isSliceMenuItemActive(item)\"\n                (mousedown)=\"onSliceMenuItemClick(item)\">\n                <span class=\"view-menu-check\">{{ isSliceMenuItemActive(item) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"item.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                {{ item.title }}\n              </button>\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n\n      <div class=\"table-body-wrapper\">\n\n      <!-- Banni\u00E8re message pr\u00E9f\u00E9rences -->\n      <div *ngIf=\"_preferencesMessage\" class=\"preferences-message\">\n        <mat-icon class=\"preferences-message-icon\">check_circle</mat-icon>\n        <span>{{ _preferencesMessage }}</span>\n      </div>\n\n      <!-- Bouton de confirmation du mode \u00E9dition -->\n      <button\n        *ngIf=\"_editMode\"\n        type=\"button\"\n        class=\"edit-confirm-btn\"\n        [title]=\"i18n.preferencesConfirmEdit\"\n        (click)=\"confirmEditMode()\"\n      >\n        <mat-icon>check_circle</mat-icon>\n      </button>\n      <div class=\"table-body-scroll\" #tableBodyScroll>\n      <table mat-table matSort [dataSource]=\"tableDataSource\" class=\"jquery-table\"\n             [style.min-width]=\"tableMinWidth\"\n             [trackBy]=\"trackRowFn\"\n             [matSortActive]=\"_matSortActive\" [matSortDirection]=\"_matSortDirection\">\n        <ng-container *ngFor=\"let column of visibleColumns\" [matColumnDef]=\"column.key\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [mat-sort-header]=\"(!_editMode && column.sortable !== false) ? column.key : ''\"\n            [disabled]=\"_editMode || column.sortable === false\"\n            [style.width]=\"getColumnWidth(column.key)\"\n            [class.drag-enabled]=\"isColumnDragDropEnabled || _editMode\"\n            [class.drop-target]=\"isHeaderDropTarget(column.key)\"\n            [class.edit-mode-header]=\"_editMode\"\n            (dragover)=\"onHeaderDragOver(column.key, $event)\"\n            (drop)=\"onHeaderDrop(column.key, $event)\"\n          >\n            <div class=\"head-cell\">\n              <mat-icon *ngIf=\"column.icon\" class=\"head-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n              <span class=\"head-text\" [title]=\"column.header\">{{ column.header }}</span>\n              <span\n                *ngIf=\"isColumnDragDropEnabled || _editMode\"\n                class=\"drag-handle\"\n                draggable=\"true\"\n                (dragstart)=\"onHeaderDragStart(column.key, $event)\"\n                (dragend)=\"onHeaderDragEnd()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>drag_indicator</mat-icon>\n              </span>\n            </div>\n            <!-- Poign\u00E9e de resize (visible uniquement en mode \u00E9dition) -->\n            <span\n              *ngIf=\"_editMode\"\n              class=\"col-resize-handle\"\n              draggable=\"false\"\n              (mousedown)=\"onResizeStart(column.key, $event)\"\n            ></span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n            [style.width]=\"getColumnWidth(column.key)\"\n            [class.edit-mode-cell]=\"_editMode\">\n            <ng-container *ngIf=\"!_editMode; else editModeCellTpl\">\n              <ng-container *ngIf=\"getCellTemplate(column.key) as customTpl; else defaultCellTpl\">\n                <ng-container *ngTemplateOutlet=\"customTpl; context: { $implicit: row[_ROW_RAW_KEY], index: row[_ROW_INDEX_KEY] }\"></ng-container>\n              </ng-container>\n              <ng-template #defaultCellTpl>\n                <ng-container [ngSwitch]=\"column.lazy ? getLazyRenderType(row[column.key]) : 'value'\">\n                  <span *ngSwitchCase=\"'loading'\" class=\"lazy-skeleton\"></span>\n                  <button *ngSwitchCase=\"'error'\" type=\"button\" class=\"lazy-error-btn\" (click)=\"retryLazyColumn(column)\" [title]=\"i18n.lazyErrorTitle\">\n                    <span class=\"lazy-error-icon\">\u26A0</span>\n                    <span class=\"lazy-error-label\">{{ i18n.lazyRetry }}</span>\n                  </button>\n                  <span *ngSwitchDefault class=\"cell-text\" [class.cell-empty]=\"isCellEmpty(row[column.key])\" [title]=\"asTitle(row[column.key])\">{{ isCellEmpty(row[column.key]) ? i18n.cellEmpty : row[column.key] }}</span>\n                </ng-container>\n              </ng-template>\n            </ng-container>\n            <ng-template #editModeCellTpl>\n              <span class=\"cell-text cell-edit-mode\" [title]=\"asTitle(row[column.key])\">{{ row[column.key] }}</span>\n            </ng-template>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"renderedColumns; sticky: true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: renderedColumns; when: !isGroupHeader\"\n          [attr.tabindex]=\"hasRowClickHandler && !_editMode ? 0 : null\"\n          [ngClass]=\"getRowClass(row)\"\n          [class.no-pointer]=\"!hasRowClickHandler || _editMode\"\n          [class.edit-mode-row]=\"_editMode\"\n          (click)=\"!_editMode && onRowClick(row, $event)\"\n          (keydown.enter)=\"!_editMode && onRowClick(row, null)\"\n          (keydown.space)=\"!_editMode && onRowClick(row, null)\"\n        ></tr>\n        <ng-container [matColumnDef]=\"_GROUP_ROW_COLUMN\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"renderedColumns.length\" class=\"group-header-cell\">\n            <div class=\"group-header-label\">\n              <span class=\"group-chevron\" [class.collapsed]=\"isGroupCollapsed(row[_ROW_GROUP_KEY])\" *ngIf=\"isNormalGroupRow(row)\">\u203A</span>\n              <span *ngIf=\"isNormalGroupRow(row)\" class=\"group-key-label\">{{ row[_ROW_GROUP_KEY] }}</span>\n              <span *ngIf=\"isGroupRowLoading(row)\" class=\"lazy-skeleton group-lazy-key-skeleton\"></span>\n              <span *ngIf=\"isGroupRowTooMany(row)\" class=\"group-too-many-label\">{{ i18n.groupTooMany(row[_ROW_GROUP_COUNT]) }}</span>\n              <span class=\"group-count-badge\">{{ row[_ROW_GROUP_COUNT] }}</span>\n              <div class=\"group-pagination\" *ngIf=\"!isGroupCollapsed(row[_ROW_GROUP_KEY]) && row[_ROW_GROUP_PAGE_COUNT] > 1\" (click)=\"$event.stopPropagation()\">\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row[_ROW_GROUP_PAGE] === 0\" (click)=\"groupPageBack(row[_ROW_GROUP_KEY])\">\u2039</button>\n                <span class=\"group-page-info\">{{ row[_ROW_GROUP_PAGE] + 1 }} / {{ row[_ROW_GROUP_PAGE_COUNT] }}</span>\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row[_ROW_GROUP_PAGE] >= row[_ROW_GROUP_PAGE_COUNT] - 1\" (click)=\"groupPageForward(row[_ROW_GROUP_KEY], row[_ROW_GROUP_COUNT])\">\u203A</button>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-row *matRowDef=\"let row; columns: [_GROUP_ROW_COLUMN]; when: isGroupHeader\"\n            class=\"group-header-row\"\n            [class.group-header-loading]=\"isGroupRowLoading(row)\"\n            [class.group-header-too-many]=\"isGroupRowTooMany(row)\"\n            [attr.data-group-key]=\"row[_ROW_GROUP_KEY]\"\n            (click)=\"onGroupHeaderClick(row)\"></tr>\n        <tr class=\"mat-mdc-row no-data-row\" *matNoDataRow>\n          <td class=\"mat-mdc-cell no-data-cell\" [attr.colspan]=\"renderedColumns.length\"></td>\n        </tr>\n      </table>\n      </div><!-- /table-body-scroll -->\n      <div class=\"table-body-overlay\" *ngIf=\"effectiveIsLoading || isEmpty\">\n        <span class=\"table-body-overlay-text\">{{ effectiveIsLoading ? loadingStateLabel : emptyStateLabel }}</span>\n      </div>\n      </div><!-- /table-body-wrapper -->\n\n      <div class=\"bottom-bar\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        ></mat-paginator>\n      </div>\n\n      <div class=\"group-bottom-bar\" *ngIf=\"activeGroupByKey\">\n        <div class=\"group-bottom-bar-container\">\n          <div class=\"group-bottom-bar-left\">\n            <button type=\"button\" class=\"group-reset-btn\" (click)=\"onGroupByChange(null)\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"group-reset-icon\">\n                <path d=\"M3 8a5 5 0 1 0 5-5 5 5 0 0 0-3.54 1.46L3 3\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M3 3v2.5H5.5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              {{ i18n.groupRemove }}\n            </button>\n            <div class=\"group-bar-separator\"></div>\n            <div class=\"group-sort-controls\">\n              <span class=\"group-sort-label\">{{ i18n.groupSortLabel }}</span>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'asc'\" (click)=\"onGroupSortToggle('asc')\" [title]=\"i18n.groupSortAsc\">\n                <mat-icon>arrow_upward</mat-icon>\n              </button>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'desc'\" (click)=\"onGroupSortToggle('desc')\" [title]=\"i18n.groupSortDesc\">\n                <mat-icon>arrow_downward</mat-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"mat-mdc-paginator-page-size\">\n            <div class=\"mat-mdc-paginator-page-size-label\">{{ i18n.groupRowsPerGroup }}</div>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mat-mdc-paginator-page-size-select\">\n              <mat-select\n                [(ngModel)]=\"groupPageSize\"\n                (ngModelChange)=\"onGroupPageSizeChange($event)\"\n                panelClass=\"mat-mdc-paginator-select-page-size group-page-size-panel\"\n                [panelWidth]=\"'auto'\"\n              >\n                <mat-select-trigger>{{ groupPageSize === 0 ? i18n.groupShowAll : groupPageSize }}</mat-select-trigger>\n                <mat-option *ngFor=\"let opt of pageSizeOptionsGroupBy\" [value]=\"opt\">{{ opt }}</mat-option>\n                <mat-option [value]=\"0\">{{ i18n.groupShowAll }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;max-height:100%;min-height:inherit;--jqt-title-color: #1f2937;--jqt-text-color: #111827;--jqt-text-secondary: #6b7280;--jqt-text-muted: #9ca3af;--jqt-surface-color: #ffffff;--jqt-surface-alt-color: #f9fafb;--jqt-row-hover-bg: #f3f4f6;--jqt-border-color: #e5e7eb;--jqt-group-bg: #eef2f7;--jqt-group-bg-hover: #e4ecf4;--jqt-group-accent: #94a3b8;--jqt-group-border: #d1d9e4;--jqt-primary-color: #1d4ed8;--jqt-danger-color: #dc2626;--jqt-danger-hover-bg: #fef2f2;--jqt-danger-border: #fca5a5;--jqt-header-bg: #f5f5f5;--jqt-header-text-color: #374151;--jqt-cell-bg: #ffffff;--jqt-footer-bg: #f5f5f5;--jqt-footer-text-color: #374151;--jqt-footer-icon-color: #374151}.jquery-table-wrapper{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;padding:2px 2px 0;box-sizing:border-box}.table-header{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px}.table-header h3{margin:0;font-size:20px;font-weight:600;color:var(--jqt-title-color)}.table-layout{display:grid;grid-template-columns:minmax(155px,190px) minmax(0,1fr);gap:12px;align-items:stretch;min-height:inherit;height:100%}.table-layout.no-slice{grid-template-columns:minmax(0,1fr)}.table-layout.slice-collapsed{grid-template-columns:40px minmax(0,1fr)}.table-shell{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:100%}.table-body-wrapper{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}.table-body-scroll{flex:1 1 0;overflow-x:auto;overflow-y:auto;min-height:0;border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:8px 8px 0 0;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.table-body-scroll::-webkit-scrollbar{width:6px}.table-body-scroll::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.table-body-overlay{position:absolute;top:var(--actual-header-height, 56px);left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--jqt-surface-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);pointer-events:none}.table-body-overlay-text{font-size:14px;color:var(--jqt-text-secondary)}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}.table-toolbar-left{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px}.table-toolbar-right{flex:0 0 auto;display:flex;align-items:center;gap:6px}.search-input-wrapper{position:relative;display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 8px;box-sizing:border-box;gap:6px}.search-input-wrapper:focus-within{border-color:var(--jqt-text-muted)}.search-input-wrapper .search-icon{flex-shrink:0;width:14px;height:14px;color:var(--jqt-text-muted)}.search-input{flex:1;border:none;outline:none;font-size:13px;color:var(--jqt-text-color);background:transparent;padding:7px 0;min-width:0}.search-input::placeholder{color:var(--jqt-text-muted)}.search-count{flex-shrink:0;font-size:12px;font-weight:600;color:var(--jqt-text-secondary);background:var(--jqt-row-hover-bg);border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;line-height:18px}.search-clear-btn{background:none;border:none;cursor:pointer;color:var(--jqt-text-muted);font-size:16px;padding:0;line-height:1;flex-shrink:0}.search-clear-btn:hover{color:var(--jqt-text-color)}.slice-expand-btn{flex-shrink:0;width:34px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--jqt-text-color);padding:0;line-height:1}.slice-expand-btn:hover{border-color:var(--jqt-text-muted)}.slice-expand-mat-icon{font-size:18px;width:18px;height:18px;line-height:1}.view-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.view-btn:hover{border-color:var(--jqt-text-muted)}.view-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.export-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.export-btn:hover{border-color:var(--jqt-text-muted)}.export-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.view-menu-export-divider{margin:4px 0!important}.view-menu-export-item{display:flex;align-items:center;gap:6px;width:100%;padding:0 16px;height:40px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--jqt-text-color);text-align:left;box-sizing:border-box}.view-menu-export-item:hover{background:#0000000a}.view-menu-export-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.edit-confirm-btn{position:absolute;top:10px;right:10px;z-index:200;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:#16a34a;cursor:pointer;box-shadow:0 2px 8px #00000040;transition:background .15s}.edit-confirm-btn mat-icon{color:#fff;font-size:22px;width:22px;height:22px}.edit-confirm-btn:hover{background:#15803d}.preferences-message{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;font-size:12px;color:#15803d}.preferences-message .preferences-message-icon{font-size:16px;width:16px;height:16px}:host ::ng-deep .edit-mode-header{background:#3b82f60a!important;cursor:grab!important;-webkit-user-select:none;user-select:none;overflow:visible!important}.col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize!important;background:#3b82f640;z-index:20}.col-resize-handle:hover{background:#3b82f6b3}.col-resize-handle:active{background:#3b82f6e6}:host ::ng-deep th.mat-mdc-header-cell{position:relative;overflow:visible!important}:host ::ng-deep .edit-mode-row{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.8}.cell-edit-mode{pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--jqt-text-muted)}.group-header-row{cursor:pointer}:host ::ng-deep .jquery-table{border-spacing:0}:host ::ng-deep .group-header-row td{padding:0!important;background:var(--jqt-group-bg);border-bottom:1px solid var(--jqt-group-border);border-top:1px solid var(--jqt-group-border);border-left:3px solid var(--jqt-group-accent);position:sticky;top:var(--actual-header-height, 56px);z-index:2;box-shadow:-4px 0 0 0 var(--jqt-group-bg)}:host ::ng-deep .group-header-row:hover td{background:var(--jqt-group-bg-hover);box-shadow:-4px 0 0 0 var(--jqt-group-bg-hover)}:host ::ng-deep .group-header-loading td,:host ::ng-deep .group-header-loading:hover td,:host ::ng-deep .group-header-too-many td,:host ::ng-deep .group-header-too-many:hover td{cursor:default;background:var(--jqt-surface-alt-color)}.group-too-many-label{font-size:12px;font-weight:500;color:var(--jqt-warn-color, #b45309);font-style:italic}.group-header-cell{padding:0!important}.group-header-label{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--jqt-text-color);text-transform:uppercase;letter-spacing:.04em}.group-key-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count-badge{flex-shrink:0;font-size:11px;line-height:1;font-weight:600;color:#fff;background:var(--jqt-text-secondary, #6b7280);border-radius:10px;padding:3px 7px;min-width:20px;text-align:center;text-transform:none;letter-spacing:0}.group-pagination{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.group-page-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--jqt-border-color);border-radius:5px;background:var(--jqt-surface-color);cursor:pointer;font-size:14px;color:var(--jqt-text-color);line-height:1;padding:0 0 3px;text-transform:none;letter-spacing:0}.group-page-btn:hover:not(:disabled){border-color:var(--jqt-text-muted);background:var(--jqt-surface-alt-color)}.group-page-btn:disabled{opacity:.35;cursor:default}.group-page-info{font-size:11px;color:var(--jqt-text-secondary);min-width:36px;text-align:center;font-weight:500;text-transform:none;letter-spacing:0}.group-chevron{flex-shrink:0;font-size:14px;font-weight:700;padding-bottom:3px;transition:transform .15s ease;transform:rotate(90deg)}.group-chevron.collapsed{transform:rotate(0)}.no-data-row{cursor:default!important}.no-data-cell{padding:0!important;height:0!important;border:none!important}.jquery-table{width:100%;table-layout:fixed}:host ::ng-deep .mat-mdc-table{width:100%;background:transparent}:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .mat-mdc-header-row{background:var(--jqt-header-bg)}:host ::ng-deep .mat-mdc-header-cell{background:var(--jqt-header-bg);color:var(--jqt-header-text-color)}:host ::ng-deep .mat-mdc-row,:host ::ng-deep .mat-mdc-cell{background:var(--jqt-cell-bg)}:host ::ng-deep .mat-mdc-row{cursor:pointer;border-bottom-color:var(--jqt-border-color)}:host ::ng-deep .mat-mdc-row.no-pointer{cursor:auto}:host ::ng-deep .mat-mdc-row.no-data-row{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drag-enabled{-webkit-user-select:none;user-select:none}:host ::ng-deep .mat-mdc-header-cell.drag-enabled:active{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drop-target{background:var(--jqt-row-hover-bg)}.head-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}.drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--jqt-border-color);flex-shrink:0;padding:0 2px;border-radius:4px;line-height:1}.drag-handle:active{cursor:grabbing}.drag-handle:hover{color:var(--jqt-text-muted)}.drag-handle mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.head-icon{font-size:14px;width:14px;height:14px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.head-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.05em}.head-actions{display:inline-flex;align-items:center;gap:6px}.cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-empty{color:var(--jqt-empty-cell-color, #9ca3af);font-style:italic}.bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}:host ::ng-deep .bottom-bar mat-paginator{flex:1 1 auto;background:transparent;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-paginator-outer-container{display:flex}:host ::ng-deep .bottom-bar .mat-mdc-paginator-container{display:flex;align-items:center;flex-wrap:nowrap;min-height:0;height:var(--actual-header-height, 56px);padding:0 8px;box-sizing:border-box}:host ::ng-deep .bottom-bar .mat-mdc-paginator-range-label,:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button{color:var(--jqt-footer-icon-color);width:28px;height:28px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;--mdc-icon-button-state-layer-size: 28px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mdc-icon-button__state-layer{width:28px;height:28px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button:disabled{opacity:.35}:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}.group-bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}.group-bottom-bar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:var(--actual-header-height, 56px);padding:0 16px;gap:16px;width:100%;box-sizing:border-box}.group-bar-separator{width:1px;height:20px;background:#9ca3af;flex-shrink:0;margin:0 4px}.group-bottom-bar-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.group-sort-controls{display:flex;align-items:center;gap:2px}.group-sort-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap;margin-right:2px}.group-sort-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--jqt-footer-icon-color);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.group-sort-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.group-sort-btn:hover{background:#0000000a}.group-sort-btn.active{color:var(--jqt-primary-color, #1976d2);border-color:var(--jqt-primary-color, #1976d2);background:#1976d214}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size{display:flex;align-items:center;gap:8px}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .group-bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .group-bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .group-bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .group-bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .group-bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}:host ::ng-deep .group-bottom-bar .mat-mdc-select-arrow{color:var(--jqt-footer-text-color)}.group-reset-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);color:var(--jqt-text-secondary);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;flex-shrink:0}.group-reset-btn:hover{background:var(--jqt-danger-hover-bg);color:var(--jqt-danger-color);border-color:var(--jqt-danger-border)}.group-reset-icon{width:14px;height:14px;flex-shrink:0}::ng-deep .mat-mdc-paginator-select-page-size .mat-pseudo-checkbox{display:none!important}::ng-deep .group-page-size-panel{min-width:90px!important}::ng-deep .group-page-size-panel .mat-mdc-option{justify-content:center;min-height:40px}::ng-deep .group-page-size-panel .mdc-list-item__primary-text{text-align:center;width:100%}@media (max-width: 960px){.table-layout{grid-template-columns:1fr}}::ng-deep .view-menu-panel .mat-mdc-menu-panel{min-width:220px!important;overflow:visible!important}::ng-deep .view-menu-panel .mat-mdc-menu-content{padding:4px 0!important}::ng-deep .view-submenu-panel .mat-mdc-menu-panel{min-width:200px!important}::ng-deep .view-submenu-panel .mat-mdc-menu-content{padding:0!important}::ng-deep .view-menu-panel .view-menu-sub-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}::ng-deep .view-menu-panel .view-menu-sub-trigger .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;gap:0;overflow:hidden}::ng-deep .view-menu-sub-label{font-size:13px;font-weight:500;color:var(--jqt-text-color);flex:0 0 auto;white-space:nowrap;padding-right:8px}::ng-deep .view-menu-sub-value{font-size:12px;color:var(--jqt-text-secondary);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}::ng-deep .view-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}::ng-deep .view-submenu .view-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:var(--jqt-text-color);cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}::ng-deep .view-submenu .view-menu-item:hover{background:var(--jqt-row-hover-bg)}::ng-deep .view-submenu .view-menu-item.active{font-weight:600}::ng-deep .view-submenu .view-menu-item:disabled{opacity:.4;cursor:default}::ng-deep .view-menu-col-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-text-muted)}::ng-deep .view-menu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:var(--jqt-text-color)}::ng-deep .view-menu-separator{border:none;border-top:1px solid var(--jqt-border-color);margin:4px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.group-lazy-key-skeleton{flex:1 1 auto;min-width:80px;height:13px;border-radius:4px}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.lazy-error-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid #fca5a5;border-radius:4px;padding:2px 6px;cursor:pointer;color:#ef4444;font-size:12px;opacity:.85;transition:opacity .15s}.lazy-error-btn:hover{opacity:1;background:#fef2f2}.lazy-error-icon{font-size:12px}.lazy-error-label{font-size:11px;font-weight:500}::ng-deep .lazy-menu-spinner{display:inline-block;margin-left:auto;font-size:13px;color:var(--jqt-text-secondary);animation:lazy-spin 1s linear infinite}::ng-deep .lazy-menu-error{display:inline-block;margin-left:auto;font-size:13px;color:#ef4444}@keyframes lazy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i10.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: SlicePanelComponent, selector: "slice-panel", inputs: ["sliceConfigs", "columns", "data", "lazyData", "lazyStatus", "showToggle", "showCounts", "collapsedByDefault", "alwaysShow"], outputs: ["filterChange", "activeKeysChange", "dynamicSliceKeysChange", "collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'jquery-table', imports: [CommonModule, FormsModule, MatTableModule, MatButtonModule, MatPaginatorModule, MatSortModule, MatMenuModule, MatIconModule, MatSelectModule, SlicePanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatPaginatorIntl, useFactory: getFrenchPaginatorIntl }], template: "<section class=\"jquery-table-wrapper\">\n  <header class=\"table-header\" *ngIf=\"showTitle\">\n    <h3>{{ title }}</h3>\n  </header>\n\n  <div\n    class=\"table-layout\"\n    [class.slice-collapsed]=\"showSlicePanel && (slicePanelRef?.isCollapsed ?? false)\"\n    [class.no-slice]=\"!showSlicePanel\"\n  >\n    <slice-panel\n      [style.display]=\"showSlicePanel ? null : 'none'\"\n      [sliceConfigs]=\"_sliceConfigs\"\n      [columns]=\"_sliceColumns\"\n      [data]=\"_sliceData\"\n      [lazyData]=\"_lazyColumnData\"\n      [lazyStatus]=\"_lazyColumnStatus\"\n      [showToggle]=\"_sliceShowToggle\"\n      (filterChange)=\"onSliceFilterChange($event)\"\n      (dynamicSliceKeysChange)=\"onDynamicSliceKeysChange($event)\"\n    ></slice-panel>\n\n    <div class=\"table-shell\">\n      <div class=\"table-toolbar\" *ngIf=\"showToolbar\">\n        <div class=\"table-toolbar-left\">\n          <div *ngIf=\"showSearchBar\" class=\"search-input-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <path d=\"M13 13L17 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"search-input\"\n              type=\"text\"\n              [(ngModel)]=\"searchQuery\"\n              (ngModelChange)=\"onSearchChange()\"\n              placeholder=\"Rechercher...\"\n              autocomplete=\"off\"\n            />\n            <button *ngIf=\"searchQuery\" type=\"button\" class=\"search-clear-btn\" (click)=\"searchQuery = ''; onSearchChange()\">\u00D7</button>\n            <span class=\"search-count\">{{ filteredRowCount }}</span>\n          </div>\n        </div>\n        <div *ngIf=\"showViewButton\" class=\"table-toolbar-right\">\n          <button type=\"button\" class=\"view-btn\" [matMenuTriggerFor]=\"viewMenu\" #viewMenuTrigger=\"matMenuTrigger\">\n            <mat-icon class=\"view-btn-icon\">settings</mat-icon>\n            View\n          </button>\n\n          <mat-menu #viewMenu=\"matMenu\" [panelClass]=\"'view-menu-panel'\">\n            <button *ngIf=\"showFields\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Champs</span>\n              <span class=\"view-menu-sub-value\">{{ visibleColumns.length }}/{{ totalColumnCount }}</span>\n            </button>\n            <button *ngIf=\"showGroupBySection\" mat-menu-item [matMenuTriggerFor]=\"groupBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Group by</span>\n              <span class=\"view-menu-sub-value\">{{ activeGroupByLabel }}</span>\n            </button>\n            <button *ngIf=\"showAddSliceButton\" mat-menu-item [matMenuTriggerFor]=\"sliceBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">Slice by</span>\n              <span class=\"view-menu-sub-value\">{{ activeSliceByLabel }}</span>\n            </button>\n          </mat-menu>\n\n          <mat-menu #fieldsSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuBaseColumns\"\n                [disabled]=\"!column.optional && !allowColumnRemoval\"\n                (click)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                {{ colLabel(column) }}\n              </button>\n              <ng-container *ngIf=\"menuOptionalColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuOptionalColumns\"\n                  [disabled]=\"(isColumnVisible(column.key) && visibleColumns.length === 1) || getLazyColumnStatus(column.key) === 'loading'\"\n                  (click)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                  <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                  {{ colLabel(column) }}\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'loading'\" class=\"lazy-menu-spinner\">\u21BB</span>\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'error'\" class=\"lazy-menu-error\" title=\"Erreur de chargement\">\u26A0</span>\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n\n          <mat-menu #groupBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of groupByColumns\"\n                [class.active]=\"activeGroupByKey === col.key\"\n                (click)=\"onGroupByChange(activeGroupByKey === col.key ? null : col.key)\">\n                <span class=\"view-menu-check\">{{ activeGroupByKey === col.key ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                {{ colLabel(col) }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #sliceBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let s of staticSlicesForMenu\"\n                (click)=\"toggleStaticSlice(s.key)\">\n                <span class=\"view-menu-check\">{{ isStaticSliceVisible(s.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"s.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ s.icon }}</mat-icon>\n                {{ s.title }}\n              </button>\n              <ng-container *ngIf=\"allDynamicSliceColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of allDynamicSliceColumns\"\n                  [class.active]=\"isDynamicSliceActive(col.key)\"\n                  (click)=\"toggleDynamicSlice(col)\">\n                  <span class=\"view-menu-check\">{{ isDynamicSliceActive(col.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                  {{ colLabel(col) }}\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n\n      <div class=\"table-body-wrapper\">\n      <div class=\"table-body-scroll\" #tableBodyScroll>\n      <table mat-table matSort [dataSource]=\"tableDataSource\" class=\"jquery-table\"\n             [trackBy]=\"trackRowFn\"\n             [matSortActive]=\"_matSortActive\" [matSortDirection]=\"_matSortDirection\">\n        <ng-container *ngFor=\"let column of visibleColumns\" [matColumnDef]=\"column.key\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [mat-sort-header]=\"column.sortable !== false ? column.key : ''\"\n            [disabled]=\"column.sortable === false\"\n            [style.width]=\"column.width || null\"\n            [style.min-width]=\"column.width || null\"\n            [class.drag-enabled]=\"isColumnDragDropEnabled\"\n            [class.drop-target]=\"isHeaderDropTarget(column.key)\"\n            (dragover)=\"onHeaderDragOver(column.key, $event)\"\n            (drop)=\"onHeaderDrop(column.key, $event)\"\n          >\n            <div class=\"head-cell\">\n              <mat-icon *ngIf=\"column.icon\" class=\"head-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n              <span class=\"head-text\" [title]=\"column.header\">{{ column.header }}</span>\n              <span\n                *ngIf=\"isColumnDragDropEnabled\"\n                class=\"drag-handle\"\n                draggable=\"true\"\n                (dragstart)=\"onHeaderDragStart(column.key, $event)\"\n                (dragend)=\"onHeaderDragEnd()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>drag_indicator</mat-icon>\n              </span>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n            [style.width]=\"column.width || null\"\n            [style.min-width]=\"column.width || null\">\n            <ng-container *ngIf=\"getCellTemplate(column.key) as customTpl; else defaultCellTpl\">\n              <ng-container *ngTemplateOutlet=\"customTpl; context: { $implicit: row.__raw, index: row.__index }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultCellTpl>\n              <ng-container [ngSwitch]=\"column.lazy ? getLazyRenderType(row[column.key]) : 'value'\">\n                <span *ngSwitchCase=\"'loading'\" class=\"lazy-skeleton\"></span>\n                <button *ngSwitchCase=\"'error'\" type=\"button\" class=\"lazy-error-btn\" (click)=\"retryLazyColumn(column)\" title=\"Erreur de chargement \u2014 cliquer pour r\u00E9essayer\">\n                  <span class=\"lazy-error-icon\">\u26A0</span>\n                  <span class=\"lazy-error-label\">R\u00E9essayer</span>\n                </button>\n                <span *ngSwitchDefault class=\"cell-text\" [class.cell-empty]=\"isCellEmpty(row[column.key])\" [title]=\"asTitle(row[column.key])\">{{ isCellEmpty(row[column.key]) ? 'N/A' : row[column.key] }}</span>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"renderedColumns; sticky: true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: renderedColumns; when: !isGroupHeader\"\n          [attr.tabindex]=\"hasRowClickHandler ? 0 : null\"\n          [ngClass]=\"getRowClass(row)\"\n          [class.no-pointer]=\"!hasRowClickHandler\"\n          (click)=\"onRowClick(row, $event)\"\n          (keydown.enter)=\"onRowClick(row, null)\"\n          (keydown.space)=\"onRowClick(row, null)\"\n        ></tr>\n        <ng-container matColumnDef=\"__group_row\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"renderedColumns.length\" class=\"group-header-cell\">\n            <div class=\"group-header-label\">\n              <span class=\"group-chevron\" [class.collapsed]=\"isGroupCollapsed(row.__groupKey)\" *ngIf=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__'\">\u203A</span>\n              <span *ngIf=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__'\" class=\"group-key-label\">{{ row.__groupKey }}</span>\n              <span *ngIf=\"row.__groupKey === '__lazy_loading__'\" class=\"lazy-skeleton group-lazy-key-skeleton\"></span>\n              <span *ngIf=\"row.__groupKey === '__too_many_groups__'\" class=\"group-too-many-label\">\u26A0 Trop de groupes ({{ row.__groupCount }}) \u2014 affinez les donn\u00E9es ou choisissez une autre colonne</span>\n              <span class=\"group-count-badge\">{{ row.__groupCount }}</span>\n              <div class=\"group-pagination\" *ngIf=\"!isGroupCollapsed(row.__groupKey) && row.__groupPageCount > 1\" (click)=\"$event.stopPropagation()\">\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row.__groupPage === 0\" (click)=\"groupPageBack(row.__groupKey)\">\u2039</button>\n                <span class=\"group-page-info\">{{ row.__groupPage + 1 }}\u00A0/\u00A0{{ row.__groupPageCount }}</span>\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row.__groupPage >= row.__groupPageCount - 1\" (click)=\"groupPageForward(row.__groupKey, row.__groupCount)\">\u203A</button>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-row *matRowDef=\"let row; columns: ['__group_row']; when: isGroupHeader\"\n            class=\"group-header-row\"\n            [class.group-header-loading]=\"row.__groupKey === '__lazy_loading__'\"\n            [class.group-header-too-many]=\"row.__groupKey === '__too_many_groups__'\"\n            [attr.data-group-key]=\"row.__groupKey\"\n            (click)=\"row.__groupKey !== '__lazy_loading__' && row.__groupKey !== '__too_many_groups__' && toggleGroupCollapse(row.__groupKey)\"></tr>\n        <tr class=\"mat-mdc-row no-data-row\" *matNoDataRow>\n          <td class=\"mat-mdc-cell no-data-cell\" [attr.colspan]=\"renderedColumns.length\"></td>\n        </tr>\n      </table>\n      </div><!-- /table-body-scroll -->\n      <div class=\"table-body-overlay\" *ngIf=\"effectiveIsLoading || isEmpty\">\n        <span class=\"table-body-overlay-text\">{{ effectiveIsLoading ? loadingStateLabel : emptyStateLabel }}</span>\n      </div>\n      </div><!-- /table-body-wrapper -->\n\n      <div class=\"bottom-bar\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        ></mat-paginator>\n      </div>\n\n      <div class=\"group-bottom-bar\" *ngIf=\"activeGroupByKey\">\n        <div class=\"group-bottom-bar-container\">\n          <div class=\"group-bottom-bar-left\">\n            <button type=\"button\" class=\"group-reset-btn\" (click)=\"onGroupByChange(null)\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"group-reset-icon\">\n                <path d=\"M3 8a5 5 0 1 0 5-5 5 5 0 0 0-3.54 1.46L3 3\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M3 3v2.5H5.5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              Retirer le groupe\n            </button>\n            <div class=\"group-bar-separator\"></div>\n            <div class=\"group-sort-controls\">\n              <span class=\"group-sort-label\">Trier :</span>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'asc'\" (click)=\"onGroupSortToggle('asc')\" title=\"A \u2192 Z\">\n                <mat-icon>arrow_upward</mat-icon>\n              </button>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'desc'\" (click)=\"onGroupSortToggle('desc')\" title=\"Z \u2192 A\">\n                <mat-icon>arrow_downward</mat-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"mat-mdc-paginator-page-size\">\n            <div class=\"mat-mdc-paginator-page-size-label\">Lignes par groupe :</div>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mat-mdc-paginator-page-size-select\">\n              <mat-select\n                [(ngModel)]=\"groupPageSize\"\n                (ngModelChange)=\"onGroupPageSizeChange($event)\"\n                panelClass=\"mat-mdc-paginator-select-page-size group-page-size-panel\"\n                [panelWidth]=\"'auto'\"\n              >\n                <mat-select-trigger>{{ groupPageSize === 0 ? 'Toutes' : groupPageSize }}</mat-select-trigger>\n                <mat-option *ngFor=\"let opt of pageSizeOptionsGroupBy\" [value]=\"opt\">{{ opt }}</mat-option>\n                <mat-option [value]=\"0\">Toutes</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;max-height:100%;min-height:inherit;--jqt-title-color: #1f2937;--jqt-text-color: #111827;--jqt-text-secondary: #6b7280;--jqt-text-muted: #9ca3af;--jqt-surface-color: #ffffff;--jqt-surface-alt-color: #f9fafb;--jqt-row-hover-bg: #f3f4f6;--jqt-border-color: #e5e7eb;--jqt-group-bg: #eef2f7;--jqt-group-bg-hover: #e4ecf4;--jqt-group-accent: #94a3b8;--jqt-group-border: #d1d9e4;--jqt-primary-color: #1d4ed8;--jqt-danger-color: #dc2626;--jqt-danger-hover-bg: #fef2f2;--jqt-danger-border: #fca5a5;--jqt-header-bg: #f5f5f5;--jqt-header-text-color: #374151;--jqt-cell-bg: #ffffff;--jqt-footer-bg: #f5f5f5;--jqt-footer-text-color: #374151;--jqt-footer-icon-color: #374151}.jquery-table-wrapper{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;padding:2px 2px 0;box-sizing:border-box}.table-header{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px}.table-header h3{margin:0;font-size:20px;font-weight:600;color:var(--jqt-title-color)}.table-layout{display:grid;grid-template-columns:minmax(155px,190px) minmax(0,1fr);gap:12px;align-items:stretch;min-height:inherit;height:100%}.table-layout.no-slice{grid-template-columns:minmax(0,1fr)}.table-layout.slice-collapsed{grid-template-columns:40px minmax(0,1fr)}.table-shell{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:100%}.table-body-wrapper{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}.table-body-scroll{flex:1 1 0;overflow-y:auto;min-height:0;border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:8px 8px 0 0;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.table-body-scroll::-webkit-scrollbar{width:6px}.table-body-scroll::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.table-body-overlay{position:absolute;top:var(--actual-header-height, 56px);left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--jqt-surface-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);pointer-events:none}.table-body-overlay-text{font-size:14px;color:var(--jqt-text-secondary)}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}.table-toolbar-left{flex:1 1 auto;min-width:0}.table-toolbar-right{flex:0 0 auto}.search-input-wrapper{position:relative;display:inline-flex;align-items:center;width:100%;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 8px;box-sizing:border-box;gap:6px}.search-input-wrapper:focus-within{border-color:var(--jqt-text-muted)}.search-input-wrapper .search-icon{flex-shrink:0;width:14px;height:14px;color:var(--jqt-text-muted)}.search-input{flex:1;border:none;outline:none;font-size:13px;color:var(--jqt-text-color);background:transparent;padding:7px 0;min-width:0}.search-input::placeholder{color:var(--jqt-text-muted)}.search-count{flex-shrink:0;font-size:12px;font-weight:600;color:var(--jqt-text-secondary);background:var(--jqt-row-hover-bg);border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;line-height:18px}.search-clear-btn{background:none;border:none;cursor:pointer;color:var(--jqt-text-muted);font-size:16px;padding:0;line-height:1;flex-shrink:0}.search-clear-btn:hover{color:var(--jqt-text-color)}.view-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.view-btn:hover{border-color:var(--jqt-text-muted)}.view-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.group-header-row{cursor:pointer}:host ::ng-deep .jquery-table{border-spacing:0}:host ::ng-deep .group-header-row td{padding:0!important;background:var(--jqt-group-bg);border-bottom:1px solid var(--jqt-group-border);border-top:1px solid var(--jqt-group-border);border-left:3px solid var(--jqt-group-accent);position:sticky;top:var(--actual-header-height, 56px);z-index:2;box-shadow:-4px 0 0 0 var(--jqt-group-bg)}:host ::ng-deep .group-header-row:hover td{background:var(--jqt-group-bg-hover);box-shadow:-4px 0 0 0 var(--jqt-group-bg-hover)}:host ::ng-deep .group-header-loading td,:host ::ng-deep .group-header-loading:hover td,:host ::ng-deep .group-header-too-many td,:host ::ng-deep .group-header-too-many:hover td{cursor:default;background:var(--jqt-surface-alt-color)}.group-too-many-label{font-size:12px;font-weight:500;color:var(--jqt-warn-color, #b45309);font-style:italic}.group-header-cell{padding:0!important}.group-header-label{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--jqt-text-color);text-transform:uppercase;letter-spacing:.04em}.group-key-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count-badge{flex-shrink:0;font-size:11px;line-height:1;font-weight:600;color:#fff;background:var(--jqt-text-secondary, #6b7280);border-radius:10px;padding:3px 7px;min-width:20px;text-align:center;text-transform:none;letter-spacing:0}.group-pagination{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.group-page-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--jqt-border-color);border-radius:5px;background:var(--jqt-surface-color);cursor:pointer;font-size:14px;color:var(--jqt-text-color);line-height:1;padding:0 0 3px;text-transform:none;letter-spacing:0}.group-page-btn:hover:not(:disabled){border-color:var(--jqt-text-muted);background:var(--jqt-surface-alt-color)}.group-page-btn:disabled{opacity:.35;cursor:default}.group-page-info{font-size:11px;color:var(--jqt-text-secondary);min-width:36px;text-align:center;font-weight:500;text-transform:none;letter-spacing:0}.group-chevron{flex-shrink:0;font-size:14px;font-weight:700;padding-bottom:3px;transition:transform .15s ease;transform:rotate(90deg)}.group-chevron.collapsed{transform:rotate(0)}.no-data-row{cursor:default!important}.no-data-cell{padding:0!important;height:0!important;border:none!important}.jquery-table{width:100%;table-layout:fixed}:host ::ng-deep .mat-mdc-table{width:100%;background:transparent}:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .mat-mdc-header-row{background:var(--jqt-header-bg)}:host ::ng-deep .mat-mdc-header-cell{background:var(--jqt-header-bg);color:var(--jqt-header-text-color)}:host ::ng-deep .mat-mdc-row,:host ::ng-deep .mat-mdc-cell{background:var(--jqt-cell-bg)}:host ::ng-deep .mat-mdc-row{cursor:pointer;border-bottom-color:var(--jqt-border-color)}:host ::ng-deep .mat-mdc-row.no-pointer{cursor:auto}:host ::ng-deep .mat-mdc-row.no-data-row{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drag-enabled{-webkit-user-select:none;user-select:none}:host ::ng-deep .mat-mdc-header-cell.drag-enabled:active{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drop-target{background:var(--jqt-row-hover-bg)}.head-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}.drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--jqt-border-color);flex-shrink:0;padding:0 2px;border-radius:4px;line-height:1}.drag-handle:active{cursor:grabbing}.drag-handle:hover{color:var(--jqt-text-muted)}.drag-handle mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.head-icon{font-size:14px;width:14px;height:14px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.head-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.05em}.head-actions{display:inline-flex;align-items:center;gap:6px}.cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-empty{color:var(--jqt-empty-cell-color, #9ca3af);font-style:italic}.bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}:host ::ng-deep .bottom-bar mat-paginator{flex:1 1 auto;background:transparent;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-paginator-outer-container{display:flex}:host ::ng-deep .bottom-bar .mat-mdc-paginator-container{display:flex;align-items:center;flex-wrap:nowrap;min-height:0;height:var(--actual-header-height, 56px);padding:0 8px;box-sizing:border-box}:host ::ng-deep .bottom-bar .mat-mdc-paginator-range-label,:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button{color:var(--jqt-footer-icon-color);width:28px;height:28px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;--mdc-icon-button-state-layer-size: 28px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mdc-icon-button__state-layer{width:28px;height:28px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button:disabled{opacity:.35}:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}.group-bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}.group-bottom-bar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:var(--actual-header-height, 56px);padding:0 16px;gap:16px;width:100%;box-sizing:border-box}.group-bar-separator{width:1px;height:20px;background:#9ca3af;flex-shrink:0;margin:0 4px}.group-bottom-bar-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.group-sort-controls{display:flex;align-items:center;gap:2px}.group-sort-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap;margin-right:2px}.group-sort-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--jqt-footer-icon-color);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.group-sort-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.group-sort-btn:hover{background:#0000000a}.group-sort-btn.active{color:var(--jqt-primary-color, #1976d2);border-color:var(--jqt-primary-color, #1976d2);background:#1976d214}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size{display:flex;align-items:center;gap:8px}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .group-bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .group-bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .group-bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .group-bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .group-bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}:host ::ng-deep .group-bottom-bar .mat-mdc-select-arrow{color:var(--jqt-footer-text-color)}.group-reset-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);color:var(--jqt-text-secondary);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;flex-shrink:0}.group-reset-btn:hover{background:var(--jqt-danger-hover-bg);color:var(--jqt-danger-color);border-color:var(--jqt-danger-border)}.group-reset-icon{width:14px;height:14px;flex-shrink:0}::ng-deep .mat-mdc-paginator-select-page-size .mat-pseudo-checkbox{display:none!important}::ng-deep .group-page-size-panel{min-width:90px!important}::ng-deep .group-page-size-panel .mat-mdc-option{justify-content:center;min-height:40px}::ng-deep .group-page-size-panel .mdc-list-item__primary-text{text-align:center;width:100%}@media (max-width: 960px){.table-layout{grid-template-columns:1fr}}::ng-deep .view-menu-panel .mat-mdc-menu-panel{min-width:220px!important;overflow:visible!important}::ng-deep .view-menu-panel .mat-mdc-menu-content{padding:4px 0!important}::ng-deep .view-submenu-panel .mat-mdc-menu-panel{min-width:200px!important}::ng-deep .view-submenu-panel .mat-mdc-menu-content{padding:0!important}::ng-deep .view-menu-panel .view-menu-sub-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}::ng-deep .view-menu-panel .view-menu-sub-trigger .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;gap:0;overflow:hidden}::ng-deep .view-menu-sub-label{font-size:13px;font-weight:500;color:var(--jqt-text-color);flex:0 0 auto;white-space:nowrap;padding-right:8px}::ng-deep .view-menu-sub-value{font-size:12px;color:var(--jqt-text-secondary);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}::ng-deep .view-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}::ng-deep .view-submenu .view-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:var(--jqt-text-color);cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}::ng-deep .view-submenu .view-menu-item:hover{background:var(--jqt-row-hover-bg)}::ng-deep .view-submenu .view-menu-item.active{font-weight:600}::ng-deep .view-submenu .view-menu-item:disabled{opacity:.4;cursor:default}::ng-deep .view-menu-col-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-text-muted)}::ng-deep .view-menu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:var(--jqt-text-color)}::ng-deep .view-menu-separator{border:none;border-top:1px solid var(--jqt-border-color);margin:4px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.group-lazy-key-skeleton{flex:1 1 auto;min-width:80px;height:13px;border-radius:4px}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.lazy-error-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid #fca5a5;border-radius:4px;padding:2px 6px;cursor:pointer;color:#ef4444;font-size:12px;opacity:.85;transition:opacity .15s}.lazy-error-btn:hover{opacity:1;background:#fef2f2}.lazy-error-icon{font-size:12px}.lazy-error-label{font-size:11px;font-weight:500}::ng-deep .lazy-menu-spinner{display:inline-block;margin-left:auto;font-size:13px;color:var(--jqt-text-secondary);animation:lazy-spin 1s linear infinite}::ng-deep .lazy-menu-error{display:inline-block;margin-left:auto;font-size:13px;color:#ef4444}@keyframes lazy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ standalone: true, selector: 'jquery-table', imports: [CommonModule, FormsModule, MatTableModule, MatButtonModule, MatDividerModule, MatPaginatorModule, MatSortModule, MatMenuModule, MatIconModule, MatSelectModule, SlicePanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatPaginatorIntl, useFactory: getFrenchPaginatorIntl }], template: "<section class=\"jquery-table-wrapper\">\n  <header class=\"table-header\" *ngIf=\"showTitle\">\n    <h3>{{ title }}</h3>\n  </header>\n\n  <div\n    class=\"table-layout\"\n    [class.no-slice]=\"!_showSlicePanel || _slicePanelCollapsed\"\n  >\n    <slice-panel\n      [style.display]=\"!_showSlicePanel || _slicePanelCollapsed ? 'none' : null\"\n      [sliceConfigs]=\"_sliceConfigs\"\n      [columns]=\"_sliceColumns\"\n      [data]=\"_sliceData\"\n      [lazyData]=\"_lazyColumnData\"\n      [lazyStatus]=\"_lazyColumnStatus\"\n      [showToggle]=\"_sliceShowToggle\"\n      [collapsedByDefault]=\"_slicePanelCollapsed\"\n      (filterChange)=\"onSliceFilterChange($event)\"\n      (dynamicSliceKeysChange)=\"onDynamicSliceKeysChange($event)\"\n      (collapsedChange)=\"onSlicePanelCollapsedChange($event)\"\n    ></slice-panel>\n\n    <div class=\"table-shell\">\n      <div class=\"table-toolbar\" *ngIf=\"showToolbar\">\n        <div class=\"table-toolbar-left\">\n          <button\n            *ngIf=\"showSliceExpandBtn\"\n            type=\"button\"\n            class=\"slice-expand-btn\"\n            [title]=\"i18n.expandFilterTitle\"\n            (click)=\"expandSlicePanel()\"\n          ><mat-icon class=\"slice-expand-mat-icon\">menu</mat-icon></button>\n          <div *ngIf=\"showSearchBar\" class=\"search-input-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <path d=\"M13 13L17 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"search-input\"\n              type=\"text\"\n              [(ngModel)]=\"searchQuery\"\n              (ngModelChange)=\"onSearchChange()\"\n              [placeholder]=\"i18n.searchPlaceholder\"\n              autocomplete=\"off\"\n            />\n            <button *ngIf=\"searchQuery\" type=\"button\" class=\"search-clear-btn\" (click)=\"searchQuery = ''; onSearchChange()\">\u00D7</button>\n            <span class=\"search-count\">{{ filteredRowCount }}</span>\n          </div>\n        </div>\n        <div *ngIf=\"showViewButton\" class=\"table-toolbar-right\">\n          <button *ngIf=\"showViewButton\" type=\"button\" class=\"view-btn\" [matMenuTriggerFor]=\"viewMenu\" #viewMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"'View'\">\n            <mat-icon class=\"view-btn-icon\">settings</mat-icon>\n          </button>\n\n          <mat-menu #viewMenu=\"matMenu\" [panelClass]=\"'view-menu-panel'\">\n            <button *ngIf=\"showFields\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuFields }}</span>\n              <span class=\"view-menu-sub-value\">{{ visibleColumns.length }}/{{ totalColumnCount }}</span>\n            </button>\n            <button *ngIf=\"showGroupBySection\" mat-menu-item [matMenuTriggerFor]=\"groupBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuGroupBy }}</span>\n              <span class=\"view-menu-sub-value\">{{ activeGroupByLabel }}</span>\n            </button>\n            <button *ngIf=\"showAddSliceButton\" mat-menu-item [matMenuTriggerFor]=\"sliceBySubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.viewMenuSliceBy }}</span>\n              <span class=\"view-menu-sub-value\">{{ activeSliceByLabel }}</span>\n            </button>\n            <mat-divider *ngIf=\"showExportButton\" class=\"view-menu-export-divider\"></mat-divider>\n            <button *ngIf=\"showExportButton\" mat-menu-item type=\"button\" class=\"view-menu-export-item\"\n              (click)=\"onExport(); viewMenuTrigger.closeMenu()\">\n              <mat-icon class=\"view-menu-export-icon\">download</mat-icon>\n              <span class=\"view-menu-sub-label\">{{ i18n.exportButtonLabel }}</span>\n            </button>\n            <mat-divider *ngIf=\"showPreferencesMenu\" class=\"view-menu-export-divider\"></mat-divider>\n            <button *ngIf=\"showPreferencesMenu\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"view-menu-sub-trigger\">\n              <span class=\"view-menu-sub-label\">{{ i18n.preferencesMenuLabel }}</span>\n            </button>\n          </mat-menu>\n\n          <mat-menu #preferencesSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" (mousedown)=\"enterEditMode(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">edit</mat-icon>\n                {{ i18n.preferencesEdit }}\n              </button>\n              <button type=\"button\" class=\"view-menu-item\" (mousedown)=\"savePreferences(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">save</mat-icon>\n                {{ i18n.preferencesSave }}\n              </button>\n              <button type=\"button\" class=\"view-menu-item\" [disabled]=\"!hasSavedPreferences\" (mousedown)=\"clearPreferences(); viewMenuTrigger.closeMenu()\">\n                <mat-icon class=\"view-menu-col-icon\">delete_outline</mat-icon>\n                {{ i18n.preferencesClear }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #fieldsSubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuBaseColumns\"\n                [disabled]=\"!column.optional && !allowColumnRemoval\"\n                (mousedown)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                {{ colLabel(column) }}\n              </button>\n              <ng-container *ngIf=\"menuOptionalColumns.length > 0\">\n                <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let column of menuOptionalColumns\"\n                  [disabled]=\"(isColumnVisible(column.key) && visibleColumns.length === 1) || getLazyColumnStatus(column.key) === 'loading'\"\n                  (mousedown)=\"onColumnVisibilityChange(column, !isColumnVisible(column.key))\">\n                  <span class=\"view-menu-check\">{{ isColumnVisible(column.key) ? '\u2713' : '' }}</span>\n                  <mat-icon *ngIf=\"column.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n                  {{ colLabel(column) }}\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'loading'\" class=\"lazy-menu-spinner\">\u21BB</span>\n                  <span *ngIf=\"column.lazy && getLazyColumnStatus(column.key) === 'error'\" class=\"lazy-menu-error\" [title]=\"i18n.lazyErrorMenuTitle\">\u26A0</span>\n                </button>\n              </ng-container>\n            </div>\n          </mat-menu>\n\n          <mat-menu #groupBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let col of groupByColumns\"\n                [class.active]=\"activeGroupByKey === col.key\"\n                (mousedown)=\"onGroupByChange(activeGroupByKey === col.key ? null : col.key)\">\n                <span class=\"view-menu-check\">{{ activeGroupByKey === col.key ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"col.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ col.icon }}</mat-icon>\n                {{ colLabel(col) }}\n              </button>\n            </div>\n          </mat-menu>\n\n          <mat-menu #sliceBySubMenu=\"matMenu\" [panelClass]=\"'view-submenu-panel'\">\n            <div class=\"view-submenu\" (mousedown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"view-menu-item\" *ngFor=\"let item of sliceByMenuItems\"\n                [class.active]=\"isSliceMenuItemActive(item)\"\n                (mousedown)=\"onSliceMenuItemClick(item)\">\n                <span class=\"view-menu-check\">{{ isSliceMenuItemActive(item) ? '\u2713' : '' }}</span>\n                <mat-icon *ngIf=\"item.icon\" class=\"view-menu-col-icon\" fontSet=\"material-icons-outlined\">{{ item.icon }}</mat-icon>\n                {{ item.title }}\n              </button>\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n\n      <div class=\"table-body-wrapper\">\n\n      <!-- Banni\u00E8re message pr\u00E9f\u00E9rences -->\n      <div *ngIf=\"_preferencesMessage\" class=\"preferences-message\">\n        <mat-icon class=\"preferences-message-icon\">check_circle</mat-icon>\n        <span>{{ _preferencesMessage }}</span>\n      </div>\n\n      <!-- Bouton de confirmation du mode \u00E9dition -->\n      <button\n        *ngIf=\"_editMode\"\n        type=\"button\"\n        class=\"edit-confirm-btn\"\n        [title]=\"i18n.preferencesConfirmEdit\"\n        (click)=\"confirmEditMode()\"\n      >\n        <mat-icon>check_circle</mat-icon>\n      </button>\n      <div class=\"table-body-scroll\" #tableBodyScroll>\n      <table mat-table matSort [dataSource]=\"tableDataSource\" class=\"jquery-table\"\n             [style.min-width]=\"tableMinWidth\"\n             [trackBy]=\"trackRowFn\"\n             [matSortActive]=\"_matSortActive\" [matSortDirection]=\"_matSortDirection\">\n        <ng-container *ngFor=\"let column of visibleColumns\" [matColumnDef]=\"column.key\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            [mat-sort-header]=\"(!_editMode && column.sortable !== false) ? column.key : ''\"\n            [disabled]=\"_editMode || column.sortable === false\"\n            [style.width]=\"getColumnWidth(column.key)\"\n            [class.drag-enabled]=\"isColumnDragDropEnabled || _editMode\"\n            [class.drop-target]=\"isHeaderDropTarget(column.key)\"\n            [class.edit-mode-header]=\"_editMode\"\n            (dragover)=\"onHeaderDragOver(column.key, $event)\"\n            (drop)=\"onHeaderDrop(column.key, $event)\"\n          >\n            <div class=\"head-cell\">\n              <mat-icon *ngIf=\"column.icon\" class=\"head-icon\" fontSet=\"material-icons-outlined\">{{ column.icon }}</mat-icon>\n              <span class=\"head-text\" [title]=\"column.header\">{{ column.header }}</span>\n              <span\n                *ngIf=\"isColumnDragDropEnabled || _editMode\"\n                class=\"drag-handle\"\n                draggable=\"true\"\n                (dragstart)=\"onHeaderDragStart(column.key, $event)\"\n                (dragend)=\"onHeaderDragEnd()\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>drag_indicator</mat-icon>\n              </span>\n            </div>\n            <!-- Poign\u00E9e de resize (visible uniquement en mode \u00E9dition) -->\n            <span\n              *ngIf=\"_editMode\"\n              class=\"col-resize-handle\"\n              draggable=\"false\"\n              (mousedown)=\"onResizeStart(column.key, $event)\"\n            ></span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\"\n            [style.width]=\"getColumnWidth(column.key)\"\n            [class.edit-mode-cell]=\"_editMode\">\n            <ng-container *ngIf=\"!_editMode; else editModeCellTpl\">\n              <ng-container *ngIf=\"getCellTemplate(column.key) as customTpl; else defaultCellTpl\">\n                <ng-container *ngTemplateOutlet=\"customTpl; context: { $implicit: row[_ROW_RAW_KEY], index: row[_ROW_INDEX_KEY] }\"></ng-container>\n              </ng-container>\n              <ng-template #defaultCellTpl>\n                <ng-container [ngSwitch]=\"column.lazy ? getLazyRenderType(row[column.key]) : 'value'\">\n                  <span *ngSwitchCase=\"'loading'\" class=\"lazy-skeleton\"></span>\n                  <button *ngSwitchCase=\"'error'\" type=\"button\" class=\"lazy-error-btn\" (click)=\"retryLazyColumn(column)\" [title]=\"i18n.lazyErrorTitle\">\n                    <span class=\"lazy-error-icon\">\u26A0</span>\n                    <span class=\"lazy-error-label\">{{ i18n.lazyRetry }}</span>\n                  </button>\n                  <span *ngSwitchDefault class=\"cell-text\" [class.cell-empty]=\"isCellEmpty(row[column.key])\" [title]=\"asTitle(row[column.key])\">{{ isCellEmpty(row[column.key]) ? i18n.cellEmpty : row[column.key] }}</span>\n                </ng-container>\n              </ng-template>\n            </ng-container>\n            <ng-template #editModeCellTpl>\n              <span class=\"cell-text cell-edit-mode\" [title]=\"asTitle(row[column.key])\">{{ row[column.key] }}</span>\n            </ng-template>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"renderedColumns; sticky: true\"></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: renderedColumns; when: !isGroupHeader\"\n          [attr.tabindex]=\"hasRowClickHandler && !_editMode ? 0 : null\"\n          [ngClass]=\"getRowClass(row)\"\n          [class.no-pointer]=\"!hasRowClickHandler || _editMode\"\n          [class.edit-mode-row]=\"_editMode\"\n          (click)=\"!_editMode && onRowClick(row, $event)\"\n          (keydown.enter)=\"!_editMode && onRowClick(row, null)\"\n          (keydown.space)=\"!_editMode && onRowClick(row, null)\"\n        ></tr>\n        <ng-container [matColumnDef]=\"_GROUP_ROW_COLUMN\">\n          <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"renderedColumns.length\" class=\"group-header-cell\">\n            <div class=\"group-header-label\">\n              <span class=\"group-chevron\" [class.collapsed]=\"isGroupCollapsed(row[_ROW_GROUP_KEY])\" *ngIf=\"isNormalGroupRow(row)\">\u203A</span>\n              <span *ngIf=\"isNormalGroupRow(row)\" class=\"group-key-label\">{{ row[_ROW_GROUP_KEY] }}</span>\n              <span *ngIf=\"isGroupRowLoading(row)\" class=\"lazy-skeleton group-lazy-key-skeleton\"></span>\n              <span *ngIf=\"isGroupRowTooMany(row)\" class=\"group-too-many-label\">{{ i18n.groupTooMany(row[_ROW_GROUP_COUNT]) }}</span>\n              <span class=\"group-count-badge\">{{ row[_ROW_GROUP_COUNT] }}</span>\n              <div class=\"group-pagination\" *ngIf=\"!isGroupCollapsed(row[_ROW_GROUP_KEY]) && row[_ROW_GROUP_PAGE_COUNT] > 1\" (click)=\"$event.stopPropagation()\">\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row[_ROW_GROUP_PAGE] === 0\" (click)=\"groupPageBack(row[_ROW_GROUP_KEY])\">\u2039</button>\n                <span class=\"group-page-info\">{{ row[_ROW_GROUP_PAGE] + 1 }} / {{ row[_ROW_GROUP_PAGE_COUNT] }}</span>\n                <button type=\"button\" class=\"group-page-btn\" [disabled]=\"row[_ROW_GROUP_PAGE] >= row[_ROW_GROUP_PAGE_COUNT] - 1\" (click)=\"groupPageForward(row[_ROW_GROUP_KEY], row[_ROW_GROUP_COUNT])\">\u203A</button>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-row *matRowDef=\"let row; columns: [_GROUP_ROW_COLUMN]; when: isGroupHeader\"\n            class=\"group-header-row\"\n            [class.group-header-loading]=\"isGroupRowLoading(row)\"\n            [class.group-header-too-many]=\"isGroupRowTooMany(row)\"\n            [attr.data-group-key]=\"row[_ROW_GROUP_KEY]\"\n            (click)=\"onGroupHeaderClick(row)\"></tr>\n        <tr class=\"mat-mdc-row no-data-row\" *matNoDataRow>\n          <td class=\"mat-mdc-cell no-data-cell\" [attr.colspan]=\"renderedColumns.length\"></td>\n        </tr>\n      </table>\n      </div><!-- /table-body-scroll -->\n      <div class=\"table-body-overlay\" *ngIf=\"effectiveIsLoading || isEmpty\">\n        <span class=\"table-body-overlay-text\">{{ effectiveIsLoading ? loadingStateLabel : emptyStateLabel }}</span>\n      </div>\n      </div><!-- /table-body-wrapper -->\n\n      <div class=\"bottom-bar\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        ></mat-paginator>\n      </div>\n\n      <div class=\"group-bottom-bar\" *ngIf=\"activeGroupByKey\">\n        <div class=\"group-bottom-bar-container\">\n          <div class=\"group-bottom-bar-left\">\n            <button type=\"button\" class=\"group-reset-btn\" (click)=\"onGroupByChange(null)\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"group-reset-icon\">\n                <path d=\"M3 8a5 5 0 1 0 5-5 5 5 0 0 0-3.54 1.46L3 3\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M3 3v2.5H5.5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              {{ i18n.groupRemove }}\n            </button>\n            <div class=\"group-bar-separator\"></div>\n            <div class=\"group-sort-controls\">\n              <span class=\"group-sort-label\">{{ i18n.groupSortLabel }}</span>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'asc'\" (click)=\"onGroupSortToggle('asc')\" [title]=\"i18n.groupSortAsc\">\n                <mat-icon>arrow_upward</mat-icon>\n              </button>\n              <button type=\"button\" class=\"group-sort-btn\" [class.active]=\"groupSortOrder === 'desc'\" (click)=\"onGroupSortToggle('desc')\" [title]=\"i18n.groupSortDesc\">\n                <mat-icon>arrow_downward</mat-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"mat-mdc-paginator-page-size\">\n            <div class=\"mat-mdc-paginator-page-size-label\">{{ i18n.groupRowsPerGroup }}</div>\n            <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"mat-mdc-paginator-page-size-select\">\n              <mat-select\n                [(ngModel)]=\"groupPageSize\"\n                (ngModelChange)=\"onGroupPageSizeChange($event)\"\n                panelClass=\"mat-mdc-paginator-select-page-size group-page-size-panel\"\n                [panelWidth]=\"'auto'\"\n              >\n                <mat-select-trigger>{{ groupPageSize === 0 ? i18n.groupShowAll : groupPageSize }}</mat-select-trigger>\n                <mat-option *ngFor=\"let opt of pageSizeOptionsGroupBy\" [value]=\"opt\">{{ opt }}</mat-option>\n                <mat-option [value]=\"0\">{{ i18n.groupShowAll }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;max-height:100%;min-height:inherit;--jqt-title-color: #1f2937;--jqt-text-color: #111827;--jqt-text-secondary: #6b7280;--jqt-text-muted: #9ca3af;--jqt-surface-color: #ffffff;--jqt-surface-alt-color: #f9fafb;--jqt-row-hover-bg: #f3f4f6;--jqt-border-color: #e5e7eb;--jqt-group-bg: #eef2f7;--jqt-group-bg-hover: #e4ecf4;--jqt-group-accent: #94a3b8;--jqt-group-border: #d1d9e4;--jqt-primary-color: #1d4ed8;--jqt-danger-color: #dc2626;--jqt-danger-hover-bg: #fef2f2;--jqt-danger-border: #fca5a5;--jqt-header-bg: #f5f5f5;--jqt-header-text-color: #374151;--jqt-cell-bg: #ffffff;--jqt-footer-bg: #f5f5f5;--jqt-footer-text-color: #374151;--jqt-footer-icon-color: #374151}.jquery-table-wrapper{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;padding:2px 2px 0;box-sizing:border-box}.table-header{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px}.table-header h3{margin:0;font-size:20px;font-weight:600;color:var(--jqt-title-color)}.table-layout{display:grid;grid-template-columns:minmax(155px,190px) minmax(0,1fr);gap:12px;align-items:stretch;min-height:inherit;height:100%}.table-layout.no-slice{grid-template-columns:minmax(0,1fr)}.table-layout.slice-collapsed{grid-template-columns:40px minmax(0,1fr)}.table-shell{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:100%}.table-body-wrapper{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}.table-body-scroll{flex:1 1 0;overflow-x:auto;overflow-y:auto;min-height:0;border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:8px 8px 0 0;scrollbar-width:thin;scrollbar-color:var(--jqt-border-color) transparent}.table-body-scroll::-webkit-scrollbar{width:6px}.table-body-scroll::-webkit-scrollbar-thumb{background:var(--jqt-border-color);border-radius:4px}.table-body-overlay{position:absolute;top:var(--actual-header-height, 56px);left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--jqt-surface-color);border-right:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);pointer-events:none}.table-body-overlay-text{font-size:14px;color:var(--jqt-text-secondary)}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px}.table-toolbar-left{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px}.table-toolbar-right{flex:0 0 auto;display:flex;align-items:center;gap:6px}.search-input-wrapper{position:relative;display:inline-flex;align-items:center;flex:1 1 auto;min-width:0;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 8px;box-sizing:border-box;gap:6px}.search-input-wrapper:focus-within{border-color:var(--jqt-text-muted)}.search-input-wrapper .search-icon{flex-shrink:0;width:14px;height:14px;color:var(--jqt-text-muted)}.search-input{flex:1;border:none;outline:none;font-size:13px;color:var(--jqt-text-color);background:transparent;padding:7px 0;min-width:0}.search-input::placeholder{color:var(--jqt-text-muted)}.search-count{flex-shrink:0;font-size:12px;font-weight:600;color:var(--jqt-text-secondary);background:var(--jqt-row-hover-bg);border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;line-height:18px}.search-clear-btn{background:none;border:none;cursor:pointer;color:var(--jqt-text-muted);font-size:16px;padding:0;line-height:1;flex-shrink:0}.search-clear-btn:hover{color:var(--jqt-text-color)}.slice-expand-btn{flex-shrink:0;width:34px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--jqt-text-color);padding:0;line-height:1}.slice-expand-btn:hover{border-color:var(--jqt-text-muted)}.slice-expand-mat-icon{font-size:18px;width:18px;height:18px;line-height:1}.view-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.view-btn:hover{border-color:var(--jqt-text-muted)}.view-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.export-btn{display:inline-flex;align-items:center;gap:5px;height:34px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);padding:0 12px;font-size:13px;font-weight:500;color:var(--jqt-text-color);cursor:pointer;white-space:nowrap;box-sizing:border-box}.export-btn:hover{border-color:var(--jqt-text-muted)}.export-btn-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0}.view-menu-export-divider{margin:4px 0!important}.view-menu-export-item{display:flex;align-items:center;gap:6px;width:100%;padding:0 16px;height:40px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--jqt-text-color);text-align:left;box-sizing:border-box}.view-menu-export-item:hover{background:#0000000a}.view-menu-export-icon{font-size:16px;width:16px;height:16px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.edit-confirm-btn{position:absolute;top:10px;right:10px;z-index:200;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:#16a34a;cursor:pointer;box-shadow:0 2px 8px #00000040;transition:background .15s}.edit-confirm-btn mat-icon{color:#fff;font-size:22px;width:22px;height:22px}.edit-confirm-btn:hover{background:#15803d}.preferences-message{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;font-size:12px;color:#15803d}.preferences-message .preferences-message-icon{font-size:16px;width:16px;height:16px}:host ::ng-deep .edit-mode-header{background:#3b82f60a!important;cursor:grab!important;-webkit-user-select:none;user-select:none;overflow:visible!important}.col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize!important;background:#3b82f640;z-index:20}.col-resize-handle:hover{background:#3b82f6b3}.col-resize-handle:active{background:#3b82f6e6}:host ::ng-deep th.mat-mdc-header-cell{position:relative;overflow:visible!important}:host ::ng-deep .edit-mode-row{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.8}.cell-edit-mode{pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--jqt-text-muted)}.group-header-row{cursor:pointer}:host ::ng-deep .jquery-table{border-spacing:0}:host ::ng-deep .group-header-row td{padding:0!important;background:var(--jqt-group-bg);border-bottom:1px solid var(--jqt-group-border);border-top:1px solid var(--jqt-group-border);border-left:3px solid var(--jqt-group-accent);position:sticky;top:var(--actual-header-height, 56px);z-index:2;box-shadow:-4px 0 0 0 var(--jqt-group-bg)}:host ::ng-deep .group-header-row:hover td{background:var(--jqt-group-bg-hover);box-shadow:-4px 0 0 0 var(--jqt-group-bg-hover)}:host ::ng-deep .group-header-loading td,:host ::ng-deep .group-header-loading:hover td,:host ::ng-deep .group-header-too-many td,:host ::ng-deep .group-header-too-many:hover td{cursor:default;background:var(--jqt-surface-alt-color)}.group-too-many-label{font-size:12px;font-weight:500;color:var(--jqt-warn-color, #b45309);font-style:italic}.group-header-cell{padding:0!important}.group-header-label{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--jqt-text-color);text-transform:uppercase;letter-spacing:.04em}.group-key-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count-badge{flex-shrink:0;font-size:11px;line-height:1;font-weight:600;color:#fff;background:var(--jqt-text-secondary, #6b7280);border-radius:10px;padding:3px 7px;min-width:20px;text-align:center;text-transform:none;letter-spacing:0}.group-pagination{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}.group-page-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--jqt-border-color);border-radius:5px;background:var(--jqt-surface-color);cursor:pointer;font-size:14px;color:var(--jqt-text-color);line-height:1;padding:0 0 3px;text-transform:none;letter-spacing:0}.group-page-btn:hover:not(:disabled){border-color:var(--jqt-text-muted);background:var(--jqt-surface-alt-color)}.group-page-btn:disabled{opacity:.35;cursor:default}.group-page-info{font-size:11px;color:var(--jqt-text-secondary);min-width:36px;text-align:center;font-weight:500;text-transform:none;letter-spacing:0}.group-chevron{flex-shrink:0;font-size:14px;font-weight:700;padding-bottom:3px;transition:transform .15s ease;transform:rotate(90deg)}.group-chevron.collapsed{transform:rotate(0)}.no-data-row{cursor:default!important}.no-data-cell{padding:0!important;height:0!important;border:none!important}.jquery-table{width:100%;table-layout:fixed}:host ::ng-deep .mat-mdc-table{width:100%;background:transparent}:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mat-mdc-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .mat-mdc-header-row{background:var(--jqt-header-bg)}:host ::ng-deep .mat-mdc-header-cell{background:var(--jqt-header-bg);color:var(--jqt-header-text-color)}:host ::ng-deep .mat-mdc-row,:host ::ng-deep .mat-mdc-cell{background:var(--jqt-cell-bg)}:host ::ng-deep .mat-mdc-row{cursor:pointer;border-bottom-color:var(--jqt-border-color)}:host ::ng-deep .mat-mdc-row.no-pointer{cursor:auto}:host ::ng-deep .mat-mdc-row.no-data-row{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drag-enabled{-webkit-user-select:none;user-select:none}:host ::ng-deep .mat-mdc-header-cell.drag-enabled:active{cursor:default}:host ::ng-deep .mat-mdc-header-cell.drop-target{background:var(--jqt-row-hover-bg)}.head-cell{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}.drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--jqt-border-color);flex-shrink:0;padding:0 2px;border-radius:4px;line-height:1}.drag-handle:active{cursor:grabbing}.drag-handle:hover{color:var(--jqt-text-muted)}.drag-handle mat-icon{font-size:16px;width:16px;height:16px;line-height:1}.head-icon{font-size:14px;width:14px;height:14px;line-height:1;flex-shrink:0;color:var(--jqt-text-muted)}.head-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.05em}.head-actions{display:inline-flex;align-items:center;gap:6px}.cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-empty{color:var(--jqt-empty-cell-color, #9ca3af);font-style:italic}.bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}:host ::ng-deep .bottom-bar mat-paginator{flex:1 1 auto;background:transparent;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-paginator-outer-container{display:flex}:host ::ng-deep .bottom-bar .mat-mdc-paginator-container{display:flex;align-items:center;flex-wrap:nowrap;min-height:0;height:var(--actual-header-height, 56px);padding:0 8px;box-sizing:border-box}:host ::ng-deep .bottom-bar .mat-mdc-paginator-range-label,:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button{color:var(--jqt-footer-icon-color);width:28px;height:28px;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;--mdc-icon-button-state-layer-size: 28px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple,:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mdc-icon-button__state-layer{width:28px;height:28px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .bottom-bar .mat-mdc-icon-button .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}:host ::ng-deep .bottom-bar .mat-mdc-icon-button:disabled{opacity:.35}:host ::ng-deep .bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}.group-bottom-bar{display:flex;align-items:center;flex:0 0 auto;background:var(--jqt-footer-bg);border-top:1px solid var(--jqt-border-color);border-right:1px solid var(--jqt-border-color);border-bottom:1px solid var(--jqt-border-color);border-left:1px solid var(--jqt-border-color);border-radius:0 0 8px 8px}.group-bottom-bar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:var(--actual-header-height, 56px);padding:0 16px;gap:16px;width:100%;box-sizing:border-box}.group-bar-separator{width:1px;height:20px;background:#9ca3af;flex-shrink:0;margin:0 4px}.group-bottom-bar-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.group-sort-controls{display:flex;align-items:center;gap:2px}.group-sort-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap;margin-right:2px}.group-sort-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--jqt-footer-icon-color);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.group-sort-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.group-sort-btn:hover{background:#0000000a}.group-sort-btn.active{color:var(--jqt-primary-color, #1976d2);border-color:var(--jqt-primary-color, #1976d2);background:#1976d214}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size{display:flex;align-items:center;gap:8px}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-label{font-size:12px;color:var(--jqt-footer-text-color);white-space:nowrap}:host ::ng-deep .group-bottom-bar .mat-mdc-paginator-page-size-select{width:72px;font-size:12px}:host ::ng-deep .group-bottom-bar .mat-mdc-text-field-wrapper{padding:0 8px}:host ::ng-deep .group-bottom-bar .mdc-text-field--outlined{height:28px}:host ::ng-deep .group-bottom-bar .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0;min-height:0;height:28px;display:flex;align-items:center}:host ::ng-deep .group-bottom-bar .mat-mdc-select-value-text{font-size:12px;color:var(--jqt-text-color)}:host ::ng-deep .group-bottom-bar .mdc-notched-outline__leading,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__notch,:host ::ng-deep .group-bottom-bar .mdc-notched-outline__trailing{border-color:var(--jqt-border-color)}:host ::ng-deep .group-bottom-bar .mat-mdc-select-arrow{color:var(--jqt-footer-text-color)}.group-reset-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--jqt-border-color);border-radius:8px;background:var(--jqt-surface-color);color:var(--jqt-text-secondary);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;flex-shrink:0}.group-reset-btn:hover{background:var(--jqt-danger-hover-bg);color:var(--jqt-danger-color);border-color:var(--jqt-danger-border)}.group-reset-icon{width:14px;height:14px;flex-shrink:0}::ng-deep .mat-mdc-paginator-select-page-size .mat-pseudo-checkbox{display:none!important}::ng-deep .group-page-size-panel{min-width:90px!important}::ng-deep .group-page-size-panel .mat-mdc-option{justify-content:center;min-height:40px}::ng-deep .group-page-size-panel .mdc-list-item__primary-text{text-align:center;width:100%}@media (max-width: 960px){.table-layout{grid-template-columns:1fr}}::ng-deep .view-menu-panel .mat-mdc-menu-panel{min-width:220px!important;overflow:visible!important}::ng-deep .view-menu-panel .mat-mdc-menu-content{padding:4px 0!important}::ng-deep .view-submenu-panel .mat-mdc-menu-panel{min-width:200px!important}::ng-deep .view-submenu-panel .mat-mdc-menu-content{padding:0!important}::ng-deep .view-menu-panel .view-menu-sub-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}::ng-deep .view-menu-panel .view-menu-sub-trigger .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;gap:0;overflow:hidden}::ng-deep .view-menu-sub-label{font-size:13px;font-weight:500;color:var(--jqt-text-color);flex:0 0 auto;white-space:nowrap;padding-right:8px}::ng-deep .view-menu-sub-value{font-size:12px;color:var(--jqt-text-secondary);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}::ng-deep .view-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}::ng-deep .view-submenu .view-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:var(--jqt-text-color);cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}::ng-deep .view-submenu .view-menu-item:hover{background:var(--jqt-row-hover-bg)}::ng-deep .view-submenu .view-menu-item.active{font-weight:600}::ng-deep .view-submenu .view-menu-item:disabled{opacity:.4;cursor:default}::ng-deep .view-menu-col-icon{flex-shrink:0;font-size:14px!important;width:14px!important;height:14px!important;color:var(--jqt-text-muted)}::ng-deep .view-menu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:var(--jqt-text-color)}::ng-deep .view-menu-separator{border:none;border-top:1px solid var(--jqt-border-color);margin:4px 0}.lazy-skeleton{display:block;height:12px;width:70%;border-radius:4px;background:linear-gradient(90deg,var(--jqt-border-color) 25%,var(--jqt-surface-alt-color) 50%,var(--jqt-border-color) 75%);background-size:200% 100%;animation:lazy-shimmer 1.4s ease-in-out infinite}.group-lazy-key-skeleton{flex:1 1 auto;min-width:80px;height:13px;border-radius:4px}@keyframes lazy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.lazy-error-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid #fca5a5;border-radius:4px;padding:2px 6px;cursor:pointer;color:#ef4444;font-size:12px;opacity:.85;transition:opacity .15s}.lazy-error-btn:hover{opacity:1;background:#fef2f2}.lazy-error-icon{font-size:12px}.lazy-error-label{font-size:11px;font-weight:500}::ng-deep .lazy-menu-spinner{display:inline-block;margin-left:auto;font-size:13px;color:var(--jqt-text-secondary);animation:lazy-spin 1s linear infinite}::ng-deep .lazy-menu-error{display:inline-block;margin-left:auto;font-size:13px;color:#ef4444}@keyframes lazy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], dataSource: [{
@@ -1572,6 +2529,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columnsConfig: [{
                 type: Input
+            }], view: [{
+                type: Input
             }], columnLabels: [{
                 type: Input
             }], isLoading: [{
@@ -1586,6 +2545,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], rowSelected: [{
                 type: Output
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], groupByChange: [{
+                type: Output
+            }], columnsChange: [{
+                type: Output
             }], paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -1614,5 +2583,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JqtCellDefDirective, SlicePanelComponent, TableComponent };
+export { JQT_I18N, JQT_I18N_DEFAULTS, JqtCellDefDirective, SlicePanelComponent, TableComponent, col };
 //# sourceMappingURL=oneteme-jquery-table.mjs.map