npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.37.0 → 5.39.0 - Mend

@memberjunction/ng-core-entity-forms 5.37.0 → 5.39.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 (713) hide show

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

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, ViewChild, inject } from '@angular/core';
+import { QueryEngine } from '@memberjunction/core-entities';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
-import { BaseFormComponent, CUSTOM_LAYOUT_TOOLBAR_CONFIG } from '@memberjunction/ng-base-forms';
+import { BaseFormComponent, CUSTOM_LAYOUT_TOOLBAR_CONFIG, MJFormPresenterService } from '@memberjunction/ng-base-forms';
 import { MJQueryFormComponent } from '../../generated/Entities/MJQuery/mjquery.form.component';
-import { RunView, RUN_QUERY_SQL_FILTERS, CompositeKey } from '@memberjunction/core';
+import { RUN_QUERY_SQL_FILTERS, CompositeKey } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { NavigationService } from '@memberjunction/ng-shared';
 import { Subject } from 'rxjs';
@@ -22,21 +23,20 @@ import * as i6 from "@memberjunction/ng-shared-generic";
 import * as i7 from "@memberjunction/ng-markdown";
 import * as i8 from "@memberjunction/ng-trees";
 import * as i9 from "./query-run-dialog.component";
-import * as i10 from "./query-category-dialog.component";
 const _c0 = ["sqlEditor"];
 const _forTrack0 = ($index, $item) => $item.name;
 const _forTrack1 = ($index, $item) => $item.ID || $index;
 const _forTrack2 = ($index, $item) => $item.ID;
 function MJQueryFormComponentExtended_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelement(1, "i", 47);
     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", 49);
+    i0.ɵɵelementStart(0, "input", 48);
     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) {
@@ -54,23 +54,39 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_10_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵelementStart(0, "button", 49);
     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", 51);
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.EditMode || !ctx_r1.record.SQL || ctx_r1.record.SQL.trim().length === 0);
 } }
+function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    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", 56);
+    i0.ɵɵelementEnd();
+} }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-tree-dropdown", 52);
-    i0.ɵɵlistener("ValueChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template_mj_tree_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCategoryTreeChange($event)); });
+    i0.ɵɵelementStart(0, "div", 17)(1, "mj-tree-dropdown", 51);
+    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", 52);
+    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", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Conditional_4_Template, 2, 0, "button", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("BranchConfig", ctx_r1.CategoryBranchConfig)("Value", ctx_r1.CategoryIDAsKey)("SelectableTypes", "branch")("SelectionMode", "single")("Placeholder", "Select category...")("EnableSearch", true)("Clearable", true);
+    i0.ɵɵadvance(3);
+    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);
@@ -82,9 +98,9 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r1.categoryPathDisplay || "Uncategorized");
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 53);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_22_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 57);
+    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) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -92,8 +108,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", 54);
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -105,9 +121,9 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_23_Template(rf,
     i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status || "Unknown", " ");
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 58);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Description, $event) || (ctx_r1.record.Description = $event); return i0.ɵɵresetView($event); });
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 62);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); 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();
 } if (rf & 2) {
@@ -115,7 +131,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Description);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 57);
+    i0.ɵɵelementStart(0, "p", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -125,7 +141,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_2
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1_Template, 2, 1, "textarea", 56)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_2_Template, 2, 1, "p", 57);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_1_Template, 2, 1, "textarea", 60)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_24_Conditional_2_Template, 2, 1, "p", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -133,8 +149,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_24_Template(rf,
     i0.ɵɵconditional(ctx_r1.EditMode ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, " This query has status ");
     i0.ɵɵelementStart(4, "strong");
@@ -154,15 +170,15 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_25_Template(rf,
     i0.ɵɵtextInterpolate1(". ", ctx_r1.getStatusBannerMessage(), " ");
 } }
 function MJQueryFormComponentExtended_Conditional_0_ng_template_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵelementStart(0, "span", 67);
     i0.ɵɵtext(1, "\u2014 Defined");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_ng_template_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60)(1, "span", 61);
-    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelementStart(0, "span", 64)(1, "span", 65);
+    i0.ɵɵelement(2, "i", 66);
     i0.ɵɵtext(3, " SQL ");
