@memberjunction/ng-dashboard-viewer 5.43.0 → 5.44.0

package/dist/lib/config-panels/query-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 = ["queryDropdown"];
 function QueryConfigPanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -28,7 +29,7 @@ function QueryConfigPanelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1
 } }
 function QueryConfigPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36,111 +37,9 @@ function QueryConfigPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Selected: ", ctx_r1.queryName, " ");
 } }
-function QueryConfigPanelComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 2)(2, "label");
-    i0.ɵɵtext(3, "Parameter Layout");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 20)(5, "label", 21)(6, "input", 22);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.parameterLayout, $event) || (ctx_r1.parameterLayout = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_input_change_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onParameterLayoutChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "span", 23);
-    i0.ɵɵelementStart(8, "span", 24);
-    i0.ɵɵelement(9, "i", 25);
-    i0.ɵɵtext(10, " Header ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "label", 21)(12, "input", 26);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.parameterLayout, $event) || (ctx_r1.parameterLayout = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_input_change_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onParameterLayoutChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "span", 23);
-    i0.ɵɵelementStart(14, "span", 24);
-    i0.ɵɵelement(15, "i", 27);
-    i0.ɵɵtext(16, " Sidebar ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "label", 21)(18, "input", 28);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_input_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.parameterLayout, $event) || (ctx_r1.parameterLayout = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_input_change_18_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onParameterLayoutChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(19, "span", 23);
-    i0.ɵɵelementStart(20, "span", 24);
-    i0.ɵɵelement(21, "i", 29);
-    i0.ɵɵtext(22, " Dialog ");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "span", 7);
-    i0.ɵɵtext(24);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 2)(26, "label", 30);
-    i0.ɵɵelement(27, "i", 31);
-    i0.ɵɵtext(28, " Auto Refresh ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "select", 32);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_select_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.autoRefreshSeconds, $event) || (ctx_r1.autoRefreshSeconds = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_select_change_29_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAutoRefreshChange()); });
-    i0.ɵɵelementStart(30, "option", 33);
-    i0.ɵɵtext(31, "Disabled");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "option", 33);
-    i0.ɵɵtext(33, "Every 30 seconds");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "option", 33);
-    i0.ɵɵtext(35, "Every minute");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "option", 33);
-    i0.ɵɵtext(37, "Every 5 minutes");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "option", 33);
-    i0.ɵɵtext(39, "Every 10 minutes");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(40, "div", 2)(41, "div", 34)(42, "label", 35)(43, "input", 36);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_input_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showParameterControls, $event) || (ctx_r1.showParameterControls = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_input_change_43_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(44, "span", 37);
-    i0.ɵɵelementStart(45, "span", 38);
-    i0.ɵɵtext(46, "Show Parameter Controls");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "label", 35)(48, "input", 36);
-    i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Conditional_27_Template_input_ngModelChange_48_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showExecutionMetadata, $event) || (ctx_r1.showExecutionMetadata = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function QueryConfigPanelComponent_Conditional_27_Template_input_change_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(49, "span", 37);
-    i0.ɵɵelementStart(50, "span", 38);
-    i0.ɵɵtext(51, "Show Execution Metadata");
-    i0.ɵɵelementEnd()()()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.parameterLayout === "header");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.parameterLayout);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.parameterLayout === "sidebar");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.parameterLayout);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("selected", ctx_r1.parameterLayout === "dialog");
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.parameterLayout);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.getParameterLayoutDescription());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.autoRefreshSeconds);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngValue", 0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngValue", 30);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngValue", 60);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngValue", 300);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngValue", 600);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.showParameterControls);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.showExecutionMetadata);
+function QueryConfigPanelComponent_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 36);
+    i0.ɵɵtext(1, " Display Options ");
 } }
 /**
  * Configuration panel for Query parts.
@@ -282,9 +181,6 @@ let QueryConfigPanelComponent = class QueryConfigPanelComponent extends BaseConf
     onOptionChange() {
         this.emitConfigChanged();
     }
-    toggleAdvancedOptions() {
-        this.showAdvancedOptions = !this.showAdvancedOptions;
-    }
     getParameterLayoutDescription() {
         switch (this.parameterLayout) {
             case 'sidebar':
@@ -301,7 +197,7 @@ let QueryConfigPanelComponent = class QueryConfigPanelComponent extends BaseConf
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.queryDropdown = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 28, vars: 20, consts: [["queryDropdown", ""], [1, "config-panel", "config-panel--compact"], [1, "form-group"], [1, "fa-solid", "fa-flask"], [1, "required"], [3, "SelectionChange", "BranchConfig", "LeafConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch"], [1, "form-error"], [1, "form-hint"], [1, "form-hint", "form-hint--selected"], ["for", "partTitle"], [1, "fa-solid", "fa-heading"], [1, "optional-tag"], ["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-sliders"], [1, "collapsible-chevron", "fa-solid"], [1, "collapsible-content"], [1, "fa-solid", "fa-check"], [1, "radio-group", "radio-group--horizontal"], [1, "radio-option", "radio-option--compact"], ["type", "radio", "name", "parameterLayout", "value", "header", 3, "ngModelChange", "change", "ngModel"], [1, "radio-mark"], [1, "radio-label"], [1, "fa-solid", "fa-arrow-up-from-bracket"], ["type", "radio", "name", "parameterLayout", "value", "sidebar", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-table-columns"], ["type", "radio", "name", "parameterLayout", "value", "dialog", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-window-restore"], ["for", "autoRefresh"], [1, "fa-solid", "fa-rotate"], [1, "form-select", 3, "ngModelChange", "change", "ngModel"], [3, "ngValue"], [1, "checkbox-group", "checkbox-group--compact"], [1, "checkbox-option", "checkbox-option--compact"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "checkbox-mark"], [1, "checkbox-label"]], template: function QueryConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 75, vars: 33, consts: [["queryDropdown", ""], [1, "config-panel", "config-panel--compact"], [1, "form-group"], [1, "fa-solid", "fa-flask"], [1, "required"], [3, "SelectionChange", "BranchConfig", "LeafConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch"], [1, "form-error"], [1, "form-hint"], [1, "form-hint", "form-hint--selected"], ["for", "partTitle"], [1, "fa-solid", "fa-heading"], [1, "optional-tag"], ["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", "parameterLayout", "value", "header", 3, "ngModelChange", "change", "ngModel"], [1, "radio-mark"], [1, "radio-label"], [1, "fa-solid", "fa-arrow-up-from-bracket"], ["type", "radio", "name", "parameterLayout", "value", "sidebar", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-table-columns"], ["type", "radio", "name", "parameterLayout", "value", "dialog", 3, "ngModelChange", "change", "ngModel"], [1, "fa-solid", "fa-window-restore"], ["for", "autoRefresh"], [1, "fa-solid", "fa-rotate"], [1, "form-select", 3, "ngModelChange", "change", "ngModel"], [3, "ngValue"], [1, "checkbox-group", "checkbox-group--compact"], [1, "checkbox-option", "checkbox-option--compact"], ["type", "checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "checkbox-mark"], [1, "checkbox-label"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-sliders"]], template: function QueryConfigPanelComponent_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);
@@ -329,16 +225,80 @@ let QueryConfigPanelComponent = class QueryConfigPanelComponent extends BaseConf
             i0.ɵɵelementStart(19, "span", 7);
             i0.ɵɵtext(20, "Leave empty to use query name as title");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 13)(22, "button", 14);
-            i0.ɵɵlistener("click", function QueryConfigPanelComponent_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleAdvancedOptions()); });
-            i0.ɵɵelementStart(23, "span", 15);
-            i0.ɵɵelement(24, "i", 16);
-            i0.ɵɵtext(25, " Display Options ");
+            i0.ɵɵelementStart(21, "mj-accordion-panel", 13);
+            i0.ɵɵtwoWayListener("ExpandedChange", function QueryConfigPanelComponent_Template_mj_accordion_panel_ExpandedChange_21_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showAdvancedOptions, $event) || (ctx.showAdvancedOptions = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(22, QueryConfigPanelComponent_ng_template_22_Template, 2, 0, "ng-template", 14);
+            i0.ɵɵelementStart(23, "div", 15)(24, "div", 2)(25, "label");
+            i0.ɵɵtext(26, "Parameter Layout");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "div", 16)(28, "label", 17)(29, "input", 18);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_input_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.parameterLayout, $event) || (ctx.parameterLayout = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_input_change_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onParameterLayoutChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(30, "span", 19);
+            i0.ɵɵelementStart(31, "span", 20);
+            i0.ɵɵelement(32, "i", 21);
+            i0.ɵɵtext(33, " Header ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(34, "label", 17)(35, "input", 22);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.parameterLayout, $event) || (ctx.parameterLayout = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_input_change_35_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onParameterLayoutChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(26, "i", 17);
+            i0.ɵɵelement(36, "span", 19);
+            i0.ɵɵelementStart(37, "span", 20);
+            i0.ɵɵelement(38, "i", 23);
+            i0.ɵɵtext(39, " Sidebar ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(40, "label", 17)(41, "input", 24);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_input_ngModelChange_41_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.parameterLayout, $event) || (ctx.parameterLayout = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_input_change_41_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onParameterLayoutChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(27, QueryConfigPanelComponent_Conditional_27_Template, 52, 18, "div", 18);
+            i0.ɵɵelement(42, "span", 19);
+            i0.ɵɵelementStart(43, "span", 20);
+            i0.ɵɵelement(44, "i", 25);
+            i0.ɵɵtext(45, " Dialog ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(46, "span", 7);
+            i0.ɵɵtext(47);
             i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(48, "div", 2)(49, "label", 26);
+            i0.ɵɵelement(50, "i", 27);
+            i0.ɵɵtext(51, " Auto Refresh ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "select", 28);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_select_ngModelChange_52_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.autoRefreshSeconds, $event) || (ctx.autoRefreshSeconds = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_select_change_52_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAutoRefreshChange()); });
+            i0.ɵɵelementStart(53, "option", 29);
+            i0.ɵɵtext(54, "Disabled");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "option", 29);
+            i0.ɵɵtext(56, "Every 30 seconds");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "option", 29);
+            i0.ɵɵtext(58, "Every minute");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(59, "option", 29);
+            i0.ɵɵtext(60, "Every 5 minutes");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(61, "option", 29);
+            i0.ɵɵtext(62, "Every 10 minutes");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(63, "div", 2)(64, "div", 30)(65, "label", 31)(66, "input", 32);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_input_ngModelChange_66_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showParameterControls, $event) || (ctx.showParameterControls = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_input_change_66_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOptionChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(67, "span", 33);
+            i0.ɵɵelementStart(68, "span", 34);
+            i0.ɵɵtext(69, "Show Parameter Controls");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(70, "label", 31)(71, "input", 32);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryConfigPanelComponent_Template_input_ngModelChange_71_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showExecutionMetadata, $event) || (ctx.showExecutionMetadata = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("change", function QueryConfigPanelComponent_Template_input_change_71_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOptionChange()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(72, "span", 33);
+            i0.ɵɵelementStart(73, "span", 34);
+            i0.ɵɵtext(74, "Show Execution Metadata");
+            i0.ɵɵelementEnd()()()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("error", ctx.queryError);
@@ -352,13 +312,39 @@ let QueryConfigPanelComponent = class QueryConfigPanelComponent extends BaseConf
             i0.ɵɵadvance(7);
             i0.ɵɵtwoWayProperty("ngModel", ctx.title);
             i0.ɵɵproperty("placeholder", ctx.queryName ? "Default: " + ctx.queryName : "Enter a custom title");
-            i0.ɵɵadvance(4);
-            i0.ɵɵattribute("aria-expanded", ctx.showAdvancedOptions);
-            i0.ɵɵadvance(4);
-            i0.ɵɵclassProp("fa-chevron-down", !ctx.showAdvancedOptions)("fa-chevron-up", ctx.showAdvancedOptions);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtwoWayProperty("Expanded", ctx.showAdvancedOptions);
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("selected", ctx.parameterLayout === "header");
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.parameterLayout);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("selected", ctx.parameterLayout === "sidebar");
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.parameterLayout);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("selected", ctx.parameterLayout === "dialog");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAdvancedOptions ? 27 : -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("ngModel", ctx.parameterLayout);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.getParameterLayoutDescription());
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.autoRefreshSeconds);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngValue", 0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngValue", 30);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngValue", 60);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngValue", 300);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngValue", 600);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.showParameterControls);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.showExecutionMetadata);
+        } }, 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}"] });
 };
 QueryConfigPanelComponent = __decorate([
     RegisterClass(BaseConfigPanel, 'QueryPanelConfigDialog')
@@ -366,7 +352,7 @@ QueryConfigPanelComponent = __decorate([
 export { QueryConfigPanelComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryConfigPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-query-config-panel', template: "<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- Query Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-flask\"></i>\n      Select Query\n      <span class=\"required\">*</span>\n    </label>\n    <mj-tree-dropdown\n      #queryDropdown\n      [BranchConfig]=\"QueryCategoryConfig\"\n      [LeafConfig]=\"QueryLeafConfig\"\n      [Value]=\"QueryIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse queries...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onQuerySelection($event)\"\n      [class.error]=\"queryError\">\n    </mj-tree-dropdown>\n    @if (queryError) {\n      <span class=\"form-error\">{{ queryError }}</span>\n    }\n    @if (!queryError && !queryId) {\n      <span class=\"form-hint\">\n        Browse categories or search to find a query\n      </span>\n    }\n    @if (!queryError && queryId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ queryName }}\n      </span>\n    }\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]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use query name as title</span>\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-sliders\"></i>\n        Display Options\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        <!-- Parameter Layout -->\n        <div class=\"form-group\">\n          <label>Parameter Layout</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"header\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                Header\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"sidebar\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                Sidebar\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"dialog\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-window-restore\"></i>\n                Dialog\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n        </div>\n        <!-- Auto Refresh -->\n        <div class=\"form-group\">\n          <label for=\"autoRefresh\">\n            <i class=\"fa-solid fa-rotate\"></i>\n            Auto Refresh\n          </label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"autoRefreshSeconds\"\n            (change)=\"onAutoRefreshChange()\">\n            <option [ngValue]=\"0\">Disabled</option>\n            <option [ngValue]=\"30\">Every 30 seconds</option>\n            <option [ngValue]=\"60\">Every minute</option>\n            <option [ngValue]=\"300\">Every 5 minutes</option>\n            <option [ngValue]=\"600\">Every 10 minutes</option>\n          </select>\n        </div>\n        <!-- 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)]=\"showParameterControls\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Parameter Controls</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"showExecutionMetadata\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Execution Metadata</span>\n            </label>\n          </div>\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-query-config-panel', template: "<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- Query Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-flask\"></i>\n      Select Query\n      <span class=\"required\">*</span>\n    </label>\n    <mj-tree-dropdown\n      #queryDropdown\n      [BranchConfig]=\"QueryCategoryConfig\"\n      [LeafConfig]=\"QueryLeafConfig\"\n      [Value]=\"QueryIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse queries...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onQuerySelection($event)\"\n      [class.error]=\"queryError\">\n    </mj-tree-dropdown>\n    @if (queryError) {\n      <span class=\"form-error\">{{ queryError }}</span>\n    }\n    @if (!queryError && !queryId) {\n      <span class=\"form-hint\">\n        Browse categories or search to find a query\n      </span>\n    }\n    @if (!queryError && queryId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ queryName }}\n      </span>\n    }\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]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use query name as title</span>\n  </div>\n\n  <!-- Display Options -->\n  <mj-accordion-panel [(Expanded)]=\"showAdvancedOptions\" Size=\"sm\">\n    <ng-template mjAccordionTitle>\n      <i class=\"fa-solid fa-sliders\"></i>\n      Display Options\n    </ng-template>\n    <div class=\"config-section-body\">\n        <!-- Parameter Layout -->\n        <div class=\"form-group\">\n          <label>Parameter Layout</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"header\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                Header\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"sidebar\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                Sidebar\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"dialog\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-window-restore\"></i>\n                Dialog\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n        </div>\n        <!-- Auto Refresh -->\n        <div class=\"form-group\">\n          <label for=\"autoRefresh\">\n            <i class=\"fa-solid fa-rotate\"></i>\n            Auto Refresh\n          </label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"autoRefreshSeconds\"\n            (change)=\"onAutoRefreshChange()\">\n            <option [ngValue]=\"0\">Disabled</option>\n            <option [ngValue]=\"30\">Every 30 seconds</option>\n            <option [ngValue]=\"60\">Every minute</option>\n            <option [ngValue]=\"300\">Every 5 minutes</option>\n            <option [ngValue]=\"600\">Every 10 minutes</option>\n          </select>\n        </div>\n        <!-- 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)]=\"showParameterControls\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Parameter Controls</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"showExecutionMetadata\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Execution Metadata</span>\n            </label>\n          </div>\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 }], { queryDropdown: [{
             type: ViewChild,
             args: ['queryDropdown']

package/dist/lib/config-panels/query-config-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-config-panel.component.js","sourceRoot":"","sources":["../../../src/lib/config-panels/query-config-panel.component.ts","../../../src/lib/config-panels/query-config-panel.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;;;;;ICmBhD,+BAAyB;IAAA,YAAgB;IAAA,iBAAO;;;IAAvB,cAAgB;IAAhB,uCAAgB;;;IAGzC,+BAAwB;IACtB,6DACF;IAAA,iBAAO;;;IAGP,+BAA4C;IAC1C,wBAAiC;IACjC,YACF;IAAA,iBAAO;;;IADL,eACF;IADE,2DACF;;;;IAyCI,AADF,AAFF,+BAAiC,aAEP,YACf;IAAA,gCAAgB;IAAA,iBAAQ;IAG3B,AADF,AADF,+BAAiD,gBACmD,gBAMzD;IADrC,gUAA6B;IAC7B,+LAAU,gCAAyB,KAAC;IALtC,iBAKuC;IACvC,2BAAgC;IAChC,gCAA0B;IACxB,wBAAiD;IACjD,yBACF;IACF,AADE,iBAAO,EACD;IAEN,AADF,kCAAmG,iBAM1D;IADrC,iUAA6B;IAC7B,gMAAU,gCAAyB,KAAC;IALtC,iBAKuC;IACvC,4BAAgC;IAChC,iCAA0B;IACxB,yBAAyC;IACzC,0BACF;IACF,AADE,iBAAO,EACD;IAEN,AADF,kCAAkG,iBAMzD;IADrC,iUAA6B;IAC7B,gMAAU,gCAAyB,KAAC;IALtC,iBAKuC;IACvC,4BAAgC;IAChC,iCAA0B;IACxB,yBAA0C;IAC1C,yBACF;IAEJ,AADE,AADE,iBAAO,EACD,EACJ;IACN,gCAAwB;IAAA,aAAqC;IAC/D,AAD+D,iBAAO,EAChE;IAGJ,AADF,+BAAwB,iBACG;IACvB,yBAAkC;IAClC,+BACF;IAAA,iBAAQ;IACR,mCAGmC;IADjC,wUAAgC;IAChC,iMAAU,4BAAqB,KAAC;IAChC,mCAAsB;IAAA,yBAAQ;IAAA,iBAAS;IACvC,mCAAuB;IAAA,iCAAgB;IAAA,iBAAS;IAChD,mCAAuB;IAAA,6BAAY;IAAA,iBAAS;IAC5C,mCAAwB;IAAA,gCAAe;IAAA,iBAAS;IAChD,mCAAwB;IAAA,iCAAgB;IAE5C,AADE,AAD0C,iBAAS,EAC1C,EACL;IAKA,AADF,AADF,AADF,+BAAwB,eAC8B,iBACM,iBAIxB;IAD5B,6UAAmC;IACnC,gMAAU,uBAAgB,KAAC;IAH7B,iBAG8B;IAC9B,4BAAmC;IACnC,iCAA6B;IAAA,wCAAuB;IACtD,AADsD,iBAAO,EACrD;IAEN,AADF,kCAAwD,iBAIxB;IAD5B,6UAAmC;IACnC,gMAAU,uBAAgB,KAAC;IAH7B,iBAG8B;IAC9B,4BAAmC;IACnC,iCAA6B;IAAA,wCAAuB;IAI5D,AADE,AADE,AADE,AADsD,iBAAO,EACrD,EACJ,EACF,EACF;;;IAhFkD,eAA+C;IAA/C,+DAA+C;IAK7F,cAA6B;IAA7B,sDAA6B;IAQiB,eAAgD;IAAhD,gEAAgD;IAK9F,cAA6B;IAA7B,sDAA6B;IAQiB,eAA+C;IAA/C,+DAA+C;IAK7F,cAA6B;IAA7B,sDAA6B;IASX,eAAqC;IAArC,4DAAqC;IAU3D,eAAgC;IAAhC,yDAAgC;IAExB,cAAa;IAAb,2BAAa;IACb,eAAc;IAAd,4BAAc;IACd,eAAc;IAAd,4BAAc;IACd,eAAe;IAAf,6BAAe;IACf,eAAe;IAAf,6BAAe;IASnB,eAAmC;IAAnC,4DAAmC;IAQnC,eAAmC;IAAnC,4DAAmC;;ADzInD;;;GAGG;AAQI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,eAAe;IAC1D,sBAAsB;IACM,aAAa,CAAyB;IAElE,cAAc;IACP,KAAK,GAAG,EAAE,CAAC;IACX,OAAO,GAAG,EAAE,CAAC;IACb,SAAS,GAAG,EAAE,CAAC;IACf,qBAAqB,GAAG,IAAI,CAAC;IAC7B,eAAe,GAAoC,QAAQ,CAAC;IAC5D,kBAAkB,GAAG,CAAC,CAAC;IACvB,qBAAqB,GAAG,IAAI,CAAC;IAEpC,wDAAwD;IAChD,iBAAiB,GAAG,EAAE,CAAC;IAE/B,4BAA4B;IACrB,mBAAmB,GAAG,KAAK,CAAC;IAEnC,aAAa;IACN,UAAU,GAAG,EAAE,CAAC;IAEvB,0EAA0E;IACnE,mBAAmB,GAAqB;QAC3C,UAAU,EAAE,sBAAsB;QAClC,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,UAAU;QACzB,WAAW,EAAE,oBAAoB;QACjC,gBAAgB,EAAE,aAAa;QAC/B,OAAO,EAAE,UAAU;KACtB,CAAC;IAEK,eAAe,GAAmB;QACrC,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,YAAY;QACzB,WAAW,EAAE,mBAAmB;QAChC,gBAAgB,EAAE,aAAa;QAC/B,OAAO,EAAE,UAAU;KACtB,CAAC;IAEF,YAAY,GAAsB;QAC9B,KAAK,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED;;OAEG;IACH,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnE,CAAC;IAEM,cAAc,CAAC,MAA0B;QAC5C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,GAAI,MAAM,CAAC,SAAS,CAAY,IAAI,EAAE,CAAC;YACnD,IAAI,CAAC,SAAS,GAAI,MAAM,CAAC,WAAW,CAAY,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,qBAAqB,GAAI,MAAM,CAAC,uBAAuB,CAAa,IAAI,IAAI,CAAC;YAClF,IAAI,CAAC,eAAe,GAAI,MAAM,CAAC,iBAAiB,CAAqC,IAAI,QAAQ,CAAC;YAClG,IAAI,CAAC,kBAAkB,GAAI,MAAM,CAAC,oBAAoB,CAAY,IAAI,CAAC,CAAC;YACxE,IAAI,CAAC,qBAAqB,GAAI,MAAM,CAAC,uBAAuB,CAAa,IAAI,IAAI,CAAC;QACtF,CAAC;aAAM,CAAC;YACJ,+BAA+B;YAC/B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;YAC5B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEM,WAAW;QACd,OAAO;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,SAAS;YACzC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,SAAS;YAC7C,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;YACjD,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;SACpD,CAAC;IACN,CAAC;IAEe,QAAQ;QACpB,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAErB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC;YACjD,IAAI,CAAC,UAAU,GAAG,uBAAuB,CAAC;YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QACzB,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAClD,CAAC;IAEM,eAAe;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACD,OAAO,OAAO,CAAC;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;IAChD,CAAC;IAED,sBAAsB;IACf,aAAa;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED;;OAEG;IACI,gBAAgB,CAAC,IAAkC;QACtD,gFAAgF;QAChF,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACtD,OAAO;QACX,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAErB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,0DAA0D;YAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACvB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;gBACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;gBAE5B,oEAAoE;gBACpE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACtF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC5B,CAAC;gBACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEM,uBAAuB;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,mBAAmB;QACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,cAAc;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,qBAAqB;QACxB,IAAI,CAAC,mBAAmB,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC;IACzD,CAAC;IAEM,6BAA6B;QAChC,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3B,KAAK,SAAS;gBACV,OAAO,+CAA+C,CAAC;YAC3D,KAAK,QAAQ;gBACT,OAAO,gDAAgD,CAAC;YAC5D;gBACI,OAAO,uDAAuD,CAAC;QACvE,CAAC;IACL,CAAC;mHA9KQ,yBAAyB;6DAAzB,yBAAyB;;;;;;;YCnBlC,AADF,AAFF,8BAAgD,aAEtB,YACf;YACL,uBAAiC;YACjC,8BACA;YAAA,+BAAuB;YAAA,iBAAC;YAC1B,AAD0B,iBAAO,EACzB;YACR,8CAU6B;YAD3B,gLAAmB,4BAAwB,KAAC;YAE9C,iBAAmB;YACnB,4FAAkB;YAGlB,8FAA+B;YAK/B,8FAA8B;YAMhC,iBAAM;YAIJ,AADF,+BAAwB,gBACC;YACrB,yBAAmC;YACnC,6BACA;YAAA,iCAA2B;YAAA,2BAAU;YACvC,AADuC,iBAAO,EACtC;YACR,kCAMqB;YAHnB,qPAAmB;YACnB,4IAAS,mBAAe,KAAC;YAJ3B,iBAMqB;YACrB,gCAAwB;YAAA,uDAAsC;YAChE,AADgE,iBAAO,EACjE;YAIJ,AADF,gCAAiC,kBAKc;YAD3C,6IAAS,2BAAuB,KAAC;YAEjC,iCAAgC;YAC9B,yBAAmC;YACnC,kCACF;YAAA,iBAAO;YACP,yBAEgD;YAClD,iBAAS;YAET,gGAA2B;YAyF/B,AADE,iBAAM,EACF;;YA5IA,eAA0B;YAA1B,uCAA0B;YAF1B,AADA,AADA,AADA,AADA,AADA,AADA,sDAAoC,mCACN,2BACR,2BACI,2BACA,8CACmB,sBACxB;YAIvB,eAEC;YAFD,yCAEC;YACD,cAIC;YAJD,2DAIC;YACD,cAKC;YALD,0DAKC;YAaC,eAAmB;YAAnB,yCAAmB;YAEnB,kGAA4E;YAW5E,eAA0C;;YAMxC,eAA8C;YAChD,AADE,2DAA8C,0CACL;YAG7C,cAuFC;YAvFD,mDAuFC;;;ADtIQ,yBAAyB;IAPrC,aAAa,CAAC,eAAe,EAAE,wBAAwB,CAAC;GAO5C,yBAAyB,CA+KrC;;iFA/KY,yBAAyB;cANrC,SAAS;6BACI,KAAK,YACL,uBAAuB;;kBAMhC,SAAS;mBAAC,eAAe;;kFAFjB,yBAAyB","sourcesContent":["import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';\nimport { RegisterClass } from '@memberjunction/global';\nimport { CompositeKey } from '@memberjunction/core';\nimport { BaseConfigPanel } from './base-config-panel';\nimport { PanelConfig } from '../models/dashboard-types';\nimport {\n    TreeBranchConfig,\n    TreeLeafConfig,\n    TreeNode,\n    TreeDropdownComponent\n} from '@memberjunction/ng-trees';\n\n/**\n * Configuration panel for Query parts.\n * Uses tree dropdown for category-based query selection.\n */\n@RegisterClass(BaseConfigPanel, 'QueryPanelConfigDialog')\n@Component({\n  standalone: false,\n    selector: 'mj-query-config-panel',\n    templateUrl: './query-config-panel.component.html',\n    styleUrls: ['./config-panel.component.css']\n})\nexport class QueryConfigPanelComponent extends BaseConfigPanel {\n    // ViewChild reference\n    @ViewChild('queryDropdown') queryDropdown!: TreeDropdownComponent;\n\n    // Form fields\n    public title = '';\n    public queryId = '';\n    public queryName = '';\n    public showParameterControls = true;\n    public parameterLayout: 'header' | 'sidebar' | 'dialog' = 'header';\n    public autoRefreshSeconds = 0;\n    public showExecutionMetadata = true;\n\n    // Track previous selection name for smart title updates\n    private previousQueryName = '';\n\n    // Collapsible section state\n    public showAdvancedOptions = false;\n\n    // Validation\n    public queryError = '';\n\n    // Tree configuration for Query Categories (branches) and Queries (leaves)\n    public QueryCategoryConfig: TreeBranchConfig = {\n        EntityName: 'MJ: Query Categories',\n        DisplayField: 'Name',\n        IDField: 'ID',\n        ParentIDField: 'ParentID',\n        DefaultIcon: 'fa-solid fa-folder',\n        DescriptionField: 'Description',\n        OrderBy: 'Name ASC'\n    };\n\n    public QueryLeafConfig: TreeLeafConfig = {\n        EntityName: 'MJ: Queries',\n        DisplayField: 'Name',\n        IDField: 'ID',\n        ParentField: 'CategoryID',\n        DefaultIcon: 'fa-solid fa-flask',\n        DescriptionField: 'Description',\n        OrderBy: 'Name ASC'\n    };\n\n    constructor(cdr: ChangeDetectorRef) {\n        super(cdr);\n    }\n\n    /**\n     * Get the queryId as a CompositeKey for the tree dropdown\n     */\n    public get QueryIdAsKey(): CompositeKey | null {\n        return this.queryId ? CompositeKey.FromID(this.queryId) : null;\n    }\n\n    public initFromConfig(config: PanelConfig | null): void {\n        if (config && config.type === 'Query') {\n            this.queryId = (config['queryId'] as string) || '';\n            this.queryName = (config['queryName'] as string) || '';\n            this.showParameterControls = (config['showParameterControls'] as boolean) ?? true;\n            this.parameterLayout = (config['parameterLayout'] as 'header' | 'sidebar' | 'dialog') || 'header';\n            this.autoRefreshSeconds = (config['autoRefreshSeconds'] as number) || 0;\n            this.showExecutionMetadata = (config['showExecutionMetadata'] as boolean) ?? true;\n        } else {\n            // Defaults for new Query panel\n            this.queryId = '';\n            this.queryName = '';\n            this.showParameterControls = true;\n            this.parameterLayout = 'header';\n            this.autoRefreshSeconds = 0;\n            this.showExecutionMetadata = true;\n        }\n\n        this.title = this.panel?.title || '';\n        this.previousQueryName = '';\n        this.queryError = '';\n        this.cdr.detectChanges();\n    }\n\n    public buildConfig(): PanelConfig {\n        return {\n            type: 'Query',\n            queryId: this.queryId.trim() || undefined,\n            queryName: this.queryName.trim() || undefined,\n            showParameterControls: this.showParameterControls,\n            parameterLayout: this.parameterLayout,\n            autoRefreshSeconds: this.autoRefreshSeconds,\n            showExecutionMetadata: this.showExecutionMetadata\n        };\n    }\n\n    public override validate(): { valid: boolean; errors: string[] } {\n        const errors: string[] = [];\n        this.queryError = '';\n\n        if (!this.queryId.trim() && !this.queryName.trim()) {\n            this.queryError = 'Please select a query';\n            errors.push(this.queryError);\n        }\n\n        this.cdr.detectChanges();\n        return { valid: errors.length === 0, errors };\n    }\n\n    public getDefaultTitle(): string {\n        if (this.queryName) {\n            return this.queryName;\n        }\n        return 'Query';\n    }\n\n    public getTitle(): string {\n        return this.title || this.getDefaultTitle();\n    }\n\n    // Form event handlers\n    public onTitleChange(): void {\n        this.emitConfigChanged();\n    }\n\n    /**\n     * Handle query selection from tree dropdown\n     */\n    public onQuerySelection(node: TreeNode | TreeNode[] | null): void {\n        // Ignore null/empty selections (these happen during sync, not user interaction)\n        if (!node || (Array.isArray(node) && node.length === 0)) {\n            return;\n        }\n\n        this.queryError = '';\n\n        if (!Array.isArray(node)) {\n            // Only accept leaf nodes (actual queries, not categories)\n            if (node.Type === 'leaf') {\n                const oldQueryName = this.queryName;\n                this.queryId = node.ID;\n                this.queryName = node.Label;\n\n                // Smart title update: if title matches old name, update to new name\n                if (!this.title || this.title === oldQueryName || this.title === this.previousQueryName) {\n                    this.title = node.Label;\n                }\n                this.previousQueryName = node.Label;\n            }\n        }\n\n        this.emitConfigChanged();\n        this.cdr.detectChanges();\n    }\n\n    public onParameterLayoutChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public onAutoRefreshChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public onOptionChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public toggleAdvancedOptions(): void {\n        this.showAdvancedOptions = !this.showAdvancedOptions;\n    }\n\n    public getParameterLayoutDescription(): string {\n        switch (this.parameterLayout) {\n            case 'sidebar':\n                return 'Parameters displayed in a collapsible sidebar';\n            case 'dialog':\n                return 'Parameters shown in a popup dialog when needed';\n            default:\n                return 'Parameters displayed in the header area above results';\n        }\n    }\n}\n","<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- Query Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-flask\"></i>\n      Select Query\n      <span class=\"required\">*</span>\n    </label>\n    <mj-tree-dropdown\n      #queryDropdown\n      [BranchConfig]=\"QueryCategoryConfig\"\n      [LeafConfig]=\"QueryLeafConfig\"\n      [Value]=\"QueryIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse queries...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onQuerySelection($event)\"\n      [class.error]=\"queryError\">\n    </mj-tree-dropdown>\n    @if (queryError) {\n      <span class=\"form-error\">{{ queryError }}</span>\n    }\n    @if (!queryError && !queryId) {\n      <span class=\"form-hint\">\n        Browse categories or search to find a query\n      </span>\n    }\n    @if (!queryError && queryId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ queryName }}\n      </span>\n    }\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]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use query name as title</span>\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-sliders\"></i>\n        Display Options\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        <!-- Parameter Layout -->\n        <div class=\"form-group\">\n          <label>Parameter Layout</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"header\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                Header\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"sidebar\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                Sidebar\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"dialog\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-window-restore\"></i>\n                Dialog\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n        </div>\n        <!-- Auto Refresh -->\n        <div class=\"form-group\">\n          <label for=\"autoRefresh\">\n            <i class=\"fa-solid fa-rotate\"></i>\n            Auto Refresh\n          </label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"autoRefreshSeconds\"\n            (change)=\"onAutoRefreshChange()\">\n            <option [ngValue]=\"0\">Disabled</option>\n            <option [ngValue]=\"30\">Every 30 seconds</option>\n            <option [ngValue]=\"60\">Every minute</option>\n            <option [ngValue]=\"300\">Every 5 minutes</option>\n            <option [ngValue]=\"600\">Every 10 minutes</option>\n          </select>\n        </div>\n        <!-- 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)]=\"showParameterControls\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Parameter Controls</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"showExecutionMetadata\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Execution Metadata</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n"]}
+{"version":3,"file":"query-config-panel.component.js","sourceRoot":"","sources":["../../../src/lib/config-panels/query-config-panel.component.ts","../../../src/lib/config-panels/query-config-panel.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;;;;;;ICmBhD,+BAAyB;IAAA,YAAgB;IAAA,iBAAO;;;IAAvB,cAAgB;IAAhB,uCAAgB;;;IAGzC,+BAAwB;IACtB,6DACF;IAAA,iBAAO;;;IAGP,+BAA4C;IAC1C,wBAAiC;IACjC,YACF;IAAA,iBAAO;;;IADL,eACF;IADE,2DACF;;;IAwBA,wBAAmC;IACnC,iCACF;;AD/CJ;;;GAGG;AAQI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,eAAe;IAC1D,sBAAsB;IACM,aAAa,CAAyB;IAElE,cAAc;IACP,KAAK,GAAG,EAAE,CAAC;IACX,OAAO,GAAG,EAAE,CAAC;IACb,SAAS,GAAG,EAAE,CAAC;IACf,qBAAqB,GAAG,IAAI,CAAC;IAC7B,eAAe,GAAoC,QAAQ,CAAC;IAC5D,kBAAkB,GAAG,CAAC,CAAC;IACvB,qBAAqB,GAAG,IAAI,CAAC;IAEpC,wDAAwD;IAChD,iBAAiB,GAAG,EAAE,CAAC;IAE/B,4BAA4B;IACrB,mBAAmB,GAAG,KAAK,CAAC;IAEnC,aAAa;IACN,UAAU,GAAG,EAAE,CAAC;IAEvB,0EAA0E;IACnE,mBAAmB,GAAqB;QAC3C,UAAU,EAAE,sBAAsB;QAClC,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,UAAU;QACzB,WAAW,EAAE,oBAAoB;QACjC,gBAAgB,EAAE,aAAa;QAC/B,OAAO,EAAE,UAAU;KACtB,CAAC;IAEK,eAAe,GAAmB;QACrC,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,YAAY;QACzB,WAAW,EAAE,mBAAmB;QAChC,gBAAgB,EAAE,aAAa;QAC/B,OAAO,EAAE,UAAU;KACtB,CAAC;IAEF,YAAY,GAAsB;QAC9B,KAAK,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED;;OAEG;IACH,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnE,CAAC;IAEM,cAAc,CAAC,MAA0B;QAC5C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,GAAI,MAAM,CAAC,SAAS,CAAY,IAAI,EAAE,CAAC;YACnD,IAAI,CAAC,SAAS,GAAI,MAAM,CAAC,WAAW,CAAY,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,qBAAqB,GAAI,MAAM,CAAC,uBAAuB,CAAa,IAAI,IAAI,CAAC;YAClF,IAAI,CAAC,eAAe,GAAI,MAAM,CAAC,iBAAiB,CAAqC,IAAI,QAAQ,CAAC;YAClG,IAAI,CAAC,kBAAkB,GAAI,MAAM,CAAC,oBAAoB,CAAY,IAAI,CAAC,CAAC;YACxE,IAAI,CAAC,qBAAqB,GAAI,MAAM,CAAC,uBAAuB,CAAa,IAAI,IAAI,CAAC;QACtF,CAAC;aAAM,CAAC;YACJ,+BAA+B;YAC/B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;YAC5B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEM,WAAW;QACd,OAAO;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,SAAS;YACzC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,SAAS;YAC7C,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;YACjD,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;SACpD,CAAC;IACN,CAAC;IAEe,QAAQ;QACpB,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAErB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC;YACjD,IAAI,CAAC,UAAU,GAAG,uBAAuB,CAAC;YAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QACzB,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAClD,CAAC;IAEM,eAAe;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACD,OAAO,OAAO,CAAC;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;IAChD,CAAC;IAED,sBAAsB;IACf,aAAa;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED;;OAEG;IACI,gBAAgB,CAAC,IAAkC;QACtD,gFAAgF;QAChF,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACtD,OAAO;QACX,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAErB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,0DAA0D;YAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACvB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;gBACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;gBAE5B,oEAAoE;gBACpE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACtF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC5B,CAAC;gBACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEM,uBAAuB;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,mBAAmB;QACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,cAAc;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEM,6BAA6B;QAChC,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3B,KAAK,SAAS;gBACV,OAAO,+CAA+C,CAAC;YAC3D,KAAK,QAAQ;gBACT,OAAO,gDAAgD,CAAC;YAC5D;gBACI,OAAO,uDAAuD,CAAC;QACvE,CAAC;IACL,CAAC;mHA1KQ,yBAAyB;6DAAzB,yBAAyB;;;;;;;YCnBlC,AADF,AAFF,8BAAgD,aAEtB,YACf;YACL,uBAAiC;YACjC,8BACA;YAAA,+BAAuB;YAAA,iBAAC;YAC1B,AAD0B,iBAAO,EACzB;YACR,8CAU6B;YAD3B,gLAAmB,4BAAwB,KAAC;YAE9C,iBAAmB;YACnB,4FAAkB;YAGlB,8FAA+B;YAK/B,8FAA8B;YAMhC,iBAAM;YAIJ,AADF,+BAAwB,gBACC;YACrB,yBAAmC;YACnC,6BACA;YAAA,iCAA2B;YAAA,2BAAU;YACvC,AADuC,iBAAO,EACtC;YACR,kCAMqB;YAHnB,qPAAmB;YACnB,4IAAS,mBAAe,KAAC;YAJ3B,iBAMqB;YACrB,gCAAwB;YAAA,uDAAsC;YAChE,AADgE,iBAAO,EACjE;YAGN,+CAAiE;YAA7C,gSAAkC;YACpD,6FAA8B;YAOxB,AADF,AAFJ,gCAAiC,cAEL,aACf;YAAA,iCAAgB;YAAA,iBAAQ;YAG3B,AADF,AADF,gCAAiD,iBACmD,iBAMzD;YADrC,yQAA6B;YAC7B,8IAAU,6BAAyB,KAAC;YALtC,iBAKuC;YACvC,4BAAgC;YAChC,iCAA0B;YACxB,yBAAiD;YACjD,yBACF;YACF,AADE,iBAAO,EACD;YAEN,AADF,kCAAmG,iBAM1D;YADrC,yQAA6B;YAC7B,8IAAU,6BAAyB,KAAC;YALtC,iBAKuC;YACvC,4BAAgC;YAChC,iCAA0B;YACxB,yBAAyC;YACzC,0BACF;YACF,AADE,iBAAO,EACD;YAEN,AADF,kCAAkG,iBAMzD;YADrC,yQAA6B;YAC7B,8IAAU,6BAAyB,KAAC;YALtC,iBAKuC;YACvC,4BAAgC;YAChC,iCAA0B;YACxB,yBAA0C;YAC1C,yBACF;YAEJ,AADE,AADE,iBAAO,EACD,EACJ;YACN,gCAAwB;YAAA,aAAqC;YAC/D,AAD+D,iBAAO,EAChE;YAGJ,AADF,+BAAwB,iBACG;YACvB,yBAAkC;YAClC,+BACF;YAAA,iBAAQ;YACR,mCAGmC;YADjC,gRAAgC;YAChC,+IAAU,yBAAqB,KAAC;YAChC,mCAAsB;YAAA,yBAAQ;YAAA,iBAAS;YACvC,mCAAuB;YAAA,iCAAgB;YAAA,iBAAS;YAChD,mCAAuB;YAAA,6BAAY;YAAA,iBAAS;YAC5C,mCAAwB;YAAA,gCAAe;YAAA,iBAAS;YAChD,mCAAwB;YAAA,iCAAgB;YAE5C,AADE,AAD0C,iBAAS,EAC1C,EACL;YAKA,AADF,AADF,AADF,+BAAwB,eAC8B,iBACM,iBAIxB;YAD5B,qRAAmC;YACnC,8IAAU,oBAAgB,KAAC;YAH7B,iBAG8B;YAC9B,4BAAmC;YACnC,iCAA6B;YAAA,wCAAuB;YACtD,AADsD,iBAAO,EACrD;YAEN,AADF,kCAAwD,iBAIxB;YAD5B,qRAAmC;YACnC,8IAAU,oBAAgB,KAAC;YAH7B,iBAG8B;YAC9B,4BAAmC;YACnC,iCAA6B;YAAA,wCAAuB;YAMlE,AADE,AADE,AADI,AADE,AADE,AADsD,iBAAO,EACrD,EACJ,EACF,EACJ,EACa,EACjB;;YAhIA,eAA0B;YAA1B,uCAA0B;YAF1B,AADA,AADA,AADA,AADA,AADA,AADA,sDAAoC,mCACN,2BACR,2BACI,2BACA,8CACmB,sBACxB;YAIvB,eAEC;YAFD,yCAEC;YACD,cAIC;YAJD,2DAIC;YACD,cAKC;YALD,0DAKC;YAaC,eAAmB;YAAnB,yCAAmB;YAEnB,kGAA4E;YAM5D,eAAkC;YAAlC,wDAAkC;YAUM,eAA+C;YAA/C,4DAA+C;YAK7F,cAA6B;YAA7B,mDAA6B;YAQiB,eAAgD;YAAhD,6DAAgD;YAK9F,cAA6B;YAA7B,mDAA6B;YAQiB,eAA+C;YAA/C,4DAA+C;YAK7F,cAA6B;YAA7B,mDAA6B;YASX,eAAqC;YAArC,yDAAqC;YAU3D,eAAgC;YAAhC,sDAAgC;YAExB,cAAa;YAAb,2BAAa;YACb,eAAc;YAAd,4BAAc;YACd,eAAc;YAAd,4BAAc;YACd,eAAe;YAAf,6BAAe;YACf,eAAe;YAAf,6BAAe;YASnB,eAAmC;YAAnC,yDAAmC;YAQnC,eAAmC;YAAnC,yDAAmC;;;ADnHtC,yBAAyB;IAPrC,aAAa,CAAC,eAAe,EAAE,wBAAwB,CAAC;GAO5C,yBAAyB,CA2KrC;;iFA3KY,yBAAyB;cANrC,SAAS;6BACI,KAAK,YACL,uBAAuB;;kBAMhC,SAAS;mBAAC,eAAe;;kFAFjB,yBAAyB","sourcesContent":["import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';\nimport { RegisterClass } from '@memberjunction/global';\nimport { CompositeKey } from '@memberjunction/core';\nimport { BaseConfigPanel } from './base-config-panel';\nimport { PanelConfig } from '../models/dashboard-types';\nimport {\n    TreeBranchConfig,\n    TreeLeafConfig,\n    TreeNode,\n    TreeDropdownComponent\n} from '@memberjunction/ng-trees';\n\n/**\n * Configuration panel for Query parts.\n * Uses tree dropdown for category-based query selection.\n */\n@RegisterClass(BaseConfigPanel, 'QueryPanelConfigDialog')\n@Component({\n  standalone: false,\n    selector: 'mj-query-config-panel',\n    templateUrl: './query-config-panel.component.html',\n    styleUrls: ['./config-panel.component.css']\n})\nexport class QueryConfigPanelComponent extends BaseConfigPanel {\n    // ViewChild reference\n    @ViewChild('queryDropdown') queryDropdown!: TreeDropdownComponent;\n\n    // Form fields\n    public title = '';\n    public queryId = '';\n    public queryName = '';\n    public showParameterControls = true;\n    public parameterLayout: 'header' | 'sidebar' | 'dialog' = 'header';\n    public autoRefreshSeconds = 0;\n    public showExecutionMetadata = true;\n\n    // Track previous selection name for smart title updates\n    private previousQueryName = '';\n\n    // Collapsible section state\n    public showAdvancedOptions = false;\n\n    // Validation\n    public queryError = '';\n\n    // Tree configuration for Query Categories (branches) and Queries (leaves)\n    public QueryCategoryConfig: TreeBranchConfig = {\n        EntityName: 'MJ: Query Categories',\n        DisplayField: 'Name',\n        IDField: 'ID',\n        ParentIDField: 'ParentID',\n        DefaultIcon: 'fa-solid fa-folder',\n        DescriptionField: 'Description',\n        OrderBy: 'Name ASC'\n    };\n\n    public QueryLeafConfig: TreeLeafConfig = {\n        EntityName: 'MJ: Queries',\n        DisplayField: 'Name',\n        IDField: 'ID',\n        ParentField: 'CategoryID',\n        DefaultIcon: 'fa-solid fa-flask',\n        DescriptionField: 'Description',\n        OrderBy: 'Name ASC'\n    };\n\n    constructor(cdr: ChangeDetectorRef) {\n        super(cdr);\n    }\n\n    /**\n     * Get the queryId as a CompositeKey for the tree dropdown\n     */\n    public get QueryIdAsKey(): CompositeKey | null {\n        return this.queryId ? CompositeKey.FromID(this.queryId) : null;\n    }\n\n    public initFromConfig(config: PanelConfig | null): void {\n        if (config && config.type === 'Query') {\n            this.queryId = (config['queryId'] as string) || '';\n            this.queryName = (config['queryName'] as string) || '';\n            this.showParameterControls = (config['showParameterControls'] as boolean) ?? true;\n            this.parameterLayout = (config['parameterLayout'] as 'header' | 'sidebar' | 'dialog') || 'header';\n            this.autoRefreshSeconds = (config['autoRefreshSeconds'] as number) || 0;\n            this.showExecutionMetadata = (config['showExecutionMetadata'] as boolean) ?? true;\n        } else {\n            // Defaults for new Query panel\n            this.queryId = '';\n            this.queryName = '';\n            this.showParameterControls = true;\n            this.parameterLayout = 'header';\n            this.autoRefreshSeconds = 0;\n            this.showExecutionMetadata = true;\n        }\n\n        this.title = this.panel?.title || '';\n        this.previousQueryName = '';\n        this.queryError = '';\n        this.cdr.detectChanges();\n    }\n\n    public buildConfig(): PanelConfig {\n        return {\n            type: 'Query',\n            queryId: this.queryId.trim() || undefined,\n            queryName: this.queryName.trim() || undefined,\n            showParameterControls: this.showParameterControls,\n            parameterLayout: this.parameterLayout,\n            autoRefreshSeconds: this.autoRefreshSeconds,\n            showExecutionMetadata: this.showExecutionMetadata\n        };\n    }\n\n    public override validate(): { valid: boolean; errors: string[] } {\n        const errors: string[] = [];\n        this.queryError = '';\n\n        if (!this.queryId.trim() && !this.queryName.trim()) {\n            this.queryError = 'Please select a query';\n            errors.push(this.queryError);\n        }\n\n        this.cdr.detectChanges();\n        return { valid: errors.length === 0, errors };\n    }\n\n    public getDefaultTitle(): string {\n        if (this.queryName) {\n            return this.queryName;\n        }\n        return 'Query';\n    }\n\n    public getTitle(): string {\n        return this.title || this.getDefaultTitle();\n    }\n\n    // Form event handlers\n    public onTitleChange(): void {\n        this.emitConfigChanged();\n    }\n\n    /**\n     * Handle query selection from tree dropdown\n     */\n    public onQuerySelection(node: TreeNode | TreeNode[] | null): void {\n        // Ignore null/empty selections (these happen during sync, not user interaction)\n        if (!node || (Array.isArray(node) && node.length === 0)) {\n            return;\n        }\n\n        this.queryError = '';\n\n        if (!Array.isArray(node)) {\n            // Only accept leaf nodes (actual queries, not categories)\n            if (node.Type === 'leaf') {\n                const oldQueryName = this.queryName;\n                this.queryId = node.ID;\n                this.queryName = node.Label;\n\n                // Smart title update: if title matches old name, update to new name\n                if (!this.title || this.title === oldQueryName || this.title === this.previousQueryName) {\n                    this.title = node.Label;\n                }\n                this.previousQueryName = node.Label;\n            }\n        }\n\n        this.emitConfigChanged();\n        this.cdr.detectChanges();\n    }\n\n    public onParameterLayoutChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public onAutoRefreshChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public onOptionChange(): void {\n        this.emitConfigChanged();\n    }\n\n    public getParameterLayoutDescription(): string {\n        switch (this.parameterLayout) {\n            case 'sidebar':\n                return 'Parameters displayed in a collapsible sidebar';\n            case 'dialog':\n                return 'Parameters shown in a popup dialog when needed';\n            default:\n                return 'Parameters displayed in the header area above results';\n        }\n    }\n}\n","<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n  <!-- Query Selection (Primary) -->\n  <div class=\"form-group\">\n    <label>\n      <i class=\"fa-solid fa-flask\"></i>\n      Select Query\n      <span class=\"required\">*</span>\n    </label>\n    <mj-tree-dropdown\n      #queryDropdown\n      [BranchConfig]=\"QueryCategoryConfig\"\n      [LeafConfig]=\"QueryLeafConfig\"\n      [Value]=\"QueryIdAsKey\"\n      [SelectableTypes]=\"'leaf'\"\n      [SelectionMode]=\"'single'\"\n      [Placeholder]=\"'Search or browse queries...'\"\n      [EnableSearch]=\"true\"\n      (SelectionChange)=\"onQuerySelection($event)\"\n      [class.error]=\"queryError\">\n    </mj-tree-dropdown>\n    @if (queryError) {\n      <span class=\"form-error\">{{ queryError }}</span>\n    }\n    @if (!queryError && !queryId) {\n      <span class=\"form-hint\">\n        Browse categories or search to find a query\n      </span>\n    }\n    @if (!queryError && queryId) {\n      <span class=\"form-hint form-hint--selected\">\n        <i class=\"fa-solid fa-check\"></i>\n        Selected: {{ queryName }}\n      </span>\n    }\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]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n      class=\"form-input\">\n    <span class=\"form-hint\">Leave empty to use query name as title</span>\n  </div>\n\n  <!-- Display Options -->\n  <mj-accordion-panel [(Expanded)]=\"showAdvancedOptions\" Size=\"sm\">\n    <ng-template mjAccordionTitle>\n      <i class=\"fa-solid fa-sliders\"></i>\n      Display Options\n    </ng-template>\n    <div class=\"config-section-body\">\n        <!-- Parameter Layout -->\n        <div class=\"form-group\">\n          <label>Parameter Layout</label>\n          <div class=\"radio-group radio-group--horizontal\">\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"header\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                Header\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"sidebar\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                Sidebar\n              </span>\n            </label>\n            <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n              <input\n                type=\"radio\"\n                name=\"parameterLayout\"\n                value=\"dialog\"\n                [(ngModel)]=\"parameterLayout\"\n                (change)=\"onParameterLayoutChange()\">\n              <span class=\"radio-mark\"></span>\n              <span class=\"radio-label\">\n                <i class=\"fa-solid fa-window-restore\"></i>\n                Dialog\n              </span>\n            </label>\n          </div>\n          <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n        </div>\n        <!-- Auto Refresh -->\n        <div class=\"form-group\">\n          <label for=\"autoRefresh\">\n            <i class=\"fa-solid fa-rotate\"></i>\n            Auto Refresh\n          </label>\n          <select\n            class=\"form-select\"\n            [(ngModel)]=\"autoRefreshSeconds\"\n            (change)=\"onAutoRefreshChange()\">\n            <option [ngValue]=\"0\">Disabled</option>\n            <option [ngValue]=\"30\">Every 30 seconds</option>\n            <option [ngValue]=\"60\">Every minute</option>\n            <option [ngValue]=\"300\">Every 5 minutes</option>\n            <option [ngValue]=\"600\">Every 10 minutes</option>\n          </select>\n        </div>\n        <!-- 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)]=\"showParameterControls\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Parameter Controls</span>\n            </label>\n            <label class=\"checkbox-option checkbox-option--compact\">\n              <input\n                type=\"checkbox\"\n                [(ngModel)]=\"showExecutionMetadata\"\n                (change)=\"onOptionChange()\">\n              <span class=\"checkbox-mark\"></span>\n              <span class=\"checkbox-label\">Show Execution Metadata</span>\n            </label>\n          </div>\n        </div>\n    </div>\n  </mj-accordion-panel>\n</div>\n"]}

package/dist/lib/config-panels/view-config-panel.component.d.ts

@@ -49,8 +49,6 @@ export declare class ViewConfigPanelComponent extends BaseConfigPanel {
     onOptionChange(): void;
     onSelectionModeChange(): void;
     onFilterChange(): void;
-    toggleDisplayOptions(): void;
-    toggleAdvancedOptions(): void;
     getDisplayModeDescription(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewConfigPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ViewConfigPanelComponent, "mj-dashboard-view-config-panel", never, {}, {}, never, never, false, never>;

package/dist/lib/config-panels/view-config-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-config-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/config-panels/view-config-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,iBAAiB,EAAa,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,0BAA0B,CAAC;;AAElC;;;GAGG;AACH,qBAOa,wBAAyB,SAAQ,eAAe;IAE9B,YAAY,EAAG,qBAAqB,CAAC;IAGzD,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,MAAM,SAAM;IACZ,QAAQ,SAAM;IACd,WAAW,SAAM;IACjB,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAU;IAC5D,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,SAAS,CAAW;IAC5D,eAAe,UAAQ;IACvB,eAAe,UAAQ;IACvB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAY;IAGhE,OAAO,CAAC,gBAAgB,CAAM;IAGvB,kBAAkB,UAAS;IAC3B,mBAAmB,UAAS;IAG5B,SAAS,SAAM;IAGf,kBAAkB,EAAE,gBAAgB,CAQzC;IAEK,cAAc,EAAE,cAAc,CAQnC;gBAEU,GAAG,EAAE,iBAAiB;IAIlC;;OAEG;IACH,IAAW,WAAW,IAAI,YAAY,GAAG,IAAI,CAE5C;IAEM,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IA4BhD,WAAW,IAAI,WAAW;IAcjB,QAAQ,IAAI;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAczD,eAAe,IAAI,MAAM;IAUzB,QAAQ,IAAI,MAAM;IAKlB,aAAa,IAAI,IAAI;IAI5B;;OAEG;IACI,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI;IAgCzD,cAAc,IAAI,IAAI;IAKtB,mBAAmB,IAAI,IAAI;IAI3B,cAAc,IAAI,IAAI;IAItB,qBAAqB,IAAI,IAAI;IAI7B,cAAc,IAAI,IAAI;IAItB,oBAAoB,IAAI,IAAI;IAI5B,qBAAqB,IAAI,IAAI;IAI7B,yBAAyB,IAAI,MAAM;yCArMjC,wBAAwB;2CAAxB,wBAAwB;CAiNpC"}
+{"version":3,"file":"view-config-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/config-panels/view-config-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,iBAAiB,EAAa,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,0BAA0B,CAAC;;AAElC;;;GAGG;AACH,qBAOa,wBAAyB,SAAQ,eAAe;IAE9B,YAAY,EAAG,qBAAqB,CAAC;IAGzD,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,MAAM,SAAM;IACZ,QAAQ,SAAM;IACd,WAAW,SAAM;IACjB,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAU;IAC5D,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,SAAS,CAAW;IAC5D,eAAe,UAAQ;IACvB,eAAe,UAAQ;IACvB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAY;IAGhE,OAAO,CAAC,gBAAgB,CAAM;IAGvB,kBAAkB,UAAS;IAC3B,mBAAmB,UAAS;IAG5B,SAAS,SAAM;IAGf,kBAAkB,EAAE,gBAAgB,CAQzC;IAEK,cAAc,EAAE,cAAc,CAQnC;gBAEU,GAAG,EAAE,iBAAiB;IAIlC;;OAEG;IACH,IAAW,WAAW,IAAI,YAAY,GAAG,IAAI,CAE5C;IAEM,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IA4BhD,WAAW,IAAI,WAAW;IAcjB,QAAQ,IAAI;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAczD,eAAe,IAAI,MAAM;IAUzB,QAAQ,IAAI,MAAM;IAKlB,aAAa,IAAI,IAAI;IAI5B;;OAEG;IACI,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI;IAgCzD,cAAc,IAAI,IAAI;IAKtB,mBAAmB,IAAI,IAAI;IAI3B,cAAc,IAAI,IAAI;IAItB,qBAAqB,IAAI,IAAI;IAI7B,cAAc,IAAI,IAAI;IAKtB,yBAAyB,IAAI,MAAM;yCA9LjC,wBAAwB;2CAAxB,wBAAwB;CA0MpC"}