@oneteme/jquery-table 0.0.8 → 0.0.10

package/fesm2022/oneteme-jquery-table.mjs

@@ -1,28 +1,27 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, EventEmitter, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, Output, ViewChild, ElementRef, NgZone, ContentChildren } from '@angular/core';
+import { InjectionToken, Directive, Input, EventEmitter, Component, ChangeDetectionStrategy, Output, inject, ChangeDetectorRef, ElementRef, NgZone, ViewChild, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
+import * as i2 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 * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i5 from '@angular/material/paginator';
+import * as i4 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i10 from '@angular/material/select';
+import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@angular/material/sort';
+import * as i5 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 '@oneteme/jquery-core';
-import * as i9 from '@angular/material/form-field';
-import * as i11 from '@angular/material/core';
+import { Subject, takeUntil } from 'rxjs';
+import { OrganizerButtonComponent, OrganizerFacade, GroupByManager, LazyFieldManager, SlicePanelComponent } from '@oneteme/jquery-organizer';
+export { OrganizerButtonComponent, SlicePanelComponent } from '@oneteme/jquery-organizer';
+import * as i7 from '@angular/material/form-field';
+import * as i9 from '@angular/material/core';
 
 /**
  * Raccourci pour déclarer une colonne de base.
@@ -65,7 +64,7 @@ const JQT_I18N_DEFAULTS = {
     filterEmptyState: 'Aucune donnée',
     exportButtonLabel: 'Exporter',
     preferencesMenuLabel: 'Préférences',
-    preferencesEdit: 'Éditeur',
+    preferencesEdit: 'Éditer',
     preferencesSave: 'Sauvegarder',
     preferencesClear: 'Réinitialiser',
     preferencesSavedMessage: 'Configuration enregistrée. Vous pouvez la réinitialiser à tout moment via Préférences → Réinitialiser.',
@@ -111,476 +110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['jqtCellDef']
             }] } });
 
-const EMPTY_CATEGORY_KEY = '__empty__';
-const EMPTY_CATEGORY_LABEL = 'Vide';
-class SlicePanelComponent {
-    constructor() {
-        this.sliceConfigs = [];
-        this.columns = [];
-        this.data = [];
-        this.lazyData = new Map();
-        this.lazyStatus = new Map();
-        this.showToggle = true;
-        this.showCounts = true;
-        this.collapsedByDefault = false;
-        this.alwaysShow = false;
-        this.filterChange = new EventEmitter();
-        this.activeKeysChange = new EventEmitter();
-        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 = [];
-        // ── Cache
-        this._cachedSlices = [];
-        this._countCache = new Map();
-        this.trackBySliceIndex = (index, _) => index;
-        this.trackByCategoryKey = (_, cat) => cat.key;
-    }
-    // ── Lifecycle
-    ngOnInit() {
-        this.isCollapsed = this.collapsedByDefault;
-    }
-    ngOnChanges(changes) {
-        if (changes['sliceConfigs'] || changes['data'] || changes['columns'] || changes['lazyData'] || changes['lazyStatus']) {
-            this._refreshDynamicSlices();
-            this._rebuildCache();
-            const shouldReemitFilter = !!(changes['data'] || changes['columns'] || changes['lazyData'] || changes['lazyStatus']);
-            const hasActiveFilters = [...this.activeKeysBySlice.values()].some(s => s.size > 0);
-            if (hasActiveFilters && shouldReemitFilter) {
-                this._emitFilter();
-            }
-            this._cdr.markForCheck();
-        }
-    }
-    // ── Computed
-    get showPanel() {
-        const hasCfg = (this.sliceConfigs || []).length > 0 || this._dynamicSlices.length > 0;
-        if (this.alwaysShow)
-            return hasCfg;
-        return hasCfg && (this.data?.length ?? 0) > 0;
-    }
-    get slices() {
-        return this._cachedSlices;
-    }
-    get staticSliceCount() {
-        return (this.sliceConfigs || []).length;
-    }
-    get staticSlicesForMenu() {
-        return (this.sliceConfigs || [])
-            .filter((s) => !!s.columnKey)
-            .map((s) => ({ key: s.columnKey, title: s.title || s.columnKey }));
-    }
-    get activeDynamicSliceColumns() {
-        return this._dynamicSlices
-            .map((d) => (this.columns || []).find((c) => c.key === d.key))
-            .filter((c) => !!c);
-    }
-    get availableColumnsForDynamicSlice() {
-        const dynamicKeys = new Set(this._dynamicSlices.map((d) => d.key));
-        const staticKeys = new Set((this.sliceConfigs || []).map((s) => s.columnKey).filter((k) => !!k));
-        const existingKeys = new Set([...dynamicKeys, ...staticKeys]);
-        const seen = new Set();
-        return (this.columns || []).filter((c) => {
-            if (existingKeys.has(c.key) || seen.has(c.key))
-                return false;
-            seen.add(c.key);
-            return true;
-        });
-    }
-    get activeSliceByLabel() {
-        const staticActiveCount = (this.sliceConfigs || []).length;
-        const total = staticActiveCount + this._dynamicSlices.length;
-        if (total === 0)
-            return 'Aucun';
-        if (total === 1) {
-            const first = (this.sliceConfigs || [])[0];
-            if (first)
-                return first.title || first.columnKey || '1';
-            return this.activeDynamicSliceColumns[0]?.header || '1';
-        }
-        return `${total} actifs`;
-    }
-    // ── UI state
-    isSliceCollapsed(sliceIndex) {
-        if (this._cachedSlices.length === 1) {
-            return this._expandedSlices.has(-1 - sliceIndex);
-        }
-        return !this._expandedSlices.has(sliceIndex);
-    }
-    toggleSliceCollapse(sliceIndex) {
-        if (this.slices.length === 1) {
-            const closedKey = -1 - sliceIndex;
-            if (this._expandedSlices.has(closedKey)) {
-                this._expandedSlices.delete(closedKey);
-            }
-            else {
-                this._expandedSlices.add(closedKey);
-                this._scrollSliceTitleIntoView(sliceIndex);
-            }
-        }
-        else {
-            if (this._expandedSlices.has(sliceIndex)) {
-                this._expandedSlices.delete(sliceIndex);
-            }
-            else {
-                this._expandedSlices.clear();
-                this._expandedSlices.add(sliceIndex);
-                this._scrollSliceTitleIntoView(sliceIndex);
-            }
-        }
-        this._cdr.markForCheck();
-    }
-    togglePanel() {
-        this.isCollapsed = !this.isCollapsed;
-        this.collapsedChange.emit(this.isCollapsed);
-        this._cdr.markForCheck();
-    }
-    isSliceDynamic(sliceIndex) {
-        return sliceIndex >= this.staticSliceCount;
-    }
-    isSliceLoading(sliceIndex) {
-        const staticSlice = (this.sliceConfigs || [])[sliceIndex];
-        if (staticSlice?.columnKey) {
-            const colDef = (this.columns || []).find(c => c.key === staticSlice.columnKey);
-            if (colDef?.lazy) {
-                const status = this.lazyStatus.get(staticSlice.columnKey) ?? 'idle';
-                return status === 'loading' || status === 'idle';
-            }
-            return false;
-        }
-        const key = this._getDynamicSliceColumnKey(sliceIndex);
-        if (!key)
-            return false;
-        const colDef = (this.columns || []).find(c => c.key === key);
-        if (!colDef?.lazy)
-            return false;
-        const status = this.lazyStatus.get(key) ?? 'idle';
-        return status === 'loading' || status === 'idle';
-    }
-    isStaticSliceVisible(_columnKey) {
-        return true;
-    }
-    toggleStaticSlice(_columnKey) {
-        // Délégué à table.component via _staticSliceHiddenKeys — ne rien faire ici.
-    }
-    // ── Selection
-    getSliceIcon(slice) {
-        if (slice.icon)
-            return slice.icon;
-        if (slice.columnKey) {
-            return (this.columns || []).find(c => c.key === slice.columnKey)?.icon;
-        }
-        return undefined;
-    }
-    isSliceCategoryActive(sliceIndex, categoryKey) {
-        return this.activeKeysBySlice.get(sliceIndex)?.has(categoryKey) ?? false;
-    }
-    isSliceAllActive(sliceIndex) {
-        return !this.activeKeysBySlice.has(sliceIndex) || this.activeKeysBySlice.get(sliceIndex).size === 0;
-    }
-    sliceCategoryCount(sliceIndex, categoryKey) {
-        const cacheKey = `${sliceIndex}:${categoryKey}`;
-        if (this._countCache.has(cacheKey)) {
-            return this._countCache.get(cacheKey);
-        }
-        const slice = this._cachedSlices[sliceIndex];
-        if (!slice)
-            return 0;
-        const category = (slice.categories || []).find((c) => c.key === categoryKey);
-        const count = category ? (this.data || []).filter((row) => category.filter(row)).length : 0;
-        this._countCache.set(cacheKey, count);
-        return count;
-    }
-    isSliceEmpty(sliceIndex) {
-        const slice = this._cachedSlices[sliceIndex];
-        if (!slice)
-            return true;
-        return (slice.categories || []).every(c => this.sliceCategoryCount(sliceIndex, c.key) === 0);
-    }
-    onSliceCategorySelected(sliceIndex, categoryKey) {
-        const slice = this.slices[sliceIndex];
-        if (!slice)
-            return;
-        if (!this.activeKeysBySlice.has(sliceIndex)) {
-            this.activeKeysBySlice.set(sliceIndex, new Set());
-        }
-        const activeKeys = this.activeKeysBySlice.get(sliceIndex);
-        if (slice.multiSelect === false) {
-            if (activeKeys.has(categoryKey)) {
-                activeKeys.clear();
-            }
-            else {
-                activeKeys.clear();
-                activeKeys.add(categoryKey);
-            }
-        }
-        else {
-            if (activeKeys.has(categoryKey)) {
-                activeKeys.delete(categoryKey);
-            }
-            else {
-                activeKeys.add(categoryKey);
-            }
-        }
-        this._emitFilter();
-        this._cdr.markForCheck();
-    }
-    onSliceAllSelected(sliceIndex) {
-        if (this.activeKeysBySlice.has(sliceIndex)) {
-            this.activeKeysBySlice.get(sliceIndex).clear();
-        }
-        this._emitFilter();
-        this._cdr.markForCheck();
-    }
-    /** 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 = {
-            title: column.header,
-            columnKey: column.key,
-            categories: distinctValues.map((v) => this._buildCategoryFromValue(column.key, v)),
-        };
-        this._dynamicSlices = [...this._dynamicSlices, { key: column.key, slice: newSlice }];
-        this._rebuildCache();
-        this.dynamicSliceKeysChange.emit(this._dynamicSlices.map(d => d.key));
-        this._emitFilter();
-        this._cdr.markForCheck();
-    }
-    removeDynamicSlice(sliceIndex) {
-        const dynamicIndex = sliceIndex - this.staticSliceCount;
-        if (dynamicIndex < 0)
-            return;
-        const newActiveKeys = new Map();
-        this.activeKeysBySlice.forEach((keys, idx) => {
-            if (idx < sliceIndex)
-                newActiveKeys.set(idx, keys);
-            else if (idx > sliceIndex)
-                newActiveKeys.set(idx - 1, keys);
-        });
-        this.activeKeysBySlice = newActiveKeys;
-        this._dynamicSlices = this._dynamicSlices.filter((_, i) => i !== dynamicIndex);
-        this._rebuildCache();
-        this.dynamicSliceKeysChange.emit(this._dynamicSlices.map(d => d.key));
-        this._emitFilter();
-        this._cdr.markForCheck();
-    }
-    removeDynamicSliceByKey(key) {
-        const dynamicIndex = this._dynamicSlices.findIndex((d) => d.key === key);
-        if (dynamicIndex < 0)
-            return;
-        const sliceIndex = this.staticSliceCount + dynamicIndex;
-        this.removeDynamicSlice(sliceIndex);
-    }
-    // ── Private helpers
-    _emitFilter() {
-        const slices = this.slices;
-        const activeKeysBySlice = this.activeKeysBySlice;
-        this.activeKeysChange.emit(slices.map((_, i) => {
-            const keys = activeKeysBySlice.get(i);
-            return keys ? [...keys] : [];
-        }));
-        const pred = (row) => slices.every((slice, sliceIndex) => {
-            const activeKeys = activeKeysBySlice.get(sliceIndex);
-            if (!activeKeys || activeKeys.size === 0)
-                return true;
-            return [...activeKeys].some((key) => {
-                const category = (slice.categories || []).find((c) => c.key === key);
-                if (!category)
-                    return 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);
-    }
-    _getDynamicSliceColumnKey(sliceIndex) {
-        const dynamicIndex = sliceIndex - this.staticSliceCount;
-        return this._dynamicSlices[dynamicIndex]?.key ?? null;
-    }
-    _getSliceIdentity(slice, fallbackIndex) {
-        if (slice.columnKey) {
-            return `column:${slice.columnKey}`;
-        }
-        if (slice.title) {
-            return `title:${slice.title}`;
-        }
-        const categoryKeys = (slice.categories || []).map((category) => category.key).join('|');
-        return `index:${fallbackIndex}|categories:${categoryKeys}`;
-    }
-    _materializeSlice(slice) {
-        if (!slice.columnKey || (slice.categories && slice.categories.length > 0)) {
-            return slice;
-        }
-        const col = (this.columns || []).find(c => c.key === slice.columnKey);
-        const isLazy = !!col?.lazy;
-        if (isLazy && this.lazyStatus.get(slice.columnKey) !== 'loaded') {
-            return { ...slice, categories: [] };
-        }
-        if (slice.bucket) {
-            const distinctValues = [...new Set((this.data || []).map(slice.bucket))].sort();
-            return {
-                ...slice,
-                categories: distinctValues.map((v) => ({
-                    key: v,
-                    label: v,
-                    filter: (row) => slice.bucket(row) === v,
-                })),
-            };
-        }
-        const distinctValues = this._computeDistinctValues(slice.columnKey);
-        return {
-            ...slice,
-            categories: distinctValues.map((v) => this._buildCategoryFromValue(slice.columnKey, v)),
-        };
-    }
-    _buildCategoryFromValue(columnKey, v) {
-        if (v === EMPTY_CATEGORY_KEY) {
-            return {
-                key: EMPTY_CATEGORY_KEY,
-                label: EMPTY_CATEGORY_LABEL,
-                filter: (row) => {
-                    const val = this._getLazyAwareValue(columnKey, row);
-                    return val == null || val === '';
-                },
-            };
-        }
-        return {
-            key: v,
-            label: v,
-            filter: (row) => String(this._getLazyAwareValue(columnKey, row) ?? '') === v,
-        };
-    }
-    _computeDistinctValues(columnKey) {
-        const rawValues = (this.data || []).map((row) => {
-            const val = this._getLazyAwareValue(columnKey, row);
-            return val != null && val !== '' ? String(val) : null;
-        });
-        const distinct = [...new Set(rawValues.filter((v) => v !== null))].sort();
-        if (rawValues.some(v => v === null)) {
-            distinct.push(EMPTY_CATEGORY_KEY);
-        }
-        return distinct;
-    }
-    _getLazyAwareValue(columnKey, row) {
-        const colDef = (this.columns || []).find(c => c.key === columnKey);
-        if (colDef?.lazy) {
-            return this.lazyData.get(columnKey)?.get(row) ?? null;
-        }
-        if (colDef?.value) {
-            return colDef.value(row, 0);
-        }
-        return row[columnKey];
-    }
-    _rebuildCache() {
-        const previousSlices = this._cachedSlices;
-        const previousActiveKeys = this.activeKeysBySlice;
-        const allSlices = [...(this.sliceConfigs || []), ...this._dynamicSlices.map((d) => d.slice)];
-        this._cachedSlices = allSlices.map((slice) => this._materializeSlice(slice));
-        const previousKeysByIdentity = new Map();
-        previousSlices.forEach((slice, index) => {
-            const activeKeys = previousActiveKeys.get(index);
-            if (!activeKeys || activeKeys.size === 0)
-                return;
-            previousKeysByIdentity.set(this._getSliceIdentity(slice, index), new Set(activeKeys));
-        });
-        const nextActiveKeys = new Map();
-        this._cachedSlices.forEach((slice, index) => {
-            const previousKeys = previousKeysByIdentity.get(this._getSliceIdentity(slice, index));
-            if (!previousKeys || previousKeys.size === 0)
-                return;
-            const availableKeys = new Set((slice.categories || []).map((category) => category.key));
-            const matchingKeys = [...previousKeys].filter((key) => availableKeys.has(key));
-            if (matchingKeys.length > 0) {
-                nextActiveKeys.set(index, new Set(matchingKeys));
-            }
-        });
-        this.activeKeysBySlice = nextActiveKeys;
-        this._countCache.clear();
-    }
-    _refreshDynamicSlices() {
-        this._dynamicSlices = this._dynamicSlices.map(({ key, slice }) => {
-            const distinctValues = this._computeDistinctValues(key);
-            return {
-                key,
-                slice: {
-                    ...slice,
-                    categories: distinctValues.map((v) => this._buildCategoryFromValue(key, v)),
-                },
-            };
-        });
-    }
-    _scrollSliceTitleIntoView(sliceIndex) {
-        setTimeout(() => {
-            const container = this.slicePanelBodyRef?.nativeElement;
-            if (!container)
-                return;
-            const row = container.querySelector(`[data-slice-index="${sliceIndex}"]`);
-            if (!row)
-                return;
-            row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }, 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        {{ 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 ? 'filter_list' : 'filter_list_off' }}</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        {{ 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 ? 'filter_list' : 'filter_list_off' }}</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: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], lazyData: [{
-                type: Input
-            }], lazyStatus: [{
-                type: Input
-            }], showToggle: [{
-                type: Input
-            }], showCounts: [{
-                type: Input
-            }], collapsedByDefault: [{
-                type: Input
-            }], alwaysShow: [{
-                type: Input
-            }], filterChange: [{
-                type: Output
-            }], activeKeysChange: [{
-                type: Output
-            }], dynamicSliceKeysChange: [{
-                type: Output
-            }], collapsedChange: [{
-                type: Output
-            }], slicePanelBodyRef: [{
-                type: ViewChild,
-                args: ['slicePanelBody']
-            }] } });
-
 /** Traductions françaises du paginator Material. */
 function getFrenchPaginatorIntl() {
     const intl = new MatPaginatorIntl();
@@ -639,435 +168,6 @@ 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,
-            userCustomized: false,
-        };
-        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();
-        if (!this.groupBy.userCustomized) {
-            this.groupBy.activeKey = panelConfig.defaultGroupBy ?? null;
-        }
-    }
-    // ── 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, groupBy par défaut, pas de dynamic slices. */
-    resetToDefaults() {
-        this.fields.userCustomized = false;
-        this.groupBy.userCustomized = false;
-        this._refreshDefaultColumns();
-        this.groupBy.activeKey = this._panelConfig.defaultGroupBy ?? 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.groupBy.userCustomized = true;
-        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.
@@ -1106,105 +206,6 @@ class TablePreferencesManager {
     }
 }
 