-    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_ng_template_28_Conditional_4_Template, 2, 0, "span", 63);
+    i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_ng_template_28_Conditional_4_Template, 2, 0, "span", 67);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -170,44 +186,44 @@ function MJQueryFormComponentExtended_Conditional_0_ng_template_28_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.SQL ? 4 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵelementStart(0, "div", 75);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r8 = i0.ɵɵnextContext().$implicit;
+    const filter_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r8.notes);
+    i0.ɵɵtextInterpolate(filter_r9.notes);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
+    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 69);
+    i0.ɵɵelementStart(3, "div", 73);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 70);
+    i0.ɵɵelementStart(5, "div", 74);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Conditional_7_Template, 2, 1, "div", 71);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Conditional_7_Template, 2, 1, "div", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r8 = ctx.$implicit;
+    const filter_r9 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r8.name);
+    i0.ɵɵtextInterpolate(filter_r9.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r8.description);
+    i0.ɵɵtextInterpolate(filter_r9.description);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(filter_r8.exampleSyntax);
+    i0.ɵɵtextInterpolate(filter_r9.exampleSyntax);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(filter_r8.notes ? 7 : -1);
+    i0.ɵɵconditional(filter_r9.notes ? 7 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "h6", 64);
-    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵelementStart(0, "div", 32)(1, "h6", 68);
+    i0.ɵɵelement(2, "i", 69);
     i0.ɵɵtext(3, " Available SQL Filters for Parameterized Queries ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 66);
-    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Template, 8, 4, "div", 67, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 70);
+    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_38_For_6_Template, 8, 4, "div", 71, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -215,15 +231,15 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_38_Template(rf,
     i0.ɵɵrepeater(ctx_r1.sqlFilters);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵelementStart(0, "span", 67);
     i0.ɵɵtext(1, "\u2014 Documented");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 77);
     i0.ɵɵtext(2, " Technical Description ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_39_ng_template_1_Conditional_3_Template, 2, 0, "span", 63);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_39_ng_template_1_Conditional_3_Template, 2, 0, "span", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -231,11 +247,11 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_39_ng_template_1
     i0.ɵɵconditional(ctx_r1.record.TechnicalDescription ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "div", 76);
-    i0.ɵɵelement(2, "i", 77);
+    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
+    i0.ɵɵelement(2, "i", 81);
     i0.ɵɵtext(3, " Preview ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-markdown", 78);
+    i0.ɵɵelement(4, "mj-markdown", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -243,12 +259,12 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3
     i0.ɵɵproperty("data", ctx_r1.record.TechnicalDescription || "")("enableMermaid", true)("enableHighlight", true)("enableCollapsibleHeadings", false)("enableSmartypants", true);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TechnicalDescription, $event) || (ctx_r1.record.TechnicalDescription = $event); return i0.ɵɵresetView($event); });
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 78);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r11); 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_39_Conditional_3_Conditional_2_Template, 5, 5, "div", 75);
+    i0.ɵɵconditionalCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Conditional_2_Template, 5, 5, "div", 79);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.TechnicalDescription);
@@ -256,8 +272,8 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3
     i0.ɵɵconditional(ctx_r1.record.TechnicalDescription ? 2 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵelement(1, "mj-markdown", 78);
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "mj-markdown", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -265,12 +281,12 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_4
     i0.ɵɵproperty("data", ctx_r1.record.TechnicalDescription || "")("enableMermaid", true)("enableHighlight", true)("enableCollapsibleHeadings", false)("enableSmartypants", true);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.technicalDescriptionPanelExpanded, $event) || (ctx_r1.technicalDescriptionPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r10); 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_39_ng_template_1_Template, 4, 1, "ng-template", 25);
     i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Template, 3, 2)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_4_Template, 2, 5, "div", 72);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_3_Template, 3, 2)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_39_Conditional_4_Template, 2, 5, "div", 76);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -279,7 +295,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_39_Template(rf,
     i0.ɵɵconditional(ctx_r1.EditMode ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 81);
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -288,10 +304,10 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1
     i0.ɵɵtextInterpolate(ctx_r1.queryParameters.length);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 80);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵtext(2, " Parameters ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1_Conditional_3_Template, 2, 1, "span", 81);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1_Conditional_3_Template, 2, 1, "span", 85);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -299,28 +315,28 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_40_ng_template_1
     i0.ɵɵconditional(ctx_r1.queryParameters.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "mj-loading", 82);
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-loading", 86);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
-    i0.ɵɵelement(1, "i", 89);
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2, " Add First Parameter ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵelement(1, "i", 84);
-    i0.ɵɵelementStart(2, "div", 85);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(2, "div", 89);
     i0.ɵɵtext(3, "No Parameters Defined");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵelementStart(4, "div", 90);
     i0.ɵɵtext(5, " Add parameters to make your query dynamic and reusable. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 87);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -328,95 +344,95 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4
     i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
-    i0.ɵɵelement(2, "i", 89);
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93)(1, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addParameter()); });
+    i0.ɵɵelement(2, "i", 53);
     i0.ɵɵtext(3, " Add Parameter ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 98);
+    i0.ɵɵelementStart(0, "span", 101);
     i0.ɵɵtext(1, "Required");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelementStart(0, "div", 103);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const param_r15 = i0.ɵɵnextContext().$implicit;
+    const param_r16 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(param_r15.Description);
+    i0.ɵɵtextInterpolate(param_r16.Description);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 102)(1, "strong");
+    i0.ɵɵelementStart(0, "span", 105)(1, "strong");
     i0.ɵɵtext(2, "Default:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "code", 104);
+    i0.ɵɵelementStart(3, "code", 107);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const param_r15 = i0.ɵɵnextContext().$implicit;
+    const param_r16 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(param_r15.DefaultValue);
+    i0.ɵɵtextInterpolate(param_r16.DefaultValue);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r16); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 106);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const param_r15 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editParameter(param_r15)); });
-    i0.ɵɵelement(2, "i", 107);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 108);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const param_r15 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteParameter(param_r15)); });
-    i0.ɵɵelement(4, "i", 109);
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r17); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "button", 109);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r17); const param_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editParameter(param_r16)); });
+    i0.ɵɵelement(2, "i", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 110);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r17); const param_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteParameter(param_r16)); });
+    i0.ɵɵelement(4, "i", 111);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Template_div_click_0_listener() { const param_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editParameter(param_r15)); });
-    i0.ɵɵelementStart(1, "div", 94)(2, "div", 95);
-    i0.ɵɵelement(3, "i", 96);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Template_div_click_0_listener() { const param_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editParameter(param_r16)); });
+    i0.ɵɵelementStart(1, "div", 97)(2, "div", 98);
+    i0.ɵɵelement(3, "i", 99);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 97);
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 2, 0, "span", 98);
+    i0.ɵɵelementStart(5, "div", 100);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 2, 0, "span", 101);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 99);
-    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "div", 100);
-    i0.ɵɵelementStart(9, "div", 101)(10, "span", 102)(11, "strong");
+    i0.ɵɵelementStart(7, "div", 102);
+    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "div", 103);
+    i0.ɵɵelementStart(9, "div", 104)(10, "span", 105)(11, "strong");
     i0.ɵɵtext(12, "Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_14_Template, 5, 1, "span", 102);
+    i0.ɵɵconditionalCreate(14, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_14_Template, 5, 1, "span", 105);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 5, 0, "div", 103);
+    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 5, 0, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const param_r15 = ctx.$implicit;
+    const param_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("required", param_r15.IsRequired);
+    i0.ɵɵclassProp("required", param_r16.IsRequired);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", param_r15.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", param_r16.Name, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(param_r15.IsRequired ? 6 : -1);
+    i0.ɵɵconditional(param_r16.IsRequired ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(param_r15.Description ? 8 : -1);
+    i0.ɵɵconditional(param_r16.Description ? 8 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", param_r15.Type || "Text", " ");
+    i0.ɵɵtextInterpolate1(" ", param_r16.Type || "Text", " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(param_r15.DefaultValue ? 14 : -1);
+    i0.ɵɵconditional(param_r16.DefaultValue ? 14 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 15 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 90);
-    i0.ɵɵelementStart(1, "div", 91);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Template, 16, 8, "div", 92, _forTrack1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 93);
+    i0.ɵɵelementStart(1, "div", 94);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_For_3_Template, 16, 8, "div", 95, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -425,18 +441,18 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4
     i0.ɵɵrepeater(ctx_r1.queryParameters);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Template, 7, 1, "div", 83)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_0_Template, 7, 1, "div", 87)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryParameters.length === 0 ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.parametersPanelExpanded, $event) || (ctx_r1.parametersPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r12); 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_40_ng_template_1_Template, 4, 1, "ng-template", 25);
     i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_3_Template, 2, 0, "div", 79)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Template, 2, 1);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_3_Template, 2, 0, "div", 83)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_40_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -445,7 +461,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_40_Template(rf,
     i0.ɵɵconditional(ctx_r1.isLoadingParameters ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 81);
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -454,10 +470,10 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1
     i0.ɵɵtextInterpolate(ctx_r1.queryFields.length);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 110);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 112);
     i0.ɵɵtext(2, " Fields ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1_Conditional_3_Template, 2, 1, "span", 81);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1_Conditional_3_Template, 2, 1, "span", 85);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -465,28 +481,28 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_41_ng_template_1
     i0.ɵɵconditional(ctx_r1.queryFields.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "mj-loading", 111);
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-loading", 113);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addField()); });
-    i0.ɵɵelement(1, "i", 89);
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addField()); });
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2, " Add First Field ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵelement(1, "i", 112);
-    i0.ɵɵelementStart(2, "div", 85);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 114);
+    i0.ɵɵelementStart(2, "div", 89);
     i0.ɵɵtext(3, "No Fields Defined");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵelementStart(4, "div", 90);
     i0.ɵɵtext(5, " Define output fields for your query results. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 87);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -494,76 +510,76 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4
     i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_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.addField()); });
