@memberjunction/ng-query-viewer 5.42.0 → 5.44.0

package/dist/lib/query-info-panel/query-info-panel.component.js

@@ -8,6 +8,7 @@ import { UserInfoEngine } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-markdown";
 import * as i2 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.ID;
 function QueryInfoPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -26,101 +27,83 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_8_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.QueryInfo.Name);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "span", 26);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Overview");
+    i0.ɵɵelementEnd();
+} }
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 29);
+    i0.ɵɵelementStart(3, "span", 31);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.QueryInfo.Description);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "span", 26);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
     i0.ɵɵtext(2, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 27);
-    i0.ɵɵelement(4, "i", 30);
+    i0.ɵɵelementStart(3, "span", 22);
+    i0.ɵɵelement(4, "i", 32);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.QueryInfo.Category, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "span", 26);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
     i0.ɵɵtext(2, "Has SQL");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 27);
-    i0.ɵɵelement(4, "i", 31);
+    i0.ɵɵelementStart(3, "span", 22);
+    i0.ɵɵelement(4, "i", 33);
     i0.ɵɵtext(5, " Yes ");
     i0.ɵɵelementEnd()();
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 25)(2, "span", 26);
-    i0.ɵɵtext(3, "Name");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 27);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_6_Template, 5, 1, "div", 25);
-    i0.ɵɵconditionalCreate(7, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_7_Template, 6, 1, "div", 25);
-    i0.ɵɵelementStart(8, "div", 25)(9, "span", 26);
-    i0.ɵɵtext(10, "Status");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 27)(12, "span", 28);
-    i0.ɵɵtext(13);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(14, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Conditional_14_Template, 6, 0, "div", 25);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Technical Description");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.QueryInfo.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.Description ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.Category ? 7 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("approved", ctx_r1.QueryInfo.Status === "Approved");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.QueryInfo.Status, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.OriginalSQL ? 14 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "mj-markdown", 33);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-markdown", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("data", ctx_r1.QueryInfo.TechnicalDescription || "")("enableMermaid", true)("enableHighlight", true)("enableCollapsibleHeadings", false)("enableSmartypants", true);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_7_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleSection("technical")); });
-    i0.ɵɵelement(2, "i", 20);
-    i0.ɵɵelementStart(3, "span", 21);
-    i0.ɵɵtext(4, "Technical Description");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_7_Conditional_5_Template, 2, 5, "div", 32);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_Template_mj_accordion_panel_ExpandedChange_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleSection("technical")); });
+    i0.ɵɵtemplate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_ng_template_1_Template, 2, 0, "ng-template", 19)(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_ng_template_2_Template, 2, 5, "ng-template", 29);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("technical"));
+} }
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Fields");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 36);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("technical"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("technical"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("technical"));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("technical") ? 5 : -1);
+    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryFields.length || 0, ")");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 41);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 42);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -128,9 +111,9 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", field_r6.Description, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
-    i0.ɵɵelement(1, "i", 43);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -138,10 +121,10 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Con
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2(" ", field_r6.SourceEntity, ".", field_r6.SourceFieldName, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Conditional_1_Template, 2, 1, "span", 41);
-    i0.ɵɵconditionalCreate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Conditional_2_Template, 3, 2, "span", 42);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Conditional_1_Template, 2, 1, "span", 42);
+    i0.ɵɵconditionalCreate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Conditional_2_Template, 3, 2, "span", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r6 = i0.ɵɵnextContext().$implicit;
@@ -150,18 +133,18 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r6.SourceEntity ? 2 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 37)(2, "span", 38);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "span", 39);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 39);
+    i0.ɵɵelementStart(4, "span", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Conditional_6_Template, 3, 2, "div", 40);
+    i0.ɵɵconditionalCreate(6, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Conditional_6_Template, 3, 2, "div", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r6 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(field_r6.Name);
     i0.ɵɵadvance(2);
@@ -169,38 +152,37 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r6.Description || field_r6.SourceEntity ? 6 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵrepeaterCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_For_2_Template, 7, 3, "div", 36, i0.ɵɵcomponentInstance().TrackByField, true);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵrepeaterCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_For_2_Template, 7, 3, "div", 37, i0.ɵɵcomponentInstance().TrackByField, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.QueryInfo.QueryFields);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "i", 44);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No fields defined");
-    i0.ɵɵelementEnd()();
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 26);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_1_Template, 3, 0, "div", 34)(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Conditional_2_Template, 4, 0, "div", 35);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Parameters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 36);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryFields.length ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryParameters.length || 0, ")");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 49);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1, "Required");
     i0.ɵɵelementEnd();
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -208,8 +190,8 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", param_r7.Description, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 53);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -217,10 +199,10 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Default: ", param_r7.DefaultValue, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Conditional_1_Template, 2, 1, "span", 52);
-    i0.ɵɵconditionalCreate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Conditional_2_Template, 2, 1, "span", 53);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Conditional_1_Template, 2, 1, "span", 51);
+    i0.ɵɵconditionalCreate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Conditional_2_Template, 2, 1, "span", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const param_r7 = i0.ɵɵnextContext().$implicit;
@@ -229,19 +211,19 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(param_r7.DefaultValue ? 2 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47)(2, "span", 48);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46)(2, "span", 47);
     i0.ɵɵtext(3);
