npm - @memberjunction/ng-core-entity-forms - Versions diffs - 6.2.1 → 6.3.0-edge.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

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

@@ -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