-    i0.ɵɵelement(2, "i", 89);
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93)(1, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addField()); });
+    i0.ɵɵelement(2, "i", 53);
     i0.ɵɵtext(3, " Add Field ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 116);
+    i0.ɵɵelementStart(0, "span", 118);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r20 = i0.ɵɵnextContext().$implicit;
+    const field_r21 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("#", field_r20.Sequence);
+    i0.ɵɵtextInterpolate1("#", field_r21.Sequence);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelementStart(0, "div", 103);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r20 = i0.ɵɵnextContext().$implicit;
+    const field_r21 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(field_r20.Description);
+    i0.ɵɵtextInterpolate(field_r21.Description);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 118)(1, "button", 119);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r21); const field_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteField(field_r20)); });
-    i0.ɵɵelement(2, "i", 109);
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120)(1, "button", 121);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r22); const field_r21 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteField(field_r21)); });
+    i0.ɵɵelement(2, "i", 111);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 94)(2, "div", 95);
-    i0.ɵɵelement(3, "i", 114);
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 97)(2, "div", 98);
+    i0.ɵɵelement(3, "i", 116);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 97)(6, "span", 115);
+    i0.ɵɵelementStart(5, "div", 100)(6, "span", 117);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "span", 116);
+    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "span", 118);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 99);
-    i0.ɵɵconditionalCreate(10, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_10_Template, 2, 1, "div", 100);
-    i0.ɵɵelementStart(11, "div", 101)(12, "span", 102);
-    i0.ɵɵelement(13, "i", 117);
+    i0.ɵɵelementStart(9, "div", 102);
+    i0.ɵɵconditionalCreate(10, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_10_Template, 2, 1, "div", 103);
+    i0.ɵɵelementStart(11, "div", 104)(12, "span", 105);
+    i0.ɵɵelement(13, "i", 119);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 3, 0, "div", 118);
+    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 3, 0, "div", 120);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r20 = ctx.$implicit;
+    const field_r21 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", field_r20.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", field_r21.Name, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(field_r20.SQLBaseType);
+    i0.ɵɵtextInterpolate(field_r21.SQLBaseType);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(field_r20.Sequence ? 8 : -1);
+    i0.ɵɵconditional(field_r21.Sequence ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(field_r20.Description ? 10 : -1);
+    i0.ɵɵconditional(field_r21.Description ? 10 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", field_r20.SQLFullType || field_r20.SQLBaseType, " ");
+    i0.ɵɵtextInterpolate1(" ", field_r21.SQLFullType || field_r21.SQLBaseType, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 15 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 90);
-    i0.ɵɵelementStart(1, "div", 91);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Template, 16, 6, "div", 113, _forTrack2);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 93);
+    i0.ɵɵelementStart(1, "div", 94);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_For_3_Template, 16, 6, "div", 115, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -572,18 +588,18 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4
     i0.ɵɵrepeater(ctx_r1.queryFields);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Template, 7, 1, "div", 83)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_0_Template, 7, 1, "div", 87)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r1.queryFields.length === 0 ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.fieldsPanelExpanded, $event) || (ctx_r1.fieldsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r18); 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_41_ng_template_1_Template, 4, 1, "ng-template", 25);
     i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_3_Template, 2, 0, "div", 79)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Template, 2, 1);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_3_Template, 2, 0, "div", 83)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_41_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -592,10 +608,10 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_41_Template(rf,
     i0.ɵɵconditional(ctx_r1.isLoadingFields ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 122);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 124);
     i0.ɵɵtext(2, " Dependent Queries ");
-    i0.ɵɵelementStart(3, "span", 81);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -604,66 +620,66 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_42_ng_template_1
     i0.ɵɵtextInterpolate(ctx_r1.DependentQueries.length);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101)(1, "span", 102);
-    i0.ɵɵelement(2, "i", 128);
+    i0.ɵɵelementStart(0, "div", 104)(1, "span", 105);
+    i0.ɵɵelement(2, "i", 130);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const dep_r24 = i0.ɵɵnextContext().$implicit;
+    const dep_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", dep_r24.ReferencePath, " ");
+    i0.ɵɵtextInterpolate1(" ", dep_r25.ReferencePath, " ");
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101)(1, "span", 102)(2, "strong");
+    i0.ɵɵelementStart(0, "div", 104)(1, "span", 105)(2, "strong");
     i0.ɵɵtext(3, "Alias:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "code", 104);
+    i0.ɵɵelementStart(4, "code", 107);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const dep_r24 = i0.ɵɵnextContext().$implicit;
+    const dep_r25 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(dep_r24.Alias);
+    i0.ɵɵtextInterpolate(dep_r25.Alias);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Template_div_click_0_listener() { const dep_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDependentQueryClick(dep_r24)); });
-    i0.ɵɵelementStart(1, "div", 94)(2, "div", 95);
-    i0.ɵɵelement(3, "i", 124);
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 125);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_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", 97)(2, "div", 98);
+    i0.ɵɵelement(3, "i", 126);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 99);
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_6_Template, 4, 1, "div", 101);
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_7_Template, 6, 1, "div", 101);
+    i0.ɵɵelementStart(5, "div", 102);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_6_Template, 4, 1, "div", 104);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Conditional_7_Template, 6, 1, "div", 104);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 125)(9, "span", 126);
-    i0.ɵɵelement(10, "i", 127);
+    i0.ɵɵelementStart(8, "div", 127)(9, "span", 128);
+    i0.ɵɵelement(10, "i", 129);
     i0.ɵɵtext(11, " Open ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const dep_r24 = ctx.$implicit;
+    const dep_r25 = ctx.$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", dep_r24.Query, " ");
+    i0.ɵɵtextInterpolate1(" ", dep_r25.Query, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(dep_r24.ReferencePath ? 6 : -1);
+    i0.ɵɵconditional(dep_r25.ReferencePath ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(dep_r24.Alias ? 7 : -1);
+    i0.ɵɵconditional(dep_r25.Alias ? 7 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
+    const _r23 = 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(_r22); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.dependentsPanelExpanded, $event) || (ctx_r1.dependentsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_42_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_42_ng_template_1_Template, 5, 1, "ng-template", 25);
-    i0.ɵɵelementStart(2, "div", 34)(3, "div", 120);
+    i0.ɵɵelementStart(2, "div", 34)(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", 91);
-    i0.ɵɵrepeaterCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Template, 12, 3, "div", 121, _forTrack2);
+    i0.ɵɵelementStart(8, "div", 94);
+    i0.ɵɵrepeaterCreate(9, MJQueryFormComponentExtended_Conditional_0_Conditional_42_For_10_Template, 12, 3, "div", 123, _forTrack2);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -674,7 +690,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_42_Template(rf,
     i0.ɵɵrepeater(ctx_r1.DependentQueries);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 81);
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -683,10 +699,10 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1
     i0.ɵɵtextInterpolate(ctx_r1.queryEntities.length);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 129);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 131);
     i0.ɵɵtext(2, " Entities ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Conditional_3_Template, 2, 1, "span", 81);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1_Conditional_3_Template, 2, 1, "span", 85);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -694,28 +710,28 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_ng_template_1
     i0.ɵɵconditional(ctx_r1.queryEntities.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "mj-loading", 130);
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-loading", 132);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity()); });
-    i0.ɵɵelement(1, "i", 89);
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity()); });
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2, " Add First Entity ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵelement(1, "i", 131);
-    i0.ɵɵelementStart(2, "div", 85);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 133);
+    i0.ɵɵelementStart(2, "div", 89);
     i0.ɵɵtext(3, "No Entities Tracked");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵelementStart(4, "div", 90);
     i0.ɵɵtext(5, " Track which entities this query uses for documentation. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 87);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -723,64 +739,64 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4
     i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "button", 88);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity()); });
-    i0.ɵɵelement(2, "i", 89);
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93)(1, "button", 92);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_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", 53);
     i0.ɵɵtext(3, " Add Entity ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 133)(1, "mj-dropdown", 134);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_5_Template_mj_dropdown_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r28); const entity_r29 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(entity_r29.EntityID, $event) || (entity_r29.EntityID = $event); return i0.ɵɵresetView($event); });
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 135)(1, "mj-dropdown", 136);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_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); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const entity_r29 = i0.ɵɵnextContext().$implicit;
+    const entity_r30 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", entity_r29.EntityID);
-    i0.ɵɵproperty("name", "entity_" + entity_r29.ID)("Data", ctx_r1.getEntityOptions())("ValuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", entity_r30.EntityID);
+    i0.ɵɵproperty("name", "entity_" + entity_r30.ID)("Data", ctx_r1.getEntityOptions())("ValuePrimitive", true);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99)(1, "div", 101)(2, "span", 102);
-    i0.ɵɵelement(3, "i", 135);
+    i0.ɵɵelementStart(0, "div", 102)(1, "div", 104)(2, "span", 105);
+    i0.ɵɵelement(3, "i", 137);
     i0.ɵɵtext(4, " Data Source ");
     i0.ɵɵelementEnd()()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 118)(1, "button", 136);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r30); const entity_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteEntity(entity_r29)); });
