@oneteme/jquery-organizer 0.0.4 → 0.0.6

package/fesm2022/oneteme-jquery-organizer.mjs

@@ -41,10 +41,12 @@ function normalizeOrganizerState(state, config) {
     const base = state || {};
     const normalizedY = normalizeYSelection(base.selectedY, base.selectedYAggregate, config.yFields);
     const selectedX = hasOption(config.xFields, base.selectedX) ? base.selectedX : undefined;
+    const selectedChartType = hasOption(config.chartTypes, base.selectedChartType) ? base.selectedChartType : undefined;
     const selectedGroupBy = hasOption(config.groups, base.selectedGroupBy) ? base.selectedGroupBy : undefined;
     const selectedSlices = (base.selectedSlices || []).filter(sliceId => hasOption(config.slices, sliceId));
     const normalized = {
         ...base,
+        selectedChartType,
         selectedX,
         selectedY: normalizedY.selectedY,
         selectedYAggregate: normalizedY.selectedYAggregate,
@@ -62,6 +64,7 @@ function normalizeTemplateToState(template, currentState, config) {
     const nextState = {
         viewMode: base.viewMode,
         visibleFields: base.visibleFields,
+        selectedChartType: base.selectedChartType,
         selectedX: hasOption(config.xFields, template.xField) ? template.xField : base.selectedX,
         selectedY: normalizedY.selectedY,
         selectedYAggregate: normalizedY.selectedYAggregate,
@@ -168,6 +171,7 @@ class OrganizerButtonComponent {
         this.sliceStateChange = new EventEmitter();
         this.fieldDataCache = new Map();
         this.destroy$ = new Subject();
+        this.destroyed = false;
     }
     ngOnInit() {
         console.debug('[OrganizerButton] Initialized', {
@@ -177,6 +181,7 @@ class OrganizerButtonComponent {
         });
     }
     ngOnDestroy() {
+        this.destroyed = true;
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -235,9 +240,15 @@ class OrganizerButtonComponent {
     }
     onGroupBySelect(groupId) {
         console.debug('[OrganizerButton] Group by selected', { groupId });
-        const current = this.state.selectedGroupBy;
+        const current = this.state?.selectedGroupBy;
         this.emitChange('groupBySelected', { selectedGroupBy: current === groupId ? undefined : groupId });
     }
+    onChartTypeSelect(chartType) {
+        const option = this.config.chartTypes?.find(type => type.id === chartType);
+        if (!option || option.disabled || this.state?.selectedChartType === chartType)
+            return;
+        this.emitChange('chartTypeSelected', { selectedChartType: chartType });
+    }
     onTemplateSelect(templateId) {
         console.debug('[OrganizerButton] Template selected', { templateId });
         if (!this.config.templates?.length)
@@ -288,6 +299,8 @@ class OrganizerButtonComponent {
         }
         const result = this.config.onFetchSliceData(sliceId);
         const handleData = (tasks) => {
+            if (this.destroyed)
+                return;
             this.sliceStateChange.emit({
                 sliceConfigs: [{ title: slice.label ?? sliceId, columnKey: sliceId }],
                 tasks,
@@ -295,11 +308,18 @@ class OrganizerButtonComponent {
             });
             onLoaded?.();
         };
+        const handleError = (error) => {
+            if (this.destroyed)
+                return;
+            console.error('[OrganizerButton] Slice data loading failed', error);
+            this.sliceStateChange.emit(null);
+            onLoaded?.();
+        };
         if (isObservable(result)) {
-            result.pipe(takeUntil(this.destroy$)).subscribe({ next: handleData });
+            result.pipe(takeUntil(this.destroy$)).subscribe({ next: handleData, error: handleError });
         }
         else {
-            result.then(handleData);
+            void result.then(handleData, handleError);
         }
     }
     async loadFieldData(fieldId) {
@@ -316,6 +336,9 @@ class OrganizerButtonComponent {
             const data = await this.config.onFetchFieldData(fieldId);
             this.fieldDataCache.set(fieldId, data);
         }
+        catch (error) {
+            console.error('[OrganizerButton] Field data loading failed', error);
+        }
         finally {
             this.loadingFieldId = undefined;
             this.cdr.markForCheck();
@@ -351,6 +374,7 @@ class OrganizerButtonComponent {
     hasMenuItemsBeforeActions() {
         return this.hasChartFields()
             || this.hasTableFields()
+            || (this.config.chartTypes?.length ?? 0) > 0
             || (this.config.groups?.length ?? 0) > 0
             || (this.config.slices?.length ?? 0) > 0
             || (this.config.templates?.length ?? 0) > 0;
@@ -402,14 +426,18 @@ class OrganizerButtonComponent {
         this.mainMenuTrigger?.closeMenu();
     }
     onReset() {
+        const visibleFields = this.config.fields
+            ?.filter(field => field.visible !== false)
+            .map(field => field.id);
         this.emitChange('reset', {
-            visibleFields: [],
+            visibleFields,
             selectedX: undefined,
             selectedY: undefined,
             selectedYAggregate: undefined,
             selectedGroupBy: undefined,
             selectedSlices: []
         });
+        this.mainMenuTrigger?.closeMenu();
     }
     activeXLabel() {
         const id = this.state?.selectedX;
@@ -435,6 +463,12 @@ class OrganizerButtonComponent {
             return '';
         return this.config.groups?.find(g => g.id === id)?.label ?? id;
     }
+    activeChartTypeLabel() {
+        const id = this.state?.selectedChartType;
+        if (!id)
+            return '';
+        return this.config.chartTypes?.find(type => type.id === id)?.label ?? id;
+    }
     activeSlicesLabel() {
         const ids = this.state?.selectedSlices;
         if (!ids?.length)
@@ -453,6 +487,9 @@ class OrganizerButtonComponent {
     hasChartFields() {
         return (this.config.xFields?.length ?? 0) > 0 || (this.config.yFields?.length ?? 0) > 0;
     }
+    hasChartTypes() {
+        return (this.config.chartTypes?.length ?? 0) > 0;
+    }
     hasTableFields() {
         return (this.config.fields?.length ?? 0) > 0;
     }
@@ -462,6 +499,9 @@ class OrganizerButtonComponent {
     isYAggregateActive(yFieldId, aggregateId) {
         return this.state?.selectedY === yFieldId && this.state?.selectedYAggregate === aggregateId;
     }
+    isChartTypeActive(chartType) {
+        return this.state?.selectedChartType === chartType;
+    }
     emitChange(type, stateUpdate) {
         const isFullState = 'selectedX' in stateUpdate && 'selectedTemplate' in stateUpdate;
         const rawState = isFullState ? stateUpdate : { ...this.state, ...stateUpdate };
@@ -477,11 +517,11 @@ class OrganizerButtonComponent {
         this.viewChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizerButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrganizerButtonComponent, isStandalone: true, selector: "organizer-button", inputs: { config: "config", state: "state", hideMenuValues: "hideMenuValues" }, outputs: { viewChange: "viewChange", sliceStateChange: "sliceStateChange" }, viewQueries: [{ propertyName: "mainMenuTrigger", first: true, predicate: ["mainMenuTrigger"], descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"organizer-btn\" [matMenuTriggerFor]=\"viewMenu\" #mainMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"'View'\">\n  <mat-icon class=\"organizer-btn-icon\">{{ config.buttonIcon || 'settings' }}</mat-icon>\n</button>\n\n<mat-menu #viewMenu=\"matMenu\" panelClass=\"organizer-menu-panel\">\n\n  <!-- Champs : mode chart (X + Y) -->\n  <button *ngIf=\"hasChartFields()\" mat-menu-item [matMenuTriggerFor]=\"champsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && (activeXLabel() || activeYLabel())\">\n      {{ activeXLabel() }}<ng-container *ngIf=\"activeXLabel() && activeYLabel()\"> / </ng-container>{{ activeYLabel() }}\n    </span>\n  </button>\n\n  <!-- Champs : mode table (toggle colonnes) -->\n  <button *ngIf=\"hasTableFields()\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues\">{{ fieldsSummary() }}</span>\n  </button>\n\n  <!-- Grouper par -->\n  <button *ngIf=\"config.groups?.length\" mat-menu-item [matMenuTriggerFor]=\"groupsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Grouper par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeGroupByLabel()\">{{ activeGroupByLabel() }}</span>\n  </button>\n\n  <!-- Filtrer par -->\n  <button *ngIf=\"config.slices?.length\" mat-menu-item [matMenuTriggerFor]=\"slicesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Filtrer par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeSlicesLabel()\">{{ activeSlicesLabel() }}</span>\n  </button>\n\n  <!-- Template -->\n  <button *ngIf=\"config.templates?.length\" mat-menu-item [matMenuTriggerFor]=\"templateSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Template</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeTemplateLabel()\">{{ activeTemplateLabel() }}</span>\n  </button>\n\n  <!-- Actions du visuel courant -->\n  <mat-divider *ngIf=\"hasActions() && hasMenuItemsBeforeActions()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasActions() && hasOtherMenuItems()\" mat-menu-item [matMenuTriggerFor]=\"actionsSubMenu\" class=\"organizer-menu-trigger\">\n    <mat-icon *ngIf=\"config.actions?.icon\" class=\"organizer-menu-export-icon\">{{ config.actions?.icon }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ actionsLabel() }}</span>\n  </button>\n\n  <!-- Actions directes lorsqu'il n'y a aucun autre item principal -->\n  <ng-container *ngIf=\"hasActions() && !hasOtherMenuItems()\">\n    <button *ngIf=\"isCopyActionVisible()\" mat-menu-item type=\"button\" (click)=\"onCopyVisual()\">\n      <mat-icon class=\"organizer-menu-export-icon\">content_copy</mat-icon>\n      <span class=\"organizer-menu-label\">Copier</span>\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" mat-menu-item type=\"button\" (click)=\"onToggleFullscreen()\">\n      <mat-icon class=\"organizer-menu-export-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      <span class=\"organizer-menu-label\">{{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}</span>\n    </button>\n  </ng-container>\n\n  <!-- Export direct (mode table) -->\n  <mat-divider *ngIf=\"config.showExport\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showExport && !hasExportSubMenu()\" mat-menu-item type=\"button\" class=\"organizer-menu-export\" (click)=\"onExport()\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Export graphique (mode chart) \u2014 ouvre un sous-menu -->\n  <button *ngIf=\"config.showExport && hasExportSubMenu()\" mat-menu-item [matMenuTriggerFor]=\"exportSubMenu\" class=\"organizer-menu-trigger organizer-menu-export\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Pr\u00E9f\u00E9rences -->\n  <mat-divider *ngIf=\"config.showPreferences\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showPreferences\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Pr\u00E9f\u00E9rences</span>\n  </button>\n\n  <!-- Switch chart / table -->\n  <mat-divider *ngIf=\"hasSwitchView()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasSwitchView()\" mat-menu-item type=\"button\" class=\"organizer-menu-trigger\" (click)=\"onSwitchView()\">\n    <mat-icon class=\"organizer-menu-export-icon\">{{ config.switchView?.currentView === 'chart' ? 'table_chart' : 'bar_chart' }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ config.switchView?.currentView === 'chart' ? 'Tableau' : 'Graphique' }}</span>\n  </button>\n\n</mat-menu>\n\n<!-- Sous-menu : actions du visuel -->\n<mat-menu #actionsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"isCopyActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onCopyVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">content_copy</mat-icon>\n      Copier\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onToggleFullscreen()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      {{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Export graphique -->\n<mat-menu #exportSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"config.onExportVisual\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onExportVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">image</mat-icon>\n      Visuel\n    </button>\n    <button *ngIf=\"config.onExportData\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onExportData()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">table_chart</mat-icon>\n      Donn\u00E9es\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Champs chart (X + Y) -->\n<mat-menu #champsSubMenu=\"matMenu\" panelClass=\"organizer-champs-panel\">\n  <div class=\"organizer-champs-wrapper\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n\n    <!-- Bloc X -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.xFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe horizontal \u2014 X</span>\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let xField of config.xFields\"\n        [class.active]=\"state?.selectedX === xField.id\"\n        [disabled]=\"xField.disabled\"\n        (mousedown)=\"onXFieldSelect(xField.id)\">\n        <span class=\"organizer-submenu-check\">{{ state?.selectedX === xField.id ? '\u2713' : '' }}</span>\n        {{ xField.label }}\n      </button>\n    </div>\n\n    <mat-divider *ngIf=\"config.xFields?.length && config.yFields?.length\" class=\"organizer-champs-divider\"></mat-divider>\n\n    <!-- Bloc Y -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.yFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe vertical \u2014 Y</span>\n      <ng-container *ngFor=\"let yField of config.yFields\">\n\n        <!-- Y simple (Count sans agr\u00E9gat ni stack) -->\n        <!-- Y simple (Count ou m\u00E9trique directe) -->\n        <button *ngIf=\"!yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          (mousedown)=\"onYFieldSelect(yField.id)\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n        </button>\n\n        <!-- Y avec agr\u00E9gats \u2192 sous-menu -->\n        <button *ngIf=\"yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item organizer-submenu-item--has-children\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          [matMenuTriggerFor]=\"yAggSubMenu\"\n          [matMenuTriggerData]=\"{ yField: yField }\"\n          (mousedown)=\"$event.stopPropagation()\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n          <mat-icon class=\"organizer-submenu-arrow\">chevron_right</mat-icon>\n        </button>\n\n      </ng-container>\n    </div>\n\n  </div>\n</mat-menu>\n\n<!-- Sous-menu dynamique : agr\u00E9gats d'un champ Y -->\n<mat-menu #yAggSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <ng-template matMenuContent let-yField=\"yField\">\n    <div class=\"organizer-submenu\"\n         (mousedown)=\"$event.stopPropagation()\"\n         (click)=\"$event.stopPropagation()\"\n         (keydown)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let agg of yField.aggregates\"\n        [class.active]=\"isYAggregateActive(yField.id, agg.id)\"\n        (mousedown)=\"onYAggregateSelect(yField.id, agg.id)\">\n        <span class=\"organizer-submenu-check\">{{ isYAggregateActive(yField.id, agg.id) ? '\u2713' : '' }}</span>\n        {{ agg.label }}\n      </button>\n    </div>\n  </ng-template>\n</mat-menu>\n\n<!-- Sous-menu : Champs table (toggle colonnes) -->\n<mat-menu #fieldsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let field of config.fields\"\n      [class.active]=\"isFieldVisible(field.id)\"\n      (mousedown)=\"onFieldToggle(field.id, !isFieldVisible(field.id))\">\n      <span class=\"organizer-submenu-check\">{{ isFieldVisible(field.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"field.icon\" class=\"organizer-submenu-icon\">{{ field.icon }}</mat-icon>      {{ field.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Grouper par -->\n<mat-menu #groupsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let group of config.groups\"\n      [class.active]=\"state?.selectedGroupBy === group.id\"\n      (mousedown)=\"onGroupBySelect(group.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedGroupBy === group.id ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"group.icon\" class=\"organizer-submenu-icon\">{{ group.icon }}</mat-icon>      {{ group.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Filtrer par -->\n<mat-menu #slicesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let slice of config.slices\"\n      [class.active]=\"state?.selectedSlices?.includes(slice.id)\"\n      (mousedown)=\"onSliceClick(slice.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedSlices?.includes(slice.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"slice.icon\" class=\"organizer-submenu-icon\">{{ slice.icon }}</mat-icon>      {{ slice.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Template -->\n<mat-menu #templateSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let tmpl of config.templates\"\n      [class.active]=\"state?.selectedTemplate === tmpl.id\"\n      [title]=\"tmpl.description || ''\"\n      (mousedown)=\"onTemplateSelect(tmpl.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedTemplate === tmpl.id ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"tmpl.icon\" class=\"organizer-submenu-icon\">{{ tmpl.icon }}</mat-icon>\n      {{ tmpl.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Pr\u00E9f\u00E9rences -->\n<mat-menu #preferencesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\" (mousedown)=\"onPreferencesEdit()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">edit</mat-icon>\u00C9diter\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" (mousedown)=\"onPreferencesSave()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">save</mat-icon>Sauvegarder\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" [disabled]=\"!config.hasSavedPreferences\" (mousedown)=\"onPreferencesClear()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">delete_outline</mat-icon>R\u00E9initialiser\n    </button>\n  </div>\n</mat-menu>\n\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.organizer-btn{position:relative;display:block;height:34px;width:34px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;padding:0;overflow:hidden;cursor:pointer;box-sizing:border-box}.organizer-btn:hover{border-color:#9e9e9e}.organizer-btn-icon.mat-icon,.organizer-btn-icon.material-icons{position:absolute;inset:0;display:block!important;width:18px!important;height:18px!important;margin:auto!important;padding:0!important;font-size:18px!important;line-height:18px!important;text-align:center;vertical-align:middle;transform:none;color:#000}.mat-mdc-menu-panel:has(.organizer-menu-label){min-width:170px!important;max-width:320px!important;overflow:visible!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .mat-mdc-menu-content{padding:4px 0!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;overflow:hidden}.organizer-menu-label{font-size:13px;font-weight:500;color:#212121;flex:0 0 auto;white-space:nowrap;padding-right:8px}.organizer-menu-value{font-size:12px;color:#757575;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.organizer-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}.organizer-submenu .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-submenu .organizer-submenu-item:hover{background:#f5f5f5}.organizer-submenu .organizer-submenu-item.active{font-weight:600}.organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-submenu-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#212121;margin-right:4px}.organizer-menu-export.mat-mdc-menu-item{min-height:42px;padding:0 14px}.organizer-menu-export-icon{font-size:16px!important;width:16px!important;height:16px!important;color:#424242;margin-right:8px}.organizer-divider{margin:4px 0!important}.organizer-champs-wrapper{padding:4px 6px;min-width:200px;box-sizing:border-box;display:flex;flex-direction:column}.organizer-champs-block{display:flex;flex-direction:column}.organizer-champs-block-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9e9e9e;padding:6px 2px 2px}.organizer-champs-divider{margin:4px 0!important}.organizer-champs-wrapper .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;font-family:inherit;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-champs-wrapper .organizer-submenu-item:hover:not([disabled]){background:#f5f5f5}.organizer-champs-wrapper .organizer-submenu-item.active{font-weight:600}.organizer-champs-wrapper .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-champs-wrapper .organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-champs-wrapper .organizer-submenu-item--has-children{padding-right:8px}.organizer-champs-wrapper .organizer-submenu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#00000061;margin-left:auto}\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: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrganizerButtonComponent, isStandalone: true, selector: "organizer-button", inputs: { config: "config", state: "state", hideMenuValues: "hideMenuValues" }, outputs: { viewChange: "viewChange", sliceStateChange: "sliceStateChange" }, viewQueries: [{ propertyName: "mainMenuTrigger", first: true, predicate: ["mainMenuTrigger"], descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"organizer-btn\" [class.organizer-btn--labeled]=\"!!config.buttonLabel\" [matMenuTriggerFor]=\"viewMenu\" #mainMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"config.buttonLabel || 'Personnaliser la vue'\" [attr.title]=\"config.buttonLabel || 'Personnaliser la vue'\">\n  <mat-icon *ngIf=\"config.showButtonIcon !== false\" class=\"organizer-btn-icon\">{{ config.buttonIcon || 'settings' }}</mat-icon>\n  <span *ngIf=\"config.buttonLabel\" class=\"organizer-btn-label\">{{ config.buttonLabel }}</span>\n</button>\n\n<mat-menu #viewMenu=\"matMenu\" panelClass=\"organizer-menu-panel\">\n\n  <!-- Type -->\n  <button *ngIf=\"hasChartTypes()\" mat-menu-item [matMenuTriggerFor]=\"chartTypesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Type</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeChartTypeLabel()\">{{ activeChartTypeLabel() }}</span>\n  </button>\n\n  <!-- Champs : mode chart (X + Y) -->\n  <button *ngIf=\"hasChartFields()\" mat-menu-item [matMenuTriggerFor]=\"champsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && (activeXLabel() || activeYLabel())\">\n      {{ activeXLabel() }}<ng-container *ngIf=\"activeXLabel() && activeYLabel()\"> / </ng-container>{{ activeYLabel() }}\n    </span>\n  </button>\n\n  <!-- Champs : mode table (toggle colonnes) -->\n  <button *ngIf=\"hasTableFields()\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues\">{{ fieldsSummary() }}</span>\n  </button>\n\n  <!-- Grouper par -->\n  <button *ngIf=\"config.groups?.length\" mat-menu-item [matMenuTriggerFor]=\"groupsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Grouper par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeGroupByLabel()\">{{ activeGroupByLabel() }}</span>\n  </button>\n\n  <!-- Filtrer par -->\n  <button *ngIf=\"config.slices?.length\" mat-menu-item [matMenuTriggerFor]=\"slicesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Filtrer par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeSlicesLabel()\">{{ activeSlicesLabel() }}</span>\n  </button>\n\n  <!-- Template -->\n  <button *ngIf=\"config.templates?.length\" mat-menu-item [matMenuTriggerFor]=\"templateSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Template</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeTemplateLabel()\">{{ activeTemplateLabel() }}</span>\n  </button>\n\n  <!-- Actions du visuel courant -->\n  <mat-divider *ngIf=\"hasActions() && hasMenuItemsBeforeActions()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasActions() && hasOtherMenuItems()\" mat-menu-item [matMenuTriggerFor]=\"actionsSubMenu\" class=\"organizer-menu-trigger\">\n    <mat-icon *ngIf=\"config.actions?.icon\" class=\"organizer-menu-export-icon\">{{ config.actions?.icon }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ actionsLabel() }}</span>\n  </button>\n\n  <!-- Actions directes lorsqu'il n'y a aucun autre item principal -->\n  <ng-container *ngIf=\"hasActions() && !hasOtherMenuItems()\">\n    <button *ngIf=\"isCopyActionVisible()\" mat-menu-item type=\"button\" (click)=\"onCopyVisual()\">\n      <mat-icon class=\"organizer-menu-export-icon\">content_copy</mat-icon>\n      <span class=\"organizer-menu-label\">Copier</span>\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" mat-menu-item type=\"button\" (click)=\"onToggleFullscreen()\">\n      <mat-icon class=\"organizer-menu-export-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      <span class=\"organizer-menu-label\">{{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}</span>\n    </button>\n  </ng-container>\n\n  <!-- Export direct (mode table) -->\n  <mat-divider *ngIf=\"config.showExport\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showExport && !hasExportSubMenu()\" mat-menu-item type=\"button\" class=\"organizer-menu-export\" (click)=\"onExport()\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Export graphique (mode chart) \u2014 ouvre un sous-menu -->\n  <button *ngIf=\"config.showExport && hasExportSubMenu()\" mat-menu-item [matMenuTriggerFor]=\"exportSubMenu\" class=\"organizer-menu-trigger organizer-menu-export\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Pr\u00E9f\u00E9rences -->\n  <mat-divider *ngIf=\"config.showPreferences\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showPreferences\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Pr\u00E9f\u00E9rences</span>\n  </button>\n\n  <mat-divider *ngIf=\"config.showReset === true\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showReset === true\" mat-menu-item type=\"button\" class=\"organizer-menu-reset\" (click)=\"onReset()\">\n    <mat-icon class=\"organizer-menu-export-icon\">restart_alt</mat-icon>\n    <span class=\"organizer-menu-label\">R\u00E9initialiser la vue</span>\n  </button>\n\n  <!-- Switch chart / table -->\n  <mat-divider *ngIf=\"hasSwitchView()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasSwitchView()\" mat-menu-item type=\"button\" class=\"organizer-menu-trigger\" (click)=\"onSwitchView()\">\n    <mat-icon class=\"organizer-menu-export-icon\">{{ config.switchView?.currentView === 'chart' ? 'table_chart' : 'bar_chart' }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ config.switchView?.currentView === 'chart' ? 'Tableau' : 'Graphique' }}</span>\n  </button>\n\n</mat-menu>\n\n<!-- Sous-menu : types de graphique -->\n<mat-menu #chartTypesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let chartType of config.chartTypes\"\n      [class.active]=\"isChartTypeActive(chartType.id)\"\n      [disabled]=\"chartType.disabled\"\n      (click)=\"onChartTypeSelect(chartType.id)\">\n      <span class=\"organizer-submenu-check\">{{ isChartTypeActive(chartType.id) ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"chartType.icon\" class=\"organizer-submenu-icon\">{{ chartType.icon }}</mat-icon>\n      {{ chartType.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : actions du visuel -->\n<mat-menu #actionsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"isCopyActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onCopyVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">content_copy</mat-icon>\n      Copier\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onToggleFullscreen()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      {{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Export graphique -->\n<mat-menu #exportSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"config.onExportVisual\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onExportVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">image</mat-icon>\n      Visuel\n    </button>\n    <button *ngIf=\"config.onExportData\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onExportData()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">table_chart</mat-icon>\n      Donn\u00E9es\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Champs chart (X + Y) -->\n<mat-menu #champsSubMenu=\"matMenu\" panelClass=\"organizer-champs-panel\">\n  <div class=\"organizer-champs-wrapper\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n\n    <!-- Bloc X -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.xFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe horizontal \u2014 X</span>\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let xField of config.xFields\"\n        [class.active]=\"state?.selectedX === xField.id\"\n        [disabled]=\"xField.disabled\"\n        (click)=\"onXFieldSelect(xField.id)\">\n        <span class=\"organizer-submenu-check\">{{ state?.selectedX === xField.id ? '\u2713' : '' }}</span>\n        {{ xField.label }}\n      </button>\n    </div>\n\n    <mat-divider *ngIf=\"config.xFields?.length && config.yFields?.length\" class=\"organizer-champs-divider\"></mat-divider>\n\n    <!-- Bloc Y -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.yFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe vertical \u2014 Y</span>\n      <ng-container *ngFor=\"let yField of config.yFields\">\n\n        <!-- Y simple (Count sans agr\u00E9gat ni stack) -->\n        <!-- Y simple (Count ou m\u00E9trique directe) -->\n        <button *ngIf=\"!yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          (click)=\"onYFieldSelect(yField.id)\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n        </button>\n\n        <!-- Y avec agr\u00E9gats \u2192 sous-menu -->\n        <button *ngIf=\"yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item organizer-submenu-item--has-children\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          [matMenuTriggerFor]=\"yAggSubMenu\"\n          [matMenuTriggerData]=\"{ yField: yField }\"\n          (mousedown)=\"$event.stopPropagation()\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n          <mat-icon class=\"organizer-submenu-arrow\">chevron_right</mat-icon>\n        </button>\n\n      </ng-container>\n    </div>\n\n  </div>\n</mat-menu>\n\n<!-- Sous-menu dynamique : agr\u00E9gats d'un champ Y -->\n<mat-menu #yAggSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <ng-template matMenuContent let-yField=\"yField\">\n    <div class=\"organizer-submenu\"\n         (mousedown)=\"$event.stopPropagation()\"\n         (click)=\"$event.stopPropagation()\"\n         (keydown)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let agg of yField.aggregates\"\n        [class.active]=\"isYAggregateActive(yField.id, agg.id)\"\n        (click)=\"onYAggregateSelect(yField.id, agg.id)\">\n        <span class=\"organizer-submenu-check\">{{ isYAggregateActive(yField.id, agg.id) ? '\u2713' : '' }}</span>\n        {{ agg.label }}\n      </button>\n    </div>\n  </ng-template>\n</mat-menu>\n\n<!-- Sous-menu : Champs table (toggle colonnes) -->\n<mat-menu #fieldsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let field of config.fields\"\n      [class.active]=\"isFieldVisible(field.id)\"\n      (click)=\"onFieldToggle(field.id, !isFieldVisible(field.id))\">\n      <span class=\"organizer-submenu-check\">{{ isFieldVisible(field.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"field.icon\" class=\"organizer-submenu-icon\">{{ field.icon }}</mat-icon>      {{ field.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Grouper par -->\n<mat-menu #groupsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let group of config.groups\"\n      [class.active]=\"state?.selectedGroupBy === group.id\"\n      (click)=\"onGroupBySelect(group.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedGroupBy === group.id ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"group.icon\" class=\"organizer-submenu-icon\">{{ group.icon }}</mat-icon>      {{ group.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Filtrer par -->\n<mat-menu #slicesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let slice of config.slices\"\n      [class.active]=\"state?.selectedSlices?.includes(slice.id)\"\n      (click)=\"onSliceClick(slice.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedSlices?.includes(slice.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"slice.icon\" class=\"organizer-submenu-icon\">{{ slice.icon }}</mat-icon>      {{ slice.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Template -->\n<mat-menu #templateSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let tmpl of config.templates\"\n      [class.active]=\"state?.selectedTemplate === tmpl.id\"\n      [title]=\"tmpl.description || ''\"\n      (click)=\"onTemplateSelect(tmpl.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedTemplate === tmpl.id ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"tmpl.icon\" class=\"organizer-submenu-icon\">{{ tmpl.icon }}</mat-icon>\n      {{ tmpl.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Pr\u00E9f\u00E9rences -->\n<mat-menu #preferencesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\" (click)=\"onPreferencesEdit()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">edit</mat-icon>\u00C9diter\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" (click)=\"onPreferencesSave()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">save</mat-icon>Sauvegarder\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" [disabled]=\"!config.hasSavedPreferences\" (click)=\"onPreferencesClear()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">delete_outline</mat-icon>R\u00E9initialiser\n    </button>\n  </div>\n</mat-menu>\n\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.organizer-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--jqt-organizer-button-height, 34px);width:var(--jqt-organizer-button-width, 34px);min-width:var(--jqt-organizer-button-min-width, 34px);border:1px solid var(--jqt-organizer-button-border-color, #e0e0e0);border-radius:var(--jqt-organizer-button-radius, 8px);background:var(--jqt-organizer-button-background, #fff);padding:0;overflow:hidden;cursor:pointer;box-sizing:border-box}.organizer-btn:hover{border-color:var(--jqt-organizer-button-hover-border-color, #9e9e9e);background:var(--jqt-organizer-button-hover-background, var(--jqt-organizer-button-background, #fff))}.organizer-btn--labeled{width:auto;padding:0 12px}.organizer-btn-label{font-size:13px;font-weight:600;line-height:1;white-space:nowrap}.organizer-btn-icon.mat-icon,.organizer-btn-icon.material-icons{position:static;display:block!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important;font-size:18px!important;line-height:18px!important;text-align:center;vertical-align:middle;transform:none;color:var(--jqt-organizer-button-icon-color, #000000)}.mat-mdc-menu-panel:has(.organizer-menu-label){min-width:170px!important;max-width:320px!important;overflow:visible!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .mat-mdc-menu-content{padding:4px 0!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 20px);overflow:hidden;white-space:nowrap}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-label,.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-value{display:block}.organizer-menu-label{font-size:13px;font-weight:500;color:#212121;flex:0 0 auto;white-space:nowrap;padding-right:8px}.organizer-menu-value{font-size:12px;color:#757575;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.organizer-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}.organizer-submenu .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-submenu .organizer-submenu-item:hover{background:#f5f5f5}.organizer-submenu .organizer-submenu-item.active{font-weight:600}.organizer-submenu .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-submenu-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#212121;margin-right:4px}.organizer-menu-export.mat-mdc-menu-item{min-height:42px;padding:0 14px}.organizer-menu-export-icon{font-size:16px!important;width:16px!important;height:16px!important;color:#424242;margin-right:8px}.organizer-divider{margin:4px 0!important}.organizer-champs-wrapper{padding:4px 6px;min-width:200px;box-sizing:border-box;display:flex;flex-direction:column}.organizer-champs-block{display:flex;flex-direction:column}.organizer-champs-block-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9e9e9e;padding:6px 2px 2px}.organizer-champs-divider{margin:4px 0!important}.organizer-champs-wrapper .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;font-family:inherit;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-champs-wrapper .organizer-submenu-item:hover:not([disabled]){background:#f5f5f5}.organizer-champs-wrapper .organizer-submenu-item.active{font-weight:600}.organizer-champs-wrapper .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-champs-wrapper .organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-champs-wrapper .organizer-submenu-item--has-children{padding-right:8px}.organizer-champs-wrapper .organizer-submenu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#00000061;margin-left:auto}\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: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizerButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule], selector: 'organizer-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"organizer-btn\" [matMenuTriggerFor]=\"viewMenu\" #mainMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"'View'\">\n  <mat-icon class=\"organizer-btn-icon\">{{ config.buttonIcon || 'settings' }}</mat-icon>\n</button>\n\n<mat-menu #viewMenu=\"matMenu\" panelClass=\"organizer-menu-panel\">\n\n  <!-- Champs : mode chart (X + Y) -->\n  <button *ngIf=\"hasChartFields()\" mat-menu-item [matMenuTriggerFor]=\"champsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && (activeXLabel() || activeYLabel())\">\n      {{ activeXLabel() }}<ng-container *ngIf=\"activeXLabel() && activeYLabel()\"> / </ng-container>{{ activeYLabel() }}\n    </span>\n  </button>\n\n  <!-- Champs : mode table (toggle colonnes) -->\n  <button *ngIf=\"hasTableFields()\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues\">{{ fieldsSummary() }}</span>\n  </button>\n\n  <!-- Grouper par -->\n  <button *ngIf=\"config.groups?.length\" mat-menu-item [matMenuTriggerFor]=\"groupsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Grouper par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeGroupByLabel()\">{{ activeGroupByLabel() }}</span>\n  </button>\n\n  <!-- Filtrer par -->\n  <button *ngIf=\"config.slices?.length\" mat-menu-item [matMenuTriggerFor]=\"slicesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Filtrer par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeSlicesLabel()\">{{ activeSlicesLabel() }}</span>\n  </button>\n\n  <!-- Template -->\n  <button *ngIf=\"config.templates?.length\" mat-menu-item [matMenuTriggerFor]=\"templateSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Template</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeTemplateLabel()\">{{ activeTemplateLabel() }}</span>\n  </button>\n\n  <!-- Actions du visuel courant -->\n  <mat-divider *ngIf=\"hasActions() && hasMenuItemsBeforeActions()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasActions() && hasOtherMenuItems()\" mat-menu-item [matMenuTriggerFor]=\"actionsSubMenu\" class=\"organizer-menu-trigger\">\n    <mat-icon *ngIf=\"config.actions?.icon\" class=\"organizer-menu-export-icon\">{{ config.actions?.icon }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ actionsLabel() }}</span>\n  </button>\n\n  <!-- Actions directes lorsqu'il n'y a aucun autre item principal -->\n  <ng-container *ngIf=\"hasActions() && !hasOtherMenuItems()\">\n    <button *ngIf=\"isCopyActionVisible()\" mat-menu-item type=\"button\" (click)=\"onCopyVisual()\">\n      <mat-icon class=\"organizer-menu-export-icon\">content_copy</mat-icon>\n      <span class=\"organizer-menu-label\">Copier</span>\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" mat-menu-item type=\"button\" (click)=\"onToggleFullscreen()\">\n      <mat-icon class=\"organizer-menu-export-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      <span class=\"organizer-menu-label\">{{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}</span>\n    </button>\n  </ng-container>\n\n  <!-- Export direct (mode table) -->\n  <mat-divider *ngIf=\"config.showExport\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showExport && !hasExportSubMenu()\" mat-menu-item type=\"button\" class=\"organizer-menu-export\" (click)=\"onExport()\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Export graphique (mode chart) \u2014 ouvre un sous-menu -->\n  <button *ngIf=\"config.showExport && hasExportSubMenu()\" mat-menu-item [matMenuTriggerFor]=\"exportSubMenu\" class=\"organizer-menu-trigger organizer-menu-export\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Pr\u00E9f\u00E9rences -->\n  <mat-divider *ngIf=\"config.showPreferences\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showPreferences\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Pr\u00E9f\u00E9rences</span>\n  </button>\n\n  <!-- Switch chart / table -->\n  <mat-divider *ngIf=\"hasSwitchView()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasSwitchView()\" mat-menu-item type=\"button\" class=\"organizer-menu-trigger\" (click)=\"onSwitchView()\">\n    <mat-icon class=\"organizer-menu-export-icon\">{{ config.switchView?.currentView === 'chart' ? 'table_chart' : 'bar_chart' }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ config.switchView?.currentView === 'chart' ? 'Tableau' : 'Graphique' }}</span>\n  </button>\n\n</mat-menu>\n\n<!-- Sous-menu : actions du visuel -->\n<mat-menu #actionsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"isCopyActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onCopyVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">content_copy</mat-icon>\n      Copier\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onToggleFullscreen()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      {{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Export graphique -->\n<mat-menu #exportSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"config.onExportVisual\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onExportVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">image</mat-icon>\n      Visuel\n    </button>\n    <button *ngIf=\"config.onExportData\" type=\"button\" class=\"organizer-submenu-item\"\n      (mousedown)=\"onExportData()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">table_chart</mat-icon>\n      Donn\u00E9es\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Champs chart (X + Y) -->\n<mat-menu #champsSubMenu=\"matMenu\" panelClass=\"organizer-champs-panel\">\n  <div class=\"organizer-champs-wrapper\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n\n    <!-- Bloc X -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.xFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe horizontal \u2014 X</span>\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let xField of config.xFields\"\n        [class.active]=\"state?.selectedX === xField.id\"\n        [disabled]=\"xField.disabled\"\n        (mousedown)=\"onXFieldSelect(xField.id)\">\n        <span class=\"organizer-submenu-check\">{{ state?.selectedX === xField.id ? '\u2713' : '' }}</span>\n        {{ xField.label }}\n      </button>\n    </div>\n\n    <mat-divider *ngIf=\"config.xFields?.length && config.yFields?.length\" class=\"organizer-champs-divider\"></mat-divider>\n\n    <!-- Bloc Y -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.yFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe vertical \u2014 Y</span>\n      <ng-container *ngFor=\"let yField of config.yFields\">\n\n        <!-- Y simple (Count sans agr\u00E9gat ni stack) -->\n        <!-- Y simple (Count ou m\u00E9trique directe) -->\n        <button *ngIf=\"!yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          (mousedown)=\"onYFieldSelect(yField.id)\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n        </button>\n\n        <!-- Y avec agr\u00E9gats \u2192 sous-menu -->\n        <button *ngIf=\"yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item organizer-submenu-item--has-children\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          [matMenuTriggerFor]=\"yAggSubMenu\"\n          [matMenuTriggerData]=\"{ yField: yField }\"\n          (mousedown)=\"$event.stopPropagation()\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n          <mat-icon class=\"organizer-submenu-arrow\">chevron_right</mat-icon>\n        </button>\n\n      </ng-container>\n    </div>\n\n  </div>\n</mat-menu>\n\n<!-- Sous-menu dynamique : agr\u00E9gats d'un champ Y -->\n<mat-menu #yAggSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <ng-template matMenuContent let-yField=\"yField\">\n    <div class=\"organizer-submenu\"\n         (mousedown)=\"$event.stopPropagation()\"\n         (click)=\"$event.stopPropagation()\"\n         (keydown)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let agg of yField.aggregates\"\n        [class.active]=\"isYAggregateActive(yField.id, agg.id)\"\n        (mousedown)=\"onYAggregateSelect(yField.id, agg.id)\">\n        <span class=\"organizer-submenu-check\">{{ isYAggregateActive(yField.id, agg.id) ? '\u2713' : '' }}</span>\n        {{ agg.label }}\n      </button>\n    </div>\n  </ng-template>\n</mat-menu>\n\n<!-- Sous-menu : Champs table (toggle colonnes) -->\n<mat-menu #fieldsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let field of config.fields\"\n      [class.active]=\"isFieldVisible(field.id)\"\n      (mousedown)=\"onFieldToggle(field.id, !isFieldVisible(field.id))\">\n      <span class=\"organizer-submenu-check\">{{ isFieldVisible(field.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"field.icon\" class=\"organizer-submenu-icon\">{{ field.icon }}</mat-icon>      {{ field.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Grouper par -->\n<mat-menu #groupsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let group of config.groups\"\n      [class.active]=\"state?.selectedGroupBy === group.id\"\n      (mousedown)=\"onGroupBySelect(group.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedGroupBy === group.id ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"group.icon\" class=\"organizer-submenu-icon\">{{ group.icon }}</mat-icon>      {{ group.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Filtrer par -->\n<mat-menu #slicesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let slice of config.slices\"\n      [class.active]=\"state?.selectedSlices?.includes(slice.id)\"\n      (mousedown)=\"onSliceClick(slice.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedSlices?.includes(slice.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"slice.icon\" class=\"organizer-submenu-icon\">{{ slice.icon }}</mat-icon>      {{ slice.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Template -->\n<mat-menu #templateSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let tmpl of config.templates\"\n      [class.active]=\"state?.selectedTemplate === tmpl.id\"\n      [title]=\"tmpl.description || ''\"\n      (mousedown)=\"onTemplateSelect(tmpl.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedTemplate === tmpl.id ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"tmpl.icon\" class=\"organizer-submenu-icon\">{{ tmpl.icon }}</mat-icon>\n      {{ tmpl.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Pr\u00E9f\u00E9rences -->\n<mat-menu #preferencesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\" (mousedown)=\"onPreferencesEdit()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">edit</mat-icon>\u00C9diter\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" (mousedown)=\"onPreferencesSave()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">save</mat-icon>Sauvegarder\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" [disabled]=\"!config.hasSavedPreferences\" (mousedown)=\"onPreferencesClear()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">delete_outline</mat-icon>R\u00E9initialiser\n    </button>\n  </div>\n</mat-menu>\n\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.organizer-btn{position:relative;display:block;height:34px;width:34px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;padding:0;overflow:hidden;cursor:pointer;box-sizing:border-box}.organizer-btn:hover{border-color:#9e9e9e}.organizer-btn-icon.mat-icon,.organizer-btn-icon.material-icons{position:absolute;inset:0;display:block!important;width:18px!important;height:18px!important;margin:auto!important;padding:0!important;font-size:18px!important;line-height:18px!important;text-align:center;vertical-align:middle;transform:none;color:#000}.mat-mdc-menu-panel:has(.organizer-menu-label){min-width:170px!important;max-width:320px!important;overflow:visible!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .mat-mdc-menu-content{padding:4px 0!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .mdc-list-item__primary-text{display:flex;align-items:center;width:100%;overflow:hidden}.organizer-menu-label{font-size:13px;font-weight:500;color:#212121;flex:0 0 auto;white-space:nowrap;padding-right:8px}.organizer-menu-value{font-size:12px;color:#757575;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.organizer-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}.organizer-submenu .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-submenu .organizer-submenu-item:hover{background:#f5f5f5}.organizer-submenu .organizer-submenu-item.active{font-weight:600}.organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-submenu-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#212121;margin-right:4px}.organizer-menu-export.mat-mdc-menu-item{min-height:42px;padding:0 14px}.organizer-menu-export-icon{font-size:16px!important;width:16px!important;height:16px!important;color:#424242;margin-right:8px}.organizer-divider{margin:4px 0!important}.organizer-champs-wrapper{padding:4px 6px;min-width:200px;box-sizing:border-box;display:flex;flex-direction:column}.organizer-champs-block{display:flex;flex-direction:column}.organizer-champs-block-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9e9e9e;padding:6px 2px 2px}.organizer-champs-divider{margin:4px 0!important}.organizer-champs-wrapper .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;font-family:inherit;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-champs-wrapper .organizer-submenu-item:hover:not([disabled]){background:#f5f5f5}.organizer-champs-wrapper .organizer-submenu-item.active{font-weight:600}.organizer-champs-wrapper .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-champs-wrapper .organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-champs-wrapper .organizer-submenu-item--has-children{padding-right:8px}.organizer-champs-wrapper .organizer-submenu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#00000061;margin-left:auto}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule], selector: 'organizer-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"organizer-btn\" [class.organizer-btn--labeled]=\"!!config.buttonLabel\" [matMenuTriggerFor]=\"viewMenu\" #mainMenuTrigger=\"matMenuTrigger\" [attr.aria-label]=\"config.buttonLabel || 'Personnaliser la vue'\" [attr.title]=\"config.buttonLabel || 'Personnaliser la vue'\">\n  <mat-icon *ngIf=\"config.showButtonIcon !== false\" class=\"organizer-btn-icon\">{{ config.buttonIcon || 'settings' }}</mat-icon>\n  <span *ngIf=\"config.buttonLabel\" class=\"organizer-btn-label\">{{ config.buttonLabel }}</span>\n</button>\n\n<mat-menu #viewMenu=\"matMenu\" panelClass=\"organizer-menu-panel\">\n\n  <!-- Type -->\n  <button *ngIf=\"hasChartTypes()\" mat-menu-item [matMenuTriggerFor]=\"chartTypesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Type</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeChartTypeLabel()\">{{ activeChartTypeLabel() }}</span>\n  </button>\n\n  <!-- Champs : mode chart (X + Y) -->\n  <button *ngIf=\"hasChartFields()\" mat-menu-item [matMenuTriggerFor]=\"champsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && (activeXLabel() || activeYLabel())\">\n      {{ activeXLabel() }}<ng-container *ngIf=\"activeXLabel() && activeYLabel()\"> / </ng-container>{{ activeYLabel() }}\n    </span>\n  </button>\n\n  <!-- Champs : mode table (toggle colonnes) -->\n  <button *ngIf=\"hasTableFields()\" mat-menu-item [matMenuTriggerFor]=\"fieldsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Champs</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues\">{{ fieldsSummary() }}</span>\n  </button>\n\n  <!-- Grouper par -->\n  <button *ngIf=\"config.groups?.length\" mat-menu-item [matMenuTriggerFor]=\"groupsSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Grouper par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeGroupByLabel()\">{{ activeGroupByLabel() }}</span>\n  </button>\n\n  <!-- Filtrer par -->\n  <button *ngIf=\"config.slices?.length\" mat-menu-item [matMenuTriggerFor]=\"slicesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Filtrer par</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeSlicesLabel()\">{{ activeSlicesLabel() }}</span>\n  </button>\n\n  <!-- Template -->\n  <button *ngIf=\"config.templates?.length\" mat-menu-item [matMenuTriggerFor]=\"templateSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Template</span>\n    <span class=\"organizer-menu-value\" *ngIf=\"!hideMenuValues && activeTemplateLabel()\">{{ activeTemplateLabel() }}</span>\n  </button>\n\n  <!-- Actions du visuel courant -->\n  <mat-divider *ngIf=\"hasActions() && hasMenuItemsBeforeActions()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasActions() && hasOtherMenuItems()\" mat-menu-item [matMenuTriggerFor]=\"actionsSubMenu\" class=\"organizer-menu-trigger\">\n    <mat-icon *ngIf=\"config.actions?.icon\" class=\"organizer-menu-export-icon\">{{ config.actions?.icon }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ actionsLabel() }}</span>\n  </button>\n\n  <!-- Actions directes lorsqu'il n'y a aucun autre item principal -->\n  <ng-container *ngIf=\"hasActions() && !hasOtherMenuItems()\">\n    <button *ngIf=\"isCopyActionVisible()\" mat-menu-item type=\"button\" (click)=\"onCopyVisual()\">\n      <mat-icon class=\"organizer-menu-export-icon\">content_copy</mat-icon>\n      <span class=\"organizer-menu-label\">Copier</span>\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" mat-menu-item type=\"button\" (click)=\"onToggleFullscreen()\">\n      <mat-icon class=\"organizer-menu-export-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      <span class=\"organizer-menu-label\">{{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}</span>\n    </button>\n  </ng-container>\n\n  <!-- Export direct (mode table) -->\n  <mat-divider *ngIf=\"config.showExport\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showExport && !hasExportSubMenu()\" mat-menu-item type=\"button\" class=\"organizer-menu-export\" (click)=\"onExport()\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Export graphique (mode chart) \u2014 ouvre un sous-menu -->\n  <button *ngIf=\"config.showExport && hasExportSubMenu()\" mat-menu-item [matMenuTriggerFor]=\"exportSubMenu\" class=\"organizer-menu-trigger organizer-menu-export\">\n    <mat-icon class=\"organizer-menu-export-icon\">download</mat-icon>\n    <span class=\"organizer-menu-label\">Exporter</span>\n  </button>\n\n  <!-- Pr\u00E9f\u00E9rences -->\n  <mat-divider *ngIf=\"config.showPreferences\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showPreferences\" mat-menu-item [matMenuTriggerFor]=\"preferencesSubMenu\" class=\"organizer-menu-trigger\">\n    <span class=\"organizer-menu-label\">Pr\u00E9f\u00E9rences</span>\n  </button>\n\n  <mat-divider *ngIf=\"config.showReset === true\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"config.showReset === true\" mat-menu-item type=\"button\" class=\"organizer-menu-reset\" (click)=\"onReset()\">\n    <mat-icon class=\"organizer-menu-export-icon\">restart_alt</mat-icon>\n    <span class=\"organizer-menu-label\">R\u00E9initialiser la vue</span>\n  </button>\n\n  <!-- Switch chart / table -->\n  <mat-divider *ngIf=\"hasSwitchView()\" class=\"organizer-divider\"></mat-divider>\n  <button *ngIf=\"hasSwitchView()\" mat-menu-item type=\"button\" class=\"organizer-menu-trigger\" (click)=\"onSwitchView()\">\n    <mat-icon class=\"organizer-menu-export-icon\">{{ config.switchView?.currentView === 'chart' ? 'table_chart' : 'bar_chart' }}</mat-icon>\n    <span class=\"organizer-menu-label\">{{ config.switchView?.currentView === 'chart' ? 'Tableau' : 'Graphique' }}</span>\n  </button>\n\n</mat-menu>\n\n<!-- Sous-menu : types de graphique -->\n<mat-menu #chartTypesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let chartType of config.chartTypes\"\n      [class.active]=\"isChartTypeActive(chartType.id)\"\n      [disabled]=\"chartType.disabled\"\n      (click)=\"onChartTypeSelect(chartType.id)\">\n      <span class=\"organizer-submenu-check\">{{ isChartTypeActive(chartType.id) ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"chartType.icon\" class=\"organizer-submenu-icon\">{{ chartType.icon }}</mat-icon>\n      {{ chartType.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : actions du visuel -->\n<mat-menu #actionsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"isCopyActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onCopyVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">content_copy</mat-icon>\n      Copier\n    </button>\n    <button *ngIf=\"isFullscreenActionVisible()\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onToggleFullscreen()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">{{ config.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\n      {{ config.isFullscreen ? 'Quitter le plein \u00E9cran' : 'Plein \u00E9cran' }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Export graphique -->\n<mat-menu #exportSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button *ngIf=\"config.onExportVisual\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onExportVisual()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">image</mat-icon>\n      Visuel\n    </button>\n    <button *ngIf=\"config.onExportData\" type=\"button\" class=\"organizer-submenu-item\"\n      (click)=\"onExportData()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">table_chart</mat-icon>\n      Donn\u00E9es\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Champs chart (X + Y) -->\n<mat-menu #champsSubMenu=\"matMenu\" panelClass=\"organizer-champs-panel\">\n  <div class=\"organizer-champs-wrapper\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n\n    <!-- Bloc X -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.xFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe horizontal \u2014 X</span>\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let xField of config.xFields\"\n        [class.active]=\"state?.selectedX === xField.id\"\n        [disabled]=\"xField.disabled\"\n        (click)=\"onXFieldSelect(xField.id)\">\n        <span class=\"organizer-submenu-check\">{{ state?.selectedX === xField.id ? '\u2713' : '' }}</span>\n        {{ xField.label }}\n      </button>\n    </div>\n\n    <mat-divider *ngIf=\"config.xFields?.length && config.yFields?.length\" class=\"organizer-champs-divider\"></mat-divider>\n\n    <!-- Bloc Y -->\n    <div class=\"organizer-champs-block\" *ngIf=\"config.yFields?.length\">\n      <span class=\"organizer-champs-block-title\">Axe vertical \u2014 Y</span>\n      <ng-container *ngFor=\"let yField of config.yFields\">\n\n        <!-- Y simple (Count sans agr\u00E9gat ni stack) -->\n        <!-- Y simple (Count ou m\u00E9trique directe) -->\n        <button *ngIf=\"!yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          (click)=\"onYFieldSelect(yField.id)\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n        </button>\n\n        <!-- Y avec agr\u00E9gats \u2192 sous-menu -->\n        <button *ngIf=\"yField.aggregates?.length\"\n          type=\"button\" class=\"organizer-submenu-item organizer-submenu-item--has-children\"\n          [class.active]=\"isYActive(yField.id)\"\n          [disabled]=\"yField.disabled\"\n          [matMenuTriggerFor]=\"yAggSubMenu\"\n          [matMenuTriggerData]=\"{ yField: yField }\"\n          (mousedown)=\"$event.stopPropagation()\">\n          <span class=\"organizer-submenu-check\">{{ isYActive(yField.id) ? '\u2713' : '' }}</span>\n          {{ yField.label }}\n          <mat-icon class=\"organizer-submenu-arrow\">chevron_right</mat-icon>\n        </button>\n\n      </ng-container>\n    </div>\n\n  </div>\n</mat-menu>\n\n<!-- Sous-menu dynamique : agr\u00E9gats d'un champ Y -->\n<mat-menu #yAggSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <ng-template matMenuContent let-yField=\"yField\">\n    <div class=\"organizer-submenu\"\n         (mousedown)=\"$event.stopPropagation()\"\n         (click)=\"$event.stopPropagation()\"\n         (keydown)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"organizer-submenu-item\"\n        *ngFor=\"let agg of yField.aggregates\"\n        [class.active]=\"isYAggregateActive(yField.id, agg.id)\"\n        (click)=\"onYAggregateSelect(yField.id, agg.id)\">\n        <span class=\"organizer-submenu-check\">{{ isYAggregateActive(yField.id, agg.id) ? '\u2713' : '' }}</span>\n        {{ agg.label }}\n      </button>\n    </div>\n  </ng-template>\n</mat-menu>\n\n<!-- Sous-menu : Champs table (toggle colonnes) -->\n<mat-menu #fieldsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let field of config.fields\"\n      [class.active]=\"isFieldVisible(field.id)\"\n      (click)=\"onFieldToggle(field.id, !isFieldVisible(field.id))\">\n      <span class=\"organizer-submenu-check\">{{ isFieldVisible(field.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"field.icon\" class=\"organizer-submenu-icon\">{{ field.icon }}</mat-icon>      {{ field.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Grouper par -->\n<mat-menu #groupsSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let group of config.groups\"\n      [class.active]=\"state?.selectedGroupBy === group.id\"\n      (click)=\"onGroupBySelect(group.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedGroupBy === group.id ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"group.icon\" class=\"organizer-submenu-icon\">{{ group.icon }}</mat-icon>      {{ group.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Filtrer par -->\n<mat-menu #slicesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let slice of config.slices\"\n      [class.active]=\"state?.selectedSlices?.includes(slice.id)\"\n      (click)=\"onSliceClick(slice.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedSlices?.includes(slice.id) ? '\u2713' : '' }}</span>      <mat-icon *ngIf=\"slice.icon\" class=\"organizer-submenu-icon\">{{ slice.icon }}</mat-icon>      {{ slice.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Template -->\n<mat-menu #templateSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\"\n      *ngFor=\"let tmpl of config.templates\"\n      [class.active]=\"state?.selectedTemplate === tmpl.id\"\n      [title]=\"tmpl.description || ''\"\n      (click)=\"onTemplateSelect(tmpl.id)\">\n      <span class=\"organizer-submenu-check\">{{ state?.selectedTemplate === tmpl.id ? '\u2713' : '' }}</span>\n      <mat-icon *ngIf=\"tmpl.icon\" class=\"organizer-submenu-icon\">{{ tmpl.icon }}</mat-icon>\n      {{ tmpl.label }}\n    </button>\n  </div>\n</mat-menu>\n\n<!-- Sous-menu : Pr\u00E9f\u00E9rences -->\n<mat-menu #preferencesSubMenu=\"matMenu\" panelClass=\"organizer-submenu-panel\">\n  <div class=\"organizer-submenu\"\n       (mousedown)=\"$event.stopPropagation()\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <button type=\"button\" class=\"organizer-submenu-item\" (click)=\"onPreferencesEdit()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">edit</mat-icon>\u00C9diter\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" (click)=\"onPreferencesSave()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">save</mat-icon>Sauvegarder\n    </button>\n    <button type=\"button\" class=\"organizer-submenu-item\" [disabled]=\"!config.hasSavedPreferences\" (click)=\"onPreferencesClear()\">\n      <span class=\"organizer-submenu-check\"></span>\n      <mat-icon class=\"organizer-submenu-icon\">delete_outline</mat-icon>R\u00E9initialiser\n    </button>\n  </div>\n</mat-menu>\n\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.organizer-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--jqt-organizer-button-height, 34px);width:var(--jqt-organizer-button-width, 34px);min-width:var(--jqt-organizer-button-min-width, 34px);border:1px solid var(--jqt-organizer-button-border-color, #e0e0e0);border-radius:var(--jqt-organizer-button-radius, 8px);background:var(--jqt-organizer-button-background, #fff);padding:0;overflow:hidden;cursor:pointer;box-sizing:border-box}.organizer-btn:hover{border-color:var(--jqt-organizer-button-hover-border-color, #9e9e9e);background:var(--jqt-organizer-button-hover-background, var(--jqt-organizer-button-background, #fff))}.organizer-btn--labeled{width:auto;padding:0 12px}.organizer-btn-label{font-size:13px;font-weight:600;line-height:1;white-space:nowrap}.organizer-btn-icon.mat-icon,.organizer-btn-icon.material-icons{position:static;display:block!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important;font-size:18px!important;line-height:18px!important;text-align:center;vertical-align:middle;transform:none;color:var(--jqt-organizer-button-icon-color, #000000)}.mat-mdc-menu-panel:has(.organizer-menu-label){min-width:170px!important;max-width:320px!important;overflow:visible!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .mat-mdc-menu-content{padding:4px 0!important}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item{min-height:42px;padding:0 14px;display:flex;align-items:center;box-sizing:border-box}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 20px);overflow:hidden;white-space:nowrap}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-label,.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-menu-panel:has(.organizer-menu-label) .organizer-menu-trigger.mat-mdc-menu-item .organizer-menu-value{display:block}.organizer-menu-label{font-size:13px;font-weight:500;color:#212121;flex:0 0 auto;white-space:nowrap;padding-right:8px}.organizer-menu-value{font-size:12px;color:#757575;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.organizer-submenu{padding:4px 6px;min-width:180px;box-sizing:border-box}.organizer-submenu .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-submenu .organizer-submenu-item:hover{background:#f5f5f5}.organizer-submenu .organizer-submenu-item.active{font-weight:600}.organizer-submenu .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-submenu-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#212121;margin-right:4px}.organizer-menu-export.mat-mdc-menu-item{min-height:42px;padding:0 14px}.organizer-menu-export-icon{font-size:16px!important;width:16px!important;height:16px!important;color:#424242;margin-right:8px}.organizer-divider{margin:4px 0!important}.organizer-champs-wrapper{padding:4px 6px;min-width:200px;box-sizing:border-box;display:flex;flex-direction:column}.organizer-champs-block{display:flex;flex-direction:column}.organizer-champs-block-title{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9e9e9e;padding:6px 2px 2px}.organizer-champs-divider{margin:4px 0!important}.organizer-champs-wrapper .organizer-submenu-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:none;background:transparent;border-radius:6px;font-size:13px;font-family:inherit;color:#212121;cursor:pointer;text-align:left;box-sizing:border-box;white-space:nowrap}.organizer-champs-wrapper .organizer-submenu-item:hover:not([disabled]){background:#f5f5f5}.organizer-champs-wrapper .organizer-submenu-item.active{font-weight:600}.organizer-champs-wrapper .organizer-submenu-item[disabled]{opacity:.38;cursor:default}.organizer-champs-wrapper .organizer-submenu-check{flex-shrink:0;width:16px;text-align:center;font-size:12px;color:#212121}.organizer-champs-wrapper .organizer-submenu-item--has-children{padding-right:8px}.organizer-champs-wrapper .organizer-submenu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#00000061;margin-left:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], state: [{
@@ -711,18 +751,26 @@ class SlicePanelComponent {
     }
     getActiveFilters() {
         const result = {};
-        this._cachedSlices.forEach((_, idx) => {
+        this._cachedSlices.forEach((slice, idx) => {
             const keys = this.activeKeysBySlice.get(idx);
-            result[idx] = keys ? [...keys] : [];
+            result[this._getPersistentSliceKey(slice, idx)] = keys ? [...keys] : [];
         });
         return result;
     }
     restoreFilters(filters) {
-        this.activeKeysBySlice = new Map(Object.entries(filters).map(([idx, keys]) => [Number(idx), new Set(keys)]));
+        this.activeKeysBySlice = new Map();
+        this._cachedSlices.forEach((slice, index) => {
+            // Les préférences historiques utilisaient l'index numérique comme clé.
+            const keys = filters[this._getPersistentSliceKey(slice, index)] ?? filters[String(index)];
+            if (keys?.length)
+                this.activeKeysBySlice.set(index, new Set(keys));
+        });
         this._emitFilter();
         this._cdr.markForCheck();
     }
     addDynamicSlice(column) {
+        if (this._dynamicSlices.some(slice => slice.key === column.key))
+            return;
         const distinctValues = this._computeDistinctValues(column.key);
         const newSlice = {
             title: column.header,
@@ -788,6 +836,9 @@ class SlicePanelComponent {
         const dynamicIndex = sliceIndex - this.staticSliceCount;
         return this._dynamicSlices[dynamicIndex]?.key ?? null;
     }
+    _getPersistentSliceKey(slice, index) {
+        return slice.columnKey ? `column:${slice.columnKey}` : `index:${index}`;
+    }
     _getSliceIdentity(slice, fallbackIndex) {
         if (slice.columnKey)
             return `column:${slice.columnKey}`;
@@ -904,11 +955,11 @@ class SlicePanelComponent {
         }, 50);
     }
     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" }, host: { properties: { "class.collapsed": "this.hostCollapsed" } }, 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: ["@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}:host{display:block;height:100%;min-height:0;box-sizing:border-box;animation:slideInLeft .3s cubic-bezier(.34,1.56,.64,1) forwards}.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 }); }
+    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" }, host: { properties: { "class.collapsed": "this.hostCollapsed" } }, 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\">\n          <button\n            type=\"button\"\n            class=\"slice-title-toggle\"\n            [attr.aria-controls]=\"'slice-section-' + si\"\n            [attr.aria-expanded]=\"!isSliceCollapsed(si)\"\n            (click)=\"toggleSliceCollapse(si)\"\n          >\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            <span class=\"slice-title\">{{ slice.title || i18n.filterBlockDefaultTitle }}</span>\n          </button>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            [attr.aria-label]=\"'Supprimer le filtre ' + (slice.title || i18n.filterBlockDefaultTitle)\"\n            (click)=\"removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div [id]=\"'slice-section-' + si\" 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: ["@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}:host{display:block;height:100%;min-height:0;box-sizing:border-box;animation:slideInLeft .3s cubic-bezier(.34,1.56,.64,1) forwards}.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:var(--jqt-slice-header-height, 34px);padding:0 8px;margin-bottom:var(--jqt-slice-header-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:var(--jqt-slice-body-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;-webkit-user-select:none;user-select:none}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.slice-title-toggle:hover .slice-title{color:var(--jqt-text-color)}.slice-title-toggle:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-toggle:focus-visible{outline:2px solid var(--jqt-primary-color);outline-offset:2px;border-radius:4px}.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:var(--jqt-slice-section-title-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%;min-height:var(--jqt-slice-item-min-height, 30px);padding:var(--jqt-slice-item-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;font-size:var(--jqt-slice-item-font-size, 13px)}.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: ["@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}:host{display:block;height:100%;min-height:0;box-sizing:border-box;animation:slideInLeft .3s cubic-bezier(.34,1.56,.64,1) forwards}.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"] }]
+            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\">\n          <button\n            type=\"button\"\n            class=\"slice-title-toggle\"\n            [attr.aria-controls]=\"'slice-section-' + si\"\n            [attr.aria-expanded]=\"!isSliceCollapsed(si)\"\n            (click)=\"toggleSliceCollapse(si)\"\n          >\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            <span class=\"slice-title\">{{ slice.title || i18n.filterBlockDefaultTitle }}</span>\n          </button>\n          <button\n            *ngIf=\"isSliceDynamic(si)\"\n            type=\"button\"\n            class=\"slice-remove-btn\"\n            [attr.aria-label]=\"'Supprimer le filtre ' + (slice.title || i18n.filterBlockDefaultTitle)\"\n            (click)=\"removeDynamicSlice(si)\"\n          >\u00D7</button>\n        </div>\n\n        <div [id]=\"'slice-section-' + si\" 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: ["@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}:host{display:block;height:100%;min-height:0;box-sizing:border-box;animation:slideInLeft .3s cubic-bezier(.34,1.56,.64,1) forwards}.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:var(--jqt-slice-header-height, 34px);padding:0 8px;margin-bottom:var(--jqt-slice-header-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:var(--jqt-slice-body-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;-webkit-user-select:none;user-select:none}.slice-title-row:first-of-type .slice-title{margin-top:0}.slice-title-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.slice-title-toggle:hover .slice-title{color:var(--jqt-text-color)}.slice-title-toggle:hover .slice-title-chevron{color:var(--jqt-text-secondary)}.slice-title-toggle:focus-visible{outline:2px solid var(--jqt-primary-color);outline-offset:2px;border-radius:4px}.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:var(--jqt-slice-section-title-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%;min-height:var(--jqt-slice-item-min-height, 30px);padding:var(--jqt-slice-item-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;font-size:var(--jqt-slice-item-font-size, 13px)}.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: [{
@@ -995,6 +1046,7 @@ var OrganizerButtonEventType;
     OrganizerButtonEventType["GROUP_BY_SELECTED"] = "groupBySelected";
     OrganizerButtonEventType["TEMPLATE_SELECTED"] = "templateSelected";
     OrganizerButtonEventType["SLICE_SELECTED"] = "sliceSelected";
+    OrganizerButtonEventType["CHART_TYPE_SELECTED"] = "chartTypeSelected";
     OrganizerButtonEventType["VIEW_SWITCHED"] = "viewSwitched";
 })(OrganizerButtonEventType || (OrganizerButtonEventType = {}));
 function getGroupItems(config) {
@@ -1670,5 +1722,5 @@ class LazyFieldManager {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MENU_ICONS, DEFAULT_MENU_LABELS, GroupByManager, LAZY_FIELD_ERROR_VALUE, LAZY_FIELD_LOADING_VALUE, LazyFieldManager, OrganizerButtonComponent, OrganizerButtonModule, OrganizerFacade, SlicePanelComponent, applyOrganizerEventToChart, buildOrganizerChartBinding, buildYFields, chartConfigToOrganizer, chartConfigToState, chartConfigToUnifiedState, handleOrganizerChartEvent, humanizeKey, resolveYKey, resolveYUnit };
+export { DEFAULT_MENU_ICONS, DEFAULT_MENU_LABELS, GroupByManager, LAZY_FIELD_ERROR_VALUE, LAZY_FIELD_LOADING_VALUE, LazyFieldManager, OrganizerButtonComponent, OrganizerButtonEventType, OrganizerButtonModule, OrganizerFacade, SlicePanelComponent, applyOrganizerEventToChart, buildOrganizerChartBinding, buildYFields, chartConfigToOrganizer, chartConfigToState, chartConfigToUnifiedState, handleOrganizerChartEvent, humanizeKey, resolveYKey, resolveYUnit };
 //# sourceMappingURL=oneteme-jquery-organizer.mjs.map