@memberjunction/ng-core-entity-forms 6.2.0 → 6.3.0-edge.0

package/dist/lib/custom/Queries/query-form.component.js

@@ -15,6 +15,8 @@ import { EditorMarkersFor, ExtractionSeverityOf, HideUnreadableFieldRows, SaveRe
 import { NavigationService } from '@memberjunction/ng-shared';
 import { MJConfirmService } from '@memberjunction/ng-ui-components';
 import { Subject } from 'rxjs';
+import { JoinHeroSummary } from '../../shared/phone-hero';
+import { PhoneSectionsState } from '../../shared/phone-sections-state';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -34,14 +36,14 @@ const _forTrack1 = ($index, $item) => $item.ID;
 const _forTrack2 = ($index, $item) => $item.ID || $index;
 function MJQueryFormComponentExtended_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Saving...");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 51);
+    i0.ɵɵelementStart(0, "input", 59);
     i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -49,19 +51,26 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_9_Template(rf, c
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h4", 11);
+    i0.ɵɵelementStart(0, "h4", 60);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 61);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled Query");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", ctx_r1.getStatusBadgeColor());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.record.Status || "Unknown");
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 52);
+    i0.ɵɵelementStart(0, "button", 62);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.runQuery()); });
-    i0.ɵɵelement(1, "i", 53);
+    i0.ɵɵelement(1, "i", 63);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -70,21 +79,21 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵelementStart(0, "button", 68);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editSelectedCategory()); });
-    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "mj-tree-dropdown", 54);
+    i0.ɵɵelementStart(0, "div", 16)(1, "mj-tree-dropdown", 64);
     i0.ɵɵlistener("ValueChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template_mj_tree_dropdown_ValueChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCategoryTreeChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 55);
+    i0.ɵɵelementStart(2, "button", 65);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createCategory()); });
-    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelement(3, "i", 66);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template, 2, 0, "button", 57);
+    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template, 2, 0, "button", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -94,7 +103,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.CategoryID ? 4 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -104,7 +113,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 60);
+    i0.ɵɵelementStart(0, "mj-dropdown", 70);
     i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -113,8 +122,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template(rf,
     i0.ɵɵproperty("Data", ctx_r1.statusOptions)("ValuePrimitive", true);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -127,20 +136,20 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_23_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵelementStart(0, "button", 75);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenRefreshDialog()); });
-    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵtext(2, " Refresh metadata ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "label", 16);
+    i0.ɵɵelementStart(0, "div", 14)(1, "label", 15);
     i0.ɵɵtext(2, "Metadata");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 17)(4, "span", 63);
+    i0.ɵɵelementStart(3, "div", 16)(4, "span", 73);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_6_Template, 3, 0, "button", 64);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_6_Template, 3, 0, "button", 74);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -154,7 +163,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 69);
+    i0.ɵɵelementStart(0, "textarea", 79);
     i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_1_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Description, $event) || (ctx_r1.record.Description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵtext(1, "                ");
     i0.ɵɵelementEnd();
@@ -163,7 +172,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_1
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Description);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 68);
+    i0.ɵɵelementStart(0, "p", 78);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -173,7 +182,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_2
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_1_Template, 2, 1, "textarea", 67)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_2_Template, 2, 1, "p", 68);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_1_Template, 2, 1, "textarea", 77)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_25_Conditional_2_Template, 2, 1, "p", 78);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -181,7 +190,22 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Template(rf,
     i0.ɵɵconditional(ctx_r1.EditMode ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-alert", 22)(1, "span");
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleHeroDetails()); });
+    i0.ɵɵelementStart(1, "span", 81);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 82);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("aria-expanded", ctx_r1.HeroDetailsOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.HeroSummary);
+} }
+function MJQueryFormComponentExtended_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-alert", 23)(1, "span");
     i0.ɵɵtext(2, " This query has status ");
     i0.ɵɵelementStart(3, "strong");
     i0.ɵɵtext(4);
@@ -195,142 +219,142 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_26_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(". ", ctx_r1.getStatusBannerMessage(), " ");
 } }
-function MJQueryFormComponentExtended_Conditional_0_ng_template_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
+function MJQueryFormComponentExtended_Conditional_0_ng_template_31_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 86);
     i0.ɵɵtext(1, "\u2014 Defined");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_ng_template_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 70)(1, "span", 71);
-    i0.ɵɵelement(2, "i", 72);
+function MJQueryFormComponentExtended_Conditional_0_ng_template_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83)(1, "span", 84);
+    i0.ɵɵelement(2, "i", 85);
     i0.ɵɵtext(3, " SQL ");
-    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_ng_template_29_Conditional_4_Template, 2, 0, "span", 73);
+    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_ng_template_31_Conditional_4_Template, 2, 0, "span", 86);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.record.SQL ? 4 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-query-diagnostics", 74);
-    i0.ɵɵlistener("LocationClick", function MJQueryFormComponentExtended_Conditional_0_Conditional_37_Template_mj_query_diagnostics_LocationClick_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDiagnosticLocationClick($event)); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-query-diagnostics", 87);
+    i0.ɵɵlistener("LocationClick", function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template_mj_query_diagnostics_LocationClick_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDiagnosticLocationClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Headline", ctx_r1.SaveDiagnosticsHeadline)("Diagnostics", ctx_r1.SaveDiagnostics)("LocationsClickable", true);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-query-diagnostics", 75);
-    i0.ɵɵlistener("LocationClick", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template_mj_query_diagnostics_LocationClick_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDiagnosticLocationClick($event)); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-query-diagnostics", 88);
+    i0.ɵɵlistener("LocationClick", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template_mj_query_diagnostics_LocationClick_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDiagnosticLocationClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Headline", "Last metadata extraction: " + ctx_r1.ExtractionStatusLabel)("Diagnostics", ctx_r1.ExtractionDiagnostics)("Severity", ctx_r1.ExtractionSeverity)("LocationsClickable", true);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_41_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_43_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r12 = i0.ɵɵnextContext().$implicit;
+    const filter_r13 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r12.notes);
+    i0.ɵɵtextInterpolate(filter_r13.notes);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_41_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_43_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92)(1, "div", 93);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 81);
+    i0.ɵɵelementStart(3, "div", 94);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 82);
+    i0.ɵɵelementStart(5, "div", 95);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_41_For_6_Conditional_7_Template, 2, 1, "div", 83);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_43_For_6_Conditional_7_Template, 2, 1, "div", 96);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r12 = ctx.$implicit;
+    const filter_r13 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r12.name);
+    i0.ɵɵtextInterpolate(filter_r13.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r12.description);
+    i0.ɵɵtextInterpolate(filter_r13.description);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r12.exampleSyntax);
+    i0.ɵɵtextInterpolate(filter_r13.exampleSyntax);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(filter_r12.notes ? 7 : -1);
+    i0.ɵɵconditional(filter_r13.notes ? 7 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34)(1, "h6", 76);
-    i0.ɵɵelement(2, "i", 77);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36)(1, "h6", 89);
+    i0.ɵɵelement(2, "i", 90);
     i0.ɵɵtext(3, " Available SQL Filters for Parameterized Queries ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 78);
-    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_41_For_6_Template, 8, 4, "div", 79, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 91);
+    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_43_For_6_Template, 8, 4, "div", 92, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.sqlFilters);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 86);
     i0.ɵɵtext(1, "\u2014 Documented");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 85);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 99);
     i0.ɵɵtext(2, " Technical Description ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1_Conditional_3_Template, 2, 0, "span", 73);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Conditional_3_Template, 2, 0, "span", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.record.TechnicalDescription ? 3 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87)(1, "div", 88);
-    i0.ɵɵelement(2, "i", 89);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
+    i0.ɵɵelement(2, "i", 103);
     i0.ɵɵtext(3, " Preview ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-markdown", 90);
+    i0.ɵɵelement(4, "mj-markdown", 104);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("data", ctx_r1.record.TechnicalDescription || "")("enableMermaid", true)("enableHighlight", true)("enableCollapsibleHeadings", false)("enableSmartypants", true);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 86);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_3_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TechnicalDescription, $event) || (ctx_r1.record.TechnicalDescription = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 100);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TechnicalDescription, $event) || (ctx_r1.record.TechnicalDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵtext(1, "                ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_3_Conditional_2_Template, 5, 5, "div", 87);
+    i0.ɵɵconditionalCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Conditional_2_Template, 5, 5, "div", 101);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.TechnicalDescription);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.record.TechnicalDescription ? 2 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵelement(1, "mj-markdown", 90);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵelement(1, "mj-markdown", 104);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("data", ctx_r1.record.TechnicalDescription || "")("enableMermaid", true)("enableHighlight", true)("enableCollapsibleHeadings", false)("enableSmartypants", true);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.technicalDescriptionPanelExpanded, $event) || (ctx_r1.technicalDescriptionPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1_Template, 4, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_3_Template, 3, 2)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_42_Conditional_4_Template, 2, 5, "div", 84);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 97);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.technicalDescriptionPanelExpanded, $event) || (ctx_r1.technicalDescriptionPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Template, 4, 1, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Template, 3, 2)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Template, 2, 5, "div", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -338,8 +362,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.EditMode ? 3 : 4);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 108);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -347,44 +371,44 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.queryParameters.length);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 92);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 107);
     i0.ɵɵtext(2, " Parameters ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Conditional_3_Template, 2, 1, "span", 93);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Conditional_3_Template, 2, 1, "span", 108);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.queryParameters.length > 0 ? 3 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵelement(1, "mj-loading", 94);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelement(1, "mj-loading", 109);
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 96);
-    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addParameter()); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 111);
+    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addParameter()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode ? "Add First Parameter" : "");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "button", 99);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
-    i0.ɵɵelement(2, "i", 56);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112)(1, "button", 114);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
+    i0.ɵɵelement(2, "i", 66);
     i0.ɵɵtext(3, " Add Parameter ");
     i0.ɵɵelementEnd()();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 97);
-    i0.ɵɵelementStart(1, "mj-query-parameters-grid", 98);
-    i0.ɵɵlistener("Remove", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template_mj_query_parameters_grid_Remove_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteParameter($event)); })("Changed", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template_mj_query_parameters_grid_Changed_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnChildRowChanged()); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 112);
+    i0.ɵɵelementStart(1, "mj-query-parameters-grid", 113);
+    i0.ɵɵlistener("Remove", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Template_mj_query_parameters_grid_Remove_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteParameter($event)); })("Changed", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Template_mj_query_parameters_grid_Changed_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnChildRowChanged()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -392,19 +416,19 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4
     i0.ɵɵadvance();
     i0.ɵɵproperty("Parameters", ctx_r1.queryParameters)("EditMode", ctx_r1.EditMode);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 95)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template, 2, 3);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 110)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Conditional_1_Template, 2, 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryParameters.length === 0 ? 0 : 1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.parametersPanelExpanded, $event) || (ctx_r1.parametersPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Template, 4, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_3_Template, 2, 0, "div", 91)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Template, 2, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 105);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.parametersPanelExpanded, $event) || (ctx_r1.parametersPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template, 4, 1, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_3_Template, 2, 0, "div", 106)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -412,8 +436,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.isLoadingParameters ? 3 : 4);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 108);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -421,44 +445,44 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.queryFields.length);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 100);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 116);
     i0.ɵɵtext(2, " Fields ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Conditional_3_Template, 2, 1, "span", 93);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Conditional_3_Template, 2, 1, "span", 108);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.queryFields.length > 0 ? 3 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵelement(1, "mj-loading", 101);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelement(1, "mj-loading", 117);
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 103);
-    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addField()); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 119);
+    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addField()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode ? "Add First Field" : "");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "button", 99);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addField()); });
-    i0.ɵɵelement(2, "i", 56);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112)(1, "button", 114);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addField()); });
+    i0.ɵɵelement(2, "i", 66);
     i0.ɵɵtext(3, " Add Field ");
     i0.ɵɵelementEnd()();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 97);
-    i0.ɵɵelementStart(1, "mj-query-fields-grid", 104);
-    i0.ɵɵlistener("Remove", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Template_mj_query_fields_grid_Remove_1_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteField($event)); })("OpenSourceField", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Template_mj_query_fields_grid_OpenSourceField_1_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnOpenSourceField($event)); })("Changed", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Template_mj_query_fields_grid_Changed_1_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnChildRowChanged()); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 112);
+    i0.ɵɵelementStart(1, "mj-query-fields-grid", 120);
+    i0.ɵɵlistener("Remove", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template_mj_query_fields_grid_Remove_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteField($event)); })("OpenSourceField", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template_mj_query_fields_grid_OpenSourceField_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnOpenSourceField($event)); })("Changed", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template_mj_query_fields_grid_Changed_1_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnChildRowChanged()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -466,19 +490,19 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4
     i0.ɵɵadvance();
     i0.ɵɵproperty("Fields", ctx_r1.queryFields)("EditMode", ctx_r1.EditMode);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 102)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Conditional_1_Template, 2, 3);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 118)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template, 2, 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryFields.length === 0 ? 0 : 1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.fieldsPanelExpanded, $event) || (ctx_r1.fieldsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_44_ng_template_1_Template, 4, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_3_Template, 2, 0, "div", 91)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Conditional_4_Template, 2, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 115);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.fieldsPanelExpanded, $event) || (ctx_r1.fieldsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Template, 4, 1, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_3_Template, 2, 0, "div", 106)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -486,11 +510,11 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.isLoadingFields ? 3 : 4);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 108);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 125);
     i0.ɵɵtext(2, " Dependent Queries ");
-    i0.ɵɵelementStart(3, "span", 93);
+    i0.ɵɵelementStart(3, "span", 108);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -498,67 +522,67 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.DependentQueries.length);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 118);
-    i0.ɵɵelement(2, "i", 119);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 131)(1, "span", 135);
+    i0.ɵɵelement(2, "i", 136);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const dep_r25 = i0.ɵɵnextContext().$implicit;
+    const dep_r26 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", dep_r25.ReferencePath, " ");
+    i0.ɵɵtextInterpolate1(" ", dep_r26.ReferencePath, " ");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "span", 118)(2, "strong");
+function MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 131)(1, "span", 135)(2, "strong");
     i0.ɵɵtext(3, "Alias:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "code", 120);
+    i0.ɵɵelementStart(4, "code", 137);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const dep_r25 = i0.ɵɵnextContext().$implicit;
+    const dep_r26 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(dep_r25.Alias);
-} }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 109);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Template_div_click_0_listener() { const dep_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDependentQueryClick(dep_r25)); });
-    i0.ɵɵelementStart(1, "div", 110)(2, "div", 111);
-    i0.ɵɵelement(3, "i", 112);
+    i0.ɵɵtextInterpolate(dep_r26.Alias);
+} }
+function MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 126);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Template_div_click_0_listener() { const dep_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDependentQueryClick(dep_r26)); });
+    i0.ɵɵelementStart(1, "div", 127)(2, "div", 128);
+    i0.ɵɵelement(3, "i", 129);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 113);
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Conditional_6_Template, 4, 1, "div", 114);
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Conditional_7_Template, 6, 1, "div", 114);
+    i0.ɵɵelementStart(5, "div", 130);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Conditional_6_Template, 4, 1, "div", 131);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Conditional_7_Template, 6, 1, "div", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 115)(9, "span", 116);
-    i0.ɵɵelement(10, "i", 117);
+    i0.ɵɵelementStart(8, "div", 132)(9, "span", 133);
+    i0.ɵɵelement(10, "i", 134);
     i0.ɵɵtext(11, " Open ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const dep_r25 = ctx.$implicit;
+    const dep_r26 = ctx.$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", dep_r25.Query, " ");
+    i0.ɵɵtextInterpolate1(" ", dep_r26.Query, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(dep_r25.ReferencePath ? 6 : -1);
+    i0.ɵɵconditional(dep_r26.ReferencePath ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(dep_r25.Alias ? 7 : -1);
+    i0.ɵɵconditional(dep_r26.Alias ? 7 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.dependentsPanelExpanded, $event) || (ctx_r1.dependentsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template, 5, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36)(3, "div", 105);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 121);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_47_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.dependentsPanelExpanded, $event) || (ctx_r1.dependentsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template, 5, 1, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43)(3, "div", 122);
     i0.ɵɵtext(4, " These queries reference this query via ");
     i0.ɵɵelementStart(5, "code");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(7, " composition syntax. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 106);
-    i0.ɵɵrepeaterCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_45_For_10_Template, 12, 3, "div", 107, _forTrack1);
+    i0.ɵɵelementStart(8, "div", 123);
+    i0.ɵɵrepeaterCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_47_For_10_Template, 12, 3, "div", 124, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -568,8 +592,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.DependentQueries);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 93);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 108);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -577,109 +601,109 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.queryEntities.length);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 121);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 139);
     i0.ɵɵtext(2, " Entities ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Conditional_3_Template, 2, 1, "span", 93);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Conditional_3_Template, 2, 1, "span", 108);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.queryEntities.length > 0 ? 3 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵelement(1, "mj-loading", 122);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelement(1, "mj-loading", 140);
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 124);
-    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addEntity()); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 142);
+    i0.ɵɵlistener("Action", function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addEntity()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode ? "Add First Entity" : "");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "button", 99);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity()); });
-    i0.ɵɵelement(2, "i", 56);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 112)(1, "button", 114);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity()); });
+    i0.ɵɵelement(2, "i", 66);
     i0.ɵɵtext(3, " Add Entity ");
     i0.ɵɵelementEnd()();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 127)(1, "mj-dropdown", 129);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_5_Template_mj_dropdown_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r29); const entity_r30 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(entity_r30.EntityID, $event) || (entity_r30.EntityID = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 145)(1, "mj-dropdown", 147);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_5_Template_mj_dropdown_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r30); const entity_r31 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(entity_r31.EntityID, $event) || (entity_r31.EntityID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r30 = i0.ɵɵnextContext();
-    const entity_r30 = ctx_r30.$implicit;
-    const $index_r32 = ctx_r30.$index;
+    const ctx_r31 = i0.ɵɵnextContext();
+    const entity_r31 = ctx_r31.$implicit;
+    const $index_r33 = ctx_r31.$index;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", entity_r30.EntityID);
-    i0.ɵɵproperty("name", "entity_" + (entity_r30.ID || $index_r32))("Data", ctx_r1.getEntityOptions())("ValuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", entity_r31.EntityID);
+    i0.ɵɵproperty("name", "entity_" + (entity_r31.ID || $index_r33))("Data", ctx_r1.getEntityOptions())("ValuePrimitive", true);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 131)(1, "strong");
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 149)(1, "strong");
     i0.ɵɵtext(2, "Detected by:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r30 = i0.ɵɵnextContext(2).$implicit;
+    const entity_r31 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", entity_r30.DetectionMethod, " ");
+    i0.ɵɵtextInterpolate1(" ", entity_r31.DetectionMethod, " ");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 114)(2, "span", 118);
-    i0.ɵɵelement(3, "i", 130);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130)(1, "div", 131)(2, "span", 135);
+    i0.ɵɵelement(3, "i", 148);
     i0.ɵɵtext(4, " Data Source ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_6_Conditional_5_Template, 4, 1, "span", 131);
+    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_6_Conditional_5_Template, 4, 1, "span", 149);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r30 = i0.ɵɵnextContext().$implicit;
+    const entity_r31 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(entity_r30.DetectionMethod ? 5 : -1);
+    i0.ɵɵconditional(entity_r31.DetectionMethod ? 5 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 128)(1, "button", 132);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r33); const entity_r30 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteEntity(entity_r30)); });
-    i0.ɵɵelement(2, "i", 133);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 146)(1, "button", 150);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r34); const entity_r31 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteEntity(entity_r31)); });
+    i0.ɵɵelement(2, "i", 151);
     i0.ɵɵelementEnd()();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125)(1, "div", 110)(2, "div", 111);
