@memberjunction/ng-dashboard-viewer 5.43.0 → 5.44.0

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

@@ -11,6 +11,7 @@ import { BaseConfigPanel } from './base-config-panel';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-trees";
+import * as i3 from "@memberjunction/ng-ui-components";
 const _c0 = ["viewDropdown"];
 function ViewConfigPanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -28,7 +29,7 @@ function ViewConfigPanelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1)
 } }
 function ViewConfigPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵelement(1, "i", 22);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36,40 +37,44 @@ function ViewConfigPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Selected: ", ctx_r1.viewName, " ");
 } }
-function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+function ViewConfigPanelComponent_ng_template_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+    i0.ɵɵtext(1, " Display Options ");
+} }
+function ViewConfigPanelComponent_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "label");
     i0.ɵɵtext(2, "Map Style");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23)(4, "label", 24)(5, "input", 40);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
+    i0.ɵɵelementStart(3, "div", 18)(4, "label", 19)(5, "input", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_63_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_63_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "span", 26);
-    i0.ɵɵelementStart(7, "span", 27);
-    i0.ɵɵelement(8, "i", 41);
+    i0.ɵɵelement(6, "span", 21);
+    i0.ɵɵelementStart(7, "span", 22);
+    i0.ɵɵelement(8, "i", 40);
     i0.ɵɵtext(9, " Points ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "label", 24)(11, "input", 42);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
+    i0.ɵɵelementStart(10, "label", 19)(11, "input", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_63_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_63_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(12, "span", 26);
-    i0.ɵɵelementStart(13, "span", 27);
-    i0.ɵɵelement(14, "i", 43);
+    i0.ɵɵelement(12, "span", 21);
+    i0.ɵɵelementStart(13, "span", 22);
+    i0.ɵɵelement(14, "i", 42);
     i0.ɵɵtext(15, " Regions ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "label", 24)(17, "input", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template_input_change_17_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
+    i0.ɵɵelementStart(16, "label", 19)(17, "input", 43);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_63_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.mapRenderMode, $event) || (ctx_r1.mapRenderMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_63_Template_input_change_17_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "span", 26);
-    i0.ɵɵelementStart(19, "span", 27);
-    i0.ɵɵelement(20, "i", 45);
+    i0.ɵɵelement(18, "span", 21);
+    i0.ɵɵelementStart(19, "span", 22);
+    i0.ɵɵelement(20, "i", 44);
     i0.ɵɵtext(21, " Heatmap ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("selected", ctx_r1.mapRenderMode === "point");
     i0.ɵɵadvance();
@@ -83,133 +88,28 @@ function ViewConfigPanelComponent_Conditional_36_Conditional_31_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.mapRenderMode);
 } }
-function ViewConfigPanelComponent_Conditional_36_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "label", 46);
+function ViewConfigPanelComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "label", 45);
     i0.ɵɵtext(2, "Selection Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Conditional_44_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectionMode, $event) || (ctx_r1.selectionMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Conditional_44_Template_select_change_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSelectionModeChange()); });
-    i0.ɵɵelementStart(4, "option", 48);
+    i0.ɵɵelementStart(3, "select", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_76_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.selectionMode, $event) || (ctx_r1.selectionMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_76_Template_select_change_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionModeChange()); });
+    i0.ɵɵelementStart(4, "option", 47);
     i0.ɵɵtext(5, "Single Selection");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "option", 49);
+    i0.ɵɵelementStart(6, "option", 48);
     i0.ɵɵtext(7, "Multiple Selection");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectionMode);
 } }