-    i0.ɵɵelement(2, "i", 109);
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 120)(1, "button", 138);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r31); const entity_r30 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.deleteEntity(entity_r30)); });
+    i0.ɵɵelement(2, "i", 111);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113)(1, "div", 94)(2, "div", 95);
-    i0.ɵɵelement(3, "i", 132);
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 97)(2, "div", 98);
+    i0.ɵɵelement(3, "i", 134);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 133);
+    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 135);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 5, 0, "div", 99);
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 118);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 5, 0, "div", 102);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 120);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entity_r29 = ctx.$implicit;
+    const entity_r30 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", entity_r29.Entity || "Select Entity...", " ");
+    i0.ɵɵtextInterpolate1(" ", entity_r30.Entity || "Select Entity...", " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.EditMode && entity_r29.Entity ? 6 : -1);
+    i0.ɵɵconditional(!ctx_r1.EditMode && entity_r30.Entity ? 6 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode ? 7 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 90);
-    i0.ɵɵelementStart(1, "div", 91);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 113, _forTrack2);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 93);
+    i0.ɵɵelementStart(1, "div", 94);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 115, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -789,18 +805,18 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4
     i0.ɵɵrepeater(ctx_r1.queryEntities);
 } }
 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, 7, 1, "div", 83)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Conditional_0_Template, 7, 1, "div", 87)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_43_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_43_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
+    const _r26 = 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(_r25); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.entitiesPanelExpanded, $event) || (ctx_r1.entitiesPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_43_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_43_ng_template_1_Template, 4, 1, "ng-template", 25);
     i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_3_Template, 2, 0, "div", 79)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Template, 2, 1);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_3_Template, 2, 0, "div", 83)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_43_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -809,17 +825,17 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_43_Template(rf,
     i0.ɵɵconditional(ctx_r1.isLoadingEntities ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_0_ng_template_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 137);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 139);
     i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_52_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 138);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_52_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Reusable, $event) || (ctx_r1.record.Reusable = $event); return i0.ɵɵresetView($event); });
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 140);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_52_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r32); 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", 139);
+    i0.ɵɵelementStart(1, "div", 141);
     i0.ɵɵtext(2, "Allow other queries to reference this query using composition syntax");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -827,20 +843,20 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_52_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Reusable);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 140);
-    i0.ɵɵelement(1, "i", 142);
+    i0.ɵɵelementStart(0, "span", 142);
+    i0.ɵɵelement(1, "i", 144);
     i0.ɵɵtext(2, " Reusable");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
-    i0.ɵɵelement(1, "i", 143);
+    i0.ɵɵelementStart(0, "span", 143);
+    i0.ɵɵelement(1, "i", 145);
     i0.ɵɵtext(2, " Not Reusable");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_1_Template, 3, 0, "span", 140)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_2_Template, 3, 0, "span", 141);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_1_Template, 3, 0, "span", 142)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_53_Conditional_2_Template, 3, 0, "span", 143);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -848,11 +864,11 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_53_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.Reusable ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 144);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheEnabled, $event) || (ctx_r1.record.CacheEnabled = $event); return i0.ɵɵresetView($event); });
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 146);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r33); 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", 139);
+    i0.ɵɵelementStart(1, "div", 141);
     i0.ɵɵtext(2, "Cache query results in memory to reduce database load on repeated runs");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -860,20 +876,20 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_58_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.CacheEnabled);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 140);
-    i0.ɵɵelement(1, "i", 142);
+    i0.ɵɵelementStart(0, "span", 142);
+    i0.ɵɵelement(1, "i", 144);
     i0.ɵɵtext(2, " Caching On");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
-    i0.ɵɵelement(1, "i", 143);
+    i0.ɵɵelementStart(0, "span", 143);
+    i0.ɵɵelement(1, "i", 145);
     i0.ɵɵtext(2, " Caching Off");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_59_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_1_Template, 3, 0, "span", 140)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Template, 3, 0, "span", 141);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_1_Template, 3, 0, "span", 142)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Template, 3, 0, "span", 143);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -881,11 +897,11 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_59_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.CacheEnabled ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 146);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CacheTTLMinutes, $event) || (ctx_r1.record.CacheTTLMinutes = $event); return i0.ɵɵresetView($event); });
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 148);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r34); 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", 139);
+    i0.ɵɵelementStart(1, "div", 141);
     i0.ɵɵtext(2, "How long cached results remain valid. Leave blank for default TTL.");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -903,7 +919,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_5
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 36)(1, "label", 37);
-    i0.ɵɵelement(2, "i", 145);
+    i0.ɵɵelement(2, "i", 147);
     i0.ɵɵtext(3, " Cache TTL (Minutes) ");
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_4_Template, 3, 1)(5, MJQueryFormComponentExtended_Conditional_0_Conditional_60_Conditional_5_Template, 2, 1, "div", 39);
@@ -914,11 +930,11 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_60_Template(rf,
     i0.ɵɵconditional(ctx_r1.EditMode ? 4 : 5);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 147);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.AuditQueryRuns, $event) || (ctx_r1.record.AuditQueryRuns = $event); return i0.ɵɵresetView($event); });
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 149);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r35); 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", 139);
+    i0.ɵɵelementStart(1, "div", 141);
     i0.ɵɵtext(2, "Log all executions of this query to the Audit Log for tracking and compliance");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -926,20 +942,20 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_65_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.AuditQueryRuns);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 140);
-    i0.ɵɵelement(1, "i", 142);
+    i0.ɵɵelementStart(0, "span", 142);
+    i0.ɵɵelement(1, "i", 144);
     i0.ɵɵtext(2, " Auditing On");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
-    i0.ɵɵelement(1, "i", 143);
+    i0.ɵɵelementStart(0, "span", 143);
+    i0.ɵɵelement(1, "i", 145);
     i0.ɵɵtext(2, " Auditing Off");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_1_Template, 3, 0, "span", 140)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_2_Template, 3, 0, "span", 141);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_1_Template, 3, 0, "span", 142)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_66_Conditional_2_Template, 3, 0, "span", 143);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -947,29 +963,29 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_66_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.AuditQueryRuns ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-switch", 148);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.UsesTemplate, $event) || (ctx_r1.record.UsesTemplate = $event); return i0.ɵɵresetView($event); });
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-switch", 150);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_71_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r36); 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_72_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 140);
-    i0.ɵɵelement(1, "i", 142);
+    i0.ɵɵelementStart(0, "span", 142);
+    i0.ɵɵelement(1, "i", 144);
     i0.ɵɵtext(2, " Uses Templates");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_72_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
-    i0.ɵɵelement(1, "i", 143);
+    i0.ɵɵelementStart(0, "span", 143);
+    i0.ɵɵelement(1, "i", 145);
     i0.ɵɵtext(2, " No Templates");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_72_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_72_Conditional_1_Template, 3, 0, "span", 140)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_72_Conditional_2_Template, 3, 0, "span", 141);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_72_Conditional_1_Template, 3, 0, "span", 142)(2, MJQueryFormComponentExtended_Conditional_0_Conditional_72_Conditional_2_Template, 3, 0, "span", 143);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -978,7 +994,7 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_72_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_85_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 36)(1, "label", 37);