-    i0.ɵɵelement(3, "i", 126);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 143)(1, "div", 127)(2, "div", 128);
+    i0.ɵɵelement(3, "i", 144);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 127);
+    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 145);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 6, 1, "div", 113);
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 128);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 6, 1, "div", 130);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 146);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r30 = ctx.$implicit;
+    const entity_r31 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", entity_r30.Entity || "Select Entity...", " ");
+    i0.ɵɵtextInterpolate1(" ", entity_r31.Entity || "Select Entity...", " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.EditMode && entity_r30.Entity ? 6 : -1);
+    i0.ɵɵconditional(!ctx_r1.EditMode && entity_r31.Entity ? 6 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 7 : -1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 97);
-    i0.ɵɵelementStart(1, "div", 106);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 125, _forTrack2);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 112);
+    i0.ɵɵelementStart(1, "div", 123);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 143, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -687,19 +711,19 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.queryEntities);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 123)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Conditional_1_Template, 4, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_0_Template, 1, 1, "mj-empty-state", 141)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryEntities.length === 0 ? 0 : 1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.entitiesPanelExpanded, $event) || (ctx_r1.entitiesPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Template, 4, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_3_Template, 2, 0, "div", 91)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Conditional_4_Template, 2, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 138);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_48_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.entitiesPanelExpanded, $event) || (ctx_r1.entitiesPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Template, 4, 1, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_3_Template, 2, 0, "div", 106)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -707,92 +731,92 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.isLoadingEntities ? 3 : 4);
 } }
-function MJQueryFormComponentExtended_Conditional_0_ng_template_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 134);
+function MJQueryFormComponentExtended_Conditional_0_ng_template_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 152);
     i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 135);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_55_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Reusable, $event) || (ctx_r1.record.Reusable = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 153);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_57_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Reusable, $event) || (ctx_r1.record.Reusable = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 136);
+    i0.ɵɵelementStart(1, "div", 154);
     i0.ɵɵtext(2, "Allow other queries to reference this query using composition syntax");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Reusable);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_56_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 137);
-    i0.ɵɵelement(1, "i", 139);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 155);
+    i0.ɵɵelement(1, "i", 157);
     i0.ɵɵtext(2, " Reusable");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 138);
-    i0.ɵɵelement(1, "i", 140);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 156);
+    i0.ɵɵelement(1, "i", 158);
     i0.ɵɵtext(2, " Not Reusable");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_56_Conditional_1_Template, 3, 0, "span", 137)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template, 3, 0, "span", 138);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_58_Conditional_1_Template, 3, 0, "span", 155)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_58_Conditional_2_Template, 3, 0, "span", 156);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.Reusable ? 1 : 2);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_61_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 141);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_61_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheEnabled, $event) || (ctx_r1.record.CacheEnabled = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 159);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheEnabled, $event) || (ctx_r1.record.CacheEnabled = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 136);
+    i0.ɵɵelementStart(1, "div", 154);
     i0.ɵɵtext(2, "Cache query results in memory to reduce database load on repeated runs");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.CacheEnabled);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_62_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 137);
-    i0.ɵɵelement(1, "i", 139);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_64_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 155);
+    i0.ɵɵelement(1, "i", 157);
     i0.ɵɵtext(2, " Caching On");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_62_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 138);
-    i0.ɵɵelement(1, "i", 140);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_64_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 156);
+    i0.ɵɵelement(1, "i", 158);
     i0.ɵɵtext(2, " Caching Off");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_62_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_62_Conditional_1_Template, 3, 0, "span", 137)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_62_Conditional_2_Template, 3, 0, "span", 138);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_64_Conditional_1_Template, 3, 0, "span", 155)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_64_Conditional_2_Template, 3, 0, "span", 156);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.CacheEnabled ? 1 : 2);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 143);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheTTLMinutes, $event) || (ctx_r1.record.CacheTTLMinutes = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 161);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Conditional_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheTTLMinutes, $event) || (ctx_r1.record.CacheTTLMinutes = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 136);
+    i0.ɵɵelementStart(1, "div", 154);
     i0.ɵɵtext(2, "How long cached results remain valid. Leave blank for default TTL.");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.CacheTTLMinutes);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -800,87 +824,87 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_5
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.CacheTTLMinutes != null ? ctx_r1.record.CacheTTLMinutes + " min" : "Default");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_63_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38)(1, "label", 39);
-    i0.ɵɵelement(2, "i", 142);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "label", 46);
+    i0.ɵɵelement(2, "i", 160);
     i0.ɵɵtext(3, " Cache TTL (Minutes) ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_4_Template, 3, 1)(5, MJQueryFormComponentExtended_Conditional_0_Conditional_63_Conditional_5_Template, 2, 1, "div", 41);
+    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_65_Conditional_4_Template, 3, 1)(5, MJQueryFormComponentExtended_Conditional_0_Conditional_65_Conditional_5_Template, 2, 1, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.EditMode ? 4 : 5);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_68_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 144);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_68_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.AuditQueryRuns, $event) || (ctx_r1.record.AuditQueryRuns = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 162);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_70_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.AuditQueryRuns, $event) || (ctx_r1.record.AuditQueryRuns = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 136);
+    i0.ɵɵelementStart(1, "div", 154);
     i0.ɵɵtext(2, "Log all executions of this query to the Audit Log for tracking and compliance");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.AuditQueryRuns);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_69_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 137);
-    i0.ɵɵelement(1, "i", 139);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 155);
+    i0.ɵɵelement(1, "i", 157);
     i0.ɵɵtext(2, " Auditing On");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_69_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 138);
-    i0.ɵɵelement(1, "i", 140);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 156);
+    i0.ɵɵelement(1, "i", 158);
     i0.ɵɵtext(2, " Auditing Off");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_69_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_69_Conditional_1_Template, 3, 0, "span", 137)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_69_Conditional_2_Template, 3, 0, "span", 138);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_71_Conditional_1_Template, 3, 0, "span", 155)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_71_Conditional_2_Template, 3, 0, "span", 156);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.AuditQueryRuns ? 1 : 2);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_74_Template(rf, ctx) { if (rf & 1) {
-    const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 145);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_74_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.UsesTemplate, $event) || (ctx_r1.record.UsesTemplate = $event); return i0.ɵɵresetView($event); });
+function MJQueryFormComponentExtended_Conditional_0_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 163);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_76_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.UsesTemplate, $event) || (ctx_r1.record.UsesTemplate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.UsesTemplate);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_75_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 137);
-    i0.ɵɵelement(1, "i", 139);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_77_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 155);
+    i0.ɵɵelement(1, "i", 157);
     i0.ɵɵtext(2, " Uses Templates");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_75_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 138);
-    i0.ɵɵelement(1, "i", 140);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_77_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 156);
+    i0.ɵɵelement(1, "i", 158);
     i0.ɵɵtext(2, " No Templates");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_75_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_75_Conditional_1_Template, 3, 0, "span", 137)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_75_Conditional_2_Template, 3, 0, "span", 138);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_77_Conditional_1_Template, 3, 0, "span", 155)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_77_Conditional_2_Template, 3, 0, "span", 156);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.UsesTemplate ? 1 : 2);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38)(1, "label", 39);
-    i0.ɵɵelement(2, "i", 146);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_90_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "label", 46);
+    i0.ɵɵelement(2, "i", 164);
     i0.ɵɵtext(3, " Quality Rank ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 41);
+    i0.ɵɵelementStart(4, "div", 48);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -888,72 +912,72 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_88_Template(rf,
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("", ctx_r1.record.QualityRank, "/10");
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
-    i0.ɵɵelement(1, "i", 147);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 166);
     i0.ɵɵtext(2, " Permissions ");
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵelement(1, "mj-loading", 148);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelement(1, "mj-loading", 167);
     i0.ɵɵelementEnd();
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 149);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 168);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 150);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 169);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Query Permissions", "QueryID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Query Permissions"))("AllowLoad", true)("ShowToolbar", false);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 152);
-    i0.ɵɵelement(1, "i", 153);
-    i0.ɵɵelementStart(2, "div", 154)(3, "div", 155);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 171);
+    i0.ɵɵelement(1, "i", 172);
+    i0.ɵɵelementStart(2, "div", 173)(3, "div", 174);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 156);
+    i0.ɵɵelementStart(5, "div", 175);
     i0.ɵɵtext(6, "Role Permission");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "span", 157);
-    i0.ɵɵelement(8, "i", 53);
+    i0.ɵɵelementStart(7, "span", 176);
+    i0.ɵɵelement(8, "i", 63);
     i0.ɵɵtext(9, " Can Execute ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const permission_r40 = ctx.$implicit;
+    const permission_r41 = ctx.$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(permission_r40.Role);
+    i0.ɵɵtextInterpolate(permission_r41.Role);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 151);
-    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 10, 1, "div", 152, _forTrack1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 170);
+    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 10, 1, "div", 171, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.queryPermissions);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 150)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 151);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 169)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 170);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r1.EditMode ? 0 : 1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_0_Template, 1, 0, "mj-empty-state", 149)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Conditional_1_Template, 2, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_0_Template, 1, 0, "mj-empty-state", 168)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Conditional_1_Template, 2, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryPermissions.length === 0 && !ctx_r1.EditMode ? 0 : 1);
 } }
-function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_89_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.permissionsPanelExpanded, $event) || (ctx_r1.permissionsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_89_ng_template_1_Template, 3, 0, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 36);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_3_Template, 2, 0, "div", 91)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Conditional_4_Template, 2, 1);
+function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 165);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_91_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.permissionsPanelExpanded, $event) || (ctx_r1.permissionsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_91_ng_template_1_Template, 3, 0, "ng-template", 27);
+    i0.ɵɵelementStart(2, "div", 43);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_3_Template, 2, 0, "div", 106)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -969,102 +993,106 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_3_Template, 4, 0, "div", 4);
     i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8);
     i0.ɵɵelement(8, "i", 9);
-    i0.ɵɵconditionalCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_9_Template, 1, 1, "input", 10)(10, MJQueryFormComponentExtended_Conditional_0_Conditional_10_Template, 2, 1, "h4", 11);
+    i0.ɵɵconditionalCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_9_Template, 1, 1, "input", 10)(10, MJQueryFormComponentExtended_Conditional_0_Conditional_10_Template, 4, 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 12);
-    i0.ɵɵconditionalCreate(12, MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template, 3, 1, "button", 13);
+    i0.ɵɵelementStart(11, "div", 11);
+    i0.ɵɵconditionalCreate(12, MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template, 3, 1, "button", 12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 14)(14, "div", 15)(15, "label", 16);
+    i0.ɵɵelementStart(13, "div", 13)(14, "div", 14)(15, "label", 15);
     i0.ɵɵtext(16, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template, 5, 8, "div", 17)(18, MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template, 2, 1, "span", 18);