-/**
- * 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
  *
@@ -1250,6 +251,83 @@ class ExportManager {
     }
 }
 
+/**
+ * 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__';
+
+class OrganizerButtonWrapperComponent {
+    constructor() {
+        this.hideMenuValues = false;
+        this.viewChange = new EventEmitter();
+        this.sliceStateChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizerButtonWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrganizerButtonWrapperComponent, isStandalone: true, selector: "table-organizer-button", inputs: { config: "config", state: "state", hideMenuValues: "hideMenuValues" }, outputs: { viewChange: "viewChange", sliceStateChange: "sliceStateChange" }, ngImport: i0, template: `
+    <organizer-button
+      [config]="config"
+      [state]="state"
+      [hideMenuValues]="hideMenuValues"
+      (viewChange)="viewChange.emit($event)"
+      (sliceStateChange)="sliceStateChange.emit($event)">
+    </organizer-button>
+  `, isInline: true, dependencies: [{ kind: "component", type: OrganizerButtonComponent, selector: "organizer-button", inputs: ["config", "state", "hideMenuValues"], outputs: ["viewChange", "sliceStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizerButtonWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'table-organizer-button',
+                    imports: [OrganizerButtonComponent],
+                    template: `
+    <organizer-button
+      [config]="config"
+      [state]="state"
+      [hideMenuValues]="hideMenuValues"
+      (viewChange)="viewChange.emit($event)"
+      (sliceStateChange)="sliceStateChange.emit($event)">
+    </organizer-button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], hideMenuValues: [{
+                type: Input
+            }], viewChange: [{
+                type: Output
+            }], sliceStateChange: [{
+                type: Output
+            }] } });
+
 class TableComponent {
     constructor() {
         this.isLoading = false;
@@ -1282,12 +360,12 @@ class TableComponent {
         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();
+        this._organizer = new OrganizerFacade();
         /**
-         * Snapshot stable synchronisé depuis _view.fields.activeColumns dans refreshViewModel().
+         * Snapshot stable synchronisé depuis _organizer.fields.activeFields dans refreshViewModel().
          * Propriété (non getter) pour qu'Angular puisse la suivre sans NG0100.
          */