-    i0.ɵɵconditionalCreate(4, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_4_Template, 2, 0, "span", 49);
+    i0.ɵɵconditionalCreate(4, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_4_Template, 2, 0, "span", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 50);
+    i0.ɵɵelementStart(5, "span", 49);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Conditional_7_Template, 3, 2, "div", 51);
+    i0.ɵɵconditionalCreate(7, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Conditional_7_Template, 3, 2, "div", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const param_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", param_r7.Name, " ");
     i0.ɵɵadvance();
@@ -251,59 +233,56 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(param_r7.Description || param_r7.DefaultValue ? 7 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵrepeaterCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_For_2_Template, 8, 4, "div", 46, i0.ɵɵcomponentInstance().TrackByParam, true);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_For_2_Template, 8, 4, "div", 45, i0.ɵɵcomponentInstance().TrackByParam, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.QueryInfo.QueryParameters);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "i", 54);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No parameters required");
-    i0.ɵɵelementEnd()();
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 28);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_1_Template, 3, 0, "div", 45)(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Conditional_2_Template, 4, 0, "div", 35);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "SQL Query");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryParameters.length ? 1 : 2);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "mj-code-editor", 56);
-    i0.ɵɵlistener("CompositionTokenClick", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Conditional_1_Template_mj_code_editor_CompositionTokenClick_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnCompositionTokenClick($event)); });
+    i0.ɵɵelementStart(0, "div", 53)(1, "mj-code-editor", 55);
+    i0.ɵɵlistener("CompositionTokenClick", function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Conditional_0_Template_mj_code_editor_CompositionTokenClick_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnCompositionTokenClick($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", ctx_r1.QueryInfo.SQL)("readonly", true)("language", "sql");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "i", 57);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "SQL not available");
-    i0.ɵɵelementEnd()();
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 54);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Conditional_1_Template, 2, 3, "div", 55)(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Conditional_2_Template, 4, 0, "div", 35);
-    i0.ɵɵelementEnd();
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Conditional_0_Template, 2, 3, "div", 53)(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Conditional_1_Template, 1, 0, "mj-empty-state", 54);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.SQL ? 1 : 2);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.SQL ? 0 : 1);
+} }
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Dependent Queries");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 36);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryDependents.length, ")");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 66);
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_For_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 64);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -311,16 +290,16 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" via ", dep_r11.ReferencePath, " ");
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_For_3_Template(rf, ctx) { if (rf & 1) {
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_For_3_Template_div_click_0_listener() { const dep_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnDependentQueryClick(dep_r11)); });
-    i0.ɵɵelementStart(1, "div", 63);
-    i0.ɵɵelement(2, "i", 64);
-    i0.ɵɵelementStart(3, "span", 65);
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_For_4_Template_div_click_0_listener() { const dep_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDependentQueryClick(dep_r11)); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelementStart(3, "span", 63);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_For_3_Conditional_5_Template, 2, 1, "span", 66);
+    i0.ɵɵconditionalCreate(5, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_For_4_Conditional_5_Template, 2, 1, "span", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const dep_r11 = ctx.$implicit;
@@ -329,119 +308,92 @@ function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(dep_r11.ReferencePath ? 5 : -1);
 } }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 58);
-    i0.ɵɵrepeaterCreate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_For_3_Template, 6, 2, "div", 59, _forTrack0);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 60);
-    i0.ɵɵelement(5, "i", 61);
-    i0.ɵɵtext(6, " These queries reference this query via composition ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.QueryInfo.QueryDependents);
-} }
-function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleSection("dependents")); });
-    i0.ɵɵelement(2, "i", 20);
-    i0.ɵɵelementStart(3, "span", 21);
-    i0.ɵɵtext(4, "Dependent Queries");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 24);
-    i0.ɵɵtext(6);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Template_mj_accordion_panel_ExpandedChange_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleSection("dependents")); });
+    i0.ɵɵtemplate(1, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_ng_template_1_Template, 4, 1, "ng-template", 19);
+    i0.ɵɵelementStart(2, "div", 56);
+    i0.ɵɵrepeaterCreate(3, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_For_4_Template, 6, 2, "div", 57, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 58);
+    i0.ɵɵelement(6, "i", 59);
+    i0.ɵɵtext(7, " These queries reference this query via composition ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Conditional_7_Template, 7, 0, "div", 22);
-    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("dependents"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("dependents"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("dependents"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryDependents.length, ")");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("dependents") ? 7 : -1);
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("dependents"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.QueryInfo.QueryDependents);
 } }
 function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 18)(2, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("overview")); });