+    i0.ɵɵconditionalCreate(17, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template, 5, 8, "div", 16)(18, MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template, 2, 1, "span", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 15)(20, "label", 16);
+    i0.ɵɵelementStart(19, "div", 18)(20, "label", 15);
     i0.ɵɵtext(21, "Status");
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(22, MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template, 1, 3, "mj-dropdown", 19)(23, MJQueryFormComponentExtended_Conditional_0_Conditional_23_Template, 3, 5, "span", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(24, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template, 7, 5, "div", 15);
+    i0.ɵɵconditionalCreate(24, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template, 7, 5, "div", 14);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(25, MJQueryFormComponentExtended_Conditional_0_Conditional_25_Template, 3, 1, "div", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(26, MJQueryFormComponentExtended_Conditional_0_Conditional_26_Template, 4, 2, "button", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(27, MJQueryFormComponentExtended_Conditional_0_Conditional_27_Template, 6, 2, "mj-alert", 23);
+    i0.ɵɵelementStart(28, "div", 24)(29, "mj-accordion-sections", 25);
+    i0.ɵɵlistener("ActiveKeyChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_accordion_sections_ActiveKeyChange_29_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Phone.Pick($event)); });
+    i0.ɵɵelementStart(30, "mj-accordion-panel", 26);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_accordion_panel_ExpandedChange_30_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.sqlPanelExpanded, $event) || (ctx_r1.sqlPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(31, MJQueryFormComponentExtended_Conditional_0_ng_template_31_Template, 5, 1, "ng-template", 27);
+    i0.ɵɵelementStart(32, "div", 28)(33, "button", 29);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFiltersHelp()); });
+    i0.ɵɵelement(34, "i", 30);
+    i0.ɵɵelementStart(35, "span");
+    i0.ɵɵtext(36, "Filters Help");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(37, "i", 31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(26, MJQueryFormComponentExtended_Conditional_0_Conditional_26_Template, 6, 2, "mj-alert", 22);
-    i0.ɵɵelementStart(27, "div", 23)(28, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_accordion_panel_ExpandedChange_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.sqlPanelExpanded, $event) || (ctx_r1.sqlPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(29, MJQueryFormComponentExtended_Conditional_0_ng_template_29_Template, 5, 1, "ng-template", 25);
-    i0.ɵɵelementStart(30, "div", 26)(31, "button", 27);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFiltersHelp()); });
-    i0.ɵɵelement(32, "i", 28);
-    i0.ɵɵelementStart(33, "span");
-    i0.ɵɵtext(34, "Filters Help");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(35, "i", 29);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "div", 30);
-    i0.ɵɵconditionalCreate(37, MJQueryFormComponentExtended_Conditional_0_Conditional_37_Template, 1, 3, "mj-query-diagnostics", 31);
-    i0.ɵɵelementStart(38, "mj-code-editor", 32, 1);
-    i0.ɵɵlistener("change", function MJQueryFormComponentExtended_Conditional_0_Template_mj_code_editor_change_38_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSQLChange($event)); })("CompositionTokenClick", function MJQueryFormComponentExtended_Conditional_0_Template_mj_code_editor_CompositionTokenClick_38_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCompositionTokenClick($event)); });
+    i0.ɵɵelementStart(38, "div", 32);
+    i0.ɵɵconditionalCreate(39, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template, 1, 3, "mj-query-diagnostics", 33);
+    i0.ɵɵelementStart(40, "mj-code-editor", 34, 1);
+    i0.ɵɵlistener("change", function MJQueryFormComponentExtended_Conditional_0_Template_mj_code_editor_change_40_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSQLChange($event)); })("CompositionTokenClick", function MJQueryFormComponentExtended_Conditional_0_Template_mj_code_editor_CompositionTokenClick_40_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCompositionTokenClick($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(40, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template, 1, 4, "mj-query-diagnostics", 33);
-    i0.ɵɵconditionalCreate(41, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template, 7, 0, "div", 34);
+    i0.ɵɵconditionalCreate(42, MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template, 1, 4, "mj-query-diagnostics", 35);
+    i0.ɵɵconditionalCreate(43, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template, 7, 0, "div", 36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(42, MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template, 5, 2, "mj-accordion-panel", 35);
-    i0.ɵɵconditionalCreate(43, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template, 5, 2, "mj-accordion-panel", 35);
-    i0.ɵɵconditionalCreate(44, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template, 5, 2, "mj-accordion-panel", 35);
-    i0.ɵɵconditionalCreate(45, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template, 11, 2, "mj-accordion-panel", 35);
-    i0.ɵɵconditionalCreate(46, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template, 5, 2, "mj-accordion-panel", 35);
-    i0.ɵɵelementStart(47, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_accordion_panel_ExpandedChange_47_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.detailsPanelExpanded, $event) || (ctx_r1.detailsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(48, MJQueryFormComponentExtended_Conditional_0_ng_template_48_Template, 3, 0, "ng-template", 25);
-    i0.ɵɵelementStart(49, "div", 36)(50, "div", 37)(51, "div", 38)(52, "label", 39);
-    i0.ɵɵelement(53, "i", 40);
-    i0.ɵɵtext(54, " Reusable ");
+    i0.ɵɵconditionalCreate(44, MJQueryFormComponentExtended_Conditional_0_Conditional_44_Template, 5, 2, "mj-accordion-panel", 37);
+    i0.ɵɵconditionalCreate(45, MJQueryFormComponentExtended_Conditional_0_Conditional_45_Template, 5, 2, "mj-accordion-panel", 38);
+    i0.ɵɵconditionalCreate(46, MJQueryFormComponentExtended_Conditional_0_Conditional_46_Template, 5, 2, "mj-accordion-panel", 39);
+    i0.ɵɵconditionalCreate(47, MJQueryFormComponentExtended_Conditional_0_Conditional_47_Template, 11, 2, "mj-accordion-panel", 40);
+    i0.ɵɵconditionalCreate(48, MJQueryFormComponentExtended_Conditional_0_Conditional_48_Template, 5, 2, "mj-accordion-panel", 41);
+    i0.ɵɵelementStart(49, "mj-accordion-panel", 42);
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_accordion_panel_ExpandedChange_49_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.detailsPanelExpanded, $event) || (ctx_r1.detailsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(50, MJQueryFormComponentExtended_Conditional_0_ng_template_50_Template, 3, 0, "ng-template", 27);
+    i0.ɵɵelementStart(51, "div", 43)(52, "div", 44)(53, "div", 45)(54, "label", 46);
+    i0.ɵɵelement(55, "i", 47);
+    i0.ɵɵtext(56, " Reusable ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(55, MJQueryFormComponentExtended_Conditional_0_Conditional_55_Template, 3, 1)(56, MJQueryFormComponentExtended_Conditional_0_Conditional_56_Template, 3, 1, "div", 41);
+    i0.ɵɵconditionalCreate(57, MJQueryFormComponentExtended_Conditional_0_Conditional_57_Template, 3, 1)(58, MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template, 3, 1, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(57, "div", 38)(58, "label", 39);
-    i0.ɵɵelement(59, "i", 42);
-    i0.ɵɵtext(60, " Cache Enabled ");
+    i0.ɵɵelementStart(59, "div", 45)(60, "label", 46);
+    i0.ɵɵelement(61, "i", 49);
+    i0.ɵɵtext(62, " Cache Enabled ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(61, MJQueryFormComponentExtended_Conditional_0_Conditional_61_Template, 3, 1)(62, MJQueryFormComponentExtended_Conditional_0_Conditional_62_Template, 3, 1, "div", 41);
+    i0.ɵɵconditionalCreate(63, MJQueryFormComponentExtended_Conditional_0_Conditional_63_Template, 3, 1)(64, MJQueryFormComponentExtended_Conditional_0_Conditional_64_Template, 3, 1, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(63, MJQueryFormComponentExtended_Conditional_0_Conditional_63_Template, 6, 1, "div", 38);
-    i0.ɵɵelementStart(64, "div", 38)(65, "label", 39);
-    i0.ɵɵelement(66, "i", 43);
-    i0.ɵɵtext(67, " Audit Runs ");
+    i0.ɵɵconditionalCreate(65, MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template, 6, 1, "div", 45);
+    i0.ɵɵelementStart(66, "div", 45)(67, "label", 46);
+    i0.ɵɵelement(68, "i", 50);
+    i0.ɵɵtext(69, " Audit Runs ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(68, MJQueryFormComponentExtended_Conditional_0_Conditional_68_Template, 3, 1)(69, MJQueryFormComponentExtended_Conditional_0_Conditional_69_Template, 3, 1, "div", 41);
+    i0.ɵɵconditionalCreate(70, MJQueryFormComponentExtended_Conditional_0_Conditional_70_Template, 3, 1)(71, MJQueryFormComponentExtended_Conditional_0_Conditional_71_Template, 3, 1, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(70, "div", 38)(71, "label", 39);
-    i0.ɵɵelement(72, "i", 44);
-    i0.ɵɵtext(73, " Template Usage ");
+    i0.ɵɵelementStart(72, "div", 45)(73, "label", 46);
+    i0.ɵɵelement(74, "i", 51);
+    i0.ɵɵtext(75, " Template Usage ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(74, MJQueryFormComponentExtended_Conditional_0_Conditional_74_Template, 1, 1, "mj-switch", 45)(75, MJQueryFormComponentExtended_Conditional_0_Conditional_75_Template, 3, 1, "div", 41);
+    i0.ɵɵconditionalCreate(76, MJQueryFormComponentExtended_Conditional_0_Conditional_76_Template, 1, 1, "mj-switch", 52)(77, MJQueryFormComponentExtended_Conditional_0_Conditional_77_Template, 3, 1, "div", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(76, "div", 38)(77, "label", 39);
-    i0.ɵɵelement(78, "i", 46);
-    i0.ɵɵtext(79, " Created ");
+    i0.ɵɵelementStart(78, "div", 45)(79, "label", 46);
+    i0.ɵɵelement(80, "i", 53);
+    i0.ɵɵtext(81, " Created ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(80, "div", 41);
-    i0.ɵɵtext(81);
+    i0.ɵɵelementStart(82, "div", 48);
+    i0.ɵɵtext(83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(82, "div", 38)(83, "label", 39);
-    i0.ɵɵelement(84, "i", 47);
-    i0.ɵɵtext(85, " Last Updated ");
+    i0.ɵɵelementStart(84, "div", 45)(85, "label", 46);
+    i0.ɵɵelement(86, "i", 54);
+    i0.ɵɵtext(87, " Last Updated ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(86, "div", 41);
-    i0.ɵɵtext(87);
+    i0.ɵɵelementStart(88, "div", 48);
+    i0.ɵɵtext(89);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(88, MJQueryFormComponentExtended_Conditional_0_Conditional_88_Template, 6, 1, "div", 38);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(89, MJQueryFormComponentExtended_Conditional_0_Conditional_89_Template, 5, 2, "mj-accordion-panel", 35);
+    i0.ɵɵconditionalCreate(90, MJQueryFormComponentExtended_Conditional_0_Conditional_90_Template, 6, 1, "div", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(90, "mj-query-refresh-dialog", 48);
-    i0.ɵɵlistener("Closed", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_refresh_dialog_Closed_90_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRefreshDialogClosed()); })("Applied", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_refresh_dialog_Applied_90_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRefreshApplied($event)); });
+    i0.ɵɵconditionalCreate(91, MJQueryFormComponentExtended_Conditional_0_Conditional_91_Template, 5, 2, "mj-accordion-panel", 55);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(92, "mj-query-refresh-dialog", 56);
+    i0.ɵɵlistener("Closed", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_refresh_dialog_Closed_92_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRefreshDialogClosed()); })("Applied", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_refresh_dialog_Applied_92_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRefreshApplied($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(91, "mj-query-run-dialog", 49);
-    i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_run_dialog_isVisibleChange_91_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showRunDialog, $event) || (ctx_r1.showRunDialog = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("onClose", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_run_dialog_onClose_91_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRunDialogClose()); });
+    i0.ɵɵelementStart(93, "mj-query-run-dialog", 57);
+    i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_run_dialog_isVisibleChange_93_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showRunDialog, $event) || (ctx_r1.showRunDialog = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("onClose", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_run_dialog_onClose_93_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRunDialogClose()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -1072,7 +1100,7 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.IsSaving ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("content-saving", ctx_r1.IsSaving);
+    i0.ɵɵclassProp("content-saving", ctx_r1.IsSaving)("hero-view", !ctx_r1.EditMode)("hero-compact", !ctx_r1.EditMode && !ctx_r1.HeroDetailsOpen);
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(ctx_r1.EditMode ? 9 : 10);
     i0.ɵɵadvance(3);
@@ -1086,51 +1114,55 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode || ctx_r1.record.Description ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.Status && ctx_r1.record.Status !== "Approved" && !ctx_r1.EditMode ? 26 : -1);
+    i0.ɵɵconditional(!ctx_r1.EditMode && ctx_r1.HeroSummary ? 26 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.Status && ctx_r1.record.Status !== "Approved" && !ctx_r1.EditMode ? 27 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("content-saving", ctx_r1.IsSaving);
     i0.ɵɵadvance();
+    i0.ɵɵproperty("Enabled", ctx_r1.Phone.IsPhone)("ActiveKey", ctx_r1.Phone.Section);
+    i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("Expanded", ctx_r1.sqlPanelExpanded);
     i0.ɵɵadvance(7);
     i0.ɵɵproperty("ngClass", ctx_r1.showFiltersHelp ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.SaveDiagnostics.length > 0 || ctx_r1.SaveDiagnosticsHeadline ? 37 : -1);
+    i0.ɵɵconditional(ctx_r1.SaveDiagnostics.length > 0 || ctx_r1.SaveDiagnosticsHeadline ? 39 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("language", "sql");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.SaveDiagnostics.length === 0 && ctx_r1.ExtractionDiagnostics.length > 0 ? 40 : -1);
+    i0.ɵɵconditional(ctx_r1.SaveDiagnostics.length === 0 && ctx_r1.ExtractionDiagnostics.length > 0 ? 42 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showFiltersHelp ? 41 : -1);
+    i0.ɵɵconditional(ctx_r1.showFiltersHelp ? 43 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.TechnicalDescription || ctx_r1.EditMode ? 42 : -1);
+    i0.ɵɵconditional(ctx_r1.record.TechnicalDescription || ctx_r1.EditMode ? 44 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 43 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 45 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 44 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 46 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved && ctx_r1.DependentQueries.length > 0 ? 45 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved && ctx_r1.DependentQueries.length > 0 ? 47 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 46 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved || ctx_r1.EditMode ? 48 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("Expanded", ctx_r1.detailsPanelExpanded);
     i0.ɵɵadvance(8);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 55 : 56);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 57 : 58);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 61 : 62);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 63 : 64);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.record.CacheEnabled ? 63 : -1);
+    i0.ɵɵconditional(ctx_r1.record.CacheEnabled ? 65 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 68 : 69);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 70 : 71);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 74 : 75);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 76 : 77);
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.record.__mj_CreatedAt));
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.record.__mj_UpdatedAt));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.QualityRank != null ? 88 : -1);
+    i0.ɵɵconditional(ctx_r1.record.QualityRank != null ? 90 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 89 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 91 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Visible", ctx_r1.ShowRefreshDialog)("Scope", ctx_r1.RefreshScope)("ScopeLabel", ctx_r1.RefreshScopeLabel)("AllowSkipDryRun", true)("Provider", ctx_r1.ProviderToUse);
     i0.ɵɵadvance();
@@ -1140,6 +1172,10 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
 let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJQueryFormComponent {
     constructor() {
         super(...arguments);
+        /** Phone width shows the stacked accordions as sections behind one picker (design call 7A). */
+        this.Phone = new PhoneSectionsState(() => this.cdr.markForCheck());
+        /** Phone hero (6A): whether the summary line is expanded to show the rest of the hero. */
+        this.HeroDetailsOpen = false;
         this.QueryParameters = [];
         this.QueryFields = [];
         this.QueryEntities = [];
@@ -1206,6 +1242,18 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         // ─── Refresh metadata ───────────────────────────────────────────────────────
         this.ShowRefreshDialog = false;
     }
+    /** Toggles the phone hero between its compact identity row and the full hero. */
+    ToggleHeroDetails() {
+        this.HeroDetailsOpen = !this.HeroDetailsOpen;
+        this.cdr.markForCheck();
+    }
+    /** The phone hero's one-line summary of what the compact hero leaves out. */
+    get HeroSummary() {
+        return JoinHeroSummary([
+            this.CategoryPathDisplay || 'Uncategorized',
+            this.record.IsSaved ? `Metadata: ${this.ExtractionStatusLabel}` : null,
+        ]);
+    }
     /** @deprecated Use {@link QueryParameters}. */
     get queryParameters() {
         return this.QueryParameters;
@@ -1459,6 +1507,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.Phone.Stop();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -2305,11 +2354,11 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.SqlEditor = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "IsSaving", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "saving-overlay"], [1, "query-header"], [1, "query-header-content"], [1, "query-header-top"], [1, "query-name-section"], [1, "fa-solid", "fa-database", "query-title-icon"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModel"], [1, "query-name-display"], [1, "query-header-actions"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", 3, "disabled"], [1, "query-meta-row"], [1, "query-meta-item"], [1, "meta-label"], [1, "meta-dropdown-row"], [1, "meta-value"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModel", "Data", "ValuePrimitive"], [1, "status-pill", 3, "background"], [1, "query-description-row"], ["Variant", "warning"], [1, "query-content"], [1, "query-panel", 3, "ExpandedChange", "Expanded"], ["mjAccordionTitle", ""], [1, "sql-panel-toolbar", 2, "display", "flex", "justify-content", "flex-end", "padding", "4px 0 8px"], ["type", "button", "mjButton", "", "variant", "flat", "title", "Show/hide SQL filters help", 1, "filters-help-btn", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "fa-solid", 3, "ngClass"], [1, "sql-panel-content"], ["Severity", "error", 1, "save-diagnostics", 3, "Headline", "Diagnostics", "LocationsClickable"], [1, "sql-editor", 3, "change", "CompositionTokenClick", "language"], [1, "extraction-diagnostics", 3, "Headline", "Diagnostics", "Severity", "LocationsClickable"], [1, "filters-help"], [1, "query-panel", 3, "Expanded"], [1, "panel-body"], [1, "details-grid"], [1, "detail-item"], [1, "detail-label"], [1, "fa-solid", "fa-puzzle-piece"], [1, "detail-value"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-clipboard-list"], [1, "fa-solid", "fa-file-code"], ["name", "usesTemplate", 3, "ngModel"], [1, "fa-solid", "fa-calendar-plus"], [1, "fa-solid", "fa-calendar-check"], [3, "Closed", "Applied", "Visible", "Scope", "ScopeLabel", "AllowSkipDryRun", "Provider"], [3, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [1, "fa-solid", "fa-spinner", "fa-spin", "saving-spinner"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModelChange", "ngModel"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "meta-dropdown", 3, "ValueChange", "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable"], ["mjButton", "", "variant", "icon", "title", "New category", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "icon", "title", "Edit category"], ["mjButton", "", "variant", "icon", "title", "Edit category", 3, "click"], [1, "fa-solid", "fa-pen"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], [1, "status-pill"], [1, "fa-solid"], [1, "extraction-badge", 3, "title"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Re-derive the fields, parameters and entities from the SQL and the database server", 1, "refresh-metadata-btn"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Re-derive the fields, parameters and entities from the SQL and the database server", 1, "refresh-metadata-btn", 3, "click"], [1, "fa-solid", "fa-rotate"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModel"], [1, "query-description-text"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModelChange", "ngModel"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], ["Severity", "error", 1, "save-diagnostics", 3, "LocationClick", "Headline", "Diagnostics", "LocationsClickable"], [1, "extraction-diagnostics", 3, "LocationClick", "Headline", "Diagnostics", "Severity", "LocationsClickable"], [1, "filters-help-title"], [1, "fa-solid", "fa-filter"], [1, "filters-grid"], [1, "filter-card"], [1, "filter-name"], [1, "filter-description"], [1, "filter-syntax"], [1, "filter-notes"], [1, "technical-description-view"], [1, "fa-solid", "fa-book", "panel-icon"], ["name", "technicalDescription", "rows", "8", "placeholder", "Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.", 1, "mj-input", "technical-description-textarea", 3, "ngModelChange", "ngModel"], [1, "technical-description-preview"], [1, "preview-label"], [1, "fa-solid", "fa-eye"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "panel-loading"], [1, "fa-solid", "fa-sliders", "panel-icon"], [1, "panel-badge", "count"], ["text", "Loading parameters..."], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Parameters are found in the SQL when you save. Add one here to describe it before it is used.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Parameters are found in the SQL when you save. Add one here to describe it before it is used.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "panel-toolbar"], [3, "Remove", "Changed", "Parameters", "EditMode"], ["type", "button", 1, "add-item-btn", 3, "click"], [1, "fa-solid", "fa-table", "panel-icon"], ["text", "Loading fields..."], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Output fields are described by the database server when you save. Add one here to annotate it.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Output fields are described by the database server when you save. Add one here to annotate it.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [3, "Remove", "OpenSourceField", "Changed", "Fields", "EditMode"], [1, "dependents-description"], [1, "card-grid"], [1, "item-card", "dependent-card"], [1, "fa-solid", "fa-arrow-left", "panel-icon", "dependents-icon"], [1, "item-card", "dependent-card", 3, "click"], [1, "item-card-header"], [1, "item-name"], [1, "fa-solid", "fa-arrow-left", "item-name-icon", "dependent-query-icon"], [1, "item-card-body"], [1, "item-meta"], [1, "item-card-footer"], [1, "open-link"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "meta-tag"], [1, "fa-solid", "fa-link"], [1, "meta-code"], [1, "fa-solid", "fa-database", "panel-icon"], ["text", "Loading entities..."], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "item-card"], [1, "fa-solid", "fa-table", "item-name-icon", "entity-icon"], [1, "entity-dropdown-wrapper"], [1, "item-card-actions"], ["TextField", "text", "ValueField", "id", "Placeholder", "Select entity...", 1, "entity-dropdown", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-database"], ["title", "How this entity link was detected", 1, "meta-tag"], ["type", "button", "title", "Delete entity", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-info-circle", "panel-icon"], ["name", "reusable", 3, "ngModelChange", "ngModel"], [1, "detail-hint"], [1, "detail-tag", "positive"], [1, "detail-tag", "neutral"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], ["name", "cacheEnabled", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-clock"], ["type", "number", "name", "cacheTTLMinutes", "min", "1", "placeholder", "Default", 1, "mj-input", "detail-input-narrow", 3, "ngModelChange", "ngModel"], ["name", "auditQueryRuns", 3, "ngModelChange", "ngModel"], ["name", "usesTemplate", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-shield-alt", "panel-icon"], ["text", "Loading permissions..."], ["Icon", "fa-solid fa-shield-halved", "Title", "No Permissions Set", "Message", "This query uses default permissions."], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "permissions-list"], [1, "permission-card"], [1, "fa-solid", "fa-users", "permission-icon"], [1, "permission-info"], [1, "permission-role"], [1, "permission-type"], [1, "permission-badge"]], template: function MJQueryFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Template, 92, 46);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "IsSaving", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "saving-overlay"], [1, "query-header", "phone-hero"], [1, "query-header-content"], [1, "query-header-top", "phone-hero-top"], [1, "query-name-section"], [1, "fa-solid", "fa-database", "query-title-icon"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModel"], [1, "query-header-actions", "phone-hero-actions"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", "phone-hero-run", 3, "disabled"], [1, "query-meta-row", "phone-hero-detail"], [1, "query-meta-item"], [1, "meta-label"], [1, "meta-dropdown-row"], [1, "meta-value"], [1, "query-meta-item", "phone-hero-hide"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModel", "Data", "ValuePrimitive"], [1, "status-pill", 3, "background"], [1, "query-description-row", "phone-hero-detail"], ["type", "button", 1, "phone-hero-summary"], ["Variant", "warning"], [1, "query-content"], [3, "ActiveKeyChange", "Enabled", "ActiveKey"], ["SectionKey", "sql", "SectionTitle", "SQL", "SectionIcon", "fa-solid fa-code", 1, "query-panel", 3, "ExpandedChange", "Expanded"], ["mjAccordionTitle", ""], [1, "sql-panel-toolbar", 2, "display", "flex", "justify-content", "flex-end", "padding", "4px 0 8px"], ["type", "button", "mjButton", "", "variant", "flat", "title", "Show/hide SQL filters help", 1, "filters-help-btn", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "fa-solid", 3, "ngClass"], [1, "sql-panel-content"], ["Severity", "error", 1, "save-diagnostics", 3, "Headline", "Diagnostics", "LocationsClickable"], [1, "sql-editor", 3, "change", "CompositionTokenClick", "language"], [1, "extraction-diagnostics", 3, "Headline", "Diagnostics", "Severity", "LocationsClickable"], [1, "filters-help"], ["SectionKey", "description", "SectionTitle", "Technical Description", "SectionIcon", "fa-solid fa-book", 1, "query-panel", 3, "Expanded"], ["SectionKey", "parameters", "SectionTitle", "Parameters", "SectionIcon", "fa-solid fa-sliders", 1, "query-panel", 3, "Expanded"], ["SectionKey", "fields", "SectionTitle", "Fields", "SectionIcon", "fa-solid fa-table", 1, "query-panel", 3, "Expanded"], ["SectionKey", "dependents", "SectionTitle", "Dependent Queries", "SectionIcon", "fa-solid fa-arrow-left", 1, "query-panel", 3, "Expanded"], ["SectionKey", "entities", "SectionTitle", "Entities", "SectionIcon", "fa-solid fa-database", 1, "query-panel", 3, "Expanded"], ["SectionKey", "details", "SectionTitle", "Details", "SectionIcon", "fa-solid fa-info-circle", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "panel-body"], [1, "details-grid"], [1, "detail-item"], [1, "detail-label"], [1, "fa-solid", "fa-puzzle-piece"], [1, "detail-value"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-clipboard-list"], [1, "fa-solid", "fa-file-code"], ["name", "usesTemplate", 3, "ngModel"], [1, "fa-solid", "fa-calendar-plus"], [1, "fa-solid", "fa-calendar-check"], ["SectionKey", "permissions", "SectionTitle", "Permissions", "SectionIcon", "fa-solid fa-shield-alt", 1, "query-panel", 3, "Expanded"], [3, "Closed", "Applied", "Visible", "Scope", "ScopeLabel", "AllowSkipDryRun", "Provider"], [3, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [1, "fa-solid", "fa-spinner", "fa-spin", "saving-spinner"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModelChange", "ngModel"], [1, "query-name-display"], [1, "status-pill", "phone-hero-only"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", "phone-hero-run", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "meta-dropdown", 3, "ValueChange", "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable"], ["mjButton", "", "variant", "icon", "title", "New category", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "icon", "title", "Edit category"], ["mjButton", "", "variant", "icon", "title", "Edit category", 3, "click"], [1, "fa-solid", "fa-pen"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], [1, "status-pill"], [1, "fa-solid"], [1, "extraction-badge", 3, "title"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Re-derive the fields, parameters and entities from the SQL and the database server", 1, "refresh-metadata-btn"], ["mjButton", "", "Variant", "outline", "Size", "sm", "type", "button", "title", "Re-derive the fields, parameters and entities from the SQL and the database server", 1, "refresh-metadata-btn", 3, "click"], [1, "fa-solid", "fa-rotate"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModel"], [1, "query-description-text"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModelChange", "ngModel"], ["type", "button", 1, "phone-hero-summary", 3, "click"], [1, "phone-hero-summary-text"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], ["Severity", "error", 1, "save-diagnostics", 3, "LocationClick", "Headline", "Diagnostics", "LocationsClickable"], [1, "extraction-diagnostics", 3, "LocationClick", "Headline", "Diagnostics", "Severity", "LocationsClickable"], [1, "filters-help-title"], [1, "fa-solid", "fa-filter"], [1, "filters-grid"], [1, "filter-card"], [1, "filter-name"], [1, "filter-description"], [1, "filter-syntax"], [1, "filter-notes"], ["SectionKey", "description", "SectionTitle", "Technical Description", "SectionIcon", "fa-solid fa-book", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "technical-description-view"], [1, "fa-solid", "fa-book", "panel-icon"], ["name", "technicalDescription", "rows", "8", "placeholder", "Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.", 1, "mj-input", "technical-description-textarea", 3, "ngModelChange", "ngModel"], [1, "technical-description-preview"], [1, "preview-label"], [1, "fa-solid", "fa-eye"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], ["SectionKey", "parameters", "SectionTitle", "Parameters", "SectionIcon", "fa-solid fa-sliders", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "panel-loading"], [1, "fa-solid", "fa-sliders", "panel-icon"], [1, "panel-badge", "count"], ["text", "Loading parameters..."], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Parameters are found in the SQL when you save. Add one here to describe it before it is used.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Parameters are found in the SQL when you save. Add one here to describe it before it is used.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "panel-toolbar"], [3, "Remove", "Changed", "Parameters", "EditMode"], ["type", "button", 1, "add-item-btn", 3, "click"], ["SectionKey", "fields", "SectionTitle", "Fields", "SectionIcon", "fa-solid fa-table", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "fa-solid", "fa-table", "panel-icon"], ["text", "Loading fields..."], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Output fields are described by the database server when you save. Add one here to annotate it.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Output fields are described by the database server when you save. Add one here to annotate it.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [3, "Remove", "OpenSourceField", "Changed", "Fields", "EditMode"], ["SectionKey", "dependents", "SectionTitle", "Dependent Queries", "SectionIcon", "fa-solid fa-arrow-left", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "dependents-description"], [1, "card-grid"], [1, "item-card", "dependent-card"], [1, "fa-solid", "fa-arrow-left", "panel-icon", "dependents-icon"], [1, "item-card", "dependent-card", 3, "click"], [1, "item-card-header"], [1, "item-name"], [1, "fa-solid", "fa-arrow-left", "item-name-icon", "dependent-query-icon"], [1, "item-card-body"], [1, "item-meta"], [1, "item-card-footer"], [1, "open-link"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "meta-tag"], [1, "fa-solid", "fa-link"], [1, "meta-code"], ["SectionKey", "entities", "SectionTitle", "Entities", "SectionIcon", "fa-solid fa-database", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "fa-solid", "fa-database", "panel-icon"], ["text", "Loading entities..."], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "item-card"], [1, "fa-solid", "fa-table", "item-name-icon", "entity-icon"], [1, "entity-dropdown-wrapper"], [1, "item-card-actions"], ["TextField", "text", "ValueField", "id", "Placeholder", "Select entity...", 1, "entity-dropdown", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-database"], ["title", "How this entity link was detected", 1, "meta-tag"], ["type", "button", "title", "Delete entity", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-info-circle", "panel-icon"], ["name", "reusable", 3, "ngModelChange", "ngModel"], [1, "detail-hint"], [1, "detail-tag", "positive"], [1, "detail-tag", "neutral"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], ["name", "cacheEnabled", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-clock"], ["type", "number", "name", "cacheTTLMinutes", "min", "1", "placeholder", "Default", 1, "mj-input", "detail-input-narrow", 3, "ngModelChange", "ngModel"], ["name", "auditQueryRuns", 3, "ngModelChange", "ngModel"], ["name", "usesTemplate", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-star"], ["SectionKey", "permissions", "SectionTitle", "Permissions", "SectionIcon", "fa-solid fa-shield-alt", 1, "query-panel", 3, "ExpandedChange", "Expanded"], [1, "fa-solid", "fa-shield-alt", "panel-icon"], ["text", "Loading permissions..."], ["Icon", "fa-solid fa-shield-halved", "Title", "No Permissions Set", "Message", "This query uses default permissions."], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "permissions-list"], [1, "permission-card"], [1, "fa-solid", "fa-users", "permission-icon"], [1, "permission-info"], [1, "permission-role"], [1, "permission-type"], [1, "permission-badge"]], template: function MJQueryFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Template, 94, 53);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
-        } }, dependencies: [i1.NgClass, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.MinValidator, i2.NgModel, i2.NgForm, i3.MJEmptyStateComponent, i3.MJAlertComponent, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJDropdownComponent, i3.MJSwitchComponent, i4.MjRecordFormContainerComponent, i4.ExplorerEntityDataGridComponent, i5.CodeEditorComponent, i6.QueryFieldsGridComponent, i7.QueryParametersGridComponent, i8.QueryDiagnosticsComponent, i8.QueryRefreshDialogComponent, i9.LoadingComponent, i10.MarkdownComponent, i11.TreeDropdownComponent, i12.QueryRunDialogComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n\n\n\n\n.saving-overlay[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.saving-spinner[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.content-saving[_ngcontent-%COMP%] {\n    pointer-events: none;\n    opacity: 0.6;\n}\n\n\n\n\n\n.query-header[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-brand-primary);\n    border-bottom: none;\n    padding: 0;\n}\n\n.query-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px;\n}\n\n.query-header-top[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.query-name-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.query-title-icon[_ngcontent-%COMP%] {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 1.3em;\n    flex-shrink: 0;\n}\n\n.query-name-input[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n    font-weight: 600;\n    min-width: 300px;\n    flex: 1;\n}\n\n.query-name-display[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-inverse, white);\n    font-weight: 600;\n    font-size: 1.2em;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.run-query-btn[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n\n.query-meta-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.query-meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.75);\n    font-size: var(--mj-text-sm);\n    min-width: 60px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: var(--mj-text-sm);\n}\n\n.meta-dropdown[_ngcontent-%COMP%] {\n    min-width: 200px;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: var(--mj-radius-xl);\n    color: var(--mj-text-inverse, white);\n    font-size: var(--mj-text-sm);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n}\n\n\n.query-description-row[_ngcontent-%COMP%] {\n    margin-top: 2px;\n}\n\n.query-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.query-description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.8);\n    font-size: var(--mj-text-sm);\n    line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n\n.query-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    padding: 16px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.query-panel[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n}\n\n  .query-content mj-accordion-panel .mj-accordion-panel {\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    margin-bottom: 12px !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n    background: var(--mj-bg-surface) !important;\n    overflow: hidden !important;\n}\n\n  .query-content .mj-accordion-header {\n    background: var(--mj-bg-surface) !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: var(--mj-radius-md) !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: var(--mj-text-sm) !important;\n    transition: background 0.15s ease !important;\n}\n\n  .query-content .mj-accordion-header:hover {\n    background: var(--mj-bg-surface-card) !important;\n}\n\n  .query-content .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-brand-on-primary) !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\n    outline-color: var(--mj-text-inverse);\n}\n\n  .query-content .mj-accordion-body {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface) !important;\n    border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md) !important;\n}\n\n\n\n\n\n.panel-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-icon[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.sql-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n  .mj-accordion-panel--expanded .panel-icon {\n    color: rgba(255, 255, 255, 0.85) !important;\n    opacity: 1;\n}\n\n.panel-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n}\n\n.panel-badge.defined[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.panel-badge.count[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n  .mj-accordion-panel--expanded .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n  .mj-accordion-panel--expanded .panel-badge.defined {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n.filters-help-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-right: 8px;\n    font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.panel-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 20px 12px;\n}\n\n\n\n\n\n.sql-panel-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.sql-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 400px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm);\n    margin: 16px;\n}\n\n\n.filters-help[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n}\n\n.filters-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 10px;\n}\n\n.filter-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 12px;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.filter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.filter-name[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.filter-description[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.filter-syntax[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: var(--mj-text-xs);\n    background: var(--mj-bg-surface-card);\n    padding: 6px;\n    border-radius: var(--mj-radius-sm);\n    margin-bottom: 4px;\n}\n\n.filter-notes[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n    gap: 12px;\n    padding: 0 20px 20px;\n}\n\n.item-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.item-card.required[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-warning);\n}\n\n.item-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n.item-name-icon.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.field-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.item-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.item-badge.required[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.item-badge.type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.item-badge.sequence[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: color-mix(in srgb, var(--mj-brand-primary) 80%, var(--mj-text-violet));\n}\n\n.item-card-body[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-sm);\n}\n\n.item-description[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    font-size: var(--mj-text-xs);\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    padding: 1px 4px;\n    border-radius: var(--mj-radius-sm);\n    font-size: var(--mj-text-xs);\n}\n\n\n.item-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.item-card[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.item-card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 8px;\n}\n\n.item-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: var(--mj-radius-sm);\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n}\n\n.item-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n.item-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n.entity-dropdown-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-left: 12px;\n}\n\n.entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 16px;\n    padding: 16px 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n}\n\n.detail-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: var(--mj-text-sm);\n}\n\n.detail-tag.positive[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.detail-tag.neutral[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.detail-hint[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.detail-input-narrow[_ngcontent-%COMP%] {\n    max-width: 120px;\n    padding: 4px 8px;\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n.permissions-list[_ngcontent-%COMP%] {\n    padding: 0 20px;\n}\n\n.permission-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 1.3em;\n    color: var(--mj-brand-primary);\n}\n\n.permission-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.permission-role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: var(--mj-text-sm);\n}\n\n.permission-type[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n}\n\n.permission-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    padding: 4px 10px;\n    border-radius: var(--mj-radius-md);\n    font-size: var(--mj-text-xs);\n    font-weight: 500;\n}\n\n\n\n\n\n\n\n\n\n.add-item-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    padding: 8px 16px;\n    border-radius: var(--mj-radius-md);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 500;\n    font-size: var(--mj-text-sm);\n}\n\n.add-item-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\n\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n\n\n.technical-description-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n    font-size: 13px;\n}\n\n.technical-description-preview[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    padding-top: 12px;\n}\n\n.preview-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.technical-description-view[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    padding: 12px 16px;\n}\n\n\n.dependents-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.dependents-description[_ngcontent-%COMP%] {\n    padding: 0 20px 12px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-description[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 5px;\n    border-radius: 3px;\n    font-size: 12px;\n}\n\n.dependent-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n    border-left: 3px solid var(--mj-status-warning) !important;\n}\n\n.dependent-card[_ngcontent-%COMP%]:hover {\n    border-left-color: var(--mj-status-warning-text) !important;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface)) !important;\n}\n\n.dependent-query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning) !important;\n}\n\n.item-card-footer[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n    margin-top: 8px;\n}\n\n.open-link[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.dependent-card[_ngcontent-%COMP%]:hover   .open-link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n\n.meta-dropdown-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.meta-dropdown-row[_ngcontent-%COMP%]   .meta-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.extraction-badge[_ngcontent-%COMP%] {\n  --extraction-accent: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--mj-radius-full);\n  padding: 2px var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--extraction-accent);\n  background: color-mix(in srgb, var(--extraction-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--extraction-accent) 30%, transparent);\n  white-space: nowrap;\n}\n\n.extraction-badge--ok[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-success); }\n.extraction-badge--warning[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-warning); }\n.extraction-badge--error[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-error); }\n.extraction-badge--skipped[_ngcontent-%COMP%], \n.extraction-badge--none[_ngcontent-%COMP%] { --extraction-accent: var(--mj-text-muted); }\n\n.save-diagnostics[_ngcontent-%COMP%] {\n  margin-bottom: var(--mj-space-3);\n}\n\n.extraction-diagnostics[_ngcontent-%COMP%] {\n  margin-top: var(--mj-space-3);\n}\n\n\n.query-header[_ngcontent-%COMP%]   .extraction-badge[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n}\n\n.query-header[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  border-color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n  background: transparent;\n}\n\n.query-header[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n}"] }); }
+        } }, dependencies: [i1.NgClass, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.MinValidator, i2.NgModel, i2.NgForm, i3.MJEmptyStateComponent, i3.MJAlertComponent, i3.MJAccordionSectionsComponent, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJDropdownComponent, i3.MJSwitchComponent, i4.MjRecordFormContainerComponent, i4.ExplorerEntityDataGridComponent, i5.CodeEditorComponent, i6.QueryFieldsGridComponent, i7.QueryParametersGridComponent, i8.QueryDiagnosticsComponent, i8.QueryRefreshDialogComponent, i9.LoadingComponent, i10.MarkdownComponent, i11.TreeDropdownComponent, i12.QueryRunDialogComponent], styles: [".content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n\n\n\n\n.saving-overlay[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.saving-spinner[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.content-saving[_ngcontent-%COMP%] {\n    pointer-events: none;\n    opacity: 0.6;\n}\n\n\n\n\n\n.query-header[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-brand-primary);\n    border-bottom: none;\n    padding: 0;\n}\n\n.query-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px;\n}\n\n.query-header-top[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.query-name-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.query-title-icon[_ngcontent-%COMP%] {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 1.3em;\n    flex-shrink: 0;\n}\n\n.query-name-input[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n    font-weight: 600;\n    min-width: 300px;\n    flex: 1;\n}\n\n.query-name-display[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-inverse, white);\n    font-weight: 600;\n    font-size: 1.2em;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.run-query-btn[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n\n.query-meta-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.query-meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.75);\n    font-size: var(--mj-text-sm);\n    min-width: 60px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: var(--mj-text-sm);\n}\n\n.meta-dropdown[_ngcontent-%COMP%] {\n    min-width: 200px;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: var(--mj-radius-xl);\n    color: var(--mj-text-inverse, white);\n    font-size: var(--mj-text-sm);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n}\n\n\n.query-description-row[_ngcontent-%COMP%] {\n    margin-top: 2px;\n}\n\n.query-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.query-description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.8);\n    font-size: var(--mj-text-sm);\n    line-height: 1.4;\n}\n\n\n\n\n\n\n\n\n\n\n.query-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    padding: 16px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.query-panel[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n}\n\n  .query-content mj-accordion-panel .mj-accordion-panel {\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    margin-bottom: 12px !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n    background: var(--mj-bg-surface) !important;\n    overflow: hidden !important;\n}\n\n  .query-content .mj-accordion-header {\n    background: var(--mj-bg-surface) !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: var(--mj-radius-md) !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: var(--mj-text-sm) !important;\n    transition: background 0.15s ease !important;\n}\n\n  .query-content .mj-accordion-header:hover {\n    background: var(--mj-bg-surface-card) !important;\n}\n\n  .query-content .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-brand-on-primary) !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\n    outline-color: var(--mj-text-inverse);\n}\n\n  .query-content .mj-accordion-body {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface) !important;\n    border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md) !important;\n}\n\n\n\n\n\n.panel-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-icon[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.sql-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n  .mj-accordion-panel--expanded .panel-icon {\n    color: rgba(255, 255, 255, 0.85) !important;\n    opacity: 1;\n}\n\n.panel-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n}\n\n.panel-badge.defined[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.panel-badge.count[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n  .mj-accordion-panel--expanded .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n  .mj-accordion-panel--expanded .panel-badge.defined {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n.filters-help-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-right: 8px;\n    font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n.panel-body[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.panel-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.panel-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 20px 12px;\n}\n\n\n\n\n\n.sql-panel-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.sql-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 400px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm);\n    margin: 16px;\n}\n\n\n.filters-help[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n}\n\n.filters-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 10px;\n}\n\n.filter-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 12px;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.filter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.filter-name[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.filter-description[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.filter-syntax[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: var(--mj-text-xs);\n    background: var(--mj-bg-surface-card);\n    padding: 6px;\n    border-radius: var(--mj-radius-sm);\n    margin-bottom: 4px;\n}\n\n.filter-notes[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n    gap: 12px;\n    padding: 0 20px 20px;\n}\n\n.item-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.item-card.required[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-warning);\n}\n\n.item-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n.item-name-icon.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.field-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.item-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.item-badge.required[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.item-badge.type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.item-badge.sequence[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: color-mix(in srgb, var(--mj-brand-primary) 80%, var(--mj-text-violet));\n}\n\n.item-card-body[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-sm);\n}\n\n.item-description[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    font-size: var(--mj-text-xs);\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    padding: 1px 4px;\n    border-radius: var(--mj-radius-sm);\n    font-size: var(--mj-text-xs);\n}\n\n\n.item-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.item-card[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.item-card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 8px;\n}\n\n.item-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: var(--mj-radius-sm);\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n}\n\n.item-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n.item-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n.entity-dropdown-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-left: 12px;\n}\n\n.entity-dropdown[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 16px;\n    padding: 16px 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n}\n\n.detail-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: var(--mj-text-sm);\n}\n\n.detail-tag.positive[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.detail-tag.neutral[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.detail-hint[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.detail-input-narrow[_ngcontent-%COMP%] {\n    max-width: 120px;\n    padding: 4px 8px;\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n.permissions-list[_ngcontent-%COMP%] {\n    padding: 0 20px;\n}\n\n.permission-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 1.3em;\n    color: var(--mj-brand-primary);\n}\n\n.permission-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.permission-role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: var(--mj-text-sm);\n}\n\n.permission-type[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n}\n\n.permission-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    padding: 4px 10px;\n    border-radius: var(--mj-radius-md);\n    font-size: var(--mj-text-xs);\n    font-weight: 500;\n}\n\n\n\n\n\n\n\n\n\n.add-item-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    padding: 8px 16px;\n    border-radius: var(--mj-radius-md);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 500;\n    font-size: var(--mj-text-sm);\n}\n\n.add-item-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\n\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n\n\n.technical-description-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n    font-size: 13px;\n}\n\n.technical-description-preview[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    padding-top: 12px;\n}\n\n.preview-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.technical-description-view[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    padding: 12px 16px;\n}\n\n\n.dependents-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.dependents-description[_ngcontent-%COMP%] {\n    padding: 0 20px 12px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-description[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 5px;\n    border-radius: 3px;\n    font-size: 12px;\n}\n\n.dependent-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n    border-left: 3px solid var(--mj-status-warning) !important;\n}\n\n.dependent-card[_ngcontent-%COMP%]:hover {\n    border-left-color: var(--mj-status-warning-text) !important;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface)) !important;\n}\n\n.dependent-query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning) !important;\n}\n\n.item-card-footer[_ngcontent-%COMP%] {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n    margin-top: 8px;\n}\n\n.open-link[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.dependent-card[_ngcontent-%COMP%]:hover   .open-link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary-hover);\n}\n\n\n.meta-dropdown-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.meta-dropdown-row[_ngcontent-%COMP%]   .meta-dropdown[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.extraction-badge[_ngcontent-%COMP%] {\n  --extraction-accent: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--mj-radius-full);\n  padding: 2px var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--extraction-accent);\n  background: color-mix(in srgb, var(--extraction-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--extraction-accent) 30%, transparent);\n  white-space: nowrap;\n}\n\n.extraction-badge--ok[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-success); }\n.extraction-badge--warning[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-warning); }\n.extraction-badge--error[_ngcontent-%COMP%] { --extraction-accent: var(--mj-status-error); }\n.extraction-badge--skipped[_ngcontent-%COMP%], \n.extraction-badge--none[_ngcontent-%COMP%] { --extraction-accent: var(--mj-text-muted); }\n\n.save-diagnostics[_ngcontent-%COMP%] {\n  margin-bottom: var(--mj-space-3);\n}\n\n.extraction-diagnostics[_ngcontent-%COMP%] {\n  margin-top: var(--mj-space-3);\n}\n\n\n.query-header[_ngcontent-%COMP%]   .extraction-badge[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n}\n\n.query-header[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  border-color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n  background: transparent;\n}\n\n.query-header[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n}\n\n\n@media (max-width: 768px) {\n  .query-meta-item[_ngcontent-%COMP%], \n   .meta-dropdown-row[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n\n\n\n@media (max-width: 768px) {\n    .query-content[_ngcontent-%COMP%] {\n        padding: 12px 0;\n        background: transparent;\n    }\n\n    \n    .query-name-section[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        row-gap: 4px;\n    }\n\n    .query-name-display[_ngcontent-%COMP%] {\n        white-space: normal;\n        overflow-wrap: anywhere;\n    }\n\n    \n    .query-name-section[_ngcontent-%COMP%]   .status-pill.phone-hero-only[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        padding: 2px 8px;\n        font-size: var(--mj-text-xs);\n    }\n\n    \n\n\n    .query-header.phone-hero[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border-bottom: 2px solid var(--mj-border-default);\n        color: var(--mj-text-primary); \n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .query-header-content[_ngcontent-%COMP%] {\n        padding: 0;\n        gap: 8px;\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .query-title-icon[_ngcontent-%COMP%] {\n        color: var(--mj-brand-primary);\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .query-name-display[_ngcontent-%COMP%] {\n        color: var(--mj-text-secondary);\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n        color: var(--mj-text-muted);\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n        color: var(--mj-text-primary);\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   .query-description-text[_ngcontent-%COMP%] {\n        color: var(--mj-text-secondary);\n    }\n\n    \n\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%] {\n        min-height: 44px;\n        color: var(--mj-text-secondary);\n        border-color: var(--mj-border-default);\n    }\n\n    .query-header.phone-hero[_ngcontent-%COMP%]   button.refresh-metadata-btn[_ngcontent-%COMP%]:hover {\n        background: var(--mj-bg-surface-hover);\n    }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n.phone-hero-summary[_ngcontent-%COMP%], \n.phone-hero-only[_ngcontent-%COMP%] {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero[_ngcontent-%COMP%] {\n        padding: 12px !important;\n    }\n\n    \n    .phone-hero.hero-compact[_ngcontent-%COMP%]   .phone-hero-detail[_ngcontent-%COMP%], \n   .phone-hero.hero-view[_ngcontent-%COMP%]   .phone-hero-hide[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n\n    .phone-hero-only[_ngcontent-%COMP%] {\n        display: inline-flex;\n    }\n\n    \n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-stats[_ngcontent-%COMP%] {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status[_ngcontent-%COMP%] {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    \n    .phone-hero-status[data-status=\"running\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"][_ngcontent-%COMP%] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"][_ngcontent-%COMP%]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"][_ngcontent-%COMP%]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-run[_ngcontent-%COMP%] {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    \n\n    .phone-hero-summary[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text[_ngcontent-%COMP%] {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"][_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transition: none;\n    }\n}"] }); }
 };
 MJQueryFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Queries')
