@memberjunction/ng-entity-viewer 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/view-config-panel/view-config-panel.component.js

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { DEFAULT_AGGREGATE_DISPLAY, UserInfoEngine } from '@memberjunction/core-entities';
-import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
+import { CreateEmptyFilter } from '@memberjunction/ng-filter-builder';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-ui-components";
@@ -1210,7 +1210,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
     SmartFilterPrompt = '';
     SmartFilterExplanation = '';
     // Traditional Filter state
-    FilterState = createEmptyFilter();
+    FilterState = CreateEmptyFilter();
     FilterFields = [];
     // Filter mode: 'smart' or 'traditional' (mutually exclusive)
     FilterMode = 'smart';
@@ -1220,7 +1220,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
     EditingAggregate = null;
     // Saved filter state for mode switching (BUG-006: preserve both modes' data)
     savedSmartFilterPrompt = '';
-    savedTraditionalFilter = createEmptyFilter();
+    savedTraditionalFilter = CreateEmptyFilter();
     // Filter mode switch confirmation (BUG-006)
     ShowFilterModeSwitchConfirm = false;
     PendingFilterModeSwitch = null;
@@ -1495,7 +1495,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
             }
             this.SmartFilterPrompt = '';
             this.SmartFilterExplanation = '';
-            this.FilterState = createEmptyFilter();
+            this.FilterState = CreateEmptyFilter();
             // Default to smart mode (promote AI filtering)
             this.FilterMode = 'smart';
             this.SmartFilterEnabled = true;