-        this.activeColumns = [];
+        this.activeFields = [];
         this.activeSliceFilter = () => true;
         // Propriétés stables pour les bindings du template (contre erreur NG0100)
         this._sliceConfigs = [];
@@ -1309,7 +387,7 @@ class TableComponent {
         /** 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._lazy = new LazyFieldManager();
         this._cdr = inject(ChangeDetectorRef);
         this._el = inject((ElementRef));
         this._ngZone = inject(NgZone);
@@ -1318,7 +396,7 @@ class TableComponent {
         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));
+        this._export = new ExportManager(() => this._allFilteredRows, () => this.activeFields, () => this.resolvedConfig.export, (col, row, idx) => this.resolveCellValue(col, row, idx));
         // ── Lifecycle
         this.pageSize = 5;
         this.pageSizeOptions = [5, 10, 20];
@@ -1356,6 +434,7 @@ class TableComponent {
         this._configHiddenKeys = new Set();
         /** Clés des colonnes visibles du dernier émission columnsChange (pour éviter les émissions dupliquement). */
         this._prevColumnKeys = [];
+        this._organizerConfigCache = null;
         this.trackRowFn = (_index, row) => row[GROUP_HEADER_MARKER] ? `__group_${row[ROW_GROUP_KEY]}` : row[ROW_INDEX_KEY] ?? _index;
         this._preferencesMessageTimer = null;
     }