-function ViewConfigPanelComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 2)(2, "label");
-    i0.ɵɵtext(3, "Display Mode");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 23)(5, "label", 24)(6, "input", 25);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.displayMode, $event) || (ctx_r1.displayMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDisplayModeChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "span", 26);
-    i0.ɵɵelementStart(8, "span", 27);
-    i0.ɵɵelement(9, "i", 28);
-    i0.ɵɵtext(10, " Grid ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "label", 24)(12, "input", 29);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.displayMode, $event) || (ctx_r1.displayMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDisplayModeChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "span", 26);
-    i0.ɵɵelementStart(14, "span", 27);
-    i0.ɵɵelement(15, "i", 30);
-    i0.ɵɵtext(16, " Cards ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "label", 24)(18, "input", 31);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.displayMode, $event) || (ctx_r1.displayMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_18_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDisplayModeChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(19, "span", 26);
-    i0.ɵɵelementStart(20, "span", 27);
-    i0.ɵɵelement(21, "i", 32);
-    i0.ɵɵtext(22, " Timeline ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "label", 24)(24, "input", 33);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.displayMode, $event) || (ctx_r1.displayMode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_24_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDisplayModeChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(25, "span", 26);
-    i0.ɵɵelementStart(26, "span", 27);
-    i0.ɵɵelement(27, "i", 34);
-    i0.ɵɵtext(28, " Map ");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(29, "span", 7);
-    i0.ɵɵtext(30);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(31, ViewConfigPanelComponent_Conditional_36_Conditional_31_Template, 22, 9, "div", 2);
-    i0.ɵɵelementStart(32, "div", 2)(33, "div", 35)(34, "label", 36)(35, "input", 37);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.allowModeSwitch, $event) || (ctx_r1.allowModeSwitch = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_35_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(36, "span", 38);
-    i0.ɵɵelementStart(37, "span", 39);
-    i0.ɵɵtext(38, "Allow Mode Switch");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "label", 36)(40, "input", 37);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_36_Template_input_ngModelChange_40_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.enableSelection, $event) || (ctx_r1.enableSelection = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ViewConfigPanelComponent_Conditional_36_Template_input_change_40_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(41, "span", 38);
-    i0.ɵɵelementStart(42, "span", 39);
-    i0.ɵɵtext(43, "Enable Selection");
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(44, ViewConfigPanelComponent_Conditional_36_Conditional_44_Template, 8, 1, "div", 2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.displayMode === "grid");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.displayMode);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.displayMode === "cards");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.displayMode);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.displayMode === "timeline");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.displayMode);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.displayMode === "map");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.displayMode);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.getDisplayModeDescription());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.displayMode === "map" ? 31 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.allowModeSwitch);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.enableSelection);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.enableSelection ? 44 : -1);
-} }
-function ViewConfigPanelComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 2)(2, "label", 50);
-    i0.ɵɵtext(3, " Extra Filter ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 51);
-    i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_43_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.extraFilter, $event) || (ctx_r1.extraFilter = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_43_Template_input_input_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 7);
-    i0.ɵɵtext(6, " SQL WHERE clause to filter records (applied in addition to view filters) ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.extraFilter);
+function ViewConfigPanelComponent_ng_template_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
+    i0.ɵɵtext(1, " Advanced Filtering ");
 } }
 /**
  * Configuration panel for View parts.
@@ -376,12 +276,6 @@ let ViewConfigPanelComponent = class ViewConfigPanelComponent extends BaseConfig
     onFilterChange() {
         this.emitConfigChanged();
     }
-    toggleDisplayOptions() {
-        this.showDisplayOptions = !this.showDisplayOptions;
-    }
-    toggleAdvancedOptions() {
-        this.showAdvancedOptions = !this.showAdvancedOptions;
-    }
     getDisplayModeDescription() {
         switch (this.displayMode) {
             case 'cards':
@@ -400,7 +294,7 @@ let ViewConfigPanelComponent = class ViewConfigPanelComponent extends BaseConfig
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewDropdown = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 27, consts: [["viewDropdown", ""], [1, "config-panel", "config-panel--compact"], [1, "form-group"], [1, "fa-solid", "fa-table"], [1, "optional-tag"], [3, "SelectionChange", "BranchConfig", "LeafConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch"], [1, "form-error"], [1, "form-hint"], [1, "form-hint", "form-hint--selected"], ["for", "entityName"], [1, "fa-solid", "fa-database"], ["type", "text", "id", "entityName", "placeholder", "e.g., Accounts, Contacts, Users", 1, "form-input", 3, "ngModelChange", "input", "ngModel"], ["for", "partTitle"], [1, "fa-solid", "fa-heading"], ["type", "text", "id", "partTitle", 1, "form-input", 3, "ngModelChange", "input", "ngModel", "placeholder"], [1, "collapsible-section"], ["type", "button", 1, "collapsible-header", 3, "click"], [1, "collapsible-title"], [1, "fa-solid", "fa-grip"], [1, "collapsible-chevron", "fa-solid"], [1, "collapsible-content"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-check"], [1, "radio-group", "radio-group--horizontal"], [1, "radio-option", "radio-option--compact"], ["type", "radio", "name", "displayMode", "value", "grid", 3, "ngModelChange", "change", "ngModel"], [1, "radio-mark"], [1, "radio-label"], [1, "fa-solid", "fa-table-cells"], ["type", "radio", "name", "displayMode", "value", "cards", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-id-card"], ["type", "radio", "name", "displayMode", "value", "timeline", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-timeline"], ["type", "radio", "name", "displayMode", "value", "map", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-map-location-dot"], [1, "checkbox-group", "checkbox-group--compact"], [1, "checkbox-option", "checkbox-option--compact"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "checkbox-mark"], [1, "checkbox-label"], ["type", "radio", "name", "mapRenderMode", "value", "point", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-map-pin"], ["type", "radio", "name", "mapRenderMode", "value", "choropleth", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-earth-americas"], ["type", "radio", "name", "mapRenderMode", "value", "heatmap", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-fire"], ["for", "selectionMode"], ["id", "selectionMode", 1, "form-select", 3, "ngModelChange", "change", "ngModel"], ["value", "single"], ["value", "multiple"], ["for", "extraFilter"], ["type", "text", "id", "extraFilter", "placeholder", "e.g., Status = 'Active'", 1, "form-input", 3, "ngModelChange", "input", "ngModel"]], template: function ViewConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 86, vars: 35, consts: [["viewDropdown", ""], [1, "config-panel", "config-panel--compact"], [1, "form-group"], [1, "fa-solid", "fa-table"], [1, "optional-tag"], [3, "SelectionChange", "BranchConfig", "LeafConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch"], [1, "form-error"], [1, "form-hint"], [1, "form-hint", "form-hint--selected"], ["for", "entityName"], [1, "fa-solid", "fa-database"], ["type", "text", "id", "entityName", "placeholder", "e.g., Accounts, Contacts, Users", 1, "form-input", 3, "ngModelChange", "input", "ngModel"], ["for", "partTitle"], [1, "fa-solid", "fa-heading"], ["type", "text", "id", "partTitle", 1, "form-input", 3, "ngModelChange", "input", "ngModel", "placeholder"], ["Size", "sm", 3, "ExpandedChange", "Expanded"], ["mjAccordionTitle", ""], [1, "config-section-body"], [1, "radio-group", "radio-group--horizontal"], [1, "radio-option", "radio-option--compact"], ["type", "radio", "name", "displayMode", "value", "grid", 3, "ngModelChange", "change", "ngModel"], [1, "radio-mark"], [1, "radio-label"], [1, "fa-solid", "fa-table-cells"], ["type", "radio", "name", "displayMode", "value", "cards", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-id-card"], ["type", "radio", "name", "displayMode", "value", "timeline", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-timeline"], ["type", "radio", "name", "displayMode", "value", "map", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-map-location-dot"], [1, "checkbox-group", "checkbox-group--compact"], [1, "checkbox-option", "checkbox-option--compact"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "checkbox-mark"], [1, "checkbox-label"], ["for", "extraFilter"], ["type", "text", "id", "extraFilter", "placeholder", "e.g., Status = 'Active'", 1, "form-input", 3, "ngModelChange", "input", "ngModel"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-grip"], ["type", "radio", "name", "mapRenderMode", "value", "point", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-map-pin"], ["type", "radio", "name", "mapRenderMode", "value", "choropleth", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-earth-americas"], ["type", "radio", "name", "mapRenderMode", "value", "heatmap", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-fire"], ["for", "selectionMode"], ["id", "selectionMode", 1, "form-select", 3, "ngModelChange", "change", "ngModel"], ["value", "single"], ["value", "multiple"], [1, "fa-solid", "fa-filter"]], template: function ViewConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "label");
             i0.ɵɵelement(3, "i", 3);
@@ -441,26 +335,83 @@ let ViewConfigPanelComponent = class ViewConfigPanelComponent extends BaseConfig
             i0.ɵɵelementStart(28, "span", 7);
             i0.ɵɵtext(29, "Leave empty to use view/entity name as title");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(30, "div", 15)(31, "button", 16);
-            i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDisplayOptions()); });
-            i0.ɵɵelementStart(32, "span", 17);
-            i0.ɵɵelement(33, "i", 18);
-            i0.ɵɵtext(34, " Display Options ");
+            i0.ɵɵelementStart(30, "mj-accordion-panel", 15);
+            i0.ɵɵtwoWayListener("ExpandedChange", function ViewConfigPanelComponent_Template_mj_accordion_panel_ExpandedChange_30_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showDisplayOptions, $event) || (ctx.showDisplayOptions = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(31, ViewConfigPanelComponent_ng_template_31_Template, 2, 0, "ng-template", 16);
+            i0.ɵɵelementStart(32, "div", 17)(33, "div", 2)(34, "label");
+            i0.ɵɵtext(35, "Display Mode");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(35, "i", 19);
+            i0.ɵɵelementStart(36, "div", 18)(37, "label", 19)(38, "input", 20);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_38_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.displayMode, $event) || (ctx.displayMode = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_38_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayModeChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(36, ViewConfigPanelComponent_Conditional_36_Template, 45, 17, "div", 20);
+            i0.ɵɵelement(39, "span", 21);
+            i0.ɵɵelementStart(40, "span", 22);
+            i0.ɵɵelement(41, "i", 23);
+            i0.ɵɵtext(42, " Grid ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(43, "label", 19)(44, "input", 24);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_44_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.displayMode, $event) || (ctx.displayMode = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_44_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayModeChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "div", 15)(38, "button", 16);
-            i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleAdvancedOptions()); });
-            i0.ɵɵelementStart(39, "span", 17);
-            i0.ɵɵelement(40, "i", 21);
-            i0.ɵɵtext(41, " Advanced Filtering ");
+            i0.ɵɵelement(45, "span", 21);
+            i0.ɵɵelementStart(46, "span", 22);
+            i0.ɵɵelement(47, "i", 25);
+            i0.ɵɵtext(48, " Cards ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(49, "label", 19)(50, "input", 26);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_50_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.displayMode, $event) || (ctx.displayMode = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_50_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayModeChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(42, "i", 19);
+            i0.ɵɵelement(51, "span", 21);
+            i0.ɵɵelementStart(52, "span", 22);
+            i0.ɵɵelement(53, "i", 27);
+            i0.ɵɵtext(54, " Timeline ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(55, "label", 19)(56, "input", 28);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_56_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.displayMode, $event) || (ctx.displayMode = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_56_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayModeChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(43, ViewConfigPanelComponent_Conditional_43_Template, 7, 1, "div", 20);
+            i0.ɵɵelement(57, "span", 21);
+            i0.ɵɵelementStart(58, "span", 22);
+            i0.ɵɵelement(59, "i", 29);
+            i0.ɵɵtext(60, " Map ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(61, "span", 7);
+            i0.ɵɵtext(62);
             i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(63, ViewConfigPanelComponent_Conditional_63_Template, 22, 9, "div", 2);
+            i0.ɵɵelementStart(64, "div", 2)(65, "div", 30)(66, "label", 31)(67, "input", 32);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_67_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.allowModeSwitch, $event) || (ctx.allowModeSwitch = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_67_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOptionChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(68, "span", 33);
+            i0.ɵɵelementStart(69, "span", 34);
+            i0.ɵɵtext(70, "Allow Mode Switch");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(71, "label", 31)(72, "input", 32);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_72_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.enableSelection, $event) || (ctx.enableSelection = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function ViewConfigPanelComponent_Template_input_change_72_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOptionChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(73, "span", 33);
+            i0.ɵɵelementStart(74, "span", 34);
+            i0.ɵɵtext(75, "Enable Selection");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(76, ViewConfigPanelComponent_Conditional_76_Template, 8, 1, "div", 2);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(77, "mj-accordion-panel", 15);
+            i0.ɵɵtwoWayListener("ExpandedChange", function ViewConfigPanelComponent_Template_mj_accordion_panel_ExpandedChange_77_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showAdvancedOptions, $event) || (ctx.showAdvancedOptions = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(78, ViewConfigPanelComponent_ng_template_78_Template, 2, 0, "ng-template", 16);
+            i0.ɵɵelementStart(79, "div", 17)(80, "div", 2)(81, "label", 35);
+            i0.ɵɵtext(82, " Extra Filter ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(83, "input", 36);
+            i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Template_input_ngModelChange_83_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.extraFilter, $event) || (ctx.extraFilter = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("input", function ViewConfigPanelComponent_Template_input_input_83_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilterChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(84, "span", 7);
+            i0.ɵɵtext(85, " SQL WHERE clause to filter records (applied in addition to view filters) ");
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("error", ctx.viewError);
@@ -476,19 +427,39 @@ let ViewConfigPanelComponent = class ViewConfigPanelComponent extends BaseConfig
             i0.ɵɵadvance(9);
             i0.ɵɵtwoWayProperty("ngModel", ctx.title);
             i0.ɵɵproperty("placeholder", ctx.viewName || ctx.entityName ? "Default: " + (ctx.viewName || ctx.entityName) : "Enter a custom title");
-            i0.ɵɵadvance(4);
-            i0.ɵɵattribute("aria-expanded", ctx.showDisplayOptions);
-            i0.ɵɵadvance(4);
-            i0.ɵɵclassProp("fa-chevron-down", !ctx.showDisplayOptions)("fa-chevron-up", ctx.showDisplayOptions);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtwoWayProperty("Expanded", ctx.showDisplayOptions);
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("selected", ctx.displayMode === "grid");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDisplayOptions ? 36 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵattribute("aria-expanded", ctx.showAdvancedOptions);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.displayMode);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("selected", ctx.displayMode === "cards");
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.displayMode);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("selected", ctx.displayMode === "timeline");
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.displayMode);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("selected", ctx.displayMode === "map");
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.displayMode);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.getDisplayModeDescription());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.displayMode === "map" ? 63 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.allowModeSwitch);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.enableSelection);
             i0.ɵɵadvance(4);
-            i0.ɵɵclassProp("fa-chevron-down", !ctx.showAdvancedOptions)("fa-chevron-up", ctx.showAdvancedOptions);
+            i0.ɵɵconditional(ctx.enableSelection ? 76 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAdvancedOptions ? 43 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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\n\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-status-error);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n    content: '\\f071';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n    display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%]::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n    width: 22px;\n    height: 22px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .checkbox-mark[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .checkbox-mark[_ngcontent-%COMP%]::after {\n    content: '\\f00c';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    color: var(--mj-text-inverse);\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n    padding: 14px 40px 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n    gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n    gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n    font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%] {\n    padding: 10px 36px 10px 14px;\n    font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n    font-weight: 400;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.form-hint--selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: var(--mj-bg-page);\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n    flex: 1;\n    min-width: 120px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%]::after {\n    width: 8px;\n    height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n    gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%]   .checkbox-mark[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n    --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n    --dropdown-border-focus: var(--mj-status-error);\n}"] });
+            i0.ɵɵtwoWayProperty("Expanded", ctx.showAdvancedOptions);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.extraFilter);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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\n\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-status-error);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n    content: '\\f071';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n    display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%]::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n    width: 22px;\n    height: 22px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .checkbox-mark[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .checkbox-mark[_ngcontent-%COMP%]::after {\n    content: '\\f00c';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    color: var(--mj-text-inverse);\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n    padding: 14px 40px 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n    gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n    gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n    font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%] {\n    padding: 10px 36px 10px 14px;\n    font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n    font-weight: 400;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.form-hint--selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n\n\n\n\n\n.config-section-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n    flex: 1;\n    min-width: 120px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%]   .radio-mark[_ngcontent-%COMP%]::after {\n    width: 8px;\n    height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n    gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n    padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%]   .checkbox-mark[_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n    --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n    --dropdown-border-focus: var(--mj-status-error);\n}"] });
 };
 ViewConfigPanelComponent = __decorate([
     RegisterClass(BaseConfigPanel, 'ViewPanelConfigDialog')
@@ -496,7 +467,7 @@ ViewConfigPanelComponent = __decorate([
 export { ViewConfigPanelComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewConfigPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-dashboard-view-config-panel', template: "<!-- View Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- View Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-table\"></i>\n      Select View\n      <span class=\"optional-tag\">(or enter entity below)</span>\n    </label>\n    <mj-tree-dropdown\n      #viewDropdown\n      [BranchConfig]=\"ViewCategoryConfig\"\n      [LeafConfig]=\"ViewLeafConfig\"\n      [Value]=\"ViewIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse saved views...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onViewSelection($event)\"\n      [class.error]=\"viewError\">\n    </mj-tree-dropdown>\n    @if (viewError) {\n      <span class=\"form-error\">{{ viewError }}</span>\n    }\n    @if (!viewError && !viewId && !entityName) {\n      <span class=\"form-hint\">\n        Select a saved view or enter an entity name below\n      </span>\n    }\n    @if (!viewError && viewId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ viewName }}\n      </span>\n    }\n  </div>\n\n  <!-- Entity Name (Alternative) -->\n  <div class=\"form-group\">\n    <label for=\"entityName\">\n      <i class=\"fa-solid fa-database\"></i>\n      Entity Name\n      <span class=\"optional-tag\">(alternative to view)</span>\n    </label>\n    <input\n      type=\"text\"\n      id=\"entityName\"\n      [(ngModel)]=\"entityName\"\n      (input)=\"onEntityChange()\"\n      placeholder=\"e.g., Accounts, Contacts, Users\"\n      class=\"form-input\">\n    <span class=\"form-hint\">\n      Use this to display all records from an entity without a saved view\n    </span>\n  </div>\n\n  <!-- Title (Optional) -->\n  <div class=\"form-group\">\n    <label for=\"partTitle\">\n      <i class=\"fa-solid fa-heading\"></i>\n      Part Title\n      <span class=\"optional-tag\">(optional)</span>\n    </label>\n    <input\n      type=\"text\"\n      id=\"partTitle\"\n      [(ngModel)]=\"title\"\n      (input)=\"onTitleChange()\"\n      [placeholder]=\"viewName || entityName ? 'Default: ' + (viewName || entityName) : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use view/entity name as title</span>\n  </div>\n\n  <!-- Display Options (Collapsible) -->\n  <div class=\"collapsible-section\">\n    <button\n      type=\"button\"\n      class=\"collapsible-header\"\n      (click)=\"toggleDisplayOptions()\"\n      [attr.aria-expanded]=\"showDisplayOptions\">\n      <span class=\"collapsible-title\">\n        <i class=\"fa-solid fa-grip\"></i>\n        Display Options\n      </span>\n      <i class=\"collapsible-chevron fa-solid\"\n        [class.fa-chevron-down]=\"!showDisplayOptions\"\n      [class.fa-chevron-up]=\"showDisplayOptions\"></i>\n    </button>\n\n    @if (showDisplayOptions) {\n      <div class=\"collapsible-content\">\n        <!-- Display Mode -->\n        <div class=\"form-group\">\n          <label>Display Mode</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'grid'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"grid\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-cells\"></i>\n                Grid\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'cards'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"cards\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-id-card\"></i>\n                Cards\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'timeline'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"timeline\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-timeline\"></i>\n                Timeline\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'map'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"map\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-map-location-dot\"></i>\n                Map\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getDisplayModeDescription() }}</span>\n        </div>\n        <!-- Map Render Mode (only shown when map is selected) -->\n        @if (displayMode === 'map') {\n          <div class=\"form-group\">\n            <label>Map Style</label>\n            <div class=\"radio-group radio-group--horizontal\">\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'point'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"point\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-map-pin\"></i>\n                  Points\n                </span>\n              </label>\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'choropleth'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"choropleth\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-earth-americas\"></i>\n                  Regions\n                </span>\n              </label>\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'heatmap'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"heatmap\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-fire\"></i>\n                  Heatmap\n                </span>\n              </label>\n            </div>\n          </div>\n        }\n        <!-- Selection Options -->\n        <div class=\"form-group\">\n          <div class=\"checkbox-group checkbox-group--compact\">\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"allowModeSwitch\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Allow Mode Switch</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"enableSelection\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Enable Selection</span>\n            </label>\n          </div>\n        </div>\n        <!-- Selection Mode -->\n        @if (enableSelection) {\n          <div class=\"form-group\">\n            <label for=\"selectionMode\">Selection Mode</label>\n            <select\n              id=\"selectionMode\"\n              class=\"form-select\"\n              [(ngModel)]=\"selectionMode\"\n              (change)=\"onSelectionModeChange()\">\n              <option value=\"single\">Single Selection</option>\n              <option value=\"multiple\">Multiple Selection</option>\n            </select>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Advanced Options (Collapsible) -->\n  <div class=\"collapsible-section\">\n    <button\n      type=\"button\"\n      class=\"collapsible-header\"\n      (click)=\"toggleAdvancedOptions()\"\n      [attr.aria-expanded]=\"showAdvancedOptions\">\n      <span class=\"collapsible-title\">\n        <i class=\"fa-solid fa-filter\"></i>\n        Advanced Filtering\n      </span>\n      <i class=\"collapsible-chevron fa-solid\"\n        [class.fa-chevron-down]=\"!showAdvancedOptions\"\n      [class.fa-chevron-up]=\"showAdvancedOptions\"></i>\n    </button>\n\n    @if (showAdvancedOptions) {\n      <div class=\"collapsible-content\">\n        <!-- Extra Filter -->\n        <div class=\"form-group\">\n          <label for=\"extraFilter\">\n            Extra Filter\n          </label>\n          <input\n            type=\"text\"\n            id=\"extraFilter\"\n            [(ngModel)]=\"extraFilter\"\n            (input)=\"onFilterChange()\"\n            placeholder=\"e.g., Status = 'Active'\"\n            class=\"form-input\">\n          <span class=\"form-hint\">\n            SQL WHERE clause to filter records (applied in addition to view filters)\n          </span>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n   Panel Container\n   ======================================== */\n\n.config-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 8px 0;\n}\n\n/* ========================================\n   Form Groups\n   ======================================== */\n\n.form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.form-group > label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-group > label i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    width: 16px;\n}\n\n.form-group > label .required {\n    color: var(--mj-status-error);\n}\n\n/* ========================================\n   Form Inputs\n   ======================================== */\n\n.form-input {\n    padding: 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.form-input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.form-input.error {\n    border-color: var(--mj-status-error);\n}\n\n.form-input.error:focus {\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action {\n    display: flex;\n    gap: 8px;\n}\n\n.input-with-action .form-input {\n    flex: 1;\n}\n\n.input-action-btn {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n    border-color: var(--mj-brand-primary);\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   Form Hints & Errors\n   ======================================== */\n\n.form-hint {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.form-error {\n    font-size: 13px;\n    color: var(--mj-status-error);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.form-error::before {\n    content: '\\f071';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n}\n\n/* ========================================\n   Radio Group\n   ======================================== */\n\n.radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-option {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.radio-option:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option input[type=\"radio\"] {\n    display: none;\n}\n\n.radio-mark {\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n    border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected .radio-mark::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n}\n\n.radio-content {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.radio-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.radio-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.radio-badge.secure {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n/* ========================================\n   Checkbox Group\n   ======================================== */\n\n.checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-option {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.checkbox-option:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n    display: none;\n}\n\n.checkbox-mark {\n    width: 22px;\n    height: 22px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n    content: '\\f00c';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    color: var(--mj-text-inverse);\n}\n\n.checkbox-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.checkbox-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.checkbox-desc {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* ========================================\n   Select/Dropdown\n   ======================================== */\n\n.form-select {\n    padding: 14px 40px 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n}\n\n.form-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* ========================================\n   Compact Panel Variant\n   ======================================== */\n\n.config-panel--compact {\n    gap: 16px;\n}\n\n.config-panel--compact .form-group {\n    gap: 8px;\n}\n\n.config-panel--compact .form-input {\n    padding: 10px 14px;\n    font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n    padding: 10px 36px 10px 14px;\n    font-size: 14px;\n}\n\n/* ========================================\n   Optional Tag\n   ======================================== */\n\n.optional-tag {\n    font-weight: 400;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* ========================================\n   Selected Hint (Success State)\n   ======================================== */\n\n.form-hint--selected {\n    color: var(--mj-status-success);\n}\n\n.form-hint--selected i {\n    color: var(--mj-status-success);\n}\n\n/* ========================================\n   Collapsible Section\n   ======================================== */\n\n.collapsible-section {\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.collapsible-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: 12px 16px;\n    border: none;\n    background: var(--mj-bg-page);\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.collapsible-title i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.collapsible-chevron {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n    padding: 16px;\n    border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* ========================================\n   Horizontal Radio Group\n   ======================================== */\n\n.radio-group--horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.radio-option--compact {\n    padding: 10px 14px;\n    flex: 1;\n    min-width: 120px;\n}\n\n.radio-option--compact .radio-label {\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n    width: 16px;\n    height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n    width: 8px;\n    height: 8px;\n}\n\n/* ========================================\n   Compact Checkbox Group\n   ======================================== */\n\n.checkbox-group--compact {\n    gap: 4px;\n}\n\n.checkbox-option--compact {\n    padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n    width: 18px;\n    height: 18px;\n    margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n    font-size: 13px;\n}\n\n/* ========================================\n   Tree Dropdown Error State\n   ======================================== */\n\nmj-tree-dropdown.error {\n    --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error:focus-within {\n    --dropdown-border-focus: var(--mj-status-error);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-dashboard-view-config-panel', template: "<!-- View Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- View Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-table\"></i>\n      Select View\n      <span class=\"optional-tag\">(or enter entity below)</span>\n    </label>\n    <mj-tree-dropdown\n      #viewDropdown\n      [BranchConfig]=\"ViewCategoryConfig\"\n      [LeafConfig]=\"ViewLeafConfig\"\n      [Value]=\"ViewIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse saved views...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onViewSelection($event)\"\n      [class.error]=\"viewError\">\n    </mj-tree-dropdown>\n    @if (viewError) {\n      <span class=\"form-error\">{{ viewError }}</span>\n    }\n    @if (!viewError && !viewId && !entityName) {\n      <span class=\"form-hint\">\n        Select a saved view or enter an entity name below\n      </span>\n    }\n    @if (!viewError && viewId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ viewName }}\n      </span>\n    }\n  </div>\n\n  <!-- Entity Name (Alternative) -->\n  <div class=\"form-group\">\n    <label for=\"entityName\">\n      <i class=\"fa-solid fa-database\"></i>\n      Entity Name\n      <span class=\"optional-tag\">(alternative to view)</span>\n    </label>\n    <input\n      type=\"text\"\n      id=\"entityName\"\n      [(ngModel)]=\"entityName\"\n      (input)=\"onEntityChange()\"\n      placeholder=\"e.g., Accounts, Contacts, Users\"\n      class=\"form-input\">\n    <span class=\"form-hint\">\n      Use this to display all records from an entity without a saved view\n    </span>\n  </div>\n\n  <!-- Title (Optional) -->\n  <div class=\"form-group\">\n    <label for=\"partTitle\">\n      <i class=\"fa-solid fa-heading\"></i>\n      Part Title\n      <span class=\"optional-tag\">(optional)</span>\n    </label>\n    <input\n      type=\"text\"\n      id=\"partTitle\"\n      [(ngModel)]=\"title\"\n      (input)=\"onTitleChange()\"\n      [placeholder]=\"viewName || entityName ? 'Default: ' + (viewName || entityName) : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use view/entity name as title</span>\n  </div>\n\n  <!-- Display Options -->\n  <mj-accordion-panel [(Expanded)]=\"showDisplayOptions\" Size=\"sm\">\n    <ng-template mjAccordionTitle>\n      <i class=\"fa-solid fa-grip\"></i>\n      Display Options\n    </ng-template>\n    <div class=\"config-section-body\">\n        <!-- Display Mode -->\n        <div class=\"form-group\">\n          <label>Display Mode</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'grid'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"grid\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-cells\"></i>\n                Grid\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'cards'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"cards\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-id-card\"></i>\n                Cards\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'timeline'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"timeline\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-timeline\"></i>\n                Timeline\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'map'\">\n              <input\n                type=\"radio\"\n                name=\"displayMode\"\n                value=\"map\"\n                [(ngModel)]=\"displayMode\"\n                (change)=\"onDisplayModeChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-map-location-dot\"></i>\n                Map\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getDisplayModeDescription() }}</span>\n        </div>\n        <!-- Map Render Mode (only shown when map is selected) -->\n        @if (displayMode === 'map') {\n          <div class=\"form-group\">\n            <label>Map Style</label>\n            <div class=\"radio-group radio-group--horizontal\">\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'point'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"point\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-map-pin\"></i>\n                  Points\n                </span>\n              </label>\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'choropleth'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"choropleth\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-earth-americas\"></i>\n                  Regions\n                </span>\n              </label>\n              <label class=\"radio-option radio-option--compact\" [class.selected]=\"mapRenderMode === 'heatmap'\">\n                <input type=\"radio\" name=\"mapRenderMode\" value=\"heatmap\"\n                  [(ngModel)]=\"mapRenderMode\" (change)=\"onOptionChange()\">\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">\n                  <i class=\"fa-solid fa-fire\"></i>\n                  Heatmap\n                </span>\n              </label>\n            </div>\n          </div>\n        }\n        <!-- Selection Options -->\n        <div class=\"form-group\">\n          <div class=\"checkbox-group checkbox-group--compact\">\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"allowModeSwitch\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Allow Mode Switch</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"enableSelection\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Enable Selection</span>\n            </label>\n          </div>\n        </div>\n        <!-- Selection Mode -->\n        @if (enableSelection) {\n          <div class=\"form-group\">\n            <label for=\"selectionMode\">Selection Mode</label>\n            <select\n              id=\"selectionMode\"\n              class=\"form-select\"\n              [(ngModel)]=\"selectionMode\"\n              (change)=\"onSelectionModeChange()\">\n              <option value=\"single\">Single Selection</option>\n              <option value=\"multiple\">Multiple Selection</option>\n            </select>\n          </div>\n        }\n    </div>\n  </mj-accordion-panel>\n\n  <!-- Advanced Filtering -->\n  <mj-accordion-panel [(Expanded)]=\"showAdvancedOptions\" Size=\"sm\">\n    <ng-template mjAccordionTitle>\n      <i class=\"fa-solid fa-filter\"></i>\n      Advanced Filtering\n    </ng-template>\n    <div class=\"config-section-body\">\n        <!-- Extra Filter -->\n        <div class=\"form-group\">\n          <label for=\"extraFilter\">\n            Extra Filter\n          </label>\n          <input\n            type=\"text\"\n            id=\"extraFilter\"\n            [(ngModel)]=\"extraFilter\"\n            (input)=\"onFilterChange()\"\n            placeholder=\"e.g., Status = 'Active'\"\n            class=\"form-input\">\n          <span class=\"form-hint\">\n            SQL WHERE clause to filter records (applied in addition to view filters)\n          </span>\n        </div>\n    </div>\n  </mj-accordion-panel>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n   Panel Container\n   ======================================== */\n\n.config-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 8px 0;\n}\n\n/* ========================================\n   Form Groups\n   ======================================== */\n\n.form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.form-group > label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-group > label i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    width: 16px;\n}\n\n.form-group > label .required {\n    color: var(--mj-status-error);\n}\n\n/* ========================================\n   Form Inputs\n   ======================================== */\n\n.form-input {\n    padding: 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.form-input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.form-input.error {\n    border-color: var(--mj-status-error);\n}\n\n.form-input.error:focus {\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action {\n    display: flex;\n    gap: 8px;\n}\n\n.input-with-action .form-input {\n    flex: 1;\n}\n\n.input-action-btn {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n    border-color: var(--mj-brand-primary);\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   Form Hints & Errors\n   ======================================== */\n\n.form-hint {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.form-error {\n    font-size: 13px;\n    color: var(--mj-status-error);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.form-error::before {\n    content: '\\f071';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n}\n\n/* ========================================\n   Radio Group\n   ======================================== */\n\n.radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-option {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.radio-option:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option input[type=\"radio\"] {\n    display: none;\n}\n\n.radio-mark {\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n    border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected .radio-mark::after {\n    content: '';\n    width: 10px;\n    height: 10px;\n    background: var(--mj-brand-primary);\n    border-radius: 50%;\n}\n\n.radio-content {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.radio-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.radio-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 8px;\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.radio-badge.secure {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n/* ========================================\n   Checkbox Group\n   ======================================== */\n\n.checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-option {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 14px 16px;\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    background: var(--mj-bg-surface);\n}\n\n.checkbox-option:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n    display: none;\n}\n\n.checkbox-mark {\n    width: 22px;\n    height: 22px;\n    border: 2px solid var(--mj-border-strong);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n    margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n    content: '\\f00c';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n    font-size: 12px;\n    color: var(--mj-text-inverse);\n}\n\n.checkbox-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.checkbox-label {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.checkbox-desc {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* ========================================\n   Select/Dropdown\n   ======================================== */\n\n.form-select {\n    padding: 14px 40px 14px 16px;\n    border: 2px solid var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    transition: all 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 16px center;\n}\n\n.form-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* ========================================\n   Compact Panel Variant\n   ======================================== */\n\n.config-panel--compact {\n    gap: 16px;\n}\n\n.config-panel--compact .form-group {\n    gap: 8px;\n}\n\n.config-panel--compact .form-input {\n    padding: 10px 14px;\n    font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n    padding: 10px 36px 10px 14px;\n    font-size: 14px;\n}\n\n/* ========================================\n   Optional Tag\n   ======================================== */\n\n.optional-tag {\n    font-weight: 400;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n}\n\n/* ========================================\n   Selected Hint (Success State)\n   ======================================== */\n\n.form-hint--selected {\n    color: var(--mj-status-success);\n}\n\n.form-hint--selected i {\n    color: var(--mj-status-success);\n}\n\n/* ========================================\n   Config-panel accordion body\n   (the collapsible sections now use <mj-accordion-panel>;\n    this only lays out the form-groups inside the projected body)\n   ======================================== */\n\n.config-section-body {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* ========================================\n   Horizontal Radio Group\n   ======================================== */\n\n.radio-group--horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.radio-option--compact {\n    padding: 10px 14px;\n    flex: 1;\n    min-width: 120px;\n}\n\n.radio-option--compact .radio-label {\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n    color: var(--mj-brand-primary);\n    font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n    width: 16px;\n    height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n    width: 8px;\n    height: 8px;\n}\n\n/* ========================================\n   Compact Checkbox Group\n   ======================================== */\n\n.checkbox-group--compact {\n    gap: 4px;\n}\n\n.checkbox-option--compact {\n    padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n    width: 18px;\n    height: 18px;\n    margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n    font-size: 13px;\n}\n\n/* ========================================\n   Tree Dropdown Error State\n   ======================================== */\n\nmj-tree-dropdown.error {\n    --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error:focus-within {\n    --dropdown-border-focus: var(--mj-status-error);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { viewDropdown: [{
             type: ViewChild,
             args: ['viewDropdown']