@@ -2317,10 +2366,10 @@ MJQueryFormComponentExtended = __decorate([
 export { MJQueryFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJQueryFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-query-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"ToolbarConfig\"\n    [IsSaving]=\"IsSaving\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n      <!-- Saving Overlay -->\n      @if (IsSaving) {\n        <div class=\"saving-overlay\">\n          <i class=\"fa-solid fa-spinner fa-spin saving-spinner\"></i>\n          <span>Saving...</span>\n        </div>\n      }\n\n      <!-- Header Section -->\n      <div class=\"query-header\" [class.content-saving]=\"IsSaving\">\n        <div class=\"query-header-content\">\n          <!-- Top Row: Name and Run Button -->\n          <div class=\"query-header-top\">\n            <!-- Left: Query Name -->\n            <div class=\"query-name-section\">\n              <i class=\"fa-solid fa-database query-title-icon\"></i>\n              @if (EditMode) {\n                <input class=\"mj-input query-name-input\"\n                  [(ngModel)]=\"record.Name\"\n                  name=\"queryName\"\n                  placeholder=\"Enter query name...\" />\n              } @else {\n                <h4 class=\"query-name-display\">{{ record.Name || 'Untitled Query' }}</h4>\n              }\n            </div>\n\n            <!-- Right: Action Buttons -->\n            <div class=\"query-header-actions\">\n              @if (record.ID) {\n                <button mjButton\n                  variant=\"primary\"\n                  [disabled]=\"EditMode || !record.SQL || record.SQL.trim().length === 0\"\n                  (click)=\"runQuery()\"\n                  title=\"Run Query\"\n                  class=\"run-query-btn\">\n                  <i class=\"fa-solid fa-play\"></i> Run\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Second Row: Category and Status -->\n          <div class=\"query-meta-row\">\n            <!-- Category -->\n            <div class=\"query-meta-item\">\n              <label class=\"meta-label\">Category</label>\n              @if (EditMode) {\n                <div class=\"meta-dropdown-row\">\n                  <mj-tree-dropdown\n                    [BranchConfig]=\"CategoryBranchConfig\"\n                    [Value]=\"CategoryIDAsKey\"\n                    [SelectableTypes]=\"'branch'\"\n                    [SelectionMode]=\"'single'\"\n                    [Placeholder]=\"'Select category...'\"\n                    [EnableSearch]=\"true\"\n                    [Clearable]=\"true\"\n                    (ValueChange)=\"OnCategoryTreeChange($event)\"\n                    class=\"meta-dropdown\">\n                  </mj-tree-dropdown>\n                  <button mjButton variant=\"icon\" title=\"New category\" (click)=\"createCategory()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                  </button>\n                  @if (record.CategoryID) {\n                    <button mjButton variant=\"icon\" title=\"Edit category\" (click)=\"editSelectedCategory()\">\n                      <i class=\"fa-solid fa-pen\"></i>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <span class=\"meta-value\">{{ categoryPathDisplay || 'Uncategorized' }}</span>\n              }\n            </div>\n\n            <!-- Status -->\n            <div class=\"query-meta-item\">\n              <label class=\"meta-label\">Status</label>\n              @if (EditMode) {\n                <mj-dropdown\n                  [(ngModel)]=\"record.Status\"\n                  name=\"status\"\n                  [Data]=\"statusOptions\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  class=\"meta-dropdown status-dropdown\">\n                </mj-dropdown>\n              } @else {\n                <span class=\"status-pill\"\n                  [style.background]=\"getStatusBadgeColor()\">\n                  <i class=\"fa-solid\" [class]=\"getStatusBannerIcon()\"></i>\n                  {{ record.Status || 'Unknown' }}\n                </span>\n              }\n            </div>\n\n            <!-- Metadata extraction status -->\n            @if (record.IsSaved) {\n              <div class=\"query-meta-item\">\n                <label class=\"meta-label\">Metadata</label>\n                <div class=\"meta-dropdown-row\">\n                  <span class=\"extraction-badge\" [class]=\"'extraction-badge ' + ExtractionStatusClass\"\n                    [title]=\"'Last metadata extraction: ' + ExtractionStatusLabel\">\n                    {{ ExtractionStatusLabel }}\n                  </span>\n                  @if (CanRefreshMetadata) {\n                    <button mjButton Variant=\"outline\" Size=\"sm\" type=\"button\" class=\"refresh-metadata-btn\"\n                      (click)=\"OpenRefreshDialog()\" title=\"Re-derive the fields, parameters and entities from the SQL and the database server\">\n                      <i class=\"fa-solid fa-rotate\"></i> Refresh metadata\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Third Row: Description -->\n          @if (EditMode || record.Description) {\n            <div class=\"query-description-row\">\n              @if (EditMode) {\n                <textarea class=\"mj-input query-description-input\"\n                  [(ngModel)]=\"record.Description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  placeholder=\"Enter query description...\">\n                </textarea>\n              } @else {\n                <p class=\"query-description-text\">{{ record.Description }}</p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Status Warning Banner for Non-Approved Queries -->\n      @if (record.Status && record.Status !== 'Approved' && !EditMode) {\n        <mj-alert Variant=\"warning\">\n          <span>\n            This query has status <strong>{{ record.Status }}</strong>. {{ getStatusBannerMessage() }}\n          </span>\n        </mj-alert>\n      }\n\n      <!-- Main Content Area with Expansion Panels -->\n      <div class=\"query-content\" [class.content-saving]=\"IsSaving\">\n\n        <!-- SQL Query Panel -->\n        <mj-accordion-panel\n          [(Expanded)]=\"sqlPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title-row\">\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-code panel-icon sql-icon\"></i>\n                SQL\n                @if (record.SQL) {\n                  <span class=\"panel-badge defined\">&mdash; Defined</span>\n                }\n              </span>\n            </span>\n          </ng-template>\n\n          <div class=\"sql-panel-toolbar\" style=\"display: flex; justify-content: flex-end; padding: 4px 0 8px;\">\n            <button type=\"button\"\n              mjButton\n              variant=\"flat\"\n              (click)=\"toggleFiltersHelp()\"\n              title=\"Show/hide SQL filters help\"\n              class=\"filters-help-btn\">\n              <i class=\"fa-solid fa-question-circle\"></i>\n              <span>Filters Help</span>\n              <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            </button>\n          </div>\n\n          <div class=\"sql-panel-content\">\n            @if (SaveDiagnostics.length > 0 || SaveDiagnosticsHeadline) {\n              <mj-query-diagnostics class=\"save-diagnostics\"\n                [Headline]=\"SaveDiagnosticsHeadline\"\n                [Diagnostics]=\"SaveDiagnostics\"\n                Severity=\"error\"\n                [LocationsClickable]=\"true\"\n                (LocationClick)=\"OnDiagnosticLocationClick($event)\" />\n            }\n            <!-- Code Editor -->\n            <mj-code-editor #sqlEditor\n              (change)=\"onSQLChange($event)\"\n              (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n              [language]=\"'sql'\"\n              class=\"sql-editor\">\n            </mj-code-editor>\n\n            @if (SaveDiagnostics.length === 0 && ExtractionDiagnostics.length > 0) {\n              <mj-query-diagnostics class=\"extraction-diagnostics\"\n                [Headline]=\"'Last metadata extraction: ' + ExtractionStatusLabel\"\n                [Diagnostics]=\"ExtractionDiagnostics\"\n                [Severity]=\"ExtractionSeverity\"\n                [LocationsClickable]=\"true\"\n                (LocationClick)=\"OnDiagnosticLocationClick($event)\" />\n            }\n\n            <!-- SQL Filters Help (Below Editor) -->\n            @if (showFiltersHelp) {\n              <div class=\"filters-help\">\n                <h6 class=\"filters-help-title\">\n                  <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                </h6>\n                <div class=\"filters-grid\">\n                  @for (filter of sqlFilters; track filter.name) {\n                    <div class=\"filter-card\">\n                      <div class=\"filter-name\">{{ filter.name }}</div>\n                      <div class=\"filter-description\">{{ filter.description }}</div>\n                      <div class=\"filter-syntax\">{{ filter.exampleSyntax }}</div>\n                      @if (filter.notes) {\n                        <div class=\"filter-notes\">{{ filter.notes }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Technical Description Panel -->\n        @if (record.TechnicalDescription || EditMode) {\n          <mj-accordion-panel\n            [(Expanded)]=\"technicalDescriptionPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-book panel-icon\"></i>\n                Technical Description\n                @if (record.TechnicalDescription) {\n                  <span class=\"panel-badge defined\">&mdash; Documented</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (EditMode) {\n                <textarea class=\"mj-input technical-description-textarea\"\n                  [(ngModel)]=\"record.TechnicalDescription\"\n                  name=\"technicalDescription\"\n                  rows=\"8\"\n                  placeholder=\"Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.\">\n                </textarea>\n                @if (record.TechnicalDescription) {\n                  <div class=\"technical-description-preview\">\n                    <div class=\"preview-label\">\n                      <i class=\"fa-solid fa-eye\"></i> Preview\n                    </div>\n                    <mj-markdown\n                      [data]=\"record.TechnicalDescription || ''\"\n                      [enableMermaid]=\"true\"\n                      [enableHighlight]=\"true\"\n                      [enableCollapsibleHeadings]=\"false\"\n                      [enableSmartypants]=\"true\">\n                    </mj-markdown>\n                  </div>\n                }\n              } @else {\n                <div class=\"technical-description-view\">\n                  <mj-markdown\n                    [data]=\"record.TechnicalDescription || ''\"\n                    [enableMermaid]=\"true\"\n                    [enableHighlight]=\"true\"\n                    [enableCollapsibleHeadings]=\"false\"\n                    [enableSmartypants]=\"true\">\n                  </mj-markdown>\n                </div>\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Parameters Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel\n            [(Expanded)]=\"parametersPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-sliders panel-icon\"></i>\n                Parameters\n                @if (queryParameters.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryParameters.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingParameters) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading parameters...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryParameters.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-sliders\"\n                    Title=\"No Parameters Defined\"\n                    Message=\"Parameters are found in the SQL when you save. Add one here to describe it before it is used.\"\n                    [ActionText]=\"EditMode ? 'Add First Parameter' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addParameter()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                      </button>\n                    </div>\n                  }\n                  <mj-query-parameters-grid\n                    [Parameters]=\"queryParameters\"\n                    [EditMode]=\"EditMode\"\n                    (Remove)=\"deleteParameter($event)\"\n                    (Changed)=\"OnChildRowChanged()\" />\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Fields Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel\n            [(Expanded)]=\"fieldsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-table panel-icon\"></i>\n                Fields\n                @if (queryFields.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryFields.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingFields) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading fields...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryFields.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-table\"\n                    Title=\"No Fields Defined\"\n                    Message=\"Output fields are described by the database server when you save. Add one here to annotate it.\"\n                    [ActionText]=\"EditMode ? 'Add First Field' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addField()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Field\n                      </button>\n                    </div>\n                  }\n                  <mj-query-fields-grid\n                    [Fields]=\"queryFields\"\n                    [EditMode]=\"EditMode\"\n                    (Remove)=\"deleteField($event)\"\n                    (OpenSourceField)=\"OnOpenSourceField($event)\"\n                    (Changed)=\"OnChildRowChanged()\" />\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Dependent Queries Panel -->\n        @if (record.IsSaved && DependentQueries.length > 0) {\n          <mj-accordion-panel\n            [(Expanded)]=\"dependentsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-arrow-left panel-icon dependents-icon\"></i>\n                Dependent Queries\n                <span class=\"panel-badge count\">{{ DependentQueries.length }}</span>\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              <div class=\"dependents-description\">\n                These queries reference this query via <code>{{\"{{query:\\\"...\\\"}}\"}} </code> composition syntax.\n              </div>\n              <div class=\"card-grid\">\n                @for (dep of DependentQueries; track dep.ID) {\n                  <div class=\"item-card dependent-card\" (click)=\"onDependentQueryClick(dep)\">\n                    <div class=\"item-card-header\">\n                      <div class=\"item-name\">\n                        <i class=\"fa-solid fa-arrow-left item-name-icon dependent-query-icon\"></i>\n                        {{ dep.Query }}\n                      </div>\n                    </div>\n                    <div class=\"item-card-body\">\n                      @if (dep.ReferencePath) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <i class=\"fa-solid fa-link\"></i> {{ dep.ReferencePath }}\n                          </span>\n                        </div>\n                      }\n                      @if (dep.Alias) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <strong>Alias:</strong> <code class=\"meta-code\">{{ dep.Alias }}</code>\n                          </span>\n                        </div>\n                      }\n                    </div>\n                    <div class=\"item-card-footer\">\n                      <span class=\"open-link\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n                      </span>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Entities Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel\n            [(Expanded)]=\"entitiesPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-database panel-icon\"></i>\n                Entities\n                @if (queryEntities.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryEntities.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingEntities) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading entities...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryEntities.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-database\"\n                    Title=\"No Entities Tracked\"\n                    Message=\"Track which entities this query uses for documentation.\"\n                    [ActionText]=\"EditMode ? 'Add First Entity' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addEntity()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Entity\n                      </button>\n                    </div>\n                  }\n                  <div class=\"card-grid\">\n                    @for (entity of queryEntities; track entity.ID || $index) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-table item-name-icon entity-icon\"></i>\n                            {{ entity.Entity || 'Select Entity...' }}\n                          </div>\n                          @if (EditMode) {\n                            <div class=\"entity-dropdown-wrapper\">\n                              <mj-dropdown\n                                [(ngModel)]=\"entity.EntityID\"\n                                [name]=\"'entity_' + (entity.ID || $index)\"\n                                [Data]=\"getEntityOptions()\"\n                                TextField=\"text\"\n                                ValueField=\"id\"\n                                [ValuePrimitive]=\"true\"\n                                Placeholder=\"Select entity...\"\n                                class=\"entity-dropdown\">\n                              </mj-dropdown>\n                            </div>\n                          }\n                        </div>\n                        @if (!EditMode && entity.Entity) {\n                          <div class=\"item-card-body\">\n                            <div class=\"item-meta\">\n                              <span class=\"meta-tag\">\n                                <i class=\"fa-solid fa-database\"></i> Data Source\n                              </span>\n                              @if (entity.DetectionMethod) {\n                                <span class=\"meta-tag\" title=\"How this entity link was detected\">\n                                  <strong>Detected by:</strong> {{ entity.DetectionMethod }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        }\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteEntity(entity)\" title=\"Delete entity\">\n                              <i class=\"fa-solid fa-trash\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Details Panel -->\n        <mj-accordion-panel\n          [(Expanded)]=\"detailsPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title\">\n              <i class=\"fa-solid fa-info-circle panel-icon\"></i>\n              Details\n            </span>\n          </ng-template>\n\n          <div class=\"panel-body\">\n            <div class=\"details-grid\">\n              <!-- Reusable -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-puzzle-piece\"></i> Reusable\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.Reusable\" name=\"reusable\"></mj-switch>\n                  <div class=\"detail-hint\">Allow other queries to reference this query using composition syntax</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.Reusable) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Reusable</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Not Reusable</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache Enabled -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-bolt\"></i> Cache Enabled\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.CacheEnabled\" name=\"cacheEnabled\"></mj-switch>\n                  <div class=\"detail-hint\">Cache query results in memory to reduce database load on repeated runs</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.CacheEnabled) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Caching On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Caching Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache TTL -->\n              @if (record.CacheEnabled) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-clock\"></i> Cache TTL (Minutes)\n                  </label>\n                  @if (EditMode) {\n                    <input class=\"mj-input detail-input-narrow\"\n                      type=\"number\"\n                      [(ngModel)]=\"record.CacheTTLMinutes\"\n                      name=\"cacheTTLMinutes\"\n                      min=\"1\"\n                      placeholder=\"Default\" />\n                    <div class=\"detail-hint\">How long cached results remain valid. Leave blank for default TTL.</div>\n                  } @else {\n                    <div class=\"detail-value\">{{ record.CacheTTLMinutes != null ? record.CacheTTLMinutes + ' min' : 'Default' }}</div>\n                  }\n                </div>\n              }\n\n              <!-- Audit Query Runs -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-clipboard-list\"></i> Audit Runs\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.AuditQueryRuns\" name=\"auditQueryRuns\"></mj-switch>\n                  <div class=\"detail-hint\">Log all executions of this query to the Audit Log for tracking and compliance</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.AuditQueryRuns) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Auditing On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Auditing Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Uses Template -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-file-code\"></i> Template Usage\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></mj-switch>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.UsesTemplate) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> No Templates</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Created Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-plus\"></i> Created\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_CreatedAt) }}</div>\n              </div>\n\n              <!-- Updated Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-check\"></i> Last Updated\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_UpdatedAt) }}</div>\n              </div>\n\n              <!-- Quality Rank -->\n              @if (record.QualityRank != null) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-star\"></i> Quality Rank\n                  </label>\n                  <div class=\"detail-value\">{{ record.QualityRank }}/10</div>\n                </div>\n              }\n            </div>\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Permissions Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel\n            [(Expanded)]=\"permissionsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-shield-alt panel-icon\"></i>\n                Permissions\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingPermissions) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading permissions...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryPermissions.length === 0 && !EditMode) {\n                  <mj-empty-state Icon=\"fa-solid fa-shield-halved\"\n                    Title=\"No Permissions Set\"\n                    Message=\"This query uses default permissions.\" />\n                } @else {\n                  @if (EditMode) {\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Query Permissions','QueryID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: Query Permissions')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  } @else {\n                    <div class=\"permissions-list\">\n                      @for (permission of queryPermissions; track permission.ID) {\n                        <div class=\"permission-card\">\n                          <i class=\"fa-solid fa-users permission-icon\"></i>\n                          <div class=\"permission-info\">\n                            <div class=\"permission-role\">{{ permission.Role }}</div>\n                            <div class=\"permission-type\">Role Permission</div>\n                          </div>\n                          <span class=\"permission-badge\">\n                            <i class=\"fa-solid fa-play\"></i> Can Execute\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n      </div>\n    </form>\n</mj-record-form-container>\n\n<!-- Refresh metadata: always a dry run first unless the user turned that off -->\n<mj-query-refresh-dialog\n  [Visible]=\"ShowRefreshDialog\"\n  [Scope]=\"RefreshScope\"\n  [ScopeLabel]=\"RefreshScopeLabel\"\n  [AllowSkipDryRun]=\"true\"\n  [Provider]=\"ProviderToUse\"\n  (Closed)=\"OnRefreshDialogClosed()\"\n  (Applied)=\"OnRefreshApplied($event)\" />\n\n<!-- Query Run Dialog -->\n<mj-query-run-dialog\n  [query]=\"record\"\n  [parameters]=\"queryParameters\"\n  [(isVisible)]=\"showRunDialog\"\n  (onClose)=\"onRunDialogClose()\">\n</mj-query-run-dialog>\n}\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n/* ========================================\n   Saving Overlay\n   ======================================== */\n\n.saving-overlay {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.saving-spinner {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.content-saving {\n    pointer-events: none;\n    opacity: 0.6;\n}\n\n/* ========================================\n   Header Section \u2014 matches Query Browser gradient\n   ======================================== */\n\n.query-header {\n    flex-shrink: 0;\n    background: var(--mj-brand-primary);\n    border-bottom: none;\n    padding: 0;\n}\n\n.query-header-content {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px;\n}\n\n.query-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.query-name-section {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.query-title-icon {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 1.3em;\n    flex-shrink: 0;\n}\n\n.query-name-input {\n    font-size: 1.2em;\n    font-weight: 600;\n    min-width: 300px;\n    flex: 1;\n}\n\n.query-name-display {\n    margin: 0;\n    color: var(--mj-text-inverse, white);\n    font-weight: 600;\n    font-size: 1.2em;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.run-query-btn {\n    white-space: nowrap;\n}\n\n/* Meta row (category + status) */\n.query-meta-row {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.query-meta-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.meta-label {\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.75);\n    font-size: var(--mj-text-sm);\n    min-width: 60px;\n}\n\n.meta-value {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: var(--mj-text-sm);\n}\n\n.meta-dropdown {\n    min-width: 200px;\n}\n\n.status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: var(--mj-radius-xl);\n    color: var(--mj-text-inverse, white);\n    font-size: var(--mj-text-sm);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill i {\n    font-size: var(--mj-text-xs);\n}\n\n/* Description row */\n.query-description-row {\n    margin-top: 2px;\n}\n\n.query-description-input {\n    width: 100%;\n}\n\n.query-description-text {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.8);\n    font-size: var(--mj-text-sm);\n    line-height: 1.4;\n}\n\n/* ========================================\n   Status Warning Banner\n   ======================================== */\n\n\n/* ========================================\n   Main Content Area\n   ======================================== */\n\n.query-content {\n    flex: 1;\n    min-height: 0;\n    padding: 16px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface-card);\n}\n\n/* ========================================\n   Accordion Panel Overrides \u2014 Modern Style\n   ======================================== */\n\n.query-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .query-content mj-accordion-panel .mj-accordion-panel {\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    margin-bottom: 12px !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n    background: var(--mj-bg-surface) !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .mj-accordion-header {\n    background: var(--mj-bg-surface) !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: var(--mj-radius-md) !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: var(--mj-text-sm) !important;\n    transition: background 0.15s ease !important;\n}\n\n::ng-deep .query-content .mj-accordion-header:hover {\n    background: var(--mj-bg-surface-card) !important;\n}\n\n::ng-deep .query-content .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-brand-on-primary) !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\n    outline-color: var(--mj-text-inverse);\n}\n\n::ng-deep .query-content .mj-accordion-body {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface) !important;\n    border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md) !important;\n}\n\n/* ========================================\n   Panel Title & Badges\n   ======================================== */\n\n.panel-title-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-icon {\n    opacity: 0.7;\n}\n\n.sql-icon {\n    color: var(--mj-brand-primary);\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-icon {\n    color: rgba(255, 255, 255, 0.85) !important;\n    opacity: 1;\n}\n\n.panel-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n}\n\n.panel-badge.defined {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.panel-badge.count {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.defined {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n.filters-help-btn {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-right: 8px;\n    font-size: var(--mj-text-xs);\n}\n\n/* ========================================\n   Panel Body & Loading\n   ======================================== */\n\n.panel-body {\n    padding: 16px 0;\n}\n\n.panel-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.panel-toolbar {\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 20px 12px;\n}\n\n/* ========================================\n   SQL Panel\n   ======================================== */\n\n.sql-panel-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.sql-editor {\n    flex: 1;\n    height: 400px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm);\n    margin: 16px;\n}\n\n/* Filters Help */\n.filters-help {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n}\n\n.filters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 10px;\n}\n\n.filter-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 12px;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.filter-card:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.filter-name {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.filter-description {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.filter-syntax {\n    font-family: 'Courier New', monospace;\n    font-size: var(--mj-text-xs);\n    background: var(--mj-bg-surface-card);\n    padding: 6px;\n    border-radius: var(--mj-radius-sm);\n    margin-bottom: 4px;\n}\n\n.filter-notes {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n/* ========================================\n   Card Grid (Parameters, Fields, Entities)\n   ======================================== */\n\n.card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n    gap: 12px;\n    padding: 0 20px 20px;\n}\n\n.item-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.item-card.required {\n    border-left: 3px solid var(--mj-status-warning);\n}\n\n.item-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n}\n\n.item-name {\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon {\n    font-size: var(--mj-text-sm);\n}\n\n.item-name-icon.param-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.field-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.entity-icon {\n    color: var(--mj-status-success);\n}\n\n.item-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.item-badge.required {\n    background: var(--mj-status-warning);\n}\n\n.item-badge.type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.item-badge.sequence {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: color-mix(in srgb, var(--mj-brand-primary) 80%, var(--mj-text-violet));\n}\n\n.item-card-body {\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-sm);\n}\n\n.item-description {\n    margin-bottom: 8px;\n}\n\n.item-meta {\n    display: flex;\n    gap: 16px;\n    font-size: var(--mj-text-xs);\n}\n\n.meta-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code {\n    background: var(--mj-bg-surface-card);\n    padding: 1px 4px;\n    border-radius: var(--mj-radius-sm);\n    font-size: var(--mj-text-xs);\n}\n\n/* Card actions (edit/delete) */\n.item-actions {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.item-card:hover .item-actions {\n    opacity: 1;\n}\n\n.item-card-actions {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 8px;\n}\n\n.item-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: var(--mj-radius-sm);\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n}\n\n.item-action-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n.item-action-btn.delete:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Entity dropdown in card */\n.entity-dropdown-wrapper {\n    flex: 1;\n    margin-left: 12px;\n}\n\n.entity-dropdown {\n    width: 100%;\n}\n\n/* ========================================\n   Details Grid\n   ======================================== */\n\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 16px;\n    padding: 16px 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.detail-value {\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n}\n\n.detail-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: var(--mj-text-sm);\n}\n\n.detail-tag.positive {\n    color: var(--mj-status-success);\n}\n\n.detail-tag.neutral {\n    color: var(--mj-text-disabled);\n}\n\n.detail-hint {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.detail-input-narrow {\n    max-width: 120px;\n    padding: 4px 8px;\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Permissions\n   ======================================== */\n\n.permissions-list {\n    padding: 0 20px;\n}\n\n.permission-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon {\n    font-size: 1.3em;\n    color: var(--mj-brand-primary);\n}\n\n.permission-info {\n    flex: 1;\n}\n\n.permission-role {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: var(--mj-text-sm);\n}\n\n.permission-type {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n}\n\n.permission-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    padding: 4px 10px;\n    border-radius: var(--mj-radius-md);\n    font-size: var(--mj-text-xs);\n    font-weight: 500;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    padding: 8px 16px;\n    border-radius: var(--mj-radius-md);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 500;\n    font-size: var(--mj-text-sm);\n}\n\n.add-item-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* ========================================\n   Badge (reused across components)\n   ======================================== */\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* ========================================\n   Technical Description Panel\n   ======================================== */\n\n.technical-description-textarea {\n    width: 100%;\n    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n    font-size: 13px;\n}\n\n.technical-description-preview {\n    margin-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    padding-top: 12px;\n}\n\n.preview-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.technical-description-view {\n    max-height: 500px;\n    overflow-y: auto;\n    padding: 12px 16px;\n}\n\n/* Dependent Queries */\n.dependents-icon {\n    color: var(--mj-status-warning);\n}\n\n.dependents-description {\n    padding: 0 20px 12px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-description code {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 5px;\n    border-radius: 3px;\n    font-size: 12px;\n}\n\n.dependent-card {\n    cursor: pointer;\n    border-left: 3px solid var(--mj-status-warning) !important;\n}\n\n.dependent-card:hover {\n    border-left-color: var(--mj-status-warning-text) !important;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface)) !important;\n}\n\n.dependent-query-icon {\n    color: var(--mj-status-warning) !important;\n}\n\n.item-card-footer {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n    margin-top: 8px;\n}\n\n.open-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.dependent-card:hover .open-link {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Category selector row: tree-dropdown + create/edit icon buttons */\n.meta-dropdown-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.meta-dropdown-row .meta-dropdown {\n  flex: 1;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Metadata extraction status \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.extraction-badge {\n  --extraction-accent: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--mj-radius-full);\n  padding: 2px var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--extraction-accent);\n  background: color-mix(in srgb, var(--extraction-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--extraction-accent) 30%, transparent);\n  white-space: nowrap;\n}\n\n.extraction-badge--ok { --extraction-accent: var(--mj-status-success); }\n.extraction-badge--warning { --extraction-accent: var(--mj-status-warning); }\n.extraction-badge--error { --extraction-accent: var(--mj-status-error); }\n.extraction-badge--skipped,\n.extraction-badge--none { --extraction-accent: var(--mj-text-muted); }\n\n.save-diagnostics {\n  margin-bottom: var(--mj-space-3);\n}\n\n.extraction-diagnostics {\n  margin-top: var(--mj-space-3);\n}\n\n/* The header sits on the brand colour: a light pill and a light outline button stay readable. */\n.query-header .extraction-badge {\n  background: var(--mj-bg-surface);\n}\n\n.query-header button.refresh-metadata-btn {\n  color: var(--mj-text-inverse);\n  border-color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n  background: transparent;\n}\n\n.query-header button.refresh-metadata-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-query-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"ToolbarConfig\"\n    [IsSaving]=\"IsSaving\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n      <!-- Saving Overlay -->\n      @if (IsSaving) {\n        <div class=\"saving-overlay\">\n          <i class=\"fa-solid fa-spinner fa-spin saving-spinner\"></i>\n          <span>Saving...</span>\n        </div>\n      }\n\n      <!-- Header Section -->\n      <div class=\"query-header phone-hero\" [class.content-saving]=\"IsSaving\" [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\">\n        <div class=\"query-header-content\">\n          <!-- Top Row: Name and Run Button -->\n          <div class=\"query-header-top phone-hero-top\">\n            <!-- Left: Query Name -->\n            <div class=\"query-name-section\">\n              <i class=\"fa-solid fa-database query-title-icon\"></i>\n              @if (EditMode) {\n                <input class=\"mj-input query-name-input\"\n                  [(ngModel)]=\"record.Name\"\n                  name=\"queryName\"\n                  placeholder=\"Enter query name...\" />\n              } @else {\n                <h4 class=\"query-name-display\">{{ record.Name || 'Untitled Query' }}</h4>\n              <span class=\"status-pill phone-hero-only\" [style.background]=\"getStatusBadgeColor()\">{{ record.Status || 'Unknown' }}</span>\n              }\n            </div>\n\n            <!-- Right: Action Buttons -->\n            <div class=\"query-header-actions phone-hero-actions\">\n              @if (record.ID) {\n                <button mjButton\n                  variant=\"primary\"\n                  [disabled]=\"EditMode || !record.SQL || record.SQL.trim().length === 0\"\n                  (click)=\"runQuery()\"\n                  title=\"Run Query\"\n                  class=\"run-query-btn phone-hero-run\">\n                  <i class=\"fa-solid fa-play\"></i> Run\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Second Row: Category and Status -->\n          <div class=\"query-meta-row phone-hero-detail\">\n            <!-- Category -->\n            <div class=\"query-meta-item\">\n              <label class=\"meta-label\">Category</label>\n              @if (EditMode) {\n                <div class=\"meta-dropdown-row\">\n                  <mj-tree-dropdown\n                    [BranchConfig]=\"CategoryBranchConfig\"\n                    [Value]=\"CategoryIDAsKey\"\n                    [SelectableTypes]=\"'branch'\"\n                    [SelectionMode]=\"'single'\"\n                    [Placeholder]=\"'Select category...'\"\n                    [EnableSearch]=\"true\"\n                    [Clearable]=\"true\"\n                    (ValueChange)=\"OnCategoryTreeChange($event)\"\n                    class=\"meta-dropdown\">\n                  </mj-tree-dropdown>\n                  <button mjButton variant=\"icon\" title=\"New category\" (click)=\"createCategory()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                  </button>\n                  @if (record.CategoryID) {\n                    <button mjButton variant=\"icon\" title=\"Edit category\" (click)=\"editSelectedCategory()\">\n                      <i class=\"fa-solid fa-pen\"></i>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <span class=\"meta-value\">{{ categoryPathDisplay || 'Uncategorized' }}</span>\n              }\n            </div>\n\n            <!-- Status -->\n            <div class=\"query-meta-item phone-hero-hide\">\n              <label class=\"meta-label\">Status</label>\n              @if (EditMode) {\n                <mj-dropdown\n                  [(ngModel)]=\"record.Status\"\n                  name=\"status\"\n                  [Data]=\"statusOptions\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  class=\"meta-dropdown status-dropdown\">\n                </mj-dropdown>\n              } @else {\n                <span class=\"status-pill\"\n                  [style.background]=\"getStatusBadgeColor()\">\n                  <i class=\"fa-solid\" [class]=\"getStatusBannerIcon()\"></i>\n                  {{ record.Status || 'Unknown' }}\n                </span>\n              }\n            </div>\n\n            <!-- Metadata extraction status -->\n            @if (record.IsSaved) {\n              <div class=\"query-meta-item\">\n                <label class=\"meta-label\">Metadata</label>\n                <div class=\"meta-dropdown-row\">\n                  <span class=\"extraction-badge\" [class]=\"'extraction-badge ' + ExtractionStatusClass\"\n                    [title]=\"'Last metadata extraction: ' + ExtractionStatusLabel\">\n                    {{ ExtractionStatusLabel }}\n                  </span>\n                  @if (CanRefreshMetadata) {\n                    <button mjButton Variant=\"outline\" Size=\"sm\" type=\"button\" class=\"refresh-metadata-btn\"\n                      (click)=\"OpenRefreshDialog()\" title=\"Re-derive the fields, parameters and entities from the SQL and the database server\">\n                      <i class=\"fa-solid fa-rotate\"></i> Refresh metadata\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Third Row: Description -->\n          @if (EditMode || record.Description) {\n            <div class=\"query-description-row phone-hero-detail\">\n              @if (EditMode) {\n                <textarea class=\"mj-input query-description-input\"\n                  [(ngModel)]=\"record.Description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  placeholder=\"Enter query description...\">\n                </textarea>\n              } @else {\n                <p class=\"query-description-text\">{{ record.Description }}</p>\n              }\n            </div>\n          }\n        </div>\n        @if (!EditMode && HeroSummary) {\n          <button type=\"button\" class=\"phone-hero-summary\" [attr.aria-expanded]=\"HeroDetailsOpen\" (click)=\"ToggleHeroDetails()\">\n            <span class=\"phone-hero-summary-text\">{{ HeroSummary }}</span>\n            <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n\n      <!-- Status Warning Banner for Non-Approved Queries -->\n      @if (record.Status && record.Status !== 'Approved' && !EditMode) {\n        <mj-alert Variant=\"warning\">\n          <span>\n            This query has status <strong>{{ record.Status }}</strong>. {{ getStatusBannerMessage() }}\n          </span>\n        </mj-alert>\n      }\n\n      <!-- Main Content Area with Expansion Panels -->\n      <div class=\"query-content\" [class.content-saving]=\"IsSaving\">\n        <!-- Phone: one section at a time behind a picker; desktop keeps the accordions -->\n        <mj-accordion-sections [Enabled]=\"Phone.IsPhone\" [ActiveKey]=\"Phone.Section\" (ActiveKeyChange)=\"Phone.Pick($event)\">\n\n        <!-- SQL Query Panel -->\n        <mj-accordion-panel SectionKey=\"sql\" SectionTitle=\"SQL\" SectionIcon=\"fa-solid fa-code\"\n          [(Expanded)]=\"sqlPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title-row\">\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-code panel-icon sql-icon\"></i>\n                SQL\n                @if (record.SQL) {\n                  <span class=\"panel-badge defined\">&mdash; Defined</span>\n                }\n              </span>\n            </span>\n          </ng-template>\n\n          <div class=\"sql-panel-toolbar\" style=\"display: flex; justify-content: flex-end; padding: 4px 0 8px;\">\n            <button type=\"button\"\n              mjButton\n              variant=\"flat\"\n              (click)=\"toggleFiltersHelp()\"\n              title=\"Show/hide SQL filters help\"\n              class=\"filters-help-btn\">\n              <i class=\"fa-solid fa-question-circle\"></i>\n              <span>Filters Help</span>\n              <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            </button>\n          </div>\n\n          <div class=\"sql-panel-content\">\n            @if (SaveDiagnostics.length > 0 || SaveDiagnosticsHeadline) {\n              <mj-query-diagnostics class=\"save-diagnostics\"\n                [Headline]=\"SaveDiagnosticsHeadline\"\n                [Diagnostics]=\"SaveDiagnostics\"\n                Severity=\"error\"\n                [LocationsClickable]=\"true\"\n                (LocationClick)=\"OnDiagnosticLocationClick($event)\" />\n            }\n            <!-- Code Editor -->\n            <mj-code-editor #sqlEditor\n              (change)=\"onSQLChange($event)\"\n              (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n              [language]=\"'sql'\"\n              class=\"sql-editor\">\n            </mj-code-editor>\n\n            @if (SaveDiagnostics.length === 0 && ExtractionDiagnostics.length > 0) {\n              <mj-query-diagnostics class=\"extraction-diagnostics\"\n                [Headline]=\"'Last metadata extraction: ' + ExtractionStatusLabel\"\n                [Diagnostics]=\"ExtractionDiagnostics\"\n                [Severity]=\"ExtractionSeverity\"\n                [LocationsClickable]=\"true\"\n                (LocationClick)=\"OnDiagnosticLocationClick($event)\" />\n            }\n\n            <!-- SQL Filters Help (Below Editor) -->\n            @if (showFiltersHelp) {\n              <div class=\"filters-help\">\n                <h6 class=\"filters-help-title\">\n                  <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                </h6>\n                <div class=\"filters-grid\">\n                  @for (filter of sqlFilters; track filter.name) {\n                    <div class=\"filter-card\">\n                      <div class=\"filter-name\">{{ filter.name }}</div>\n                      <div class=\"filter-description\">{{ filter.description }}</div>\n                      <div class=\"filter-syntax\">{{ filter.exampleSyntax }}</div>\n                      @if (filter.notes) {\n                        <div class=\"filter-notes\">{{ filter.notes }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Technical Description Panel -->\n        @if (record.TechnicalDescription || EditMode) {\n          <mj-accordion-panel SectionKey=\"description\" SectionTitle=\"Technical Description\" SectionIcon=\"fa-solid fa-book\"\n            [(Expanded)]=\"technicalDescriptionPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-book panel-icon\"></i>\n                Technical Description\n                @if (record.TechnicalDescription) {\n                  <span class=\"panel-badge defined\">&mdash; Documented</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (EditMode) {\n                <textarea class=\"mj-input technical-description-textarea\"\n                  [(ngModel)]=\"record.TechnicalDescription\"\n                  name=\"technicalDescription\"\n                  rows=\"8\"\n                  placeholder=\"Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.\">\n                </textarea>\n                @if (record.TechnicalDescription) {\n                  <div class=\"technical-description-preview\">\n                    <div class=\"preview-label\">\n                      <i class=\"fa-solid fa-eye\"></i> Preview\n                    </div>\n                    <mj-markdown\n                      [data]=\"record.TechnicalDescription || ''\"\n                      [enableMermaid]=\"true\"\n                      [enableHighlight]=\"true\"\n                      [enableCollapsibleHeadings]=\"false\"\n                      [enableSmartypants]=\"true\">\n                    </mj-markdown>\n                  </div>\n                }\n              } @else {\n                <div class=\"technical-description-view\">\n                  <mj-markdown\n                    [data]=\"record.TechnicalDescription || ''\"\n                    [enableMermaid]=\"true\"\n                    [enableHighlight]=\"true\"\n                    [enableCollapsibleHeadings]=\"false\"\n                    [enableSmartypants]=\"true\">\n                  </mj-markdown>\n                </div>\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Parameters Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel SectionKey=\"parameters\" SectionTitle=\"Parameters\" SectionIcon=\"fa-solid fa-sliders\"\n            [(Expanded)]=\"parametersPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-sliders panel-icon\"></i>\n                Parameters\n                @if (queryParameters.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryParameters.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingParameters) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading parameters...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryParameters.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-sliders\"\n                    Title=\"No Parameters Defined\"\n                    Message=\"Parameters are found in the SQL when you save. Add one here to describe it before it is used.\"\n                    [ActionText]=\"EditMode ? 'Add First Parameter' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addParameter()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                      </button>\n                    </div>\n                  }\n                  <mj-query-parameters-grid\n                    [Parameters]=\"queryParameters\"\n                    [EditMode]=\"EditMode\"\n                    (Remove)=\"deleteParameter($event)\"\n                    (Changed)=\"OnChildRowChanged()\" />\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Fields Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel SectionKey=\"fields\" SectionTitle=\"Fields\" SectionIcon=\"fa-solid fa-table\"\n            [(Expanded)]=\"fieldsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-table panel-icon\"></i>\n                Fields\n                @if (queryFields.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryFields.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingFields) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading fields...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryFields.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-table\"\n                    Title=\"No Fields Defined\"\n                    Message=\"Output fields are described by the database server when you save. Add one here to annotate it.\"\n                    [ActionText]=\"EditMode ? 'Add First Field' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addField()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Field\n                      </button>\n                    </div>\n                  }\n                  <mj-query-fields-grid\n                    [Fields]=\"queryFields\"\n                    [EditMode]=\"EditMode\"\n                    (Remove)=\"deleteField($event)\"\n                    (OpenSourceField)=\"OnOpenSourceField($event)\"\n                    (Changed)=\"OnChildRowChanged()\" />\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Dependent Queries Panel -->\n        @if (record.IsSaved && DependentQueries.length > 0) {\n          <mj-accordion-panel SectionKey=\"dependents\" SectionTitle=\"Dependent Queries\" SectionIcon=\"fa-solid fa-arrow-left\"\n            [(Expanded)]=\"dependentsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-arrow-left panel-icon dependents-icon\"></i>\n                Dependent Queries\n                <span class=\"panel-badge count\">{{ DependentQueries.length }}</span>\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              <div class=\"dependents-description\">\n                These queries reference this query via <code>{{\"{{query:\\\"...\\\"}}\"}} </code> composition syntax.\n              </div>\n              <div class=\"card-grid\">\n                @for (dep of DependentQueries; track dep.ID) {\n                  <div class=\"item-card dependent-card\" (click)=\"onDependentQueryClick(dep)\">\n                    <div class=\"item-card-header\">\n                      <div class=\"item-name\">\n                        <i class=\"fa-solid fa-arrow-left item-name-icon dependent-query-icon\"></i>\n                        {{ dep.Query }}\n                      </div>\n                    </div>\n                    <div class=\"item-card-body\">\n                      @if (dep.ReferencePath) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <i class=\"fa-solid fa-link\"></i> {{ dep.ReferencePath }}\n                          </span>\n                        </div>\n                      }\n                      @if (dep.Alias) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <strong>Alias:</strong> <code class=\"meta-code\">{{ dep.Alias }}</code>\n                          </span>\n                        </div>\n                      }\n                    </div>\n                    <div class=\"item-card-footer\">\n                      <span class=\"open-link\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n                      </span>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Entities Panel -->\n        @if (record.IsSaved || EditMode) {\n          <mj-accordion-panel SectionKey=\"entities\" SectionTitle=\"Entities\" SectionIcon=\"fa-solid fa-database\"\n            [(Expanded)]=\"entitiesPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-database panel-icon\"></i>\n                Entities\n                @if (queryEntities.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryEntities.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingEntities) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading entities...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryEntities.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-database\"\n                    Title=\"No Entities Tracked\"\n                    Message=\"Track which entities this query uses for documentation.\"\n                    [ActionText]=\"EditMode ? 'Add First Entity' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addEntity()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Entity\n                      </button>\n                    </div>\n                  }\n                  <div class=\"card-grid\">\n                    @for (entity of queryEntities; track entity.ID || $index) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-table item-name-icon entity-icon\"></i>\n                            {{ entity.Entity || 'Select Entity...' }}\n                          </div>\n                          @if (EditMode) {\n                            <div class=\"entity-dropdown-wrapper\">\n                              <mj-dropdown\n                                [(ngModel)]=\"entity.EntityID\"\n                                [name]=\"'entity_' + (entity.ID || $index)\"\n                                [Data]=\"getEntityOptions()\"\n                                TextField=\"text\"\n                                ValueField=\"id\"\n                                [ValuePrimitive]=\"true\"\n                                Placeholder=\"Select entity...\"\n                                class=\"entity-dropdown\">\n                              </mj-dropdown>\n                            </div>\n                          }\n                        </div>\n                        @if (!EditMode && entity.Entity) {\n                          <div class=\"item-card-body\">\n                            <div class=\"item-meta\">\n                              <span class=\"meta-tag\">\n                                <i class=\"fa-solid fa-database\"></i> Data Source\n                              </span>\n                              @if (entity.DetectionMethod) {\n                                <span class=\"meta-tag\" title=\"How this entity link was detected\">\n                                  <strong>Detected by:</strong> {{ entity.DetectionMethod }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        }\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteEntity(entity)\" title=\"Delete entity\">\n                              <i class=\"fa-solid fa-trash\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Details Panel -->\n        <mj-accordion-panel SectionKey=\"details\" SectionTitle=\"Details\" SectionIcon=\"fa-solid fa-info-circle\"\n          [(Expanded)]=\"detailsPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title\">\n              <i class=\"fa-solid fa-info-circle panel-icon\"></i>\n              Details\n            </span>\n          </ng-template>\n\n          <div class=\"panel-body\">\n            <div class=\"details-grid\">\n              <!-- Reusable -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-puzzle-piece\"></i> Reusable\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.Reusable\" name=\"reusable\"></mj-switch>\n                  <div class=\"detail-hint\">Allow other queries to reference this query using composition syntax</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.Reusable) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Reusable</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Not Reusable</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache Enabled -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-bolt\"></i> Cache Enabled\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.CacheEnabled\" name=\"cacheEnabled\"></mj-switch>\n                  <div class=\"detail-hint\">Cache query results in memory to reduce database load on repeated runs</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.CacheEnabled) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Caching On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Caching Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache TTL -->\n              @if (record.CacheEnabled) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-clock\"></i> Cache TTL (Minutes)\n                  </label>\n                  @if (EditMode) {\n                    <input class=\"mj-input detail-input-narrow\"\n                      type=\"number\"\n                      [(ngModel)]=\"record.CacheTTLMinutes\"\n                      name=\"cacheTTLMinutes\"\n                      min=\"1\"\n                      placeholder=\"Default\" />\n                    <div class=\"detail-hint\">How long cached results remain valid. Leave blank for default TTL.</div>\n                  } @else {\n                    <div class=\"detail-value\">{{ record.CacheTTLMinutes != null ? record.CacheTTLMinutes + ' min' : 'Default' }}</div>\n                  }\n                </div>\n              }\n\n              <!-- Audit Query Runs -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-clipboard-list\"></i> Audit Runs\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.AuditQueryRuns\" name=\"auditQueryRuns\"></mj-switch>\n                  <div class=\"detail-hint\">Log all executions of this query to the Audit Log for tracking and compliance</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.AuditQueryRuns) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Auditing On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Auditing Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Uses Template -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-file-code\"></i> Template Usage\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></mj-switch>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.UsesTemplate) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> No Templates</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Created Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-plus\"></i> Created\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_CreatedAt) }}</div>\n              </div>\n\n              <!-- Updated Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-check\"></i> Last Updated\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_UpdatedAt) }}</div>\n              </div>\n\n              <!-- Quality Rank -->\n              @if (record.QualityRank != null) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-star\"></i> Quality Rank\n                  </label>\n                  <div class=\"detail-value\">{{ record.QualityRank }}/10</div>\n                </div>\n              }\n            </div>\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Permissions Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel SectionKey=\"permissions\" SectionTitle=\"Permissions\" SectionIcon=\"fa-solid fa-shield-alt\"\n            [(Expanded)]=\"permissionsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-shield-alt panel-icon\"></i>\n                Permissions\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingPermissions) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading permissions...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryPermissions.length === 0 && !EditMode) {\n                  <mj-empty-state Icon=\"fa-solid fa-shield-halved\"\n                    Title=\"No Permissions Set\"\n                    Message=\"This query uses default permissions.\" />\n                } @else {\n                  @if (EditMode) {\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Query Permissions','QueryID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: Query Permissions')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  } @else {\n                    <div class=\"permissions-list\">\n                      @for (permission of queryPermissions; track permission.ID) {\n                        <div class=\"permission-card\">\n                          <i class=\"fa-solid fa-users permission-icon\"></i>\n                          <div class=\"permission-info\">\n                            <div class=\"permission-role\">{{ permission.Role }}</div>\n                            <div class=\"permission-type\">Role Permission</div>\n                          </div>\n                          <span class=\"permission-badge\">\n                            <i class=\"fa-solid fa-play\"></i> Can Execute\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n        </mj-accordion-sections>\n\n      </div>\n    </form>\n</mj-record-form-container>\n\n<!-- Refresh metadata: always a dry run first unless the user turned that off -->\n<mj-query-refresh-dialog\n  [Visible]=\"ShowRefreshDialog\"\n  [Scope]=\"RefreshScope\"\n  [ScopeLabel]=\"RefreshScopeLabel\"\n  [AllowSkipDryRun]=\"true\"\n  [Provider]=\"ProviderToUse\"\n  (Closed)=\"OnRefreshDialogClosed()\"\n  (Applied)=\"OnRefreshApplied($event)\" />\n\n<!-- Query Run Dialog -->\n<mj-query-run-dialog\n  [query]=\"record\"\n  [parameters]=\"queryParameters\"\n  [(isVisible)]=\"showRunDialog\"\n  (onClose)=\"onRunDialogClose()\">\n</mj-query-run-dialog>\n}\n", styles: [".content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n/* ========================================\n   Saving Overlay\n   ======================================== */\n\n.saving-overlay {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.saving-spinner {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.content-saving {\n    pointer-events: none;\n    opacity: 0.6;\n}\n\n/* ========================================\n   Header Section \u2014 matches Query Browser gradient\n   ======================================== */\n\n.query-header {\n    flex-shrink: 0;\n    background: var(--mj-brand-primary);\n    border-bottom: none;\n    padding: 0;\n}\n\n.query-header-content {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px;\n}\n\n.query-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.query-name-section {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.query-title-icon {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 1.3em;\n    flex-shrink: 0;\n}\n\n.query-name-input {\n    font-size: 1.2em;\n    font-weight: 600;\n    min-width: 300px;\n    flex: 1;\n}\n\n.query-name-display {\n    margin: 0;\n    color: var(--mj-text-inverse, white);\n    font-weight: 600;\n    font-size: 1.2em;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.run-query-btn {\n    white-space: nowrap;\n}\n\n/* Meta row (category + status) */\n.query-meta-row {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.query-meta-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.meta-label {\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.75);\n    font-size: var(--mj-text-sm);\n    min-width: 60px;\n}\n\n.meta-value {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: var(--mj-text-sm);\n}\n\n.meta-dropdown {\n    min-width: 200px;\n}\n\n.status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: var(--mj-radius-xl);\n    color: var(--mj-text-inverse, white);\n    font-size: var(--mj-text-sm);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill i {\n    font-size: var(--mj-text-xs);\n}\n\n/* Description row */\n.query-description-row {\n    margin-top: 2px;\n}\n\n.query-description-input {\n    width: 100%;\n}\n\n.query-description-text {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.8);\n    font-size: var(--mj-text-sm);\n    line-height: 1.4;\n}\n\n/* ========================================\n   Status Warning Banner\n   ======================================== */\n\n\n/* ========================================\n   Main Content Area\n   ======================================== */\n\n.query-content {\n    flex: 1;\n    min-height: 0;\n    padding: 16px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface-card);\n}\n\n/* ========================================\n   Accordion Panel Overrides \u2014 Modern Style\n   ======================================== */\n\n.query-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .query-content mj-accordion-panel .mj-accordion-panel {\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    margin-bottom: 12px !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n    background: var(--mj-bg-surface) !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .mj-accordion-header {\n    background: var(--mj-bg-surface) !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: var(--mj-radius-md) !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: var(--mj-text-sm) !important;\n    transition: background 0.15s ease !important;\n}\n\n::ng-deep .query-content .mj-accordion-header:hover {\n    background: var(--mj-bg-surface-card) !important;\n}\n\n::ng-deep .query-content .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-brand-on-primary) !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\n    outline-color: var(--mj-text-inverse);\n}\n\n::ng-deep .query-content .mj-accordion-body {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface) !important;\n    border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md) !important;\n}\n\n/* ========================================\n   Panel Title & Badges\n   ======================================== */\n\n.panel-title-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-icon {\n    opacity: 0.7;\n}\n\n.sql-icon {\n    color: var(--mj-brand-primary);\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-icon {\n    color: rgba(255, 255, 255, 0.85) !important;\n    opacity: 1;\n}\n\n.panel-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n}\n\n.panel-badge.defined {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.panel-badge.count {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.defined {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n.filters-help-btn {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-right: 8px;\n    font-size: var(--mj-text-xs);\n}\n\n/* ========================================\n   Panel Body & Loading\n   ======================================== */\n\n.panel-body {\n    padding: 16px 0;\n}\n\n.panel-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.panel-toolbar {\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 20px 12px;\n}\n\n/* ========================================\n   SQL Panel\n   ======================================== */\n\n.sql-panel-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.sql-editor {\n    flex: 1;\n    height: 400px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm);\n    margin: 16px;\n}\n\n/* Filters Help */\n.filters-help {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n}\n\n.filters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 10px;\n}\n\n.filter-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 12px;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.filter-card:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.filter-name {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.filter-description {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.filter-syntax {\n    font-family: 'Courier New', monospace;\n    font-size: var(--mj-text-xs);\n    background: var(--mj-bg-surface-card);\n    padding: 6px;\n    border-radius: var(--mj-radius-sm);\n    margin-bottom: 4px;\n}\n\n.filter-notes {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n/* ========================================\n   Card Grid (Parameters, Fields, Entities)\n   ======================================== */\n\n.card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n    gap: 12px;\n    padding: 0 20px 20px;\n}\n\n.item-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.item-card.required {\n    border-left: 3px solid var(--mj-status-warning);\n}\n\n.item-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n}\n\n.item-name {\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon {\n    font-size: var(--mj-text-sm);\n}\n\n.item-name-icon.param-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.field-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.entity-icon {\n    color: var(--mj-status-success);\n}\n\n.item-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-inverse);\n}\n\n.item-badge.required {\n    background: var(--mj-status-warning);\n}\n\n.item-badge.type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.item-badge.sequence {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: color-mix(in srgb, var(--mj-brand-primary) 80%, var(--mj-text-violet));\n}\n\n.item-card-body {\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-sm);\n}\n\n.item-description {\n    margin-bottom: 8px;\n}\n\n.item-meta {\n    display: flex;\n    gap: 16px;\n    font-size: var(--mj-text-xs);\n}\n\n.meta-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code {\n    background: var(--mj-bg-surface-card);\n    padding: 1px 4px;\n    border-radius: var(--mj-radius-sm);\n    font-size: var(--mj-text-xs);\n}\n\n/* Card actions (edit/delete) */\n.item-actions {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.item-card:hover .item-actions {\n    opacity: 1;\n}\n\n.item-card-actions {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 8px;\n}\n\n.item-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: var(--mj-radius-sm);\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n}\n\n.item-action-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n.item-action-btn.delete:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Entity dropdown in card */\n.entity-dropdown-wrapper {\n    flex: 1;\n    margin-left: 12px;\n}\n\n.entity-dropdown {\n    width: 100%;\n}\n\n/* ========================================\n   Details Grid\n   ======================================== */\n\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 16px;\n    padding: 16px 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.detail-value {\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n}\n\n.detail-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: var(--mj-text-sm);\n}\n\n.detail-tag.positive {\n    color: var(--mj-status-success);\n}\n\n.detail-tag.neutral {\n    color: var(--mj-text-disabled);\n}\n\n.detail-hint {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.detail-input-narrow {\n    max-width: 120px;\n    padding: 4px 8px;\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Permissions\n   ======================================== */\n\n.permissions-list {\n    padding: 0 20px;\n}\n\n.permission-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon {\n    font-size: 1.3em;\n    color: var(--mj-brand-primary);\n}\n\n.permission-info {\n    flex: 1;\n}\n\n.permission-role {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: var(--mj-text-sm);\n}\n\n.permission-type {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n}\n\n.permission-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    padding: 4px 10px;\n    border-radius: var(--mj-radius-md);\n    font-size: var(--mj-text-xs);\n    font-weight: 500;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    padding: 8px 16px;\n    border-radius: var(--mj-radius-md);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 500;\n    font-size: var(--mj-text-sm);\n}\n\n.add-item-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* ========================================\n   Badge (reused across components)\n   ======================================== */\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* ========================================\n   Technical Description Panel\n   ======================================== */\n\n.technical-description-textarea {\n    width: 100%;\n    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n    font-size: 13px;\n}\n\n.technical-description-preview {\n    margin-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    padding-top: 12px;\n}\n\n.preview-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.technical-description-view {\n    max-height: 500px;\n    overflow-y: auto;\n    padding: 12px 16px;\n}\n\n/* Dependent Queries */\n.dependents-icon {\n    color: var(--mj-status-warning);\n}\n\n.dependents-description {\n    padding: 0 20px 12px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-description code {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 5px;\n    border-radius: 3px;\n    font-size: 12px;\n}\n\n.dependent-card {\n    cursor: pointer;\n    border-left: 3px solid var(--mj-status-warning) !important;\n}\n\n.dependent-card:hover {\n    border-left-color: var(--mj-status-warning-text) !important;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface)) !important;\n}\n\n.dependent-query-icon {\n    color: var(--mj-status-warning) !important;\n}\n\n.item-card-footer {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n    margin-top: 8px;\n}\n\n.open-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.dependent-card:hover .open-link {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Category selector row: tree-dropdown + create/edit icon buttons */\n.meta-dropdown-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.meta-dropdown-row .meta-dropdown {\n  flex: 1;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Metadata extraction status \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.extraction-badge {\n  --extraction-accent: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--mj-radius-full);\n  padding: 2px var(--mj-space-3);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--extraction-accent);\n  background: color-mix(in srgb, var(--extraction-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--extraction-accent) 30%, transparent);\n  white-space: nowrap;\n}\n\n.extraction-badge--ok { --extraction-accent: var(--mj-status-success); }\n.extraction-badge--warning { --extraction-accent: var(--mj-status-warning); }\n.extraction-badge--error { --extraction-accent: var(--mj-status-error); }\n.extraction-badge--skipped,\n.extraction-badge--none { --extraction-accent: var(--mj-text-muted); }\n\n.save-diagnostics {\n  margin-bottom: var(--mj-space-3);\n}\n\n.extraction-diagnostics {\n  margin-top: var(--mj-space-3);\n}\n\n/* The header sits on the brand colour: a light pill and a light outline button stay readable. */\n.query-header .extraction-badge {\n  background: var(--mj-bg-surface);\n}\n\n.query-header button.refresh-metadata-btn {\n  color: var(--mj-text-inverse);\n  border-color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n  background: transparent;\n}\n\n.query-header button.refresh-metadata-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n}\n\n/* Phone (375px): the metadata rows wrap instead of clipping their trailing button. */\n@media (max-width: 768px) {\n  .query-meta-item,\n  .meta-dropdown-row {\n    flex-wrap: wrap;\n  }\n}\n\n/* Phone: sections sit on the page's 12px gutter, so the content area drops its side padding\n   (it would indent every section twice). */\n@media (max-width: 768px) {\n    .query-content {\n        padding: 12px 0;\n        background: transparent;\n    }\n\n    /* The identity row shows the whole name on a phone instead of an ellipsis */\n    .query-name-section {\n        flex-wrap: wrap;\n        row-gap: 4px;\n    }\n\n    .query-name-display {\n        white-space: normal;\n        overflow-wrap: anywhere;\n    }\n\n    /* The identity row's status chip is compact, like the other phone heroes' */\n    .query-name-section .status-pill.phone-hero-only {\n        flex-shrink: 0;\n        padding: 2px 8px;\n        font-size: var(--mj-text-xs);\n    }\n\n    /* The phone hero matches the other forms' heroes (Actions, AI Prompts, Templates): a card\n       surface with a bottom rule and the standard text tokens, in place of the desktop brand bar.\n       The phone hero's own 12px is the only gutter. */\n    .query-header.phone-hero {\n        background: var(--mj-bg-surface-card);\n        border-bottom: 2px solid var(--mj-border-default);\n        color: var(--mj-text-primary); /* the summary line inherits this; white would vanish in light theme */\n    }\n\n    .query-header.phone-hero .query-header-content {\n        padding: 0;\n        gap: 8px;\n    }\n\n    .query-header.phone-hero .query-title-icon {\n        color: var(--mj-brand-primary);\n    }\n\n    .query-header.phone-hero .query-name-display {\n        color: var(--mj-text-secondary);\n    }\n\n    .query-header.phone-hero .meta-label {\n        color: var(--mj-text-muted);\n    }\n\n    .query-header.phone-hero .meta-value {\n        color: var(--mj-text-primary);\n    }\n\n    .query-header.phone-hero .query-description-text {\n        color: var(--mj-text-secondary);\n    }\n\n    /* The desktop rule above styles this button for the brand bar (inverse text); on the card\n       surface that text vanishes, so it takes the standard secondary-on-surface pair. Size=\"sm\"\n       is 34px tall; a touch target is 44px, like the hero's Run. */\n    .query-header.phone-hero button.refresh-metadata-btn {\n        min-height: 44px;\n        color: var(--mj-text-secondary);\n        border-color: var(--mj-border-default);\n    }\n\n    .query-header.phone-hero button.refresh-metadata-btn:hover {\n        background: var(--mj-bg-surface-hover);\n    }\n}\n", "/* ============================================\n   PHONE HERO (design call 6A), shared by the custom forms that own a hero.\n   Under 768px the hero keeps icon, name, status and the primary action. Anything tagged\n   .phone-hero-detail hides while the hero is compact and comes back when the summary line is\n   tapped. Edit mode is untouched: the host only gets .hero-compact / .hero-view in view mode.\n   Host:    .phone-hero [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\"\n   Tags:    .phone-hero-detail  hidden while compact\n            .phone-hero-hide    hidden in view mode (said elsewhere on the phone hero)\n            .phone-hero-only    shown only on phones\n            .phone-hero-top     a title + action row that stacks\n            .phone-hero-actions / .phone-hero-run   the primary action, full width at 44px\n            .phone-hero-stats   a metric row that reflows to a 2-up grid when the hero is expanded\n            .phone-hero-status  a status chip in the identity row (with .phone-hero-only)\n   ============================================ */\n.phone-hero-summary,\n.phone-hero-only {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero {\n        padding: 12px !important;\n    }\n\n    /* !important: several heroes carry inline display/padding styles on these rows */\n    .phone-hero.hero-compact .phone-hero-detail,\n    .phone-hero.hero-view .phone-hero-hide {\n        display: none !important;\n    }\n\n    .phone-hero-only {\n        display: inline-flex;\n    }\n\n    /* Lower specificity than the compact rule above, so a compact hero still hides it */\n    .phone-hero .phone-hero-stats {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    /* data-status comes from RunStatusKind(); the -text / -bg pairs keep contrast in both themes */\n    .phone-hero-status[data-status=\"running\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions {\n        width: 100%;\n    }\n\n    .phone-hero .phone-hero-run {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    /* Inherits the hero's text colour, so it reads on light heroes and on the brand-blue\n       Queries hero alike; a muted token would be grey on blue. */\n    .phone-hero-summary {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary > i {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"] > i {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary > i {\n        transition: none;\n    }\n}\n"] }]
     }], null, { SqlEditor: [{
             type: ViewChild,
             args: ['sqlEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJQueryFormComponentExtended, { className: "MJQueryFormComponentExtended", filePath: "src/lib/custom/Queries/query-form.component.ts", lineNumber: 30 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJQueryFormComponentExtended, { className: "MJQueryFormComponentExtended", filePath: "src/lib/custom/Queries/query-form.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=query-form.component.js.map