@@ -1375,12 +454,12 @@ 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; }
+    get _staticSlicesForMenu() { return this._organizer.staticSlicesForMenu; }
+    get _activeDynamicSliceColumns() { return this._organizer.sliceBy.activeDynamicFields; }
+    get _availableColumnsForDynamicSlice() { return this._organizer.sliceBy.availableForDynamic; }
+    get _allDynamicSliceColumns() { return this._organizer.sliceBy.allDynamicFields; }
+    get _activeSliceByLabel() { return this._organizer.sliceBy.activeLabel; }
+    get activeGroupByKey() { return this._organizer.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; }
@@ -1413,9 +492,10 @@ class TableComponent {
         if (changes['config']) {
             this.applyConfigSearchReset();
             this.applyInitialSearchQuery();
+            this._invalidateOrganizerConfig(); // les colonnes ont pu changer
         }
         if (dataChanged) {
-            this.activeColumns.filter(c => c.lazy).forEach(c => this.triggerLazyFetch(c));
+            this.activeFields.filter(c => c.lazy).forEach(c => this.triggerLazyFetch(c));
         }
     }
     ngAfterContentInit() {
@@ -1441,25 +521,24 @@ class TableComponent {
         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(() => {
+            if (this._resolvedData.length === 0) {
+                console.log('[SliceRestore] ngAfterViewInit: données absentes, restauration différée à _recomputeShowSlicePanel', { keys, filters });
+                if (filters)
+                    this._pendingSliceFilters = filters;
+                if (keys.length > 0)
+                    this._pendingDynamicSliceKeys = [...keys];
+                return;
+            }
+            console.log('[SliceRestore] ngAfterViewInit: données présentes, application immédiate', { keys, filters });
             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;
-                }
+            if (filters && this.slicePanelRef) {
+                console.log('[SliceRestore] restoreFilters depuis ngAfterViewInit', filters);
+                this.slicePanelRef.restoreFilters(filters);
             }
             this._cdr.markForCheck();
         });
@@ -1475,7 +554,7 @@ class TableComponent {
         this._resizeState = null;
         this._destroy$.next();
         this._destroy$.complete();
-        this._view.destroy();
+        this._organizer.destroy();
     }
     _measureHeaderHeight() {
         const measure = () => {
@@ -1492,7 +571,73 @@ class TableComponent {
         };
         this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => measure()));
     }
-    // ── Getters d'affichage
+    _invalidateOrganizerConfig() { this._organizerConfigCache = null; }
+    get organizerConfig() {
+        if (this._organizerConfigCache)
+            return this._organizerConfigCache;
+        const allCols = [...this._organizer.menuBaseFields, ...this._organizer.menuOptionalFields];
+        this._organizerConfigCache = {
+            fields: this._organizer.showFields ? allCols.map(c => ({
+                id: c.key,
+                label: this.colLabel(c),
+                icon: c.icon,
+                state: 'ready',
+            })) : undefined,
+            groups: this._organizer.showGroupBySection ? this._organizer.groupByFields.map(c => ({
+                id: c.key,
+                label: this.colLabel(c),
+                icon: c.icon,
+            })) : undefined,
+            slices: this._organizer.showSliceBySection ? this._sliceByMenuItems.map(item => ({
+                id: item.key,
+                label: item.title,
+                icon: item.icon,
+            })) : undefined,
+            showExport: this.showExportButton,
+            onExport: () => this.onExport(),
+            showPreferences: this.showPreferencesMenu,
+            hasSavedPreferences: this.hasSavedPreferences,
+            onPreferencesEdit: () => this.enterEditMode(),
+            onPreferencesSave: () => this.savePreferences(),
+            onPreferencesClear: () => this.clearPreferences(),
+        };
+        return this._organizerConfigCache;
+    }
+    get organizerState() {
+        return {
+            visibleFields: this.visibleColumns.map(c => c.key),
+            selectedGroupBy: this.activeGroupByKey ?? undefined,
+            selectedSlices: this._sliceByMenuItems
+                .filter(i => this.isSliceMenuItemActive(i))
+                .map(i => i.key),
+        };
+    }
+    onOrganizerViewChange(event) {
+        if (event.type === 'fieldToggled') {
+            const allCols = [...this._organizer.menuBaseFields, ...this._organizer.menuOptionalFields];
+            const newVisible = new Set(event.state.visibleFields ?? []);
+            for (const col of allCols) {
+                const isNowVisible = newVisible.has(col.key);
+                if (this.isColumnVisible(col.key) !== isNowVisible) {
+                    this.onColumnVisibilityChange(col, isNowVisible);
+                }
+            }
+        }
+        else if (event.type === 'groupBySelected') {
+            const newKey = event.state.selectedGroupBy ?? null;
+            this.onGroupByChange(newKey === this.activeGroupByKey ? null : newKey);
+        }
+        else if (event.type === 'sliceSelected') {
+            const prevSlices = new Set(this.organizerState.selectedSlices ?? []);
+            const clickedId = (event.state.selectedSlices ?? []).find(id => !prevSlices.has(id));
+            if (clickedId) {
+                const item = this._sliceByMenuItems.find(i => i.key === clickedId);
+                if (item)
+                    this.onSliceMenuItemClick(item);
+            }
+        }
+        this._cdr.markForCheck();
+    }
     get title() {
         return this.resolvedConfig.title ?? '';
     }