@@ -1555,7 +1555,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
      */
     parseFilterState(filterStateJson) {
         if (!filterStateJson) {
-            return createEmptyFilter();
+            return CreateEmptyFilter();
         }
         try {
             const parsed = JSON.parse(filterStateJson);
@@ -1563,10 +1563,10 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
             if (parsed && typeof parsed === 'object' && 'logic' in parsed && 'filters' in parsed) {
                 return parsed;
             }
-            return createEmptyFilter();
+            return CreateEmptyFilter();
         }
         catch {
-            return createEmptyFilter();
+            return CreateEmptyFilter();
         }
     }
     /**
@@ -1620,7 +1620,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
      * Clear all filters
      */
     ClearFilters() {
-        this.FilterState = createEmptyFilter();
+        this.FilterState = CreateEmptyFilter();
         this.cdr.detectChanges();
     }
     /**
@@ -2460,7 +2460,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
         if (mode === 'smart') {
             this.SmartFilterEnabled = true;
             this.SmartFilterPrompt = this.savedSmartFilterPrompt;
-            this.FilterState = createEmptyFilter();
+            this.FilterState = CreateEmptyFilter();
         }
         else {
             this.SmartFilterEnabled = false;
@@ -2818,7 +2818,7 @@ export class ViewConfigPanelComponent extends BaseAngularComponent {
             i0.ɵɵproperty("IsOpen", ctx.ShowDeleteConfirm)("Message", "Are you sure you want to delete '" + ctx.ViewName + "'?");
             i0.ɵɵadvance();
             i0.ɵɵproperty("IsOpen", ctx.ShowFilterModeSwitchConfirm)("Message", ctx.FilterMode === "smart" ? "Switching to Traditional mode will clear your smart filter prompt." : "Switching to Smart mode will clear your traditional filter rules.");
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel, i2.MJEmptyStateComponent, i2.MJAlertComponent, i3.AggregateSetupDialogComponent, i4.ConfirmDialogComponent], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1200; \n\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: calc(100% - 60px);\n  background: var(--mj-bg-surface);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1201; \n\n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n  transition: none;\n  user-select: none;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n  width: 3px;\n  height: 40px;\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-grip[_ngcontent-%COMP%] {\n  opacity: 1;\n  background: var(--mj-brand-primary);\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n\n.tab-nav[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n  position: relative;\n  white-space: nowrap;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.tab-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 8px;\n  right: 8px;\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 2px 2px 0 0;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 9px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  padding: 12px 8px;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 0;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n.column-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 13px;\n  background: transparent;\n  color: var(--mj-text-primary);\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n\n\n.column-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n\n\n.column-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  transition: background 0.15s ease;\n  cursor: default;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n}\n\n.column-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.4;\n}\n\n.column-item.drop-target[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 1px;\n  margin: 0 10px;\n}\n\n\n\n.drag-handle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  padding: 4px 2px;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .drag-handle[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.column-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.alias-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n  margin-left: 4px;\n}\n\n.format-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-status-warning);\n  margin-left: 4px;\n}\n\n\n\n.column-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .column-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .action-btn.show-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.format-editor[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.format-editor-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n\n.format-section[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.format-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.format-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0;\n}\n\n.format-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.muted-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n}\n\n\n\n.format-input[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n  width: 60px;\n  text-align: center;\n}\n\n.format-select[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.color-input[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.style-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.preview-table[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.preview-header-cell[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.preview-cell[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-cell[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n\n\n.format-actions[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n\n\n.sorting-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.sorting-header[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.sorting-description[_ngcontent-%COMP%], \n.aggregates-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n\n\n\n.add-sort-btn[_ngcontent-%COMP%], \n.add-aggregate-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  width: 100%;\n  border: 2px dashed var(--mj-border-default);\n  border-radius: 10px;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:hover:not(:disabled), \n.add-aggregate-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:disabled, \n.add-aggregate-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n\n.sort-items-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n\n.sort-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  transition: all 0.15s ease;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.4;\n}\n\n.sort-item.drop-target[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n\n\n.sort-drop-indicator[_ngcontent-%COMP%] {\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 1px;\n  margin: 0 10px;\n}\n\n\n\n.sort-priority-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n\n\n.sort-drag-handle[_ngcontent-%COMP%] {\n  cursor: grab;\n  color: var(--mj-text-disabled);\n  padding: 2px;\n  font-size: 12px;\n}\n\n.sort-drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover   .sort-drag-handle[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.sort-field-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  min-width: 0;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 5px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  color: var(--mj-text-secondary);\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.direction-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n.sort-remove-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n\n\n.view-config-alert-pos[_ngcontent-%COMP%] { margin-top: 12px; }\n.view-config-alert-pos-mb[_ngcontent-%COMP%] { margin-bottom: 12px; }\n.view-config-validation-pos[_ngcontent-%COMP%] { margin: 0 16px 12px; }\n\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mode-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  font-size: 16px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mode-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.mode-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mode-subtitle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.mode-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  margin-bottom: 12px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  padding-top: 4px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: vertical;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  min-height: 60px;\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.examples-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.example-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 20px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.filter-summary-container[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 11px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.summary-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.summary-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n\n\n.aggregates-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.aggregates-header[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n\n\n.aggregates-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n\n.aggregate-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n\n\n.agg-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 8px;\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n\n\n.agg-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.agg-details[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 2px;\n}\n\n.agg-type[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.agg-smart-badge[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n\n\n.agg-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover   .agg-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.agg-action-btn[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agg-action-btn.remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.agg-action-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.aggregates-summary[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  margin-bottom: 12px;\n}\n\n.aggregates-summary[_ngcontent-%COMP%]   .summary-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.aggregates-summary[_ngcontent-%COMP%]   .summary-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.form-input.invalid[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n  font-family: inherit;\n}\n\n.validation-error[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.checkbox-text[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid var(--mj-status-error);\n  border-radius: 8px;\n  background: var(--mj-status-error-bg);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-status-error);\n  transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 18px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.footer-btn.cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.footer-btn.cancel-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n\n\n@media (max-width: 480px) {\n  .config-panel[_ngcontent-%COMP%] {\n    width: 100vw;\n    min-width: auto;\n  }\n\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel, i2.MJEmptyStateComponent, i2.MJAlertComponent, i3.AggregateSetupDialogComponent, i4.ConfirmDialogComponent], styles: ["\n.panel-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1200; \n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n.config-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px;\n  right: 0;\n  width: 450px;\n  min-width: 360px;\n  max-width: min(800px, 100vw);\n  height: calc(100% - 60px);\n  background: var(--mj-bg-surface);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n  z-index: 1201; \n  display: flex;\n  flex-direction: column;\n  transform: translateX(100%);\n  transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n  transition: none;\n  user-select: none;\n}\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: ew-resize;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n  width: 3px;\n  height: 40px;\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%]   .resize-grip[_ngcontent-%COMP%] {\n  opacity: 1;\n  background: var(--mj-brand-primary);\n}\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n\n.tab-nav[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n  position: relative;\n  white-space: nowrap;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.tab-btn.active[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 8px;\n  right: 8px;\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 2px 2px 0 0;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 9px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n\n.tab-nav.icon-only[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  padding: 12px 8px;\n}\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n\n.config-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 0;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n.column-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: 13px;\n  background: transparent;\n  color: var(--mj-text-primary);\n}\n\n.column-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n\n.column-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n\n.column-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-radius: 8px;\n  transition: background 0.15s ease;\n  cursor: default;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n}\n\n.column-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.4;\n}\n\n.column-item.drop-target[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 1px;\n  margin: 0 10px;\n}\n\n\n.drag-handle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  padding: 4px 2px;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .drag-handle[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n.column-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.alias-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-brand-primary);\n  margin-left: 4px;\n}\n\n.format-indicator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-status-warning);\n  margin-left: 4px;\n}\n\n\n.column-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .column-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n}\n\n.column-item[_ngcontent-%COMP%]:hover   .action-btn.show-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n.format-editor[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.back-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.format-editor-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n.format-section[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.format-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n.format-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0;\n}\n\n.format-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.muted-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n}\n\n\n.format-input[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n  width: 60px;\n  text-align: center;\n}\n\n.format-select[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n.color-input[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  background: var(--mj-bg-surface);\n}\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  padding: 3px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.align-btn[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n\n.style-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.preview-table[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.preview-header-cell[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.preview-cell[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-cell[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n\n.format-actions[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n\n.sorting-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.sorting-header[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.sorting-description[_ngcontent-%COMP%], \n.aggregates-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  line-height: 1.5;\n}\n\n\n.add-sort-btn[_ngcontent-%COMP%], \n.add-aggregate-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  width: 100%;\n  border: 2px dashed var(--mj-border-default);\n  border-radius: 10px;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  margin-bottom: 12px;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:hover:not(:disabled), \n.add-aggregate-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:disabled, \n.add-aggregate-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n.sort-items-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n\n.sort-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  transition: all 0.15s ease;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] {\n  opacity: 0.4;\n}\n\n.sort-item.drop-target[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n\n.sort-drop-indicator[_ngcontent-%COMP%] {\n  height: 2px;\n  background: var(--mj-brand-primary);\n  border-radius: 1px;\n  margin: 0 10px;\n}\n\n\n.sort-priority-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n\n.sort-drag-handle[_ngcontent-%COMP%] {\n  cursor: grab;\n  color: var(--mj-text-disabled);\n  padding: 2px;\n  font-size: 12px;\n}\n\n.sort-drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover   .sort-drag-handle[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n.sort-field-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  min-width: 0;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 5px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  color: var(--mj-text-secondary);\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.direction-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n.sort-remove-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n\n.view-config-alert-pos[_ngcontent-%COMP%] { margin-top: 12px; }\n.view-config-alert-pos-mb[_ngcontent-%COMP%] { margin-bottom: 12px; }\n.view-config-validation-pos[_ngcontent-%COMP%] { margin: 0 16px 12px; }\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mode-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  font-size: 16px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%]   .mode-icon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mode-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.mode-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mode-subtitle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.mode-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  margin-bottom: 12px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  padding-top: 4px;\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: vertical;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  min-height: 60px;\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.smart-filter-textarea[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-muted);\n}\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.examples-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.example-chips[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 20px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.filter-summary-container[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 11px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.summary-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.summary-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n\n.aggregates-section[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.aggregates-header[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n\n.aggregates-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 12px;\n}\n\n.aggregate-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  transition: all 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.aggregate-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n\n.agg-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 8px;\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n\n.agg-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.agg-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.agg-details[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 2px;\n}\n\n.agg-type[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.agg-smart-badge[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n\n.agg-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.aggregate-item[_ngcontent-%COMP%]:hover   .agg-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.agg-action-btn[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.agg-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.agg-action-btn.toggle-btn.enabled[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.agg-action-btn.remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n}\n\n.agg-action-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n.aggregates-summary[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  margin-bottom: 12px;\n}\n\n.aggregates-summary[_ngcontent-%COMP%]   .summary-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.aggregates-summary[_ngcontent-%COMP%]   .summary-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n}\n\n\n.form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.form-input.invalid[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n  font-family: inherit;\n}\n\n.validation-error[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.checkbox-text[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.danger-zone[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 1px solid var(--mj-status-error);\n  border-radius: 8px;\n  background: var(--mj-status-error-bg);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-status-error);\n  transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 18px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  border-color: var(--mj-border-strong);\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.footer-btn.cancel-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n\n.footer-btn.cancel-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n\n@media (max-width: 480px) {\n  .config-panel[_ngcontent-%COMP%] {\n    width: 100vw;\n    min-width: auto;\n  }\n\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewConfigPanelComponent, [{
         type: Component,