-    i0.ɵɵelement(2, "i", 149);
+    i0.ɵɵelement(2, "i", 151);
     i0.ɵɵtext(3, " Quality Rank ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 39);
@@ -990,53 +1006,53 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_85_Template(rf,
     i0.ɵɵtextInterpolate1("", ctx_r1.record.QualityRank, "/10");
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 65);
+    i0.ɵɵelement(1, "i", 152);
     i0.ɵɵtext(2, " Permissions ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "mj-loading", 151);
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-loading", 153);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵelement(1, "i", 152);
-    i0.ɵɵelementStart(2, "div", 85);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 154);
+    i0.ɵɵelementStart(2, "div", 89);
     i0.ɵɵtext(3, "No Permissions Set");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵelementStart(4, "div", 90);
     i0.ɵɵtext(5, " This query uses default permissions. ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 153);
+    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 155);
 } 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_86_Conditional_4_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 155);
-    i0.ɵɵelement(1, "i", 156);
-    i0.ɵɵelementStart(2, "div", 157)(3, "div", 158);
+    i0.ɵɵelementStart(0, "div", 157);
+    i0.ɵɵelement(1, "i", 158);
+    i0.ɵɵelementStart(2, "div", 159)(3, "div", 160);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 159);
+    i0.ɵɵelementStart(5, "div", 161);
     i0.ɵɵtext(6, "Role Permission");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "span", 160);
-    i0.ɵɵelement(8, "i", 51);
+    i0.ɵɵelementStart(7, "span", 162);
+    i0.ɵɵelement(8, "i", 50);
     i0.ɵɵtext(9, " Can Execute ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const permission_r37 = ctx.$implicit;
+    const permission_r38 = ctx.$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(permission_r37.Role);
+    i0.ɵɵtextInterpolate(permission_r38.Role);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 154);
-    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 10, 1, "div", 155, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 156);
+    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 10, 1, "div", 157, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -1044,24 +1060,24 @@ function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4
     i0.ɵɵrepeater(ctx_r1.queryPermissions);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 153)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 154);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 155)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 156);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r1.EditMode ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_0_Template, 6, 0, "div", 83)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_1_Template, 2, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Conditional_0_Template, 6, 0, "div", 87)(1, MJQueryFormComponentExtended_Conditional_0_Conditional_86_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_86_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
+    const _r37 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-accordion-panel", 24);
-    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.permissionsPanelExpanded, $event) || (ctx_r1.permissionsPanelExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ExpandedChange", function MJQueryFormComponentExtended_Conditional_0_Conditional_86_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r37); 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_86_ng_template_1_Template, 3, 0, "ng-template", 25);
     i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_3_Template, 2, 0, "div", 79)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Template, 2, 1);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_3_Template, 2, 0, "div", 83)(4, MJQueryFormComponentExtended_Conditional_0_Conditional_86_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1085,7 +1101,7 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(13, "div", 14)(14, "div", 15)(15, "label", 16);
     i0.ɵɵtext(16, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, MJQueryFormComponentExtended_Conditional_0_Conditional_17_Template, 1, 7, "mj-tree-dropdown", 17)(18, MJQueryFormComponentExtended_Conditional_0_Conditional_18_Template, 2, 1, "span", 18);
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(19, "div", 15)(20, "label", 16);
     i0.ɵɵtext(21, "Status");
@@ -1166,10 +1182,6 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_run_dialog_isVisibleChange_87_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_87_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRunDialogClose()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(88, "mj-query-category-dialog", 47);
-    i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_category_dialog_isVisibleChange_88_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showCategoryDialog, $event) || (ctx_r1.showCategoryDialog = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("onCategoryCreated", function MJQueryFormComponentExtended_Conditional_0_Template_mj_query_category_dialog_onCategoryCreated_88_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCategoryCreated($event)); });
-    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.record)("FormComponent", ctx_r1)("ToolbarConfig", ctx_r1.ToolbarConfig)("IsSaving", ctx_r1.IsSaving)("WidthMode", "full-width");
@@ -1232,8 +1244,6 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("query", ctx_r1.record)("parameters", ctx_r1.queryParameters);
     i0.ɵɵtwoWayProperty("isVisible", ctx_r1.showRunDialog);