-    i0.ɵɵelement(3, "i", 20);
-    i0.ɵɵelementStart(4, "span", 21);
-    i0.ɵɵtext(5, "Overview");
+    i0.ɵɵelementStart(0, "div", 13)(1, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_mj_accordion_panel_ExpandedChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("overview")); });
+    i0.ɵɵtemplate(2, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_2_Template, 2, 0, "ng-template", 19);
+    i0.ɵɵelementStart(3, "div", 20)(4, "span", 21);
+    i0.ɵɵtext(5, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 22);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_6_Template, 15, 7, "div", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_7_Template, 6, 7, "div", 23);
-    i0.ɵɵelementStart(8, "div", 18)(9, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_div_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("fields")); });
-    i0.ɵɵelement(10, "i", 20);
-    i0.ɵɵelementStart(11, "span", 21);
-    i0.ɵɵtext(12, "Fields");
+    i0.ɵɵconditionalCreate(8, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_8_Template, 5, 1, "div", 20);
+    i0.ɵɵconditionalCreate(9, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_9_Template, 6, 1, "div", 20);
+    i0.ɵɵelementStart(10, "div", 20)(11, "span", 21);
+    i0.ɵɵtext(12, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 24);
-    i0.ɵɵtext(14);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_15_Template, 3, 1, "div", 22);
+    i0.ɵɵelementStart(13, "span", 22)(14, "span", 23);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(16, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_16_Template, 6, 0, "div", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 18)(17, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("parameters")); });
-    i0.ɵɵelement(18, "i", 20);
-    i0.ɵɵelementStart(19, "span", 21);
-    i0.ɵɵtext(20, "Parameters");
+    i0.ɵɵconditionalCreate(17, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_17_Template, 3, 1, "mj-accordion-panel", 24);
+    i0.ɵɵelementStart(18, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_mj_accordion_panel_ExpandedChange_18_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("fields")); });
+    i0.ɵɵtemplate(19, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_19_Template, 4, 1, "ng-template", 19);
+    i0.ɵɵconditionalCreate(20, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_20_Template, 3, 0, "div", 25)(21, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_21_Template, 1, 0, "mj-empty-state", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 24);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(23, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_23_Template, 3, 1, "div", 22);
+    i0.ɵɵelementStart(22, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_mj_accordion_panel_ExpandedChange_22_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("parameters")); });
+    i0.ɵɵtemplate(23, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_23_Template, 4, 1, "ng-template", 19);
+    i0.ɵɵconditionalCreate(24, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_24_Template, 3, 0, "div", 27)(25, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_25_Template, 1, 0, "mj-empty-state", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 18)(25, "div", 19);
-    i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("sql")); });
-    i0.ɵɵelement(26, "i", 20);
-    i0.ɵɵelementStart(27, "span", 21);
-    i0.ɵɵtext(28, "SQL Query");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(29, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Template, 3, 1, "div", 22);
+    i0.ɵɵelementStart(26, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function QueryInfoPanelComponent_Conditional_1_Conditional_11_Template_mj_accordion_panel_ExpandedChange_26_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("sql")); });
+    i0.ɵɵtemplate(27, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_27_Template, 2, 0, "ng-template", 19)(28, QueryInfoPanelComponent_Conditional_1_Conditional_11_ng_template_28_Template, 2, 1, "ng-template", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(30, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_30_Template, 8, 8, "div", 23);
+    i0.ɵɵconditionalCreate(29, QueryInfoPanelComponent_Conditional_1_Conditional_11_Conditional_29_Template, 8, 1, "mj-accordion-panel", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("overview"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("overview"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("overview"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("overview") ? 6 : -1);
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("overview"));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.QueryInfo.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.TechnicalDescription ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.Description ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("fields"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("fields"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("fields"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryFields.length || 0, ")");
+    i0.ɵɵconditional(ctx_r1.QueryInfo.Category ? 9 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("approved", ctx_r1.QueryInfo.Status === "Approved");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("fields") ? 15 : -1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.QueryInfo.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("parameters"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("parameters"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("parameters"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("(", ctx_r1.QueryInfo.QueryParameters.length || 0, ")");
+    i0.ɵɵconditional(ctx_r1.QueryInfo.OriginalSQL ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("parameters") ? 23 : -1);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.TechnicalDescription ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("expanded", ctx_r1.IsSectionExpanded("sql"));
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("fields"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryFields.length ? 20 : 21);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsSectionExpanded("sql"))("fa-chevron-right", !ctx_r1.IsSectionExpanded("sql"));
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("parameters"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryParameters.length ? 24 : 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.IsSectionExpanded("sql"));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.IsSectionExpanded("sql") ? 29 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryDependents.length > 0 ? 30 : -1);
+    i0.ɵɵconditional(ctx_r1.QueryInfo.QueryDependents.length > 0 ? 29 : -1);
 } }
 function QueryInfoPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -459,7 +411,7 @@ function QueryInfoPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnClose()); });
     i0.ɵɵelement(10, "i", 12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, QueryInfoPanelComponent_Conditional_1_Conditional_11_Template, 31, 32, "div", 13);
+    i0.ɵɵconditionalCreate(11, QueryInfoPanelComponent_Conditional_1_Conditional_11_Template, 30, 15, "div", 13);
     i0.ɵɵelementStart(12, "div", 14)(13, "button", 15);
     i0.ɵɵlistener("click", function QueryInfoPanelComponent_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenRecord()); });
     i0.ɵɵelement(14, "i", 16);
@@ -628,14 +580,14 @@ export class QueryInfoPanelComponent {
     static ɵfac = function QueryInfoPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || QueryInfoPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryInfoPanelComponent, selectors: [["mj-query-info-panel"]], hostBindings: function QueryInfoPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mousemove", function QueryInfoPanelComponent_mousemove_HostBindingHandler($event) { return ctx.OnMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function QueryInfoPanelComponent_mouseup_HostBindingHandler() { return ctx.OnMouseUp(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { QueryInfo: "QueryInfo", Visible: "Visible", ShowOverlay: "ShowOverlay" }, outputs: { Close: "Close", OpenRecord: "OpenRecord", CompositionTokenClick: "CompositionTokenClick" }, standalone: false, decls: 2, vars: 2, consts: [[1, "info-panel-overlay"], [1, "info-panel", 3, "width"], [1, "info-panel-overlay", 3, "click"], [1, "info-panel"], [1, "resize-handle", 3, "mousedown"], [1, "panel-header"], [1, "header-content"], [1, "fa-solid", "fa-circle-info", "header-icon"], [1, "header-text"], [1, "header-title"], [1, "header-subtitle"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "panel-footer"], [1, "btn", "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "btn", "btn-secondary", 3, "click"], [1, "info-section"], [1, "section-header", 3, "click"], [1, "fa-solid", "section-icon"], [1, "section-title"], [1, "section-content"], [1, "info-section", 3, "expanded"], [1, "section-count"], [1, "info-row"], [1, "info-label"], [1, "info-value"], [1, "status-badge"], [1, "info-value", "description"], [1, "fa-solid", "fa-folder", "category-icon"], [1, "fa-solid", "fa-check", "text-success"], [1, "section-content", "technical-description-content"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "fields-list"], [1, "empty-section"], [1, "field-item"], [1, "field-header"], [1, "field-name"], [1, "field-type"], [1, "field-details"], [1, "field-description"], [1, "field-source"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-table-columns"], [1, "params-list"], [1, "param-item"], [1, "param-header"], [1, "param-name"], [1, "required-badge"], [1, "param-type"], [1, "param-details"], [1, "param-description"], [1, "param-default"], [1, "fa-solid", "fa-sliders"], [1, "sql-container"], [3, "CompositionTokenClick", "value", "readonly", "language"], [1, "fa-solid", "fa-code"], [1, "dependents-list"], [1, "dependent-item"], [1, "dependents-hint"], [1, "fa-solid", "fa-info-circle"], [1, "dependent-item", 3, "click"], [1, "dependent-header"], [1, "fa-solid", "fa-arrow-left", "dependent-icon"], [1, "dependent-name"], [1, "dependent-ref-path"]], template: function QueryInfoPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { QueryInfo: "QueryInfo", Visible: "Visible", ShowOverlay: "ShowOverlay" }, outputs: { Close: "Close", OpenRecord: "OpenRecord", CompositionTokenClick: "CompositionTokenClick" }, standalone: false, decls: 2, vars: 2, consts: [[1, "info-panel-overlay"], [1, "info-panel", 3, "width"], [1, "info-panel-overlay", 3, "click"], [1, "info-panel"], [1, "resize-handle", 3, "mousedown"], [1, "panel-header"], [1, "header-content"], [1, "fa-solid", "fa-circle-info", "header-icon"], [1, "header-text"], [1, "header-title"], [1, "header-subtitle"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "panel-footer"], [1, "btn", "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "btn", "btn-secondary", 3, "click"], [1, "info-section", 3, "ExpandedChange", "Expanded"], ["mjAccordionTitle", ""], [1, "info-row"], [1, "info-label"], [1, "info-value"], [1, "status-badge"], [1, "info-section", 3, "Expanded"], [1, "fields-list"], ["Size", "compact", "Icon", "fa-solid fa-table-columns", "Title", "No fields defined"], [1, "params-list"], ["Size", "compact", "Icon", "fa-solid fa-sliders", "Title", "No parameters required"], ["mjAccordionBody", ""], [1, "section-title"], [1, "info-value", "description"], [1, "fa-solid", "fa-folder", "category-icon"], [1, "fa-solid", "fa-check", "text-success"], [1, "technical-description-content"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "mj-accordion-badge", "mj-accordion-badge--muted"], [1, "field-item"], [1, "field-header"], [1, "field-name"], [1, "field-type"], [1, "field-details"], [1, "field-description"], [1, "field-source"], [1, "fa-solid", "fa-link"], [1, "param-item"], [1, "param-header"], [1, "param-name"], [1, "required-badge"], [1, "param-type"], [1, "param-details"], [1, "param-description"], [1, "param-default"], [1, "sql-container"], ["Size", "compact", "Icon", "fa-solid fa-code", "Title", "SQL not available"], [3, "CompositionTokenClick", "value", "readonly", "language"], [1, "dependents-list"], [1, "dependent-item"], [1, "dependents-hint"], [1, "fa-solid", "fa-info-circle"], [1, "dependent-item", 3, "click"], [1, "dependent-header"], [1, "fa-solid", "fa-arrow-left", "dependent-icon"], [1, "dependent-name"], [1, "dependent-ref-path"]], template: function QueryInfoPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, QueryInfoPanelComponent_Conditional_0_Template, 1, 1, "div", 0);
             i0.ɵɵconditionalCreate(1, QueryInfoPanelComponent_Conditional_1_Template, 18, 5, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible && ctx.ShowOverlay ? 0 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Visible ? 1 : -1);