@@ -1500,10 +645,11 @@ class TableComponent {
         return !!this.resolvedConfig.title;
     }
     get visibleColumns() {
-        return this.activeColumns;
+        return this.activeFields;
     }
     get showSearchBar() { return this.resolvedConfig.search?.enabled === true; }
-    get showViewButton() { return this._view.enabled || this.showExportButton || this.showPreferencesMenu; }
+    get showViewButton() { return this._organizer.enabled || this.showExportButton || this.showPreferencesMenu; }
+    get showOrganizerButton() { return this._organizer.enabled || this.showExportButton || this.showPreferencesMenu; }
     get showSliceExpandBtn() { return this._showSlicePanel && this._slicePanelCollapsed && this._sliceShowToggle; }
     get showExportButton() {
         return this.resolvedConfig.export?.enabled === true;
@@ -1521,21 +667,20 @@ class TableComponent {
     expandSlicePanel() {
         this.slicePanelRef?.togglePanel();
     }
-    get showFields() { return this._view.showFields; }
-    get showGroupBySection() { return this._view.showGroupBySection; }
+    get showFields() { return this._organizer.showFields; }
+    get showGroupBySection() { return this._organizer.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; }
+    get activeGroupByLabel() { return this._organizer.activeGroupByLabel; }
+    get totalColumnCount() { return this._organizer.totalFieldCount; }
+    get activeSliceByLabel() { return this._organizer.sliceBy.activeLabel; }
+    get activeDynamicSliceColumns() { return this._organizer.sliceBy.activeDynamicFields; }
     removeDynamicSliceByKey(key) {
         this.slicePanelRef?.removeDynamicSliceByKey(key);
     }
-    get groupByColumns() { return this._view.groupByColumns; }
-    colLabel(col) { return this._view.colLabel(col); }
-    // ── Actions utilisateur
+    get groupByColumns() { return this._organizer.groupByFields; }
+    colLabel(col) { return this._organizer.fieldLabel(col); }
     onSearchChange() {
         this._preservePageIndex = 0;
         this.refreshViewModel();
@@ -1543,7 +688,7 @@ class TableComponent {
         this.searchChange.emit(this.searchQuery);
     }
     onGroupByChange(key) {
-        this._view.setGroupBy(key);
+        this._organizer.setGroupBy(key);
         this._groupBy.setDefaultCollapsed(key !== null);
         this._groupBy.reset();
         this._groupBy.groupPageSize = this.resolveDefaultGroupPageSize();
@@ -1551,7 +696,6 @@ class TableComponent {
         this.paginator?.firstPage();
         this.groupByChange.emit(key);
         if (key) {
-            this.viewMenuTrigger?.closeMenu();
             const colDef = (this.resolvedConfig.columns || []).find(c => c.key === key);
             if (colDef?.lazy && this._lazyColumnStatus.get(key) !== 'loaded') {
                 this.triggerLazyFetch(colDef);
@@ -1571,7 +715,6 @@ class TableComponent {
             this._ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToGroupHeader(key), 0));
         });
     }
-    // ── Lazy loading
     getLazyColumnStatus(key) {
         return this._lazy.getStatus(key);
     }
@@ -1590,7 +733,6 @@ class TableComponent {
             onMarkForCheck: () => this._cdr.markForCheck(),
         };
     }
-    // ── Groupement
     toggleGroupCollapse(groupKey) {
         this._groupBy.toggleGroupCollapse(groupKey, (key) => {
             this._ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToGroupHeader(key), 0));
@@ -1619,24 +761,22 @@ class TableComponent {
     groupPageForward(groupKey, totalCount) {
         this._groupBy.groupPageForward(groupKey, totalCount);
     }
-    // ── Colonnes
     get hasAddableColumns() {
-        return this._view.menuBaseColumns.length > 0 || this._view.menuOptionalColumns.length > 0;
+        return this._organizer.menuBaseFields.length > 0 || this._organizer.menuOptionalFields.length > 0;
     }
     get menuBaseColumns() {
-        return this._view.menuBaseColumns;
+        return this._organizer.menuBaseFields;
     }
     get menuOptionalColumns() {
-        return this._view.menuOptionalColumns;
+        return this._organizer.menuOptionalFields;
     }
     get availableColumnsToAdd() {
-        const activeKeys = new Set(this.activeColumns.map((column) => column.key));
+        const activeKeys = new Set(this.activeFields.map((column) => column.key));
         return (this.resolvedConfig.columns || []).filter((c) => c.optional && !activeKeys.has(c.key));
     }
     get allowColumnRemoval() {
-        return this._view.allowColumnRemoval;
+        return this._organizer.allowFieldRemoval;
     }
-    // ── Slices
     get hasSliceConfig() {
         return (this.resolvedConfig.slices?.length ?? 0) > 0;
     }
@@ -1648,28 +788,43 @@ class TableComponent {
         this._cdr.markForCheck();
     }
     _recomputeShowSlicePanel() {
-        const hasCfg = this._sliceConfigs.length > 0 || this._view.sliceBy.activeDynamicColumns.length > 0;
+        const hasCfg = this._sliceConfigs.length > 0 || this._organizer.sliceBy.activeDynamicFields.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) {
+        // Les données viennent d'arriver : appliquer les dynamic slices ET les filtres en attente.
+        // Les dynamic slices doivent être ajoutées AVANT restoreFilters car les indices de
+        // sliceFilters dépendent de l'ordre final de _cachedSlices.
+        if (!wasVisible && this._showSlicePanel && (this._pendingSliceFilters || this._pendingDynamicSliceKeys)) {
             const filters = this._pendingSliceFilters;
+            const dynamicKeys = this._pendingDynamicSliceKeys;
             this._pendingSliceFilters = null;
+            this._pendingDynamicSliceKeys = null;
+            const allCols = this.resolvedConfig.columns ?? [];
+            console.log('[SliceRestore] _recomputeShowSlicePanel: données arrivées', { dynamicKeys, filters });
             setTimeout(() => {
-                this.slicePanelRef?.restoreFilters(filters);
+                if (dynamicKeys) {
+                    dynamicKeys.forEach(key => {
+                        const col = allCols.find(c => c.key === key);
+                        if (col)
+                            this.addDynamicSlice(col);
+                    });
+                }
+                if (filters && this.slicePanelRef) {
+                    console.log('[SliceRestore] restoreFilters depuis _recomputeShowSlicePanel', filters);
+                    this.slicePanelRef.restoreFilters(filters);
+                }
                 this._cdr.markForCheck();
             });
         }
     }
     get showAddSliceButton() {
-        return this._view.showSliceBySection;
+        return this._organizer.showSliceBySection;
     }
     get staticSlicesForMenu() {
-        return this._view.staticSlicesForMenu;
+        return this._organizer.staticSlicesForMenu;
     }
     get availableColumnsForDynamicSlice() {
-        return this._view.sliceBy.availableForDynamic;
+        return this._organizer.sliceBy.availableForDynamic;
     }
     isStaticSliceVisible(columnKey) {
         return !this._staticSliceHiddenKeys.has(columnKey);
@@ -1681,7 +836,7 @@ class TableComponent {
         else
             next.add(columnKey);
         this._staticSliceHiddenKeys = next;
-        this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+        this._organizer.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)
@@ -1702,7 +857,7 @@ class TableComponent {
         return this._allDynamicSliceColumns;
     }
     isDynamicSliceActive(key) {
-        return this._view.isDynamicSliceActive(key);
+        return this._organizer.isDynamicSliceActive(key);
     }
     toggleDynamicSlice(col) {
         if (this.isDynamicSliceActive(col.key)) {
@@ -1719,7 +874,7 @@ class TableComponent {
         this.paginator?.firstPage();
     }
     onDynamicSliceKeysChange(keys) {
-        this._view.onDynamicSliceKeysChange(keys);
+        this._organizer.onDynamicSliceKeysChange(keys);
         this._recomputeShowSlicePanel();
         this._cdr.markForCheck();
     }
@@ -1742,10 +897,10 @@ class TableComponent {
         return this.resolvedConfig.pagination?.enabled !== false;
     }
     get resolvedPaginationShowFirstLastButtons() {
-        return this.resolvedConfig.pagination?.showFirstLastButtons === true;
+        return this.resolvedConfig.pagination?.showFirstLastButtons !== false;
     }
     get isColumnDragDropEnabled() {
-        return this._view.isColumnDragDropEnabled;
+        return this._organizer.isFieldDragDropEnabled;
     }
     get totalRows() {
         return this.activeGroupByKey
@@ -1754,7 +909,7 @@ class TableComponent {
     }
     // ── Gestion des colonnes
     onAddColumn(column) {
-        this._view.addColumn(column);
+        this._organizer.addField(column);
         this._preservePageIndex = this.paginator?.pageIndex ?? null;
         this.refreshViewModel();
         if (column.lazy) {
@@ -1764,13 +919,13 @@ class TableComponent {
         this.columnAdded.emit(column);
     }
     onColumnVisibilityChange(column, checked) {
-        const isVisible = this._view.isColumnVisible(column.key);
+        const isVisible = this._organizer.isFieldVisible(column.key);
         if (checked && !isVisible) {
             this.onAddColumn(column);
             return;
         }
         if (!checked && isVisible) {
-            const removed = this._view.removeColumn(column.key);
+            const removed = this._organizer.removeField(column.key);
             if (!removed)
                 return;
             this._preservePageIndex = this.paginator?.pageIndex ?? null;
@@ -1779,14 +934,14 @@ class TableComponent {
         }
     }
     isColumnVisible(columnKey) {
-        return this.activeColumns.some(c => c.key === columnKey);
+        return this.activeFields.some(c => c.key === columnKey);
     }
     onRemoveColumn(columnKey, event) {
         event?.stopPropagation();
-        const column = this.activeColumns.find(item => item.key === columnKey);
+        const column = this.activeFields.find(item => item.key === columnKey);
         if (!column)
             return;
-        const removed = this._view.removeColumn(columnKey);
+        const removed = this._organizer.removeField(columnKey);
         if (!removed)
             return;
         this.refreshViewModel();
@@ -1810,11 +965,11 @@ class TableComponent {
      * Seules les valeurs explicitement en `px` sont sommables ; les pourcentages ou autres unités sont ignorés. */
     get tableMinWidth() {
         const hasResized = Object.keys(this._columnWidths).length > 0;
-        const hasSomeExplicitWidth = hasResized || this.activeColumns.some(c => c.width);
+        const hasSomeExplicitWidth = hasResized || this.activeFields.some(c => c.width);
         if (!hasSomeExplicitWidth)
             return null;
         let sum = 0;
-        for (const col of this.activeColumns) {
+        for (const col of this.activeFields) {
             if (this._columnWidths[col.key] != null) {
                 sum += this._columnWidths[col.key];
             }
@@ -1873,7 +1028,7 @@ class TableComponent {
             return;
         }
         event.preventDefault();
-        const moved = this._view.reorderColumns(this.draggedColumnKey, targetColumnKey);
+        const moved = this._organizer.reorderFields(this.draggedColumnKey, targetColumnKey);
         if (!moved) {
             this.onHeaderDragEnd();
             return;
@@ -1955,12 +1110,12 @@ class TableComponent {
     savePreferences() {
         if (!this._preferencesManager)
             return;
-        const dynamicSliceKeys = this._view.sliceBy.activeDynamicColumns.map(c => c.key);
+        const dynamicSliceKeys = this._organizer.sliceBy.activeDynamicFields.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),
+            columnOrder: this.activeFields.map(c => c.key),
+            visibleColumns: this.activeFields.map(c => c.key),
             columnWidths: Object.keys(this._columnWidths).length ? { ...this._columnWidths } : undefined,
             slicePanelCollapsed: this._slicePanelCollapsed,
             hiddenSliceKeys: [...this._staticSliceHiddenKeys],
@@ -1977,7 +1132,7 @@ class TableComponent {
         this._preferencesManager.clear();
         this._hasSavedConfig = false;
         // Capturer les dynamic slices actives AVANT le reset (resetToDefaults() les vide)
-        const dynamicSlicesToRemove = this._view.sliceBy.activeDynamicColumns.slice();
+        const dynamicSlicesToRemove = this._organizer.sliceBy.activeDynamicFields.slice();
         // Reset complet de l'état vers les valeurs par défaut de la config
         this.searchQuery = '';
         this._columnWidths = {};
@@ -1992,9 +1147,9 @@ class TableComponent {
         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);
+        this._organizer.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
         // Colonnes et groupBy : reset via la facade (retire les optionnelles, remet l'ordre config)
-        this._view.resetToDefaults();
+        this._organizer.resetToDefaults();
         this._defaultGroupByApplied = false;
         // Dynamic slices : les retirer du slice panel avec la liste capturée avant le reset
         dynamicSlicesToRemove.forEach(col => {
@@ -2005,8 +1160,8 @@ class TableComponent {
         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.activeFields = this._organizer.fields.activeFields;
+        this.renderedColumns = this.activeFields.map(c => c.key);
         this._pendingDynamicSliceKeys = null;
         this._pendingSliceFilters = null;
         this.refreshViewModel();
@@ -2034,7 +1189,7 @@ class TableComponent {
             this._columnWidths = { ...saved.columnWidths };
         // Group by
         if (saved.groupBy !== undefined) {
-            this._view.setGroupBy(saved.groupBy);
+            this._organizer.setGroupBy(saved.groupBy);
             if (saved.groupBy) {
                 this._groupBy.setDefaultCollapsed(true);
                 this._groupBy.reset();
@@ -2046,9 +1201,9 @@ class TableComponent {
         // 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);
+            this._organizer.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
         }
-        // Colonnes visibles + ordre — reconstruit activeColumns en une seule passe.
+        // Colonnes visibles + ordre — reconstruit activeFields 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;
@@ -2061,7 +1216,7 @@ class TableComponent {
             // 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);
+                this._organizer.setActiveFields(ordered);
             }
         }
         // Dynamic slices — différé : slicePanelRef pas encore disponible au moment de ngOnChanges
@@ -2077,9 +1232,9 @@ class TableComponent {
         }
     }
     canRemoveColumn(column) {
-        return (this._view.allowColumnRemoval &&
+        return (this._organizer.allowFieldRemoval &&
             column.removable !== false &&
-            this.activeColumns.length > 1);
+            this.activeFields.length > 1);
     }
     isCellEmpty(value) {
         return value === '' || value == null;
@@ -2104,7 +1259,7 @@ class TableComponent {
             ? this.resolvedConfig.preferences.tableId
             : null;
         const currentId = prefsId ?? null;
-        // Préférences à appliquer après _view.update() (quand activeColumns est déjà peuplé)
+        // Préférences à appliquer après _organizer.update() (quand activeFields est déjà peuplé)
         let pendingPrefs = null;
         if (currentId && this._preferencesManager?.key !== ('jqt_prefs_' + currentId)) {
             this._preferencesManager = new TablePreferencesManager(currentId);
@@ -2116,21 +1271,21 @@ class TableComponent {
             this._hasSavedConfig = false;
         }
         // Délègue à la facade : mise à jour de l'état View (colonnes, groupBy meta, sliceBy meta)
-        this._view.update({
+        this._organizer.update({
             config: this.resolvedConfig.view,
-            columns: this.resolvedConfig.columns ?? [],
+            fields: this.resolvedConfig.columns ?? [],
             sliceConfigs: this.resolvedConfig.slices ?? [],
             defaultGroupBy: this.resolvedConfig.defaultGroupBy,
         });
-        if (!pendingPrefs && !this._defaultGroupByApplied && !this._view.groupBy.userCustomized && this._view.groupBy.activeKey != null) {
+        if (!pendingPrefs && !this._defaultGroupByApplied && !this._organizer.groupBy.userCustomized && this._organizer.groupBy.activeKey != null) {
             this._defaultGroupByApplied = true;
             this._groupBy.setDefaultCollapsed(true);
             this._groupBy.reset();
             this._groupBy.groupPageSize = this.resolveDefaultGroupPageSize();
         }
         // 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.activeFields = this._organizer.fields.activeFields;
+        this.renderedColumns = this.activeFields.map(c => c.key);
         this.pageSize = this.paginator?.pageSize || this.resolvePageSize();
         this.pageSizeOptions = this.resolvePageSizeOptions();
         this.pageSizeOptionsGroupBy = this.resolvePageSizeOptionsGroupBy();
@@ -2148,10 +1303,10 @@ class TableComponent {
             // (pendingPrefs les gèrera lui-même via _applyPreferences → hiddenSliceKeys)
             if (!pendingPrefs) {
                 this._staticSliceHiddenKeys = new Set(newConfigHidden);
-                this._view.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
+                this._organizer.updateHiddenStaticKeys(this._staticSliceHiddenKeys);
             }
         }
-        // Applique les préférences ICI, APRÈS _view.update() ET après _configHiddenKeys mis à jour,
+        // Applique les préférences ICI, APRÈS _organizer.update() ET après _configHiddenKeys mis à jour,
         // mais avant _computeSliceConfigs() pour que hiddenSliceKeys soit déjà restauré.
         if (pendingPrefs) {
             this._applyPreferences(pendingPrefs);
@@ -2209,6 +1364,7 @@ class TableComponent {
             }
         }
         this._sliceByMenuItems = items;
+        this._invalidateOrganizerConfig(); // les slices ont changé
     }
     get sliceByMenuItems() { return this._sliceByMenuItems; }
     onSliceMenuItemClick(item) {
@@ -2269,7 +1425,7 @@ class TableComponent {
         pageRows.forEach((row, i) => {
             const idx = start + i;
             const p = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: idx };
-            this.activeColumns.forEach((col) => {
+            this.activeFields.forEach((col) => {
                 p[col.key] = this.resolveCellValue(col, row, idx);
             });
             projected.push(p);
@@ -2382,7 +1538,7 @@ class TableComponent {
             const result = [];
             rows.forEach((row, index) => {
                 const projected = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: index };
-                this.activeColumns.forEach((col) => {
+                this.activeFields.forEach((col) => {
                     projected[col.key] = this.resolveCellValue(col, row, index);
                 });
                 result.push(projected);
@@ -2490,7 +1646,7 @@ class TableComponent {
                 groupRows.slice(start, end).forEach((row, i) => {
                     const idx = start + i;
                     const projected = { [ROW_RAW_KEY]: row, [ROW_INDEX_KEY]: idx };
-                    this.activeColumns.forEach((col) => {
+                    this.activeFields.forEach((col) => {
                         projected[col.key] = this.resolveCellValue(col, row, idx);
                     });
                     result.push(projected);
@@ -2644,11 +1800,11 @@ class TableComponent {
         }
     }
     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", view: "view", columnLabels: "columnLabels", isLoading: "isLoading", clearSearchInput: "clearSearchInput" }, 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\">filter_list</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\" *ngIf=\"!effectiveIsLoading\">{{ filteredRowCount }}</span>\n            <div class=\"search-count-loader\" *ngIf=\"effectiveIsLoading\">\n              <div class=\"spinner\"></div>\n            </div>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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\" [class.is-loading]=\"effectiveIsLoading\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [showFirstLastButtons]=\"resolvedPaginationShowFirstLastButtons\"\n        ></mat-paginator>\n        <div class=\"paginator-range-loader\" *ngIf=\"effectiveIsLoading\">\n          <div class=\"spinner\"></div>\n        </div>\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\" *ngIf=\"!isDefaultGroupByActive\" (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\" *ngIf=\"!isDefaultGroupByActive\"></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-count-loader{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}.spinner{width:14px;height:14px;border:2px solid #d1d5db;border-top-color:#374151;border-radius:50%;animation:spin .8s linear infinite}.search-count-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}@keyframes spin{to{transform:rotate(360deg)}}.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}:host ::ng-deep th.mat-mdc-header-cell.drag-enabled{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;position:relative;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)}:host ::ng-deep .bottom-bar.is-loading .mat-mdc-paginator-range-label{visibility:hidden}.paginator-range-loader{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-right:145px;display:flex;align-items:center;justify-content:center;width:auto;padding:0 16px;height:24px}.paginator-range-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}.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 }); }
+    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", clearSearchInput: "clearSearchInput" }, 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 }], 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\">filter_list</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\" *ngIf=\"!effectiveIsLoading\">{{ filteredRowCount }}</span>\n            <div class=\"search-count-loader\" *ngIf=\"effectiveIsLoading\">\n              <div class=\"spinner\"></div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"showOrganizerButton\" class=\"table-toolbar-right\">\n          <table-organizer-button\n            [config]=\"organizerConfig\"\n            [state]=\"organizerState\"\n            (viewChange)=\"onOrganizerViewChange($event)\">\n          </table-organizer-button>\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\" [class.is-loading]=\"effectiveIsLoading\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [showFirstLastButtons]=\"resolvedPaginationShowFirstLastButtons\"\n        ></mat-paginator>\n        <div class=\"paginator-range-loader\" \n             [class.paginator-range-loader--no-first-last]=\"!resolvedPaginationShowFirstLastButtons\"\n             *ngIf=\"effectiveIsLoading\">\n          <div class=\"spinner\"></div>\n        </div>\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-count-loader{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}.spinner{width:14px;height:14px;border:2px solid #d1d5db;border-top-color:#374151;border-radius:50%;animation:spin .8s linear infinite}.search-count-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}@keyframes spin{to{transform:rotate(360deg)}}.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}:host ::ng-deep th.mat-mdc-header-cell.drag-enabled{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;position:relative;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)}:host ::ng-deep .bottom-bar.is-loading .mat-mdc-paginator-range-label{visibility:hidden}.paginator-range-loader{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-right:145px;display:flex;align-items:center;justify-content:center;width:auto;padding:0 16px;height:24px}.paginator-range-loader--no-first-last{margin-right:80px}.paginator-range-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.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"] }, { kind: "component", type: OrganizerButtonWrapperComponent, selector: "table-organizer-button", inputs: ["config", "state", "hideMenuValues"], outputs: ["viewChange", "sliceStateChange"] }], 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, 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\">filter_list</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\" *ngIf=\"!effectiveIsLoading\">{{ filteredRowCount }}</span>\n            <div class=\"search-count-loader\" *ngIf=\"effectiveIsLoading\">\n              <div class=\"spinner\"></div>\n            </div>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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                <span class=\"view-menu-check\" aria-hidden=\"true\"></span>\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\" [class.is-loading]=\"effectiveIsLoading\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [showFirstLastButtons]=\"resolvedPaginationShowFirstLastButtons\"\n        ></mat-paginator>\n        <div class=\"paginator-range-loader\" *ngIf=\"effectiveIsLoading\">\n          <div class=\"spinner\"></div>\n        </div>\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\" *ngIf=\"!isDefaultGroupByActive\" (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\" *ngIf=\"!isDefaultGroupByActive\"></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-count-loader{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}.spinner{width:14px;height:14px;border:2px solid #d1d5db;border-top-color:#374151;border-radius:50%;animation:spin .8s linear infinite}.search-count-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}@keyframes spin{to{transform:rotate(360deg)}}.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}:host ::ng-deep th.mat-mdc-header-cell.drag-enabled{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;position:relative;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)}:host ::ng-deep .bottom-bar.is-loading .mat-mdc-paginator-range-label{visibility:hidden}.paginator-range-loader{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-right:145px;display:flex;align-items:center;justify-content:center;width:auto;padding:0 16px;height:24px}.paginator-range-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}.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, OrganizerButtonWrapperComponent], 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\">filter_list</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\" *ngIf=\"!effectiveIsLoading\">{{ filteredRowCount }}</span>\n            <div class=\"search-count-loader\" *ngIf=\"effectiveIsLoading\">\n              <div class=\"spinner\"></div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"showOrganizerButton\" class=\"table-toolbar-right\">\n          <table-organizer-button\n            [config]=\"organizerConfig\"\n            [state]=\"organizerState\"\n            (viewChange)=\"onOrganizerViewChange($event)\">\n          </table-organizer-button>\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\" [class.is-loading]=\"effectiveIsLoading\" *ngIf=\"showPagination\">\n        <mat-paginator\n          [length]=\"totalRows\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [showFirstLastButtons]=\"resolvedPaginationShowFirstLastButtons\"\n        ></mat-paginator>\n        <div class=\"paginator-range-loader\" \n             [class.paginator-range-loader--no-first-last]=\"!resolvedPaginationShowFirstLastButtons\"\n             *ngIf=\"effectiveIsLoading\">\n          <div class=\"spinner\"></div>\n        </div>\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-count-loader{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}.spinner{width:14px;height:14px;border:2px solid #d1d5db;border-top-color:#374151;border-radius:50%;animation:spin .8s linear infinite}.search-count-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}@keyframes spin{to{transform:rotate(360deg)}}.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}:host ::ng-deep th.mat-mdc-header-cell.drag-enabled{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;position:relative;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)}:host ::ng-deep .bottom-bar.is-loading .mat-mdc-paginator-range-label{visibility:hidden}.paginator-range-loader{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-right:145px;display:flex;align-items:center;justify-content:center;width:auto;padding:0 16px;height:24px}.paginator-range-loader--no-first-last{margin-right:80px}.paginator-range-loader .spinner{width:16px;height:16px;border:2.5px solid #e5e7eb;border-top-color:#a0a5ad}.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: [{
@@ -2699,9 +1855,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], slicePanelRef: [{
                 type: ViewChild,
                 args: [SlicePanelComponent]
-            }], viewMenuTrigger: [{
-                type: ViewChild,
-                args: ['viewMenuTrigger']
             }], _cellDefs: [{
                 type: ContentChildren,
                 args: [JqtCellDefDirective]
@@ -2715,5 +1868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JQT_I18N, JQT_I18N_DEFAULTS, JqtCellDefDirective, SlicePanelComponent, TableComponent, col };
+export { JQT_I18N, JQT_I18N_DEFAULTS, JqtCellDefDirective, OrganizerButtonWrapperComponent, TableComponent, col };
 //# sourceMappingURL=oneteme-jquery-table.mjs.map