-    i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("isVisible", ctx_r1.showCategoryDialog);
 } }
 let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJQueryFormComponent {
     constructor() {
@@ -1249,7 +1259,6 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         this.hasUnsavedChanges = false;
         this.showFiltersHelp = false;
         this.showRunDialog = false;
-        this.showCategoryDialog = false;
         this.categoryPathDisplay = '';
         this.IsSaving = false;
         // Expansion panel states
@@ -1292,6 +1301,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         // SQL Filters for help display
         this.sqlFilters = RUN_QUERY_SQL_FILTERS;
         this.navigationService = inject(NavigationService);
+        this.formPresenter = inject(MJFormPresenterService);
         this.destroy$ = new Subject();
         this.isUpdatingEditorValue = false;
         this.isInitialLoad = true;
@@ -1314,34 +1324,23 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     }
     /** Custom-layout Query form looks best full-width on first open. */
     getDefaultFormWidthMode() { return 'full-width'; }
-    /**
-     * Gets the QueryInfo metadata object for the current record, used to access Dependents.
-     */
-    get CurrentQueryInfo() {
-        if (!this.record?.ID)
-            return undefined;
-        return this.ProviderToUse.Queries.find(q => UUIDsEqual(q.ID, this.record.ID));
-    }
     /**
      * Gets queries that depend on (reference) this query via composition.
      */
     get DependentQueries() {
-        return this.CurrentQueryInfo?.Dependents ?? [];
+        return this.record?.QueryDependents ?? [];
     }
     async ngOnInit() {
         await super.ngOnInit();
         // During init, suppress per-method detectChanges to avoid NG0100.
         // We do one unified detectChanges after everything completes.
         this.isInitialLoad = true;
-        // Load categories first to ensure they're available for the dropdown
-        await this.loadCategories();
-        // Then load other data in parallel
-        await Promise.all([
-            this.loadQueryParameters(),
-            this.loadQueryFields(),
-            this.loadQueryEntities(),
-            this.loadQueryPermissions()
-        ]);
+        // Load all data synchronously from QueryEngine cache
+        this.loadCategories();
+        this.loadQueryParameters();
+        this.loadQueryFields();
+        this.loadQueryEntities();
+        this.loadQueryPermissions();
         this.isInitialLoad = false;
         this.cdr.detectChanges();
     }
@@ -1392,139 +1391,51 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     isFormReadOnly() {
         return !this.EditMode;
     }
-    async loadQueryParameters() {
+    loadQueryParameters() {
         if (this.record && this.record.ID) {
-            this.isLoadingParameters = true;
-            try {
-                const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-                const results = await rv.RunView({
-                    EntityName: 'MJ: Query Parameters',
-                    ExtraFilter: `QueryID='${this.record.ID}'`,
-                    OrderBy: 'Name ASC',
-                    ResultType: 'entity_object'
-                });
-                if (results.Success) {
-                    this.queryParameters = results.Results || [];
-                }
-            }
-            catch (error) {
-                console.error('Error loading query parameters:', error);
-            }
-            finally {
-                this.isLoadingParameters = false;
-                if (!this.isInitialLoad)
-                    this.cdr.detectChanges();
-            }
+            this.queryParameters = this.record.QueryParameters;
+            if (!this.isInitialLoad)
+                this.cdr.detectChanges();
         }
     }
-    async loadQueryFields() {
+    loadQueryFields() {
         if (this.record && this.record.ID) {
-            this.isLoadingFields = true;
-            try {
-                const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-                const results = await rv.RunView({
-                    EntityName: 'MJ: Query Fields',
-                    ExtraFilter: `QueryID='${this.record.ID}'`,
-                    OrderBy: 'Sequence ASC, Name ASC',
-                    ResultType: 'entity_object'
-                });
-                if (results.Success) {
-                    this.queryFields = results.Results || [];
-                }
-            }
-            catch (error) {
-                console.error('Error loading query fields:', error);
-            }
-            finally {
-                this.isLoadingFields = false;
-                if (!this.isInitialLoad)
-                    this.cdr.detectChanges();
-            }
+            this.queryFields = this.record.QueryFields;
+            if (!this.isInitialLoad)
+                this.cdr.detectChanges();
         }
     }
-    async loadQueryEntities() {
+    loadQueryEntities() {
         if (this.record && this.record.ID) {
-            this.isLoadingEntities = true;
-            try {
-                const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-                const results = await rv.RunView({
-                    EntityName: 'MJ: Query Entities',
-                    ExtraFilter: `QueryID='${this.record.ID}'`,
-                    OrderBy: 'Entity ASC',
-                    ResultType: 'entity_object'
-                });
-                if (results.Success) {
-                    this.queryEntities = results.Results || [];
-                    console.log('Loaded query entities:', this.queryEntities);
-                }
-            }
-            catch (error) {
-                console.error('Error loading query entities:', error);
-            }
-            finally {
-                this.isLoadingEntities = false;
-                if (!this.isInitialLoad)
-                    this.cdr.detectChanges();
-            }
+            this.queryEntities = this.record.QueryEntities;
+            if (!this.isInitialLoad)
+                this.cdr.detectChanges();
         }
     }
-    async loadQueryPermissions() {
+    loadQueryPermissions() {
         if (this.record && this.record.ID) {
-            this.isLoadingPermissions = true;
-            try {
-                const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-                const results = await rv.RunView({
-                    EntityName: 'MJ: Query Permissions',
-                    ExtraFilter: `QueryID='${this.record.ID}'`,
-                    OrderBy: 'Role ASC',
-                    ResultType: 'entity_object'
-                });
-                if (results.Success) {
-                    this.queryPermissions = results.Results || [];
-                }
-            }
-            catch (error) {
-                console.error('Error loading query permissions:', error);
-            }
-            finally {
-                this.isLoadingPermissions = false;
-                if (!this.isInitialLoad)
-                    this.cdr.detectChanges();
-            }
+            this.queryPermissions = this.record.QueryPermissions;
+            if (!this.isInitialLoad)
+                this.cdr.detectChanges();
         }
     }
-    async loadCategories() {
-        try {
-            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            const results = await rv.RunView({
-                EntityName: 'MJ: Query Categories',
-                OrderBy: 'Name',
-                ResultType: 'entity_object'
-            });
-            if (results.Success && results.Results) {
-                this.categories = results.Results;
-                // Build flat options for legacy compatibility
-                this.categoryOptions = [
-                    { text: 'Select Category...', value: '' },
-                    ...this.categories.map(cat => ({
-                        text: cat.Name,
-                        value: cat.ID
-                    }))
-                ];
-                // Build tree data after options are set
-                this.categoryTreeData = this.buildCategoryTree(this.categories);
-                // Update cached category path display
-                this.updateCategoryPathDisplay();
-                // Trigger change detection to update the view (skip during init)
-                if (!this.isInitialLoad)
-                    this.cdr.detectChanges();
-            }
-        }
-        catch (error) {
-            console.error('Error loading categories:', error);
-            this.categoryOptions = [{ text: 'Select Category...', value: '' }];
-            this.categoryTreeData = [];
-        }
+    loadCategories() {
+        this.categories = QueryEngine.Instance.Categories;
+        // Build flat options for legacy compatibility
+        this.categoryOptions = [
+            { text: 'Select Category...', value: '' },
+            ...this.categories.map(cat => ({
+                text: cat.Name,
+                value: cat.ID
+            }))
+        ];
+        // Build tree data after options are set
+        this.categoryTreeData = this.buildCategoryTree(this.categories);
+        // Update cached category path display
+        this.updateCategoryPathDisplay();
+        // Trigger change detection to update the view (skip during init)
+        if (!this.isInitialLoad)
+            this.cdr.detectChanges();
     }
     buildCategoryTree(categories) {
         const categoryMap = new Map();
@@ -1652,7 +1563,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             console.warn(`Executing query '${this.record.Name}' with status '${this.record.Status}'. Query has not been approved.`);
         }
         // Reload parameters in case they were updated
-        await this.loadQueryParameters();
+        this.loadQueryParameters();
         // Show the run dialog — set before detectChanges to avoid NG0100
         this.showRunDialog = true;
         this.cdr.detectChanges();
@@ -1739,11 +1650,50 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         this.cdr.detectChanges();
     }
     /**
-     * Handle category creation from dialog
+     * Create a new Query Category in a slide-in via the generic
+     * MJFormPresenterService. A new record opens in edit mode automatically.
+     * On save, refresh the category tree and select the new category.
      */
-    async onCategoryCreated(newCategory) {
+    async createCategory() {
+        const ref = this.formPresenter.Open({
+            EntityName: 'MJ: Query Categories',
+            Presentation: 'slide-in',
+            // Quick-create: drop the system-metadata (timestamps) section — empty
+            // for a new record. Merges over the slide-in preset (toolbar still off).
+            Config: { HiddenSectionKeys: ['systemMetadata'] },
+            Provider: this.ProviderToUse,
+        });
+        const saved = await ref.AfterSaved();
+        if (saved) {
+            this.onCategoryCreated(saved);
+        }
+    }
+    /**
+     * Edit the currently-selected category in a slide-in via the generic
+     * MJFormPresenterService. `StartInEditMode` opens the existing record
+     * editable. On save, refresh the category tree.
+     */
+    async editSelectedCategory() {
+        if (!this.record.CategoryID)
+            return;
+        const ref = this.formPresenter.Open({
+            EntityName: 'MJ: Query Categories',
+            RecordId: this.record.CategoryID,
+            Presentation: 'slide-in',
+            // Open editable + drop the system-metadata section. Partial config
+            // merges over the slide-in preset, so the toolbar stays suppressed.
+            Config: { StartInEditMode: true, HiddenSectionKeys: ['systemMetadata'] },
+            Provider: this.ProviderToUse,
+        });
+        const saved = await ref.AfterSaved();
+        if (saved) {
+            this.loadCategories();
+            this.cdr.detectChanges();
+        }
+    }
+    onCategoryCreated(newCategory) {
         // Reload categories to include the new one
-        await this.loadCategories();
+        this.loadCategories();
         // Set the new category as selected
         this.record.CategoryID = newCategory.ID;
         // Trigger change detection
@@ -1825,11 +1775,9 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             this.updateUnsavedChangesFlag();
             // Reload related data after successful save as server-side processes may have updated them
             if (this.record && this.record.ID) {
-                await Promise.all([
-                    this.loadQueryParameters(),
-                    this.loadQueryFields(),
-                    this.loadQueryEntities()
-                ]);
+                this.loadQueryParameters();
+                this.loadQueryFields();
+                this.loadQueryEntities();
                 this.updateCategoryPathDisplay();
                 this.cdr.detectChanges();
             }
@@ -1865,24 +1813,24 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
      * Handle composition token click — navigate to the referenced query
      */
     onCompositionTokenClick(event) {
-        const md = this.ProviderToUse;
+        const allQueries = QueryEngine.Instance.Queries;
         const segments = event.FullPath.split('/').map(s => s.trim()).filter(s => s.length > 0);
         if (segments.length === 0)
             return;
         const queryName = segments[segments.length - 1];
         const categorySegments = segments.slice(0, -1);
         // First try: exact match on Name + CategoryPath
-        let targetQuery = md.Queries.find(q => {
+        let targetQuery = allQueries.find(q => {
             if (q.Name !== queryName)
                 return false;
             if (categorySegments.length === 0)
                 return true;
-            const expectedPath = '/' + categorySegments.join('/') + '/';
+            const expectedPath = categorySegments.join('/');
             return q.CategoryPath === expectedPath;
         });
         // Fallback: match on Name alone
         if (!targetQuery) {
-            targetQuery = md.Queries.find(q => q.Name === queryName);
+            targetQuery = allQueries.find(q => q.Name === queryName);
         }
         if (targetQuery) {
             const compositeKey = CompositeKey.FromID(targetQuery.ID);
@@ -2040,11 +1988,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", 3, "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable"], [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"], [1, "status-warning-banner", 3, "border-left-color"], [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"], [1, "sql-editor", 3, "change", "CompositionTokenClick", "language"], [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, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [3, "isVisibleChange", "onCategoryCreated", "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"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], [1, "status-pill"], [1, "fa-solid"], ["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, "status-warning-banner"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], [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..."], [1, "empty-state"], [1, "fa-solid", "fa-sliders", "empty-state-icon"], [1, "empty-state-title"], [1, "empty-state-text"], ["type", "button", 1, "add-item-btn"], ["type", "button", 1, "add-item-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "panel-toolbar"], [1, "card-grid"], [1, "item-card", 3, "required"], [1, "item-card", 3, "click"], [1, "item-card-header"], [1, "item-name"], [1, "fa-solid", "fa-at", "item-name-icon", "param-icon"], [1, "item-badges"], [1, "item-badge", "required"], [1, "item-card-body"], [1, "item-description"], [1, "item-meta"], [1, "meta-tag"], [1, "item-actions"], [1, "meta-code"], [1, "item-actions", 3, "click"], ["type", "button", "title", "Edit parameter", 1, "item-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Delete parameter", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-table", "panel-icon"], ["text", "Loading fields..."], [1, "fa-solid", "fa-table", "empty-state-icon"], [1, "item-card"], [1, "fa-solid", "fa-columns", "item-name-icon", "field-icon"], [1, "item-badge", "type"], [1, "item-badge", "sequence"], [1, "fa-solid", "fa-code"], [1, "item-card-actions"], ["type", "button", "title", "Delete field", 1, "item-action-btn", "delete", 3, "click"], [1, "dependents-description"], [1, "item-card", "dependent-card"], [1, "fa-solid", "fa-arrow-left", "panel-icon", "dependents-icon"], [1, "item-card", "dependent-card", 3, "click"], [1, "fa-solid", "fa-arrow-left", "item-name-icon", "dependent-query-icon"], [1, "item-card-footer"], [1, "open-link"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-database", "panel-icon"], ["text", "Loading entities..."], [1, "fa-solid", "fa-database", "empty-state-icon"], [1, "fa-solid", "fa-table", "item-name-icon", "entity-icon"], [1, "entity-dropdown-wrapper"], ["TextField", "text", "ValueField", "id", "Placeholder", "Select entity...", 1, "entity-dropdown", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-database"], ["type", "button", "title", "Delete entity", 1, "item-action-btn", "delete", 3, "click"], [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..."], [1, "fa-solid", "fa-shield-alt", "empty-state-icon"], [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, 89, 39);
+        } }, 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"], [1, "status-warning-banner", 3, "border-left-color"], [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"], [1, "sql-editor", 3, "change", "CompositionTokenClick", "language"], [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, "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"], ["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, "status-warning-banner"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], [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..."], [1, "empty-state"], [1, "fa-solid", "fa-sliders", "empty-state-icon"], [1, "empty-state-title"], [1, "empty-state-text"], ["type", "button", 1, "add-item-btn"], ["type", "button", 1, "add-item-btn", 3, "click"], [1, "panel-toolbar"], [1, "card-grid"], [1, "item-card", 3, "required"], [1, "item-card", 3, "click"], [1, "item-card-header"], [1, "item-name"], [1, "fa-solid", "fa-at", "item-name-icon", "param-icon"], [1, "item-badges"], [1, "item-badge", "required"], [1, "item-card-body"], [1, "item-description"], [1, "item-meta"], [1, "meta-tag"], [1, "item-actions"], [1, "meta-code"], [1, "item-actions", 3, "click"], ["type", "button", "title", "Edit parameter", 1, "item-action-btn", 3, "click"], ["type", "button", "title", "Delete parameter", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-table", "panel-icon"], ["text", "Loading fields..."], [1, "fa-solid", "fa-table", "empty-state-icon"], [1, "item-card"], [1, "fa-solid", "fa-columns", "item-name-icon", "field-icon"], [1, "item-badge", "type"], [1, "item-badge", "sequence"], [1, "fa-solid", "fa-code"], [1, "item-card-actions"], ["type", "button", "title", "Delete field", 1, "item-action-btn", "delete", 3, "click"], [1, "dependents-description"], [1, "item-card", "dependent-card"], [1, "fa-solid", "fa-arrow-left", "panel-icon", "dependents-icon"], [1, "item-card", "dependent-card", 3, "click"], [1, "fa-solid", "fa-arrow-left", "item-name-icon", "dependent-query-icon"], [1, "item-card-footer"], [1, "open-link"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-database", "panel-icon"], ["text", "Loading entities..."], [1, "fa-solid", "fa-database", "empty-state-icon"], [1, "fa-solid", "fa-table", "item-name-icon", "entity-icon"], [1, "entity-dropdown-wrapper"], ["TextField", "text", "ValueField", "id", "Placeholder", "Select entity...", 1, "entity-dropdown", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-database"], ["type", "button", "title", "Delete entity", 1, "item-action-btn", "delete", 3, "click"], [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..."], [1, "fa-solid", "fa-shield-alt", "empty-state-icon"], [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, 88, 38);
         } 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.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJDropdownComponent, i3.MJSwitchComponent, i4.MjRecordFormContainerComponent, i4.ExplorerEntityDataGridComponent, i5.CodeEditorComponent, i6.LoadingComponent, i7.MarkdownComponent, i8.TreeDropdownComponent, i9.QueryRunDialogComponent, i10.QueryCategoryDialogComponent], 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\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\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\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\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\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\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\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\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\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\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\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\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\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\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\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.status-warning-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 16px;\n    margin: 0;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-status-warning);\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.status-warning-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\n    flex-shrink: 0;\n}\n\n.status-warning-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\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\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: white !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\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\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    font-size: var(--mj-text-sm);\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: white;\n}\n\n.panel-badge.count[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\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\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\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\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\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: white;\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%, purple);\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\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\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\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\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: white;\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.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 20px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    margin-bottom: 16px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.add-item-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\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\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\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\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}"] }); }
+        } }, dependencies: [i1.NgClass, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.MinValidator, i2.NgModel, i2.NgForm, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJDropdownComponent, i3.MJSwitchComponent, i4.MjRecordFormContainerComponent, i4.ExplorerEntityDataGridComponent, i5.CodeEditorComponent, i6.LoadingComponent, i7.MarkdownComponent, i8.TreeDropdownComponent, i9.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\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\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\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\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\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\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\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\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\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\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\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\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\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\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\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.status-warning-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 16px;\n    margin: 0;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-status-warning);\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.status-warning-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\n    flex-shrink: 0;\n}\n\n.status-warning-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\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\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: white !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\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\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    font-size: var(--mj-text-sm);\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: white;\n}\n\n.panel-badge.count[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\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\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\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\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\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: white;\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%, purple);\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\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\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\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\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: white;\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.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 20px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-base);\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    margin-bottom: 16px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.add-item-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\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\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\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\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\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}"] }); }
 };
 MJQueryFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Queries')