-        } }, dependencies: [i1.MarkdownComponent, i2.CodeEditorComponent], styles: ["\n\n\n\n\n.info-panel-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 999;\n}\n\n\n\n.info-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px var(--mj-bg-overlay);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    min-width: 350px;\n    max-width: 800px;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.resize-handle[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    font-size: 24px;\n    opacity: 0.9;\n}\n\n.header-text[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.header-subtitle[_ngcontent-%COMP%] {\n    font-size: 13px;\n    opacity: 0.85;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n\n\n.info-section[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.info-section.expanded[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    cursor: pointer;\n    transition: background 0.15s ease;\n    user-select: none;\n}\n\n.section-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.info-section.expanded[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n}\n\n.section-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    width: 12px;\n    text-align: center;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.section-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n}\n\n.section-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface);\n}\n\n\n\n.technical-description-content[_ngcontent-%COMP%] {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content   [_nghost-%COMP%]     .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n\n\n.technical-description-content[_ngcontent-%COMP%] {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content   [_nghost-%COMP%]     .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.info-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.info-value.description[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    margin-right: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.approved[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.text-success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.fields-list[_ngcontent-%COMP%], \n.params-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%], \n.param-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.field-header[_ngcontent-%COMP%], \n.param-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;\n}\n\n.field-name[_ngcontent-%COMP%], \n.param-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.field-type[_ngcontent-%COMP%], \n.param-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.field-details[_ngcontent-%COMP%], \n.param-details[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-top: 6px;\n}\n\n.field-description[_ngcontent-%COMP%], \n.param-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.field-source[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.field-source[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\n}\n\n.required-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.param-default[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n\n\n.sql-container[_ngcontent-%COMP%] {\n    background: #1e1e1e;\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n}\n\n.sql-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    max-height: 400px;\n    overflow: auto;\n}\n\n\n\n.empty-section[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n.empty-section[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    opacity: 0.6;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 12px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n\n.dependents-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.dependent-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-status-warning);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.dependent-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-status-warning-text);\n}\n\n.dependent-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.dependent-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 11px;\n}\n\n.dependent-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dependent-ref-path[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 4px;\n    margin-left: 19px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 0 0;\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.dependents-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}"], data: { animation: [
+        } }, dependencies: [i1.MarkdownComponent, i2.CodeEditorComponent, i3.MJEmptyStateComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJAccordionBodyDirective], styles: ["\n\n\n\n\n.info-panel-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 999;\n}\n\n\n\n.info-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px var(--mj-bg-overlay);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    min-width: 350px;\n    max-width: 800px;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.resize-handle[_ngcontent-%COMP%]:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    font-size: 24px;\n    opacity: 0.9;\n}\n\n.header-text[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.header-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.header-subtitle[_ngcontent-%COMP%] {\n    font-size: 13px;\n    opacity: 0.85;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n\n\n.info-section[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 8px;\n}\n\n\n\n\n.technical-description-content[_ngcontent-%COMP%] {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content   [_nghost-%COMP%]     .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.info-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.info-value.description[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    margin-right: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.approved[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.text-success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.fields-list[_ngcontent-%COMP%], \n.params-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%], \n.param-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.field-header[_ngcontent-%COMP%], \n.param-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;\n}\n\n.field-name[_ngcontent-%COMP%], \n.param-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.field-type[_ngcontent-%COMP%], \n.param-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.field-details[_ngcontent-%COMP%], \n.param-details[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-top: 6px;\n}\n\n.field-description[_ngcontent-%COMP%], \n.param-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.field-source[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.field-source[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\n}\n\n.required-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.param-default[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n\n\n.sql-container[_ngcontent-%COMP%] {\n    background: #1e1e1e;\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n}\n\n.sql-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    max-height: 400px;\n    overflow: auto;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 12px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n\n.dependents-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.dependent-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-status-warning);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.dependent-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-status-warning-text);\n}\n\n.dependent-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.dependent-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 11px;\n}\n\n.dependent-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dependent-ref-path[_ngcontent-%COMP%] {\n    display: block;\n    margin-top: 4px;\n    margin-left: 19px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 0 0;\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.dependents-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}"], data: { animation: [
                 trigger('slideIn', [
                     transition(':enter', [
                         style({ transform: 'translateX(100%)' }),
@@ -677,7 +629,7 @@ export class QueryInfoPanelComponent {
                             animate('150ms ease-in', style({ opacity: 0 }))
                         ])
                     ])
-                ], template: "<!-- Query Info Panel - Slide-in Panel -->\n@if (Visible && ShowOverlay) {\n  <div class=\"info-panel-overlay\"\n    @fadeIn\n    (click)=\"OnClose()\">\n  </div>\n}\n\n@if (Visible) {\n  <div class=\"info-panel\"\n    @slideIn\n    [style.width.px]=\"PanelWidth\">\n    <!-- Resize handle -->\n    <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\"></div>\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-content\">\n        <i class=\"fa-solid fa-circle-info header-icon\"></i>\n        <div class=\"header-text\">\n          <h3 class=\"header-title\">Query Information</h3>\n          @if (QueryInfo) {\n            <span class=\"header-subtitle\">{{ QueryInfo.Name }}</span>\n          }\n        </div>\n      </div>\n      <button class=\"close-btn\" (click)=\"OnClose()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n    <!-- Content -->\n    @if (QueryInfo) {\n      <div class=\"panel-content\">\n        <!-- Overview Section -->\n        <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('overview')\">\n          <div class=\"section-header\" (click)=\"ToggleSection('overview')\">\n            <i class=\"fa-solid section-icon\"\n              [class.fa-chevron-down]=\"IsSectionExpanded('overview')\"\n            [class.fa-chevron-right]=\"!IsSectionExpanded('overview')\"></i>\n            <span class=\"section-title\">Overview</span>\n          </div>\n          @if (IsSectionExpanded('overview')) {\n            <div class=\"section-content\">\n              <div class=\"info-row\">\n                <span class=\"info-label\">Name</span>\n                <span class=\"info-value\">{{ QueryInfo.Name }}</span>\n              </div>\n              @if (QueryInfo.Description) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Description</span>\n                  <span class=\"info-value description\">{{ QueryInfo.Description }}</span>\n                </div>\n              }\n              @if (QueryInfo.Category) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Category</span>\n                  <span class=\"info-value\">\n                    <i class=\"fa-solid fa-folder category-icon\"></i>\n                    {{ QueryInfo.Category }}\n                  </span>\n                </div>\n              }\n              <div class=\"info-row\">\n                <span class=\"info-label\">Status</span>\n                <span class=\"info-value\">\n                  <span class=\"status-badge\" [class.approved]=\"QueryInfo.Status === 'Approved'\">\n                    {{ QueryInfo.Status }}\n                  </span>\n                </span>\n              </div>\n              @if (QueryInfo.OriginalSQL) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Has SQL</span>\n                  <span class=\"info-value\">\n                    <i class=\"fa-solid fa-check text-success\"></i> Yes\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        <!-- Technical Description Section -->\n        @if (QueryInfo.TechnicalDescription) {\n          <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('technical')\">\n            <div class=\"section-header\" (click)=\"ToggleSection('technical')\">\n              <i class=\"fa-solid section-icon\"\n                [class.fa-chevron-down]=\"IsSectionExpanded('technical')\"\n                [class.fa-chevron-right]=\"!IsSectionExpanded('technical')\"></i>\n              <span class=\"section-title\">Technical Description</span>\n            </div>\n            @if (IsSectionExpanded('technical')) {\n              <div class=\"section-content technical-description-content\">\n                <mj-markdown\n                  [data]=\"QueryInfo.TechnicalDescription || ''\"\n                  [enableMermaid]=\"true\"\n                  [enableHighlight]=\"true\"\n                  [enableCollapsibleHeadings]=\"false\"\n                  [enableSmartypants]=\"true\">\n                </mj-markdown>\n              </div>\n            }\n          </div>\n        }\n        <!-- Fields Section -->\n        <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('fields')\">\n          <div class=\"section-header\" (click)=\"ToggleSection('fields')\">\n            <i class=\"fa-solid section-icon\"\n              [class.fa-chevron-down]=\"IsSectionExpanded('fields')\"\n            [class.fa-chevron-right]=\"!IsSectionExpanded('fields')\"></i>\n            <span class=\"section-title\">Fields</span>\n            <span class=\"section-count\">({{ QueryInfo.QueryFields.length || 0 }})</span>\n          </div>\n          @if (IsSectionExpanded('fields')) {\n            <div class=\"section-content\">\n              @if (QueryInfo.QueryFields.length) {\n                <div class=\"fields-list\">\n                  @for (field of QueryInfo.QueryFields; track TrackByField($index, field)) {\n                    <div class=\"field-item\">\n                      <div class=\"field-header\">\n                        <span class=\"field-name\">{{ field.Name }}</span>\n                        <span class=\"field-type\">{{ GetFieldTypeDisplay(field) }}</span>\n                      </div>\n                      @if (field.Description || field.SourceEntity) {\n                        <div class=\"field-details\">\n                          @if (field.Description) {\n                            <span class=\"field-description\">\n                              {{ field.Description }}\n                            </span>\n                          }\n                          @if (field.SourceEntity) {\n                            <span class=\"field-source\">\n                              <i class=\"fa-solid fa-link\"></i>\n                              {{ field.SourceEntity }}.{{ field.SourceFieldName }}\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"empty-section\">\n                  <i class=\"fa-solid fa-table-columns\"></i>\n                  <span>No fields defined</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        <!-- Parameters Section -->\n        <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('parameters')\">\n          <div class=\"section-header\" (click)=\"ToggleSection('parameters')\">\n            <i class=\"fa-solid section-icon\"\n              [class.fa-chevron-down]=\"IsSectionExpanded('parameters')\"\n            [class.fa-chevron-right]=\"!IsSectionExpanded('parameters')\"></i>\n            <span class=\"section-title\">Parameters</span>\n            <span class=\"section-count\">({{ QueryInfo.QueryParameters.length || 0 }})</span>\n          </div>\n          @if (IsSectionExpanded('parameters')) {\n            <div class=\"section-content\">\n              @if (QueryInfo.QueryParameters.length) {\n                <div class=\"params-list\">\n                  @for (param of QueryInfo.QueryParameters; track TrackByParam($index, param)) {\n                    <div class=\"param-item\">\n                      <div class=\"param-header\">\n                        <span class=\"param-name\">\n                          {{ param.Name }}\n                          @if (param.IsRequired) {\n                            <span class=\"required-badge\">Required</span>\n                          }\n                        </span>\n                        <span class=\"param-type\">{{ GetParamTypeDisplay(param) }}</span>\n                      </div>\n                      @if (param.Description || param.DefaultValue) {\n                        <div class=\"param-details\">\n                          @if (param.Description) {\n                            <span class=\"param-description\">\n                              {{ param.Description }}\n                            </span>\n                          }\n                          @if (param.DefaultValue) {\n                            <span class=\"param-default\">\n                              Default: {{ param.DefaultValue }}\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"empty-section\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  <span>No parameters required</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        <!-- SQL Section -->\n        <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('sql')\">\n          <div class=\"section-header\" (click)=\"ToggleSection('sql')\">\n            <i class=\"fa-solid section-icon\"\n              [class.fa-chevron-down]=\"IsSectionExpanded('sql')\"\n            [class.fa-chevron-right]=\"!IsSectionExpanded('sql')\"></i>\n            <span class=\"section-title\">SQL Query</span>\n          </div>\n          @if (IsSectionExpanded('sql')) {\n            <div class=\"section-content\">\n              @if (QueryInfo.SQL) {\n                <div class=\"sql-container\">\n                  <mj-code-editor\n                    [value]=\"QueryInfo.SQL\"\n                    [readonly]=\"true\"\n                    [language]=\"'sql'\"\n                    (CompositionTokenClick)=\"OnCompositionTokenClick($event)\">\n                  </mj-code-editor>\n                </div>\n              } @else {\n                <div class=\"empty-section\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  <span>SQL not available</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        <!-- Dependent Queries Section -->\n        @if (QueryInfo.QueryDependents.length > 0) {\n          <div class=\"info-section\" [class.expanded]=\"IsSectionExpanded('dependents')\">\n            <div class=\"section-header\" (click)=\"ToggleSection('dependents')\">\n              <i class=\"fa-solid section-icon\"\n                [class.fa-chevron-down]=\"IsSectionExpanded('dependents')\"\n                [class.fa-chevron-right]=\"!IsSectionExpanded('dependents')\"></i>\n              <span class=\"section-title\">Dependent Queries</span>\n              <span class=\"section-count\">({{ QueryInfo.QueryDependents.length }})</span>\n            </div>\n            @if (IsSectionExpanded('dependents')) {\n              <div class=\"section-content\">\n                <div class=\"dependents-list\">\n                  @for (dep of QueryInfo.QueryDependents; track dep.ID) {\n                    <div class=\"dependent-item\" (click)=\"OnDependentQueryClick(dep)\">\n                      <div class=\"dependent-header\">\n                        <i class=\"fa-solid fa-arrow-left dependent-icon\"></i>\n                        <span class=\"dependent-name\">{{ dep.Query }}</span>\n                      </div>\n                      @if (dep.ReferencePath) {\n                        <span class=\"dependent-ref-path\">\n                          via {{ dep.ReferencePath }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"dependents-hint\">\n                  <i class=\"fa-solid fa-info-circle\"></i>\n                  These queries reference this query via composition\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Footer -->\n    <div class=\"panel-footer\">\n      <button class=\"btn btn-primary\" (click)=\"OnOpenRecord()\">\n        <i class=\"fa-solid fa-external-link-alt\"></i>\n        Open Full Record\n      </button>\n      <button class=\"btn btn-secondary\" (click)=\"OnClose()\">\n        Close\n      </button>\n    </div>\n  </div>\n}\n", styles: ["/* Query Info Panel Styles */\n\n/* Overlay */\n.info-panel-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 999;\n}\n\n/* Panel Container */\n.info-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px var(--mj-bg-overlay);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    min-width: 350px;\n    max-width: 800px;\n}\n\n/* Resize Handle */\n.resize-handle {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.resize-handle:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon {\n    font-size: 24px;\n    opacity: 0.9;\n}\n\n.header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.header-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.header-subtitle {\n    font-size: 13px;\n    opacity: 0.85;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n/* Content */\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n/* Sections */\n.info-section {\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.info-section.expanded {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    cursor: pointer;\n    transition: background 0.15s ease;\n    user-select: none;\n}\n\n.section-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.info-section.expanded .section-header {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n}\n\n.section-icon {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    width: 12px;\n    text-align: center;\n}\n\n.section-title {\n    flex: 1;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.section-count {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-weight: 400;\n}\n\n.section-content {\n    padding: 16px;\n    background: var(--mj-bg-surface);\n}\n\n/* Technical Description Markdown */\n.technical-description-content {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content :host ::ng-deep .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n/* Technical Description Markdown */\n.technical-description-content {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content :host ::ng-deep .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n/* Info Rows */\n.info-row {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.info-row:last-child {\n    border-bottom: none;\n}\n\n.info-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.info-value.description {\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.category-icon {\n    color: var(--mj-status-warning);\n    margin-right: 4px;\n}\n\n.status-badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.approved {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.text-success {\n    color: var(--mj-status-success);\n}\n\n/* Fields List */\n.fields-list,\n.params-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item,\n.param-item {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.field-header,\n.param-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;\n}\n\n.field-name,\n.param-name {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.field-type,\n.param-type {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.field-details,\n.param-details {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-top: 6px;\n}\n\n.field-description,\n.param-description {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.field-source {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.field-source i {\n    margin-right: 4px;\n}\n\n.required-badge {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.param-default {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* SQL Section */\n.sql-container {\n    background: #1e1e1e;\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n}\n\n.sql-container mj-code-editor {\n    display: block;\n    max-height: 400px;\n    overflow: auto;\n}\n\n/* Empty State */\n.empty-section {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n.empty-section i {\n    font-size: 16px;\n    opacity: 0.6;\n}\n\n/* Footer */\n.panel-footer {\n    display: flex;\n    justify-content: flex-start;\n    gap: 12px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-secondary {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n/* Scrollbar */\n.panel-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n/* Dependent Queries */\n.dependents-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.dependent-item {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-status-warning);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.dependent-item:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-status-warning-text);\n}\n\n.dependent-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.dependent-icon {\n    color: var(--mj-status-warning);\n    font-size: 11px;\n}\n\n.dependent-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dependent-ref-path {\n    display: block;\n    margin-top: 4px;\n    margin-left: 19px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-hint {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 0 0;\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.dependents-hint i {\n    font-size: 10px;\n}\n"] }]
+                ], template: "<!-- Query Info Panel - Slide-in Panel -->\n@if (Visible && ShowOverlay) {\n  <div class=\"info-panel-overlay\"\n    @fadeIn\n    (click)=\"OnClose()\">\n  </div>\n}\n\n@if (Visible) {\n  <div class=\"info-panel\"\n    @slideIn\n    [style.width.px]=\"PanelWidth\">\n    <!-- Resize handle -->\n    <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\"></div>\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-content\">\n        <i class=\"fa-solid fa-circle-info header-icon\"></i>\n        <div class=\"header-text\">\n          <h3 class=\"header-title\">Query Information</h3>\n          @if (QueryInfo) {\n            <span class=\"header-subtitle\">{{ QueryInfo.Name }}</span>\n          }\n        </div>\n      </div>\n      <button class=\"close-btn\" (click)=\"OnClose()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n    <!-- Content -->\n    @if (QueryInfo) {\n      <div class=\"panel-content\">\n        <!-- Overview Section -->\n        <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('overview')\" (ExpandedChange)=\"ToggleSection('overview')\">\n          <ng-template mjAccordionTitle>\n            <span class=\"section-title\">Overview</span>\n          </ng-template>\n              <div class=\"info-row\">\n                <span class=\"info-label\">Name</span>\n                <span class=\"info-value\">{{ QueryInfo.Name }}</span>\n              </div>\n              @if (QueryInfo.Description) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Description</span>\n                  <span class=\"info-value description\">{{ QueryInfo.Description }}</span>\n                </div>\n              }\n              @if (QueryInfo.Category) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Category</span>\n                  <span class=\"info-value\">\n                    <i class=\"fa-solid fa-folder category-icon\"></i>\n                    {{ QueryInfo.Category }}\n                  </span>\n                </div>\n              }\n              <div class=\"info-row\">\n                <span class=\"info-label\">Status</span>\n                <span class=\"info-value\">\n                  <span class=\"status-badge\" [class.approved]=\"QueryInfo.Status === 'Approved'\">\n                    {{ QueryInfo.Status }}\n                  </span>\n                </span>\n              </div>\n              @if (QueryInfo.OriginalSQL) {\n                <div class=\"info-row\">\n                  <span class=\"info-label\">Has SQL</span>\n                  <span class=\"info-value\">\n                    <i class=\"fa-solid fa-check text-success\"></i> Yes\n                  </span>\n                </div>\n              }\n        </mj-accordion-panel>\n        <!-- Technical Description Section -->\n        @if (QueryInfo.TechnicalDescription) {\n          <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('technical')\" (ExpandedChange)=\"ToggleSection('technical')\">\n            <ng-template mjAccordionTitle>\n              <span class=\"section-title\">Technical Description</span>\n            </ng-template>\n            <ng-template mjAccordionBody>\n              <div class=\"technical-description-content\">\n                <mj-markdown\n                  [data]=\"QueryInfo.TechnicalDescription || ''\"\n                  [enableMermaid]=\"true\"\n                  [enableHighlight]=\"true\"\n                  [enableCollapsibleHeadings]=\"false\"\n                  [enableSmartypants]=\"true\">\n                </mj-markdown>\n              </div>\n            </ng-template>\n          </mj-accordion-panel>\n        }\n        <!-- Fields Section -->\n        <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('fields')\" (ExpandedChange)=\"ToggleSection('fields')\">\n          <ng-template mjAccordionTitle>\n            <span class=\"section-title\">Fields</span>\n            <span class=\"mj-accordion-badge mj-accordion-badge--muted\">({{ QueryInfo.QueryFields.length || 0 }})</span>\n          </ng-template>\n              @if (QueryInfo.QueryFields.length) {\n                <div class=\"fields-list\">\n                  @for (field of QueryInfo.QueryFields; track TrackByField($index, field)) {\n                    <div class=\"field-item\">\n                      <div class=\"field-header\">\n                        <span class=\"field-name\">{{ field.Name }}</span>\n                        <span class=\"field-type\">{{ GetFieldTypeDisplay(field) }}</span>\n                      </div>\n                      @if (field.Description || field.SourceEntity) {\n                        <div class=\"field-details\">\n                          @if (field.Description) {\n                            <span class=\"field-description\">\n                              {{ field.Description }}\n                            </span>\n                          }\n                          @if (field.SourceEntity) {\n                            <span class=\"field-source\">\n                              <i class=\"fa-solid fa-link\"></i>\n                              {{ field.SourceEntity }}.{{ field.SourceFieldName }}\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <mj-empty-state\n                  Size=\"compact\"\n                  Icon=\"fa-solid fa-table-columns\"\n                  Title=\"No fields defined\" />\n              }\n        </mj-accordion-panel>\n        <!-- Parameters Section -->\n        <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('parameters')\" (ExpandedChange)=\"ToggleSection('parameters')\">\n          <ng-template mjAccordionTitle>\n            <span class=\"section-title\">Parameters</span>\n            <span class=\"mj-accordion-badge mj-accordion-badge--muted\">({{ QueryInfo.QueryParameters.length || 0 }})</span>\n          </ng-template>\n              @if (QueryInfo.QueryParameters.length) {\n                <div class=\"params-list\">\n                  @for (param of QueryInfo.QueryParameters; track TrackByParam($index, param)) {\n                    <div class=\"param-item\">\n                      <div class=\"param-header\">\n                        <span class=\"param-name\">\n                          {{ param.Name }}\n                          @if (param.IsRequired) {\n                            <span class=\"required-badge\">Required</span>\n                          }\n                        </span>\n                        <span class=\"param-type\">{{ GetParamTypeDisplay(param) }}</span>\n                      </div>\n                      @if (param.Description || param.DefaultValue) {\n                        <div class=\"param-details\">\n                          @if (param.Description) {\n                            <span class=\"param-description\">\n                              {{ param.Description }}\n                            </span>\n                          }\n                          @if (param.DefaultValue) {\n                            <span class=\"param-default\">\n                              Default: {{ param.DefaultValue }}\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <mj-empty-state\n                  Size=\"compact\"\n                  Icon=\"fa-solid fa-sliders\"\n                  Title=\"No parameters required\" />\n              }\n        </mj-accordion-panel>\n        <!-- SQL Section -->\n        <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('sql')\" (ExpandedChange)=\"ToggleSection('sql')\">\n          <ng-template mjAccordionTitle>\n            <span class=\"section-title\">SQL Query</span>\n          </ng-template>\n          <ng-template mjAccordionBody>\n              @if (QueryInfo.SQL) {\n                <div class=\"sql-container\">\n                  <mj-code-editor\n                    [value]=\"QueryInfo.SQL\"\n                    [readonly]=\"true\"\n                    [language]=\"'sql'\"\n                    (CompositionTokenClick)=\"OnCompositionTokenClick($event)\">\n                  </mj-code-editor>\n                </div>\n              } @else {\n                <mj-empty-state\n                  Size=\"compact\"\n                  Icon=\"fa-solid fa-code\"\n                  Title=\"SQL not available\" />\n              }\n          </ng-template>\n        </mj-accordion-panel>\n        <!-- Dependent Queries Section -->\n        @if (QueryInfo.QueryDependents.length > 0) {\n          <mj-accordion-panel class=\"info-section\" [Expanded]=\"IsSectionExpanded('dependents')\" (ExpandedChange)=\"ToggleSection('dependents')\">\n            <ng-template mjAccordionTitle>\n              <span class=\"section-title\">Dependent Queries</span>\n              <span class=\"mj-accordion-badge mj-accordion-badge--muted\">({{ QueryInfo.QueryDependents.length }})</span>\n            </ng-template>\n                <div class=\"dependents-list\">\n                  @for (dep of QueryInfo.QueryDependents; track dep.ID) {\n                    <div class=\"dependent-item\" (click)=\"OnDependentQueryClick(dep)\">\n                      <div class=\"dependent-header\">\n                        <i class=\"fa-solid fa-arrow-left dependent-icon\"></i>\n                        <span class=\"dependent-name\">{{ dep.Query }}</span>\n                      </div>\n                      @if (dep.ReferencePath) {\n                        <span class=\"dependent-ref-path\">\n                          via {{ dep.ReferencePath }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"dependents-hint\">\n                  <i class=\"fa-solid fa-info-circle\"></i>\n                  These queries reference this query via composition\n                </div>\n          </mj-accordion-panel>\n        }\n      </div>\n    }\n    <!-- Footer -->\n    <div class=\"panel-footer\">\n      <button class=\"btn btn-primary\" (click)=\"OnOpenRecord()\">\n        <i class=\"fa-solid fa-external-link-alt\"></i>\n        Open Full Record\n      </button>\n      <button class=\"btn btn-secondary\" (click)=\"OnClose()\">\n        Close\n      </button>\n    </div>\n  </div>\n}\n", styles: ["/* Query Info Panel Styles */\n\n/* Overlay */\n.info-panel-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 999;\n}\n\n/* Panel Container */\n.info-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px var(--mj-bg-overlay);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    min-width: 350px;\n    max-width: 800px;\n}\n\n/* Resize Handle */\n.resize-handle {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.resize-handle:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon {\n    font-size: 24px;\n    opacity: 0.9;\n}\n\n.header-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.header-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.header-subtitle {\n    font-size: 13px;\n    opacity: 0.85;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n/* Content */\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n/* Sections */\n.info-section {\n    display: block;\n    margin-bottom: 8px;\n}\n\n\n/* Technical Description Markdown */\n.technical-description-content {\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.technical-description-content :host ::ng-deep .mj-markdown-container {\n    font-size: 13px;\n    line-height: 1.5;\n}\n\n/* Info Rows */\n.info-row {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.info-row:last-child {\n    border-bottom: none;\n}\n\n.info-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.info-value.description {\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.category-icon {\n    color: var(--mj-status-warning);\n    margin-right: 4px;\n}\n\n.status-badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.approved {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.text-success {\n    color: var(--mj-status-success);\n}\n\n/* Fields List */\n.fields-list,\n.params-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item,\n.param-item {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.field-header,\n.param-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;\n}\n\n.field-name,\n.param-name {\n    font-weight: 600;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.field-type,\n.param-type {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: var(--mj-text-secondary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.field-details,\n.param-details {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-top: 6px;\n}\n\n.field-description,\n.param-description {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    font-style: italic;\n}\n\n.field-source {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.field-source i {\n    margin-right: 4px;\n}\n\n.required-badge {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border-radius: 4px;\n    text-transform: uppercase;\n}\n\n.param-default {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* SQL Section */\n.sql-container {\n    background: #1e1e1e;\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n}\n\n.sql-container mj-code-editor {\n    display: block;\n    max-height: 400px;\n    overflow: auto;\n}\n\n/* Footer */\n.panel-footer {\n    display: flex;\n    justify-content: flex-start;\n    gap: 12px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-secondary {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n/* Scrollbar */\n.panel-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n/* Dependent Queries */\n.dependents-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.dependent-item {\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border-left: 3px solid var(--mj-status-warning);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.dependent-item:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-status-warning-text);\n}\n\n.dependent-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.dependent-icon {\n    color: var(--mj-status-warning);\n    font-size: 11px;\n}\n\n.dependent-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dependent-ref-path {\n    display: block;\n    margin-top: 4px;\n    margin-left: 19px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-hint {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 0 0;\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n.dependents-hint i {\n    font-size: 10px;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { QueryInfo: [{
             type: Input
         }], Visible: [{