@@ -2052,7 +2000,7 @@ 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                <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              } @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          </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        <div class=\"status-warning-banner\" [style.border-left-color]=\"getStatusBadgeColor()\">\n          <i class=\"fa-solid\" [class]=\"getStatusBannerIcon()\"\n            [style.color]=\"getStatusBadgeColor()\"></i>\n          <span>\n            This query has status <strong>{{ record.Status }}</strong>. {{ getStatusBannerMessage() }}\n          </span>\n        </div>\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            <!-- 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            <!-- 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) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-sliders empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Parameters Defined</div>\n                    <div class=\"empty-state-text\">\n                      Add parameters to make your query dynamic and reusable.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                      </button>\n                    }\n                  </div>\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                  <div class=\"card-grid\">\n                    @for (param of queryParameters; track param.ID || $index) {\n                      <div class=\"item-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-at item-name-icon param-icon\"></i>\n                            {{ param.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            @if (param.IsRequired) {\n                              <span class=\"item-badge required\">Required</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (param.Description) {\n                            <div class=\"item-description\">{{ param.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <strong>Type:</strong> {{ param.Type || 'Text' }}\n                            </span>\n                            @if (param.DefaultValue) {\n                              <span class=\"meta-tag\">\n                                <strong>Default:</strong>\n                                <code class=\"meta-code\">{{ param.DefaultValue }}</code>\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-actions\" (click)=\"$event.stopPropagation()\">\n                            <button type=\"button\" class=\"item-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                              <i class=\"fa-solid fa-pen\"></i>\n                            </button>\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\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        <!-- Query Fields Panel -->\n        @if (record.IsSaved) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-table empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Fields Defined</div>\n                    <div class=\"empty-state-text\">\n                      Define output fields for your query results.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Field\n                      </button>\n                    }\n                  </div>\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                  <div class=\"card-grid\">\n                    @for (field of queryFields; track field.ID) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-columns item-name-icon field-icon\"></i>\n                            {{ field.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            <span class=\"item-badge type\">{{ field.SQLBaseType }}</span>\n                            @if (field.Sequence) {\n                              <span class=\"item-badge sequence\">#{{ field.Sequence }}</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (field.Description) {\n                            <div class=\"item-description\">{{ field.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                            </span>\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteField(field)\" title=\"Delete field\">\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        <!-- 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) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-database empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Entities Tracked</div>\n                    <div class=\"empty-state-text\">\n                      Track which entities this query uses for documentation.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Entity\n                      </button>\n                    }\n                  </div>\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) {\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\"\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                            </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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-alt empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Permissions Set</div>\n                    <div class=\"empty-state-text\">\n                      This query uses default permissions.\n                    </div>\n                  </div>\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<!-- 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<!-- Category Creation Dialog -->\n<mj-query-category-dialog\n  [(isVisible)]=\"showCategoryDialog\"\n  (onCategoryCreated)=\"onCategoryCreated($event)\">\n</mj-query-category-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.status-warning-banner {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 16px;\n    margin: 0;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-status-warning);\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.status-warning-banner i {\n    font-size: var(--mj-text-base);\n    flex-shrink: 0;\n}\n\n.status-warning-banner strong {\n    font-weight: 600;\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: white !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\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    font-size: var(--mj-text-sm);\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: white;\n}\n\n.panel-badge.count {\n    background: var(--mj-brand-primary);\n    color: white;\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: white;\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%, purple);\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: white;\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.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 20px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state-icon {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-title {\n    font-size: var(--mj-text-base);\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state-text {\n    font-size: var(--mj-text-sm);\n    margin-bottom: 16px;\n    color: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: var(--mj-brand-primary);\n    color: white;\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"] }]
+        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          </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        <div class=\"status-warning-banner\" [style.border-left-color]=\"getStatusBadgeColor()\">\n          <i class=\"fa-solid\" [class]=\"getStatusBannerIcon()\"\n            [style.color]=\"getStatusBadgeColor()\"></i>\n          <span>\n            This query has status <strong>{{ record.Status }}</strong>. {{ getStatusBannerMessage() }}\n          </span>\n        </div>\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            <!-- 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            <!-- 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) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-sliders empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Parameters Defined</div>\n                    <div class=\"empty-state-text\">\n                      Add parameters to make your query dynamic and reusable.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                      </button>\n                    }\n                  </div>\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                  <div class=\"card-grid\">\n                    @for (param of queryParameters; track param.ID || $index) {\n                      <div class=\"item-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-at item-name-icon param-icon\"></i>\n                            {{ param.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            @if (param.IsRequired) {\n                              <span class=\"item-badge required\">Required</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (param.Description) {\n                            <div class=\"item-description\">{{ param.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <strong>Type:</strong> {{ param.Type || 'Text' }}\n                            </span>\n                            @if (param.DefaultValue) {\n                              <span class=\"meta-tag\">\n                                <strong>Default:</strong>\n                                <code class=\"meta-code\">{{ param.DefaultValue }}</code>\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-actions\" (click)=\"$event.stopPropagation()\">\n                            <button type=\"button\" class=\"item-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                              <i class=\"fa-solid fa-pen\"></i>\n                            </button>\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\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        <!-- Query Fields Panel -->\n        @if (record.IsSaved) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-table empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Fields Defined</div>\n                    <div class=\"empty-state-text\">\n                      Define output fields for your query results.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Field\n                      </button>\n                    }\n                  </div>\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                  <div class=\"card-grid\">\n                    @for (field of queryFields; track field.ID) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-columns item-name-icon field-icon\"></i>\n                            {{ field.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            <span class=\"item-badge type\">{{ field.SQLBaseType }}</span>\n                            @if (field.Sequence) {\n                              <span class=\"item-badge sequence\">#{{ field.Sequence }}</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (field.Description) {\n                            <div class=\"item-description\">{{ field.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                            </span>\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteField(field)\" title=\"Delete field\">\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        <!-- 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) {\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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-database empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Entities Tracked</div>\n                    <div class=\"empty-state-text\">\n                      Track which entities this query uses for documentation.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Entity\n                      </button>\n                    }\n                  </div>\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) {\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\"\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                            </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                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-alt empty-state-icon\"></i>\n                    <div class=\"empty-state-title\">No Permissions Set</div>\n                    <div class=\"empty-state-text\">\n                      This query uses default permissions.\n                    </div>\n                  </div>\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<!-- 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.status-warning-banner {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 16px;\n    margin: 0;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-status-warning);\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.status-warning-banner i {\n    font-size: var(--mj-text-base);\n    flex-shrink: 0;\n}\n\n.status-warning-banner strong {\n    font-weight: 600;\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: white !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\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    font-size: var(--mj-text-sm);\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: white;\n}\n\n.panel-badge.count {\n    background: var(--mj-brand-primary);\n    color: white;\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: white;\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%, purple);\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: white;\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.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 20px;\n    text-align: center;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state-icon {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: var(--mj-text-primary);\n}\n\n.empty-state-title {\n    font-size: var(--mj-text-base);\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state-text {\n    font-size: var(--mj-text-sm);\n    margin-bottom: 16px;\n    color: var(--mj-text-disabled);\n}\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: var(--mj-brand-primary);\n    color: white;\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"] }]
     }], null, { sqlEditor: [{
             type: ViewChild,
             args: ['sqlEditor']