@memberjunction/ng-core-entity-forms 5.8.0 → 5.9.0

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

@@ -20,23 +20,24 @@ import * as i5 from "@progress/kendo-angular-dropdowns";
 import * as i6 from "@progress/kendo-angular-buttons";
 import * as i7 from "@memberjunction/ng-base-forms";
 import * as i8 from "@memberjunction/ng-code-editor";
-import * as i9 from "./query-run-dialog.component";
-import * as i10 from "./query-category-dialog.component";
+import * as i9 from "@memberjunction/ng-shared-generic";
+import * as i10 from "./query-run-dialog.component";
+import * as i11 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_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 40);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-textbox", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_8_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Name);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h4", 12);
+function MJQueryFormComponentExtended_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h4", 11);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -44,28 +45,28 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_10_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled Query");
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 41);
-    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runQuery()); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runQuery()); });
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("themeColor", "primary")("size", "large")("disabled", ctx_r2.EditMode || ctx_r2.record.Status !== "Approved" || !ctx_r2.record.SQL || ctx_r2.record.SQL.trim().length === 0);
+    i0.ɵɵproperty("themeColor", "primary")("size", "large")("disabled", ctx_r2.EditMode || !ctx_r2.record.SQL || ctx_r2.record.SQL.trim().length === 0);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 43);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_17_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_16_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.CategoryID);
     i0.ɵɵproperty("data", ctx_r2.categoryOptions)("valuePrimitive", true);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 18);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -74,56 +75,41 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_18_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.getCategoryPath() || "Uncategorized");
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_22_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Status, $event) || (ctx_r2.record.Status = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 45);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_21_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Status, $event) || (ctx_r2.record.Status = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Status);
     i0.ɵɵproperty("data", ctx_r2.statusOptions)("valuePrimitive", true);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
-} }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 47);
-} }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 48);
-} }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_1_Template, 1, 0, "i", 46);
-    i0.ɵɵconditionalCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_2_Template, 1, 0, "i", 47);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_3_Template, 1, 0, "i", 48);
-    i0.ɵɵtext(4);
+function MJQueryFormComponentExtended_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("background", ctx_r2.getStatusBadgeColor());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Status === "Approved" ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Status === "Pending" ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Status === "Rejected" ? 3 : -1);
+    i0.ɵɵclassMap(ctx_r2.getStatusBannerIcon());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status || "Unknown", " ");
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textarea", 51);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_1_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-textarea", 50);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_1_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Description);
     i0.ɵɵproperty("rows", 2);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 50);
+function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -131,18 +117,39 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_2
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.record.Description);
 } }
-function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_1_Template, 1, 2, "kendo-textarea", 49)(2, MJQueryFormComponentExtended_Conditional_1_Conditional_24_Conditional_2_Template, 2, 1, "p", 50);
+function MJQueryFormComponentExtended_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_1_Template, 1, 2, "kendo-textarea", 48)(2, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Conditional_2_Template, 2, 1, "p", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.EditMode ? 1 : 2);
 } }
+function MJQueryFormComponentExtended_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, " This query has status ");
+    i0.ɵɵelementStart(4, "strong");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("border-left-color", ctx_r2.getStatusBadgeColor());
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getStatusBannerIcon());
+    i0.ɵɵstyleProp("color", ctx_r2.getStatusBadgeColor());
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.record.Status);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(". ", ctx_r2.getStatusBannerMessage(), " ");
+} }
 function MJQueryFormComponentExtended_Conditional_1_ng_template_27_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 55);
-    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵtext(2, " Defined ");
     i0.ɵɵelementEnd();
 } }
@@ -156,10 +163,10 @@ function MJQueryFormComponentExtended_Conditional_1_ng_template_27_Template(rf,
     i0.ɵɵelementStart(5, "button", 56);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_ng_template_27_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.toggleFiltersHelp(); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelement(6, "i", 57);
-    i0.ɵɵelementStart(7, "span", 58);
+    i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Filters Help");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "i", 59);
+    i0.ɵɵelement(9, "i", 58);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -169,44 +176,44 @@ function MJQueryFormComponentExtended_Conditional_1_ng_template_27_Template(rf,
     i0.ɵɵproperty("ngClass", ctx_r2.showFiltersHelp ? "fa-chevron-up" : "fa-chevron-down");
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelementStart(0, "div", 67);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const filter_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", filter_r9.notes, " ");
+    i0.ɵɵtextInterpolate(filter_r9.notes);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "div", 65);
+    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 66);
+    i0.ɵɵelementStart(3, "div", 65);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 67);
+    i0.ɵɵelementStart(5, "div", 66);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Conditional_7_Template, 2, 1, "div", 68);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Conditional_7_Template, 2, 1, "div", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const filter_r9 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", filter_r9.name, " ");
+    i0.ɵɵtextInterpolate(filter_r9.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", filter_r9.description, " ");
+    i0.ɵɵtextInterpolate(filter_r9.description);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", filter_r9.exampleSyntax, " ");
+    i0.ɵɵtextInterpolate(filter_r9.exampleSyntax);
     i0.ɵɵadvance();
     i0.ɵɵconditional(filter_r9.notes ? 7 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "h6", 61);
-    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelementStart(0, "div", 28)(1, "h6", 60);
+    i0.ɵɵelement(2, "i", 61);
     i0.ɵɵtext(3, " Available SQL Filters for Parameterized Queries ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 63);
-    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Template, 8, 4, "div", 64, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 62);
+    i0.ɵɵrepeaterCreate(5, MJQueryFormComponentExtended_Conditional_1_Conditional_31_For_6_Template, 8, 4, "div", 63, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -214,19 +221,19 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_31_Template(rf,
     i0.ɵɵrepeater(ctx_r2.sqlFilters);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelementStart(0, "span", 70);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryParameters.length, " ");
+    i0.ɵɵtextInterpolate(ctx_r2.queryParameters.length);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 71);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵtext(2, " Query Parameters ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Conditional_3_Template, 2, 1, "span", 72);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Conditional_3_Template, 2, 1, "span", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -234,30 +241,28 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1
     i0.ɵɵconditional(ctx_r2.queryParameters.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵelement(1, "i", 73);
-    i0.ɵɵelementStart(2, "span", 74);
-    i0.ɵɵtext(3, "Loading parameters...");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "mj-loading", 71);
+    i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addParameter()); });
-    i0.ɵɵelement(1, "i", 81);
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵtext(2, " Add First Parameter ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 76);
-    i0.ɵɵelementStart(2, "div", 77);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "div", 74);
     i0.ɵɵtext(3, "No Parameters Defined");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 78);
+    i0.ɵɵelementStart(4, "div", 75);
     i0.ɵɵtext(5, " Add parameters to make your query dynamic and reusable. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 79);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -266,19 +271,19 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 82)(1, "button", 80);
+    i0.ɵɵelementStart(0, "div", 79)(1, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addParameter()); });
-    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵtext(3, " Add Parameter ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
+    i0.ɵɵelementStart(0, "span", 87);
     i0.ɵɵtext(1, "Required");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelementStart(0, "div", 89);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -287,51 +292,51 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4
     i0.ɵɵtextInterpolate(param_r14.Description);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "strong");
+    i0.ɵɵelementStart(0, "span", 91)(1, "strong");
     i0.ɵɵtext(2, "Default:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "code", 95);
+    i0.ɵɵelementStart(3, "code", 93);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const param_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", param_r14.DefaultValue, " ");
+    i0.ɵɵtextInterpolate(param_r14.DefaultValue);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵelementStart(0, "div", 94);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "button", 97);
+    i0.ɵɵelementStart(1, "button", 95);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const param_r14 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.editParameter(param_r14)); });
-    i0.ɵɵelement(2, "i", 98);
+    i0.ɵɵelement(2, "i", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 99);
+    i0.ɵɵelementStart(3, "button", 97);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const param_r14 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.deleteParameter(param_r14)); });
-    i0.ɵɵelement(4, "i", 100);
+    i0.ɵɵelement(4, "i", 98);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelementStart(0, "div", 82);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template_div_click_0_listener() { const param_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.editParameter(param_r14)); });
-    i0.ɵɵelementStart(1, "div", 86)(2, "div", 87);
-    i0.ɵɵelement(3, "i", 88);
+    i0.ɵɵelementStart(1, "div", 83)(2, "div", 84);
+    i0.ɵɵelement(3, "i", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 89);
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 2, 0, "span", 90);
+    i0.ɵɵelementStart(5, "div", 86);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 2, 0, "span", 87);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 91);
-    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "div", 92);
-    i0.ɵɵelementStart(9, "div", 93)(10, "div")(11, "strong");
+    i0.ɵɵelementStart(7, "div", 88);
+    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "div", 89);
+    i0.ɵɵelementStart(9, "div", 90)(10, "span", 91)(11, "strong");
     i0.ɵɵtext(12, "Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_14_Template, 5, 1, "div");
+    i0.ɵɵconditionalCreate(14, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_14_Template, 5, 1, "span", 91);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 5, 0, "div", 94);
+    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 5, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const param_r14 = ctx.$implicit;
@@ -351,9 +356,9 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4
     i0.ɵɵconditional(ctx_r2.EditMode ? 15 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 82);
-    i0.ɵɵelementStart(1, "div", 83);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template, 16, 8, "div", 84, _forTrack1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 79);
+    i0.ɵɵelementStart(1, "div", 80);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template, 16, 8, "div", 81, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -362,18 +367,18 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4
     i0.ɵɵrepeater(ctx_r2.queryParameters);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Template, 7, 1, "div", 75)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Template, 7, 1, "div", 72)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r2.queryParameters.length === 0 ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Template_kendo_expansionpanel_expandedChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.parametersPanelExpanded, $event) || (ctx_r2.parametersPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Template, 4, 1, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 69);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_3_Template, 4, 0, "div", 70)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Template, 2, 1);
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_32_ng_template_1_Template, 4, 1, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 30);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_3_Template, 2, 0, "div", 68)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -382,19 +387,19 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_32_Template(rf,
     i0.ɵɵconditional(ctx_r2.isLoadingParameters ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelementStart(0, "span", 70);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryFields.length, " ");
+    i0.ɵɵtextInterpolate(ctx_r2.queryFields.length);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 102);
+    i0.ɵɵelement(1, "i", 99);
     i0.ɵɵtext(2, " Query Fields ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Conditional_3_Template, 2, 1, "span", 72);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Conditional_3_Template, 2, 1, "span", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -402,28 +407,28 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1
     i0.ɵɵconditional(ctx_r2.queryFields.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "i", 103);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "mj-loading", 100);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addField()); });
-    i0.ɵɵelement(1, "i", 81);
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵtext(2, " Add First Field ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 104);
-    i0.ɵɵelementStart(2, "h5", 105);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 101);
+    i0.ɵɵelementStart(2, "div", 74);
     i0.ɵɵtext(3, "No Fields Defined");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 106);
+    i0.ɵɵelementStart(4, "div", 75);
     i0.ɵɵtext(5, " Define output fields for your query results. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 79);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -432,14 +437,14 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 82)(1, "button", 80);
+    i0.ɵɵelementStart(0, "div", 79)(1, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addField()); });
-    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵtext(3, " Add Field ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 110);
+    i0.ɵɵelementStart(0, "span", 105);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -448,7 +453,7 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4
     i0.ɵɵtextInterpolate1("#", field_r19.Sequence);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵelementStart(0, "div", 89);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -458,28 +463,28 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 115)(1, "button", 116);
+    i0.ɵɵelementStart(0, "div", 107)(1, "button", 108);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const field_r19 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.deleteField(field_r19)); });
-    i0.ɵɵelement(2, "i", 100);
+    i0.ɵɵelement(2, "i", 98);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107)(1, "div", 86)(2, "div", 87);
-    i0.ɵɵelement(3, "i", 108);
+    i0.ɵɵelementStart(0, "div", 102)(1, "div", 83)(2, "div", 84);
+    i0.ɵɵelement(3, "i", 103);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 89)(6, "span", 109);
+    i0.ɵɵelementStart(5, "div", 86)(6, "span", 104);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "span", 110);
+    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "span", 105);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 91);
-    i0.ɵɵconditionalCreate(10, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_10_Template, 2, 1, "div", 111);
-    i0.ɵɵelementStart(11, "div", 112)(12, "span", 113);
-    i0.ɵɵelement(13, "i", 114);
+    i0.ɵɵelementStart(9, "div", 88);
+    i0.ɵɵconditionalCreate(10, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_10_Template, 2, 1, "div", 89);
+    i0.ɵɵelementStart(11, "div", 90)(12, "span", 91);
+    i0.ɵɵelement(13, "i", 106);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 3, 0, "div", 115);
+    i0.ɵɵconditionalCreate(15, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 3, 0, "div", 107);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r19 = ctx.$implicit;
@@ -498,9 +503,9 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4
     i0.ɵɵconditional(ctx_r2.EditMode ? 15 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 82);
-    i0.ɵɵelementStart(1, "div", 83);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Template, 16, 6, "div", 107, _forTrack2);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 79);
+    i0.ɵɵelementStart(1, "div", 80);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Template, 16, 6, "div", 102, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -509,18 +514,18 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4
     i0.ɵɵrepeater(ctx_r2.queryFields);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Template, 7, 1, "div", 75)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Template, 7, 1, "div", 72)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r2.queryFields.length === 0 ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Template_kendo_expansionpanel_expandedChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.fieldsPanelExpanded, $event) || (ctx_r2.fieldsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Template, 4, 1, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 69);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_3_Template, 2, 0, "div", 101)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Template, 2, 1);
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_33_ng_template_1_Template, 4, 1, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 30);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_3_Template, 2, 0, "div", 68)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -529,19 +534,19 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_33_Template(rf,
     i0.ɵɵconditional(ctx_r2.isLoadingFields ? 3 : 4);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 72);
+    i0.ɵɵelementStart(0, "span", 70);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryEntities.length, " ");
+    i0.ɵɵtextInterpolate(ctx_r2.queryEntities.length);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 117);
+    i0.ɵɵelement(1, "i", 109);
     i0.ɵɵtext(2, " Query Entities ");
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Conditional_3_Template, 2, 1, "span", 72);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Conditional_3_Template, 2, 1, "span", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -549,28 +554,28 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1
     i0.ɵɵconditional(ctx_r2.queryEntities.length > 0 ? 3 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "i", 103);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "mj-loading", 110);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵelementStart(0, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addEntity()); });
-    i0.ɵɵelement(1, "i", 81);
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵtext(2, " Add First Entity ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 118);
-    i0.ɵɵelementStart(2, "h5", 105);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 111);
+    i0.ɵɵelementStart(2, "div", 74);
     i0.ɵɵtext(3, "No Entities Tracked");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 106);
+    i0.ɵɵelementStart(4, "div", 75);
     i0.ɵɵtext(5, " Track which entities this query uses for documentation. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 79);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -579,15 +584,15 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 82)(1, "button", 80);
+    i0.ɵɵelementStart(0, "div", 79)(1, "button", 77);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addEntity()); });
-    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵtext(3, " Add Entity ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 120)(1, "kendo-dropdownlist", 121);
+    i0.ɵɵelementStart(0, "div", 113)(1, "kendo-dropdownlist", 114);
     i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_5_Template_kendo_dropdownlist_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r24); const entity_r25 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(entity_r25.EntityID, $event) || (entity_r25.EntityID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -598,27 +603,27 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4
     i0.ɵɵproperty("name", "entity_" + entity_r25.ID)("data", ctx_r2.getEntityOptions())("valuePrimitive", true);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91)(1, "div", 112)(2, "span", 113);
-    i0.ɵɵelement(3, "i", 122);
+    i0.ɵɵelementStart(0, "div", 88)(1, "div", 90)(2, "span", 91);
+    i0.ɵɵelement(3, "i", 115);
     i0.ɵɵtext(4, " Data Source ");
     i0.ɵɵelementEnd()()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 115)(1, "button", 123);
+    i0.ɵɵelementStart(0, "div", 107)(1, "button", 116);
     i0.ɵɵlistener("click", function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r26); const entity_r25 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.deleteEntity(entity_r25)); });
-    i0.ɵɵelement(2, "i", 100);
+    i0.ɵɵelement(2, "i", 98);
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107)(1, "div", 86)(2, "div", 87);
-    i0.ɵɵelement(3, "i", 119);
+    i0.ɵɵelementStart(0, "div", 102)(1, "div", 83)(2, "div", 84);
+    i0.ɵɵelement(3, "i", 112);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 120);
+    i0.ɵɵconditionalCreate(5, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 113);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 5, 0, "div", 91);
-    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 115);
+    i0.ɵɵconditionalCreate(6, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 5, 0, "div", 88);
+    i0.ɵɵconditionalCreate(7, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 107);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const entity_r25 = ctx.$implicit;
@@ -633,9 +638,9 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4
     i0.ɵɵconditional(ctx_r2.EditMode ? 7 : -1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 82);
-    i0.ɵɵelementStart(1, "div", 83);
-    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 107, _forTrack2);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 79);
+    i0.ɵɵelementStart(1, "div", 80);
+    i0.ɵɵrepeaterCreate(2, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 102, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -644,18 +649,18 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4
     i0.ɵɵrepeater(ctx_r2.queryEntities);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Template, 7, 1, "div", 75)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Template, 4, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Template, 7, 1, "div", 72)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Template, 4, 1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r2.queryEntities.length === 0 ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Template_kendo_expansionpanel_expandedChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.entitiesPanelExpanded, $event) || (ctx_r2.entitiesPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Template, 4, 1, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 69);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_3_Template, 2, 0, "div", 101)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Template, 2, 1);
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_34_ng_template_1_Template, 4, 1, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 30);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_3_Template, 2, 0, "div", 68)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -665,13 +670,13 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_34_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_1_ng_template_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 124);
+    i0.ɵɵelement(1, "i", 117);
     i0.ɵɵtext(2, " Query Details ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-switch", 125);
+    i0.ɵɵelementStart(0, "kendo-switch", 118);
     i0.ɵɵtwoWayListener("ngModelChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_43_Template_kendo_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.UsesTemplate, $event) || (ctx_r2.record.UsesTemplate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -679,20 +684,20 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_43_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.UsesTemplate);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 126);
-    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(0, "span", 119);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵtext(2, " Uses Templates");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
-    i0.ɵɵelement(1, "i", 127);
+    i0.ɵɵelementStart(0, "span", 120);
+    i0.ɵɵelement(1, "i", 121);
     i0.ɵɵtext(2, " No Templates");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_1_Template, 3, 0, "span", 126)(2, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_2_Template, 3, 0, "span", 74);
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_1_Template, 3, 0, "span", 119)(2, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Conditional_2_Template, 3, 0, "span", 120);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -700,11 +705,11 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_44_Template(rf,
     i0.ɵɵconditional(ctx_r2.record.UsesTemplate ? 1 : 2);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "label", 32);
-    i0.ɵɵelement(2, "i", 128);
+    i0.ɵɵelementStart(0, "div", 32)(1, "label", 33);
+    i0.ɵɵelement(2, "i", 122);
     i0.ɵɵtext(3, " Quality Rank ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 35);
+    i0.ɵɵelementStart(4, "div", 36);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -714,52 +719,52 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_57_Template(rf,
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
-    i0.ɵɵelement(1, "i", 129);
+    i0.ɵɵelement(1, "i", 123);
     i0.ɵɵtext(2, " Query Permissions ");
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "i", 103);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "mj-loading", 124);
     i0.ɵɵelementEnd();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 130);
-    i0.ɵɵelementStart(2, "h5", 105);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 125);
+    i0.ɵɵelementStart(2, "div", 74);
     i0.ɵɵtext(3, "No Permissions Set");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 131);
+    i0.ɵɵelementStart(4, "div", 75);
     i0.ɵɵtext(5, " This query uses default permissions. ");
     i0.ɵɵelementEnd()();
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 132);
+    i0.ɵɵelement(0, "mj-explorer-entity-data-grid", 126);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("MJ: Query Permissions", "QueryID"))("NewRecordValues", ctx_r2.NewRecordValues("MJ: Query Permissions"))("AllowLoad", true)("ShowToolbar", false);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 134)(1, "div", 9);
-    i0.ɵɵelement(2, "i", 135);
-    i0.ɵɵelementStart(3, "div", 136)(4, "div", 137);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(0, "div", 128);
+    i0.ɵɵelement(1, "i", 129);
+    i0.ɵɵelementStart(2, "div", 130)(3, "div", 131);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 138);
-    i0.ɵɵtext(7, " Role Permission ");
+    i0.ɵɵelementStart(5, "div", 132);
+    i0.ɵɵtext(6, "Role Permission");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "span", 133);
+    i0.ɵɵelement(8, "i", 43);
+    i0.ɵɵtext(9, " Can Execute ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 139)(9, "span", 140);
-    i0.ɵɵelement(10, "i", 42);
-    i0.ɵɵtext(11, " Can Execute ");
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const permission_r29 = ctx.$implicit;
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", permission_r29.Role, " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(permission_r29.Role);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 12, 1, "div", 134, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵrepeaterCreate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 10, 1, "div", 128, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
@@ -767,24 +772,24 @@ function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4
     i0.ɵɵrepeater(ctx_r2.queryPermissions);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 132)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 133);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-explorer-entity-data-grid", 126)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 127);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r2.EditMode ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_0_Template, 6, 0, "div", 75)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Template, 2, 1);
+    i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_0_Template, 6, 0, "div", 72)(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Template, 2, 1);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r2.queryPermissions.length === 0 && !ctx_r2.EditMode ? 0 : 1);
 } }
 function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Conditional_58_Template_kendo_expansionpanel_expandedChange_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.permissionsPanelExpanded, $event) || (ctx_r2.permissionsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_ng_template_1_Template, 3, 0, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 69);
-    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_3_Template, 2, 0, "div", 101)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Template, 2, 1);
+    i0.ɵɵtemplate(1, MJQueryFormComponentExtended_Conditional_1_Conditional_58_ng_template_1_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 30);
+    i0.ɵɵconditionalCreate(3, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_3_Template, 2, 0, "div", 68)(4, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -796,68 +801,69 @@ function MJQueryFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf &
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "form", 3, 0);
     i0.ɵɵelement(2, "mj-form-toolbar", 4);
-    i0.ɵɵelementStart(3, "div", 5)(4, "div", 6)(5, "div", 7)(6, "div", 8)(7, "div", 9);
-    i0.ɵɵelement(8, "i", 10);
-    i0.ɵɵconditionalCreate(9, MJQueryFormComponentExtended_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 11)(10, MJQueryFormComponentExtended_Conditional_1_Conditional_10_Template, 2, 1, "h4", 12);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 13);
-    i0.ɵɵconditionalCreate(12, MJQueryFormComponentExtended_Conditional_1_Conditional_12_Template, 3, 3, "button", 14);
+    i0.ɵɵelementStart(3, "div", 5)(4, "div", 6)(5, "div", 7)(6, "div", 8);
+    i0.ɵɵelement(7, "i", 9);
+    i0.ɵɵconditionalCreate(8, MJQueryFormComponentExtended_Conditional_1_Conditional_8_Template, 1, 1, "kendo-textbox", 10)(9, MJQueryFormComponentExtended_Conditional_1_Conditional_9_Template, 2, 1, "h4", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 12);
+    i0.ɵɵconditionalCreate(11, MJQueryFormComponentExtended_Conditional_1_Conditional_11_Template, 3, 3, "button", 13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 15)(14, "div", 9)(15, "label", 16);
-    i0.ɵɵtext(16, "Category:");
+    i0.ɵɵelementStart(12, "div", 14)(13, "div", 15)(14, "label", 16);
+    i0.ɵɵtext(15, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, MJQueryFormComponentExtended_Conditional_1_Conditional_17_Template, 1, 3, "kendo-dropdownlist", 17)(18, MJQueryFormComponentExtended_Conditional_1_Conditional_18_Template, 2, 1, "span", 18);
+    i0.ɵɵconditionalCreate(16, MJQueryFormComponentExtended_Conditional_1_Conditional_16_Template, 1, 3, "kendo-dropdownlist", 17)(17, MJQueryFormComponentExtended_Conditional_1_Conditional_17_Template, 2, 1, "span", 18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 9)(20, "label", 19);
-    i0.ɵɵtext(21, "Status:");
+    i0.ɵɵelementStart(18, "div", 15)(19, "label", 16);
+    i0.ɵɵtext(20, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(22, MJQueryFormComponentExtended_Conditional_1_Conditional_22_Template, 1, 3, "kendo-dropdownlist", 20)(23, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Template, 5, 6, "span", 21);
+    i0.ɵɵconditionalCreate(21, MJQueryFormComponentExtended_Conditional_1_Conditional_21_Template, 1, 3, "kendo-dropdownlist", 19)(22, MJQueryFormComponentExtended_Conditional_1_Conditional_22_Template, 3, 5, "span", 20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(24, MJQueryFormComponentExtended_Conditional_1_Conditional_24_Template, 3, 1, "div");
+    i0.ɵɵconditionalCreate(23, MJQueryFormComponentExtended_Conditional_1_Conditional_23_Template, 3, 1, "div", 21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 22)(26, "kendo-expansionpanel", 23);
+    i0.ɵɵconditionalCreate(24, MJQueryFormComponentExtended_Conditional_1_Conditional_24_Template, 7, 8, "div", 22);
+    i0.ɵɵelementStart(25, "div", 23)(26, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Template_kendo_expansionpanel_expandedChange_26_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.sqlPanelExpanded, $event) || (ctx_r2.sqlPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(27, MJQueryFormComponentExtended_Conditional_1_ng_template_27_Template, 10, 2, "ng-template", 24);
-    i0.ɵɵelementStart(28, "div", 25)(29, "mj-code-editor", 26, 1);
+    i0.ɵɵtemplate(27, MJQueryFormComponentExtended_Conditional_1_ng_template_27_Template, 10, 2, "ng-template", 25);
+    i0.ɵɵelementStart(28, "div", 26)(29, "mj-code-editor", 27, 1);
     i0.ɵɵlistener("change", function MJQueryFormComponentExtended_Conditional_1_Template_mj_code_editor_change_29_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSQLChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(31, MJQueryFormComponentExtended_Conditional_1_Conditional_31_Template, 7, 0, "div", 27);
+    i0.ɵɵconditionalCreate(31, MJQueryFormComponentExtended_Conditional_1_Conditional_31_Template, 7, 0, "div", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(32, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Template, 5, 2, "kendo-expansionpanel", 28);
-    i0.ɵɵconditionalCreate(33, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Template, 5, 2, "kendo-expansionpanel", 28);
-    i0.ɵɵconditionalCreate(34, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Template, 5, 2, "kendo-expansionpanel", 28);
-    i0.ɵɵelementStart(35, "kendo-expansionpanel", 23);
+    i0.ɵɵconditionalCreate(32, MJQueryFormComponentExtended_Conditional_1_Conditional_32_Template, 5, 2, "kendo-expansionpanel", 29);
+    i0.ɵɵconditionalCreate(33, MJQueryFormComponentExtended_Conditional_1_Conditional_33_Template, 5, 2, "kendo-expansionpanel", 29);
+    i0.ɵɵconditionalCreate(34, MJQueryFormComponentExtended_Conditional_1_Conditional_34_Template, 5, 2, "kendo-expansionpanel", 29);
+    i0.ɵɵelementStart(35, "kendo-expansionpanel", 24);
     i0.ɵɵtwoWayListener("expandedChange", function MJQueryFormComponentExtended_Conditional_1_Template_kendo_expansionpanel_expandedChange_35_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.detailsPanelExpanded, $event) || (ctx_r2.detailsPanelExpanded = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(36, MJQueryFormComponentExtended_Conditional_1_ng_template_36_Template, 3, 0, "ng-template", 24);
-    i0.ɵɵelementStart(37, "div", 29)(38, "div", 30)(39, "div", 31)(40, "label", 32);
-    i0.ɵɵelement(41, "i", 33);
+    i0.ɵɵtemplate(36, MJQueryFormComponentExtended_Conditional_1_ng_template_36_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(37, "div", 30)(38, "div", 31)(39, "div", 32)(40, "label", 33);
+    i0.ɵɵelement(41, "i", 34);
     i0.ɵɵtext(42, " Template Usage ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(43, MJQueryFormComponentExtended_Conditional_1_Conditional_43_Template, 1, 1, "kendo-switch", 34)(44, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Template, 3, 1, "div", 35);
+    i0.ɵɵconditionalCreate(43, MJQueryFormComponentExtended_Conditional_1_Conditional_43_Template, 1, 1, "kendo-switch", 35)(44, MJQueryFormComponentExtended_Conditional_1_Conditional_44_Template, 3, 1, "div", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 31)(46, "label", 32);
-    i0.ɵɵelement(47, "i", 36);
+    i0.ɵɵelementStart(45, "div", 32)(46, "label", 33);
+    i0.ɵɵelement(47, "i", 37);
     i0.ɵɵtext(48, " Created ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "div", 35);
+    i0.ɵɵelementStart(49, "div", 36);
     i0.ɵɵtext(50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(51, "div", 31)(52, "label", 32);
-    i0.ɵɵelement(53, "i", 37);
+    i0.ɵɵelementStart(51, "div", 32)(52, "label", 33);
+    i0.ɵɵelement(53, "i", 38);
     i0.ɵɵtext(54, " Last Updated ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(55, "div", 35);
+    i0.ɵɵelementStart(55, "div", 36);
     i0.ɵɵtext(56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(57, MJQueryFormComponentExtended_Conditional_1_Conditional_57_Template, 6, 1, "div", 31);
+    i0.ɵɵconditionalCreate(57, MJQueryFormComponentExtended_Conditional_1_Conditional_57_Template, 6, 1, "div", 32);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(58, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Template, 5, 2, "kendo-expansionpanel", 28);
+    i0.ɵɵconditionalCreate(58, MJQueryFormComponentExtended_Conditional_1_Conditional_58_Template, 5, 2, "kendo-expansionpanel", 29);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(59, "mj-query-run-dialog", 38);
+    i0.ɵɵelementStart(59, "mj-query-run-dialog", 39);
     i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_1_Template_mj_query_run_dialog_isVisibleChange_59_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.showRunDialog, $event) || (ctx_r2.showRunDialog = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("onClose", function MJQueryFormComponentExtended_Conditional_1_Template_mj_query_run_dialog_onClose_59_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRunDialogClose()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "mj-query-category-dialog", 39);
+    i0.ɵɵelementStart(60, "mj-query-category-dialog", 40);
     i0.ɵɵtwoWayListener("isVisibleChange", function MJQueryFormComponentExtended_Conditional_1_Template_mj_query_category_dialog_isVisibleChange_60_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.showCategoryDialog, $event) || (ctx_r2.showCategoryDialog = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("onCategoryCreated", function MJQueryFormComponentExtended_Conditional_1_Template_mj_query_category_dialog_onCategoryCreated_60_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCategoryCreated($event)); });
     i0.ɵɵelementEnd();
@@ -865,16 +871,18 @@ function MJQueryFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf &
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("Form", ctx_r2);
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 8 : 9);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.record.ID ? 12 : -1);
+    i0.ɵɵconditional(ctx_r2.record.ID ? 11 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 17 : 18);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 16 : 17);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 22 : 23);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 21 : 22);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode || ctx_r2.record.Description ? 24 : -1);
+    i0.ɵɵconditional(ctx_r2.EditMode || ctx_r2.record.Description ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.Status && ctx_r2.record.Status !== "Approved" && !ctx_r2.EditMode ? 24 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtwoWayProperty("expanded", ctx_r2.sqlPanelExpanded);
     i0.ɵɵadvance(3);
@@ -933,7 +941,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         ];
         this.categories = [];
         this.categoryTreeData = [];
-        // Status options
+        // Status options — matches MJQueryEntity.Status type from database CHECK constraint
         this.statusOptions = [
             { text: 'Pending', value: 'Pending' },
             { text: 'Approved', value: 'Approved' },
@@ -945,9 +953,13 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         this.sqlFilters = RUN_QUERY_SQL_FILTERS;
         this.destroy$ = new Subject();
         this.isUpdatingEditorValue = false;
+        this.isInitialLoad = true;
     }
     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
@@ -957,7 +969,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             this.loadQueryEntities(),
             this.loadQueryPermissions()
         ]);
-        // Ensure form is properly initialized after all data is loaded
+        this.isInitialLoad = false;
         this.cdr.detectChanges();
     }
     ngOnDestroy() {
@@ -1027,6 +1039,8 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             }
             finally {
                 this.isLoadingParameters = false;
+                if (!this.isInitialLoad)
+                    this.cdr.detectChanges();
             }
         }
     }
@@ -1050,6 +1064,8 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             }
             finally {
                 this.isLoadingFields = false;
+                if (!this.isInitialLoad)
+                    this.cdr.detectChanges();
             }
         }
     }
@@ -1074,6 +1090,8 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             }
             finally {
                 this.isLoadingEntities = false;
+                if (!this.isInitialLoad)
+                    this.cdr.detectChanges();
             }
         }
     }
@@ -1097,6 +1115,8 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             }
             finally {
                 this.isLoadingPermissions = false;
+                if (!this.isInitialLoad)
+                    this.cdr.detectChanges();
             }
         }
     }
@@ -1120,8 +1140,9 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
                 ];
                 // Build tree data after options are set
                 this.categoryTreeData = this.buildCategoryTree(this.categories);
-                // Trigger change detection to update the view
-                this.cdr.detectChanges();
+                // Trigger change detection to update the view (skip during init)
+                if (!this.isInitialLoad)
+                    this.cdr.detectChanges();
             }
         }
         catch (error) {
@@ -1248,11 +1269,15 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
                 return;
             }
         }
+        // Warn if query is not approved
+        if (this.record.Status !== 'Approved') {
+            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.cdr.detectChanges();
-        // Show the run dialog
+        // Show the run dialog — set before detectChanges to avoid NG0100
         this.showRunDialog = true;
+        this.cdr.detectChanges();
     }
     /**
      * Handle run dialog close
@@ -1405,14 +1430,27 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     }
     getStatusBadgeColor() {
         switch (this.record?.Status) {
-            case 'Approved':
-                return '#28a745';
-            case 'Pending':
-                return '#ffc107';
-            case 'Rejected':
-                return '#dc3545';
-            default:
-                return '#6c757d';
+            case 'Approved': return '#28a745';
+            case 'Pending': return '#f59e0b';
+            case 'Rejected': return '#dc3545';
+            case 'Expired': return '#6c757d';
+            default: return '#6c757d';
+        }
+    }
+    getStatusBannerIcon() {
+        switch (this.record?.Status) {
+            case 'Pending': return 'fa-clock';
+            case 'Rejected': return 'fa-times-circle';
+            case 'Expired': return 'fa-archive';
+            default: return 'fa-info-circle';
+        }
+    }
+    getStatusBannerMessage() {
+        switch (this.record?.Status) {
+            case 'Pending': return 'It can be executed for testing but has not yet been approved.';
+            case 'Rejected': return 'It was rejected and may need revision before approval.';
+            case 'Expired': return 'It has expired and is no longer in active use.';
+            default: return '';
         }
     }
     /**
@@ -1530,14 +1568,14 @@ 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: 2, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [1, "query-header", 2, "flex-shrink", "0", "background", "#f8f9fa", "border-bottom", "1px solid #dee2e6", "padding", "20px"], [2, "display", "flex", "flex-direction", "column", "gap", "16px"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px"], [1, "fa-solid", "fa-database", 2, "color", "#17a2b8", "font-size", "1.4em"], ["name", "queryName", "placeholder", "Enter query name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "margin", "0", "color", "#495057", "font-weight", "600", "flex", "1"], [1, "action-buttons", 2, "display", "flex", "gap", "8px", "align-items", "center"], ["kendoButton", "", "title", "Run Query", 3, "themeColor", "size", "disabled"], [2, "display", "grid", "grid-template-columns", "1fr auto", "gap", "24px", "align-items", "center"], [2, "font-weight", "600", "color", "#495057", "min-width", "80px"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select category...", 2, "flex", "1", 3, "ngModel", "data", "valuePrimitive"], [2, "color", "#495057"], [2, "font-weight", "600", "color", "#495057", "min-width", "50px"], ["name", "status", "textField", "text", "valueField", "value", 2, "flex", "1", 3, "ngModel", "data", "valuePrimitive"], [1, "badge", 2, "color", "white", "padding", "6px 12px", "border-radius", "12px", "font-size", "0.85em", 3, "background"], [1, "query-content", 2, "flex", "1", "min-height", "0", "padding", "20px", "overflow-y", "auto", "background", "#f5f7fa"], [2, "margin-bottom", "16px", 3, "expandedChange", "expanded"], ["kendoExpansionPanelTitleDirective", ""], [2, "display", "flex", "flex-direction", "column"], [2, "flex", "1", "height", "400px", "border", "1px solid #ced4da", "border-radius", "4px", 3, "change", "language"], [1, "filters-help", 2, "background", "#f8f9fa", "border", "1px solid #dee2e6", "border-radius", "6px", "padding", "16px", "margin-top", "16px"], [2, "margin-bottom", "16px", 3, "expanded"], [2, "padding", "20px"], [1, "details-grid"], [1, "detail-item"], [1, "detail-label"], [1, "fa-solid", "fa-file-code"], ["name", "usesTemplate", 3, "ngModel"], [1, "detail-value"], [1, "fa-solid", "fa-calendar-plus"], [1, "fa-solid", "fa-calendar-check"], [3, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [3, "isVisibleChange", "onCategoryCreated", "isVisible"], ["name", "queryName", "placeholder", "Enter query name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], ["kendoButton", "", "title", "Run Query", 3, "click", "themeColor", "size", "disabled"], [1, "fa-solid", "fa-play"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select category...", 2, "flex", "1", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["name", "status", "textField", "text", "valueField", "value", 2, "flex", "1", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "badge", 2, "color", "white", "padding", "6px 12px", "border-radius", "12px", "font-size", "0.85em"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-times-circle"], ["name", "description", "placeholder", "Enter query description...", 2, "width", "100%", 3, "ngModel", "rows"], [2, "margin", "0", "color", "#6c757d", "font-size", "0.9em", "line-height", "1.4"], ["name", "description", "placeholder", "Enter query description...", 2, "width", "100%", 3, "ngModelChange", "ngModel", "rows"], [2, "display", "flex", "align-items", "center", "justify-content", "space-between", "width", "100%"], [2, "display", "flex", "align-items", "center", "gap", "8px", "font-weight", "600"], [1, "fa-solid", "fa-code", 2, "color", "#17a2b8"], [1, "badge", 2, "background", "#28a745", "color", "white", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Show/hide SQL filters help", 2, "margin-right", "8px", 3, "click"], [1, "fa-solid", "fa-question-circle"], [2, "margin-left", "4px"], [1, "fa-solid", 2, "margin-left", "4px", 3, "ngClass"], [1, "fa-solid", "fa-check"], [2, "margin", "0 0 12px 0", "color", "#495057", "font-weight", "600"], [1, "fa-solid", "fa-filter"], [2, "display", "grid", "grid-template-columns", "repeat(auto-fit, minmax(300px, 1fr))", "gap", "12px"], [1, "filter-card", 2, "background", "white", "border", "1px solid #e9ecef", "border-radius", "4px", "padding", "12px"], [2, "font-family", "'Courier New', monospace", "font-weight", "bold", "color", "#007bff", "margin-bottom", "4px"], [2, "font-size", "0.85em", "color", "#495057", "margin-bottom", "8px"], [2, "font-family", "'Courier New', monospace", "font-size", "0.8em", "background", "#f1f3f4", "padding", "6px", "border-radius", "3px", "margin-bottom", "4px"], [2, "font-size", "0.75em", "color", "#6c757d", "font-style", "italic"], [2, "padding", "16px 0"], [2, "display", "flex", "align-items", "center", "justify-content", "center", "padding", "40px"], [1, "fa-solid", "fa-sliders", 2, "color", "#6c757d"], [1, "badge", 2, "background", "#17a2b8", "color", "white", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "24px", "color", "#6c757d", "margin-right", "12px"], [2, "color", "#6c757d"], [1, "empty-state"], [1, "fa-solid", "fa-sliders", "empty-state-icon"], [1, "empty-state-title"], [1, "empty-state-text"], ["type", "button", 1, "add-param-btn"], ["type", "button", 1, "add-param-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [2, "display", "flex", "justify-content", "flex-end", "margin-bottom", "16px", "padding", "0 20px"], [1, "parameters-grid"], [1, "param-card", 3, "required"], [1, "param-card", 3, "click"], [1, "param-card-header"], [1, "param-name"], [1, "fa-solid", "fa-at", 2, "color", "#007bff"], [1, "param-badges"], [1, "param-badge", "required"], [1, "param-card-body"], [2, "margin-bottom", "8px"], [2, "display", "flex", "gap", "16px", "font-size", "0.85em"], [1, "param-actions"], [2, "background", "#f1f3f4", "padding", "2px 4px", "border-radius", "3px"], [1, "param-actions", 3, "click"], ["type", "button", "title", "Edit parameter", 1, "param-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Delete parameter", 1, "param-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [2, "display", "flex", "justify-content", "center", "padding", "40px"], [1, "fa-solid", "fa-table", 2, "color", "#6c757d"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "2em", "color", "#007bff"], [1, "fa-solid", "fa-table", 2, "font-size", "3em", "color", "#dee2e6", "margin-bottom", "12px"], [2, "color", "#6c757d", "margin-bottom", "8px"], [2, "color", "#adb5bd", "margin-bottom", "16px"], [1, "param-card"], [1, "fa-solid", "fa-columns", 2, "color", "#17a2b8"], [1, "param-badge", 2, "background", "#e3f2fd", "color", "#1976d2"], [1, "param-badge", 2, "background", "#f3e5f5", "color", "#7b1fa2"], [1, "param-description"], [1, "param-meta"], [1, "meta-item"], [1, "fa-solid", "fa-code"], [1, "param-card-actions"], ["type", "button", "title", "Delete field", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-database", 2, "color", "#6c757d"], [1, "fa-solid", "fa-database", 2, "font-size", "3em", "color", "#dee2e6", "margin-bottom", "12px"], [1, "fa-solid", "fa-table", 2, "color", "#28a745"], [2, "flex", "1", "margin-left", "12px"], ["textField", "text", "valueField", "id", "placeholder", "Select entity...", 2, "width", "100%", 3, "ngModelChange", "ngModel", "name", "data", "valuePrimitive"], [1, "fa-solid", "fa-database"], ["type", "button", "title", "Delete entity", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-info-circle", 2, "color", "#6c757d"], ["name", "usesTemplate", 3, "ngModelChange", "ngModel"], [2, "color", "#28a745"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-shield-alt", 2, "color", "#6c757d"], [1, "fa-solid", "fa-shield-alt", 2, "font-size", "3em", "color", "#dee2e6", "margin-bottom", "12px"], [2, "color", "#adb5bd"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "permissions-display"], [1, "permission-card", 2, "background", "#f8f9fa", "border", "1px solid #dee2e6", "border-radius", "8px", "padding", "16px", "margin-bottom", "12px"], [1, "fa-solid", "fa-users", 2, "font-size", "1.5em", "color", "#6c757d"], [2, "flex", "1"], [2, "font-weight", "600", "color", "#495057"], [2, "font-size", "0.85em", "color", "#6c757d"], [2, "display", "flex", "gap", "8px"], [1, "permission-badge", 2, "background", "#6f42c1", "color", "white", "padding", "4px 8px", "border-radius", "4px", "font-size", "0.8em"]], template: function MJQueryFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [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, "query-name-input", 3, "ngModel"], [1, "query-name-display"], [1, "query-header-actions"], ["kendoButton", "", "title", "Run Query", 1, "run-query-btn", 3, "themeColor", "size", "disabled"], [1, "query-meta-row"], [1, "query-meta-item"], [1, "meta-label"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select category...", 1, "meta-dropdown", 3, "ngModel", "data", "valuePrimitive"], [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"], ["kendoExpansionPanelTitleDirective", ""], [1, "sql-panel-content"], [1, "sql-editor", 3, "change", "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-file-code"], ["name", "usesTemplate", 3, "ngModel"], [1, "detail-value"], [1, "fa-solid", "fa-calendar-plus"], [1, "fa-solid", "fa-calendar-check"], [3, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [3, "isVisibleChange", "onCategoryCreated", "isVisible"], ["name", "queryName", "placeholder", "Enter query name...", 1, "query-name-input", 3, "ngModelChange", "ngModel"], ["kendoButton", "", "title", "Run Query", 1, "run-query-btn", 3, "click", "themeColor", "size", "disabled"], [1, "fa-solid", "fa-play"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select category...", 1, "meta-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["name", "status", "textField", "text", "valueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "status-pill"], [1, "fa-solid"], ["name", "description", "placeholder", "Enter query description...", 1, "query-description-input", 3, "ngModel", "rows"], [1, "query-description-text"], ["name", "description", "placeholder", "Enter query description...", 1, "query-description-input", 3, "ngModelChange", "ngModel", "rows"], [1, "status-warning-banner"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Show/hide SQL filters help", 1, "filters-help-btn", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "fa-solid", 3, "ngClass"], [1, "fa-solid", "fa-check"], [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, "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, "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", "usesTemplate", 3, "ngModelChange", "ngModel"], [1, "detail-tag", "positive"], [1, "detail-tag", "neutral"], [1, "fa-solid", "fa-times"], [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.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Template, 61, 22);
+            i0.ɵɵconditionalCreate(1, MJQueryFormComponentExtended_Conditional_1_Template, 61, 23);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record ? 1 : -1);
-        } }, dependencies: [i1.NgClass, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextBoxComponent, i4.TextAreaComponent, i4.SwitchComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.MjFormToolbarComponent, i7.ExplorerEntityDataGridComponent, i8.CodeEditorComponent, i9.QueryRunDialogComponent, i10.QueryCategoryDialogComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n\n\n\n\n\n\n\n\n\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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\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: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\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: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\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.sql-editor-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.filters-help[_ngcontent-%COMP%]   .filter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n    margin-left: auto;\n}\n\n.query-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n  .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n  .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n\n\n  .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n\n\n  .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n\n\n.parameters-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card[_ngcontent-%COMP%]:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required[_ngcontent-%COMP%] {\n    border-color: #ffc107;\n}\n\n.param-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required[_ngcontent-%COMP%] {\n    background: #ffc107;\n}\n\n.param-badge.array[_ngcontent-%COMP%] {\n    background: #9c27b0;\n}\n\n.param-card-body[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card[_ngcontent-%COMP%]:hover   .param-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.param-action-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 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: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n\n\n.category-selector[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.add-category-btn[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn[_ngcontent-%COMP%]:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\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: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn[_ngcontent-%COMP%] {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn[_ngcontent-%COMP%]:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }); }
+        } }, dependencies: [i1.NgClass, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextBoxComponent, i4.TextAreaComponent, i4.SwitchComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.MjFormToolbarComponent, i7.ExplorerEntityDataGridComponent, i8.CodeEditorComponent, i9.LoadingComponent, i10.QueryRunDialogComponent, i11.QueryCategoryDialogComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n\n\n\n\n\n\n\n\n\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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\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: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\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: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\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.query-header[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\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: #fff;\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: 13px;\n    min-width: 60px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: 14px;\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: 14px;\n    color: #fff;\n    font-size: 13px;\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: 12px;\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: 13px;\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: #fff8e1;\n    border-left: 4px solid #f59e0b;\n    font-size: 13px;\n    color: #5d4037;\n    flex-shrink: 0;\n}\n\n.status-warning-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\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: #f5f5f5;\n}\n\n\n\n\n\n\n.query-panel[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n}\n\n  .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 8px !important;\n    margin-bottom: 12px !important;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n  .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: 8px !important;\n    color: #333 !important;\n    font-weight: 600 !important;\n    font-size: 14px !important;\n    transition: background 0.15s ease !important;\n}\n\n  .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n  .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #5c6bc0 !important;\n    color: white !important;\n    border-radius: 8px 8px 0 0 !important;\n}\n\n  .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 8px 8px !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: 14px;\n    opacity: 0.7;\n}\n\n.sql-icon[_ngcontent-%COMP%] {\n    color: #5c6bc0;\n}\n\n  kendo-expansionpanel[aria-expanded=\"true\"] .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: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.panel-badge.defined[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n}\n\n.panel-badge.count[_ngcontent-%COMP%] {\n    background: #5c6bc0;\n    color: white;\n}\n\n  kendo-expansionpanel[aria-expanded=\"true\"] .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n  kendo-expansionpanel[aria-expanded=\"true\"] .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: 12px;\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 #e0e0e0;\n    border-radius: 4px;\n    margin: 16px;\n}\n\n\n\n.filters-help[_ngcontent-%COMP%] {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: #333;\n    font-weight: 600;\n    font-size: 14px;\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: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\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: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-name[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: #5c6bc0;\n    margin-bottom: 4px;\n}\n\n.filter-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #555;\n    margin-bottom: 6px;\n}\n\n.filter-syntax[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: 11px;\n    background: #f5f5f5;\n    padding: 6px;\n    border-radius: 4px;\n    margin-bottom: 4px;\n}\n\n.filter-notes[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #888;\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: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\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: #5c6bc0;\n    box-shadow: 0 2px 8px rgba(92, 107, 192, 0.12);\n}\n\n.item-card.required[_ngcontent-%COMP%] {\n    border-left: 3px solid #f59e0b;\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: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.item-name-icon.param-icon[_ngcontent-%COMP%] {\n    color: #5c6bc0;\n}\n\n.item-name-icon.field-icon[_ngcontent-%COMP%] {\n    color: #5c6bc0;\n}\n\n.item-name-icon.entity-icon[_ngcontent-%COMP%] {\n    color: #28a745;\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: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n}\n\n.item-badge.required[_ngcontent-%COMP%] {\n    background: #f59e0b;\n}\n\n.item-badge.type[_ngcontent-%COMP%] {\n    background: #e8eaf6;\n    color: #3949ab;\n}\n\n.item-badge.sequence[_ngcontent-%COMP%] {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.item-card-body[_ngcontent-%COMP%] {\n    color: #666;\n    font-size: 13px;\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: 12px;\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: #f5f5f5;\n    padding: 1px 4px;\n    border-radius: 3px;\n    font-size: 11px;\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: 4px;\n    cursor: pointer;\n    color: #888;\n    transition: all 0.15s ease;\n}\n\n.item-action-btn[_ngcontent-%COMP%]:hover {\n    background: #f0f0f0;\n    color: #5c6bc0;\n}\n\n.item-action-btn.delete[_ngcontent-%COMP%]:hover {\n    background: #fff5f5;\n    color: #dc3545;\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: 12px;\n    font-weight: 600;\n    color: #888;\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: 14px;\n    color: #333;\n}\n\n.detail-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 13px;\n}\n\n.detail-tag.positive[_ngcontent-%COMP%] {\n    color: #28a745;\n}\n\n.detail-tag.neutral[_ngcontent-%COMP%] {\n    color: #888;\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: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 1.3em;\n    color: #5c6bc0;\n}\n\n.permission-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.permission-role[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #333;\n    font-size: 14px;\n}\n\n.permission-type[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #888;\n}\n\n.permission-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: #5c6bc0;\n    color: white;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 12px;\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: #888;\n}\n\n.empty-state-icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: #333;\n}\n\n.empty-state-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: #555;\n}\n\n.empty-state-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    margin-bottom: 16px;\n    color: #888;\n}\n\n\n\n\n\n\n.add-item-btn[_ngcontent-%COMP%] {\n    background: #5c6bc0;\n    color: white;\n    border: none;\n    padding: 8px 16px;\n    border-radius: 6px;\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: 13px;\n}\n\n.add-item-btn[_ngcontent-%COMP%]:hover {\n    background: #3949ab;\n    box-shadow: 0 2px 6px rgba(92, 107, 192, 0.3);\n}\n\n\n\n\n\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}"] }); }
 };
 MJQueryFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Queries')
@@ -1545,7 +1583,7 @@ MJQueryFormComponentExtended = __decorate([
 export { MJQueryFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJQueryFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-query-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n      <!-- Header Section -->\n      <div class=\"query-header\" style=\"flex-shrink: 0; background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 20px;\">\n        <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n\n          <!-- Top Row: Name and Run Button -->\n          <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n            <!-- Left: Query Name -->\n            <div style=\"flex: 1; min-width: 0;\">\n              <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <i class=\"fa-solid fa-database\" style=\"color: #17a2b8; font-size: 1.4em;\"></i>\n                @if (EditMode) {\n                  <kendo-textbox [(ngModel)]=\"record.Name\"\n                    name=\"queryName\"\n                    placeholder=\"Enter query name...\"\n                    style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                  </kendo-textbox>\n                } @else {\n                  <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Query' }}</h4>\n                }\n              </div>\n            </div>\n\n            <!-- Right: Action Buttons -->\n            <div class=\"action-buttons\" style=\"display: flex; gap: 8px; align-items: center;\">\n              @if (record.ID) {\n                <button kendoButton\n                  [themeColor]=\"'primary'\"\n                  [size]=\"'large'\"\n                  [disabled]=\"EditMode || record.Status !== 'Approved' || !record.SQL || record.SQL.trim().length === 0\"\n                  (click)=\"runQuery()\"\n                  title=\"Run Query\">\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 style=\"display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;\">\n            <!-- Category -->\n            <div style=\"display: flex; align-items: center; gap: 12px;\">\n              <label style=\"font-weight: 600; color: #495057; min-width: 80px;\">Category:</label>\n              @if (EditMode) {\n                <kendo-dropdownlist\n                  [(ngModel)]=\"record.CategoryID\"\n                  name=\"categoryId\"\n                  [data]=\"categoryOptions\"\n                  textField=\"text\"\n                  valueField=\"value\"\n                  [valuePrimitive]=\"true\"\n                  placeholder=\"Select category...\"\n                  style=\"flex: 1;\">\n                </kendo-dropdownlist>\n              } @else {\n                <span style=\"color: #495057;\">{{ getCategoryPath() || 'Uncategorized' }}</span>\n              }\n            </div>\n\n            <!-- Status -->\n            <div style=\"display: flex; align-items: center; gap: 12px;\">\n              <label style=\"font-weight: 600; color: #495057; min-width: 50px;\">Status:</label>\n              @if (EditMode) {\n                <kendo-dropdownlist\n                  [(ngModel)]=\"record.Status\"\n                  name=\"status\"\n                  [data]=\"statusOptions\"\n                  textField=\"text\"\n                  valueField=\"value\"\n                  [valuePrimitive]=\"true\"\n                  style=\"flex: 1;\">\n                </kendo-dropdownlist>\n              } @else {\n                <span class=\"badge\"\n                  [style.background]=\"getStatusBadgeColor()\"\n                  style=\"color: white; padding: 6px 12px; border-radius: 12px; font-size: 0.85em;\">\n                  @if (record.Status === 'Approved') {\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                  }\n                  @if (record.Status === 'Pending') {\n                    <i class=\"fa-solid fa-clock\"></i>\n                  }\n                  @if (record.Status === 'Rejected') {\n                    <i class=\"fa-solid fa-times-circle\"></i>\n                  }\n                  {{ record.Status || 'Unknown' }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <!-- Third Row: Description -->\n          @if (EditMode || record.Description) {\n            <div>\n              @if (EditMode) {\n                <kendo-textarea [(ngModel)]=\"record.Description\"\n                  name=\"description\"\n                  [rows]=\"2\"\n                  placeholder=\"Enter query description...\"\n                  style=\"width: 100%;\">\n                </kendo-textarea>\n              } @else {\n                <p style=\"margin: 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Main Content Area with Expansion Panels -->\n      <div class=\"query-content\" style=\"flex: 1; min-height: 0; padding: 20px; overflow-y: auto; background: #f5f7fa;\">\n\n        <!-- SQL Query Panel -->\n        <kendo-expansionpanel\n          [(expanded)]=\"sqlPanelExpanded\"\n          style=\"margin-bottom: 16px;\">\n          <ng-template kendoExpansionPanelTitleDirective>\n            <span style=\"display: flex; align-items: center; justify-content: space-between; width: 100%;\">\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-code\" style=\"color: #17a2b8;\"></i>\n                SQL\n                @if (record.SQL) {\n                  <span class=\"badge\" style=\"background: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    <i class=\"fa-solid fa-check\"></i> Defined\n                  </span>\n                }\n              </span>\n              <button type=\"button\"\n                kendoButton\n                fillMode=\"flat\"\n                size=\"small\"\n                (click)=\"toggleFiltersHelp(); $event.stopPropagation()\"\n                title=\"Show/hide SQL filters help\"\n                style=\"margin-right: 8px;\">\n                <i class=\"fa-solid fa-question-circle\"></i>\n                <span style=\"margin-left: 4px;\">Filters Help</span>\n                <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\" style=\"margin-left: 4px;\"></i>\n              </button>\n            </span>\n          </ng-template>\n\n          <div style=\"display: flex; flex-direction: column;\">\n            <!-- Code Editor -->\n            <mj-code-editor #sqlEditor\n              (change)=\"onSQLChange($event)\"\n              [language]=\"'sql'\"\n              style=\"flex: 1; height: 400px; border: 1px solid #ced4da; border-radius: 4px;\">\n            </mj-code-editor>\n\n            <!-- SQL Filters Help (Below Editor) -->\n            @if (showFiltersHelp) {\n              <div class=\"filters-help\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 16px; margin-top: 16px;\">\n                <h6 style=\"margin: 0 0 12px 0; color: #495057; font-weight: 600;\">\n                  <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                </h6>\n\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;\">\n                  @for (filter of sqlFilters; track filter.name) {\n                    <div class=\"filter-card\" style=\"background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px;\">\n                      <div style=\"font-family: 'Courier New', monospace; font-weight: bold; color: #007bff; margin-bottom: 4px;\">\n                        {{ filter.name }}\n                      </div>\n                      <div style=\"font-size: 0.85em; color: #495057; margin-bottom: 8px;\">\n                        {{ filter.description }}\n                      </div>\n                      <div style=\"font-family: 'Courier New', monospace; font-size: 0.8em; background: #f1f3f4; padding: 6px; border-radius: 3px; margin-bottom: 4px;\">\n                        {{ filter.exampleSyntax }}\n                      </div>\n                      @if (filter.notes) {\n                        <div style=\"font-size: 0.75em; color: #6c757d; font-style: italic;\">\n                          {{ filter.notes }}\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </kendo-expansionpanel>\n\n        <!-- Parameters Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"parametersPanelExpanded\"\n            style=\"margin-bottom: 16px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                Query Parameters\n                @if (queryParameters.length > 0) {\n                  <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ queryParameters.length }}\n                  </span>\n                }\n              </span>\n            </ng-template>\n\n            <div style=\"padding: 16px 0;\">\n              @if (isLoadingParameters) {\n                <div style=\"display: flex; align-items: center; justify-content: center; padding: 40px;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; color: #6c757d; margin-right: 12px;\"></i>\n                  <span style=\"color: #6c757d;\">Loading parameters...</span>\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-param-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                      </button>\n                    }\n                  </div>\n                } @else {\n                  <!-- Parameters Header with Add Button -->\n                  @if (EditMode) {\n                    <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                      <button type=\"button\" class=\"add-param-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                      </button>\n                    </div>\n                  }\n\n                  <!-- Parameters Grid -->\n                  <div class=\"parameters-grid\">\n                    @for (param of queryParameters; track param.ID || $index) {\n                      <div class=\"param-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                        <div class=\"param-card-header\">\n                          <div class=\"param-name\">\n                            <i class=\"fa-solid fa-at\" style=\"color: #007bff;\"></i>\n                            {{ param.Name }}\n                          </div>\n                          <div class=\"param-badges\">\n                            @if (param.IsRequired) {\n                              <span class=\"param-badge required\">Required</span>\n                            }\n                          </div>\n                        </div>\n\n                        <div class=\"param-card-body\">\n                          @if (param.Description) {\n                            <div style=\"margin-bottom: 8px;\">{{ param.Description }}</div>\n                          }\n\n                          <div style=\"display: flex; gap: 16px; font-size: 0.85em;\">\n                            <div>\n                              <strong>Type:</strong> {{ param.Type || 'Text' }}\n                            </div>\n                            @if (param.DefaultValue) {\n                              <div>\n                                <strong>Default:</strong>\n                                <code style=\"background: #f1f3f4; padding: 2px 4px; border-radius: 3px;\">\n                                  {{ param.DefaultValue }}\n                                </code>\n                              </div>\n                            }\n                          </div>\n                        </div>\n\n                        @if (EditMode) {\n                          <div class=\"param-actions\" (click)=\"$event.stopPropagation()\">\n                            <button type=\"button\" class=\"param-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                              <i class=\"fa-solid fa-pen\"></i>\n                            </button>\n                            <button type=\"button\" class=\"param-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          </kendo-expansionpanel>\n        }\n\n        <!-- Query Fields Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"fieldsPanelExpanded\"\n            style=\"margin-bottom: 16px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-table\" style=\"color: #6c757d;\"></i>\n                Query Fields\n                @if (queryFields.length > 0) {\n                  <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ queryFields.length }}\n                  </span>\n                }\n              </span>\n            </ng-template>\n\n            <div style=\"padding: 16px 0;\">\n              @if (isLoadingFields) {\n                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                </div>\n              } @else {\n                @if (queryFields.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-table\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                    <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Fields Defined</h5>\n                    <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                      Define output fields for your query results.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Field\n                      </button>\n                    }\n                  </div>\n                } @else {\n                  <!-- Fields Header with Add Button -->\n                  @if (EditMode) {\n                    <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                      <button type=\"button\" class=\"add-param-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Field\n                      </button>\n                    </div>\n                  }\n\n                  <!-- Fields Grid -->\n                  <div class=\"parameters-grid\">\n                    @for (field of queryFields; track field.ID) {\n                      <div class=\"param-card\">\n                        <div class=\"param-card-header\">\n                          <div class=\"param-name\">\n                            <i class=\"fa-solid fa-columns\" style=\"color: #17a2b8;\"></i>\n                            {{ field.Name }}\n                          </div>\n                          <div class=\"param-badges\">\n                            <span class=\"param-badge\" style=\"background: #e3f2fd; color: #1976d2;\">{{ field.SQLBaseType }}</span>\n                            @if (field.Sequence) {\n                              <span class=\"param-badge\" style=\"background: #f3e5f5; color: #7b1fa2;\">#{{ field.Sequence }}</span>\n                            }\n                          </div>\n                        </div>\n\n                        <div class=\"param-card-body\">\n                          @if (field.Description) {\n                            <div class=\"param-description\">{{ field.Description }}</div>\n                          }\n                          <div class=\"param-meta\">\n                            <span class=\"meta-item\">\n                              <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                            </span>\n                          </div>\n                        </div>\n\n                        @if (EditMode) {\n                          <div class=\"param-card-actions\">\n                            <button type=\"button\" class=\"action-btn danger\" (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          </kendo-expansionpanel>\n        }\n\n        <!-- Query Entities Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"entitiesPanelExpanded\"\n            style=\"margin-bottom: 16px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n                Query Entities\n                @if (queryEntities.length > 0) {\n                  <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ queryEntities.length }}\n                  </span>\n                }\n              </span>\n            </ng-template>\n\n            <div style=\"padding: 16px 0;\">\n              @if (isLoadingEntities) {\n                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                </div>\n              } @else {\n                @if (queryEntities.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-database\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                    <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Entities Tracked</h5>\n                    <div style=\"color: #adb5bd; margin-bottom: 16px;\">\n                      Track which entities this query uses for documentation.\n                    </div>\n                    @if (EditMode) {\n                      <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add First Entity\n                      </button>\n                    }\n                  </div>\n                } @else {\n                  <!-- Entities Header with Add Button -->\n                  @if (EditMode) {\n                    <div style=\"display: flex; justify-content: flex-end; margin-bottom: 16px; padding: 0 20px;\">\n                      <button type=\"button\" class=\"add-param-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Entity\n                      </button>\n                    </div>\n                  }\n\n                  <!-- Entities Grid -->\n                  <div class=\"parameters-grid\">\n                    @for (entity of queryEntities; track entity.ID) {\n                      <div class=\"param-card\">\n                        <div class=\"param-card-header\">\n                          <div class=\"param-name\">\n                            <i class=\"fa-solid fa-table\" style=\"color: #28a745;\"></i>\n                            {{ entity.Entity || 'Select Entity...' }}\n                          </div>\n                          @if (EditMode) {\n                            <div style=\"flex: 1; margin-left: 12px;\">\n                              <kendo-dropdownlist\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                                style=\"width: 100%;\">\n                              </kendo-dropdownlist>\n                            </div>\n                          }\n                        </div>\n\n                        @if (!EditMode && entity.Entity) {\n                          <div class=\"param-card-body\">\n                            <div class=\"param-meta\">\n                              <span class=\"meta-item\">\n                                <i class=\"fa-solid fa-database\"></i> Data Source\n                              </span>\n                            </div>\n                          </div>\n                        }\n\n                        @if (EditMode) {\n                          <div class=\"param-card-actions\">\n                            <button type=\"button\" class=\"action-btn danger\" (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          </kendo-expansionpanel>\n        }\n\n        <!-- Details Panel -->\n        <kendo-expansionpanel\n          [(expanded)]=\"detailsPanelExpanded\"\n          style=\"margin-bottom: 16px;\">\n          <ng-template kendoExpansionPanelTitleDirective>\n            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n              <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n              Query Details\n            </span>\n          </ng-template>\n\n          <div style=\"padding: 20px;\">\n            <div class=\"details-grid\">\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                  <kendo-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></kendo-switch>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.UsesTemplate) {\n                      <span style=\"color: #28a745;\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                    } @else {\n                      <span style=\"color: #6c757d;\"><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        </kendo-expansionpanel>\n\n        <!-- Permissions Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"permissionsPanelExpanded\"\n            style=\"margin-bottom: 16px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-shield-alt\" style=\"color: #6c757d;\"></i>\n                Query Permissions\n              </span>\n            </ng-template>\n\n            <div style=\"padding: 16px 0;\">\n              @if (isLoadingPermissions) {\n                <div style=\"display: flex; justify-content: center; padding: 40px;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; color: #007bff;\"></i>\n                </div>\n              } @else {\n                @if (queryPermissions.length === 0 && !EditMode) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-alt\" style=\"font-size: 3em; color: #dee2e6; margin-bottom: 12px;\"></i>\n                    <h5 style=\"color: #6c757d; margin-bottom: 8px;\">No Permissions Set</h5>\n                    <div style=\"color: #adb5bd;\">\n                      This query uses default permissions.\n                    </div>\n                  </div>\n                } @else {\n                  @if (EditMode) {\n                    <!-- Edit Mode: Use the standard grid -->\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                    <!-- Read Mode: Nice card-based display -->\n                    <div class=\"permissions-display\">\n                      @for (permission of queryPermissions; track permission.ID) {\n                        <div class=\"permission-card\" style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; margin-bottom: 12px;\">\n                          <div style=\"display: flex; align-items: center; gap: 12px;\">\n                            <i class=\"fa-solid fa-users\" style=\"font-size: 1.5em; color: #6c757d;\"></i>\n                            <div style=\"flex: 1;\">\n                              <div style=\"font-weight: 600; color: #495057;\">\n                                {{ permission.Role }}\n                              </div>\n                              <div style=\"font-size: 0.85em; color: #6c757d;\">\n                                Role Permission\n                              </div>\n                            </div>\n                            <div style=\"display: flex; gap: 8px;\">\n                              <span class=\"permission-badge\" style=\"background: #6f42c1; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8em;\">\n                                <i class=\"fa-solid fa-play\"></i> Can Execute\n                              </span>\n                            </div>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              }\n            </div>\n          </kendo-expansionpanel>\n        }\n      </div>\n    </form>\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</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\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: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\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: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\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.sql-editor-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.filters-help .filter-card {\n    transition: transform 0.2s ease;\n}\n\n.filters-help .filter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.toolbar-actions {\n    margin-left: auto;\n}\n\n.query-header {\n    border-bottom: 2px solid #dee2e6;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Modern Expansion Panel Styling */\n::ng-deep .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 16px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n::ng-deep .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n/* Expanded state header */\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #2196f3 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n/* Content area */\n::ng-deep .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n/* Icon in header */\n::ng-deep .query-content .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header .fa-chevron-down {\n    transform: rotate(180deg) !important;\n}\n\n/* Parameter Cards */\n.parameters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n    gap: 16px;\n    padding: 20px;\n}\n\n.param-card {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n    cursor: pointer;\n    position: relative;\n}\n\n.param-card:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n    transform: translateY(-1px);\n}\n\n.param-card.required {\n    border-color: #ffc107;\n}\n\n.param-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 12px;\n}\n\n.param-name {\n    font-weight: 600;\n    font-size: 1.1em;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.param-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.param-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 600;\n    color: white;\n}\n\n.param-badge.required {\n    background: #ffc107;\n}\n\n.param-badge.array {\n    background: #9c27b0;\n}\n\n.param-card-body {\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.param-actions {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.param-card:hover .param-actions {\n    opacity: 1;\n}\n\n.param-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: all 0.2s;\n}\n\n.param-action-btn:hover {\n    background: #f8f9fa;\n    color: #007bff;\n}\n\n.param-action-btn.delete:hover {\n    background: #fff5f5;\n    color: #dc3545;\n}\n\n/* Details Section */\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    padding: 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: 0.85em;\n    font-weight: 600;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.detail-value {\n    font-size: 1em;\n    color: #2c3e50;\n}\n\n/* Category Tree Dropdown */\n.category-selector {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.category-tree-dropdown {\n    flex: 1;\n}\n\n.add-category-btn {\n    background: #28a745;\n    color: white;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.add-category-btn:hover {\n    background: #218838;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(40,167,69,0.2);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state-title {\n    font-size: 1.2em;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.empty-state-text {\n    font-size: 0.9em;\n    margin-bottom: 20px;\n}\n\n.add-param-btn {\n    background: #007bff;\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n}\n\n.add-param-btn:hover {\n    background: #0056b3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,123,255,0.2);\n}"] }]
+        args: [{ standalone: false, selector: 'mj-query-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n      <!-- Header Section -->\n      <div class=\"query-header\">\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                <kendo-textbox [(ngModel)]=\"record.Name\"\n                  name=\"queryName\"\n                  placeholder=\"Enter query name...\"\n                  class=\"query-name-input\">\n                </kendo-textbox>\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 kendoButton\n                  [themeColor]=\"'primary'\"\n                  [size]=\"'large'\"\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                <kendo-dropdownlist\n                  [(ngModel)]=\"record.CategoryID\"\n                  name=\"categoryId\"\n                  [data]=\"categoryOptions\"\n                  textField=\"text\"\n                  valueField=\"value\"\n                  [valuePrimitive]=\"true\"\n                  placeholder=\"Select category...\"\n                  class=\"meta-dropdown\">\n                </kendo-dropdownlist>\n              } @else {\n                <span class=\"meta-value\">{{ getCategoryPath() || '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                <kendo-dropdownlist\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                </kendo-dropdownlist>\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                <kendo-textarea [(ngModel)]=\"record.Description\"\n                  name=\"description\"\n                  [rows]=\"2\"\n                  placeholder=\"Enter query description...\"\n                  class=\"query-description-input\">\n                </kendo-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\">\n\n        <!-- SQL Query Panel -->\n        <kendo-expansionpanel\n          [(expanded)]=\"sqlPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template kendoExpansionPanelTitleDirective>\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\">\n                    <i class=\"fa-solid fa-check\"></i> Defined\n                  </span>\n                }\n              </span>\n              <button type=\"button\"\n                kendoButton\n                fillMode=\"flat\"\n                size=\"small\"\n                (click)=\"toggleFiltersHelp(); $event.stopPropagation()\"\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            </span>\n          </ng-template>\n\n          <div class=\"sql-panel-content\">\n            <!-- Code Editor -->\n            <mj-code-editor #sqlEditor\n              (change)=\"onSQLChange($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        </kendo-expansionpanel>\n\n        <!-- Parameters Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"parametersPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-sliders panel-icon\"></i>\n                Query 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          </kendo-expansionpanel>\n        }\n\n        <!-- Query Fields Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"fieldsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-table panel-icon\"></i>\n                Query 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          </kendo-expansionpanel>\n        }\n\n        <!-- Query Entities Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"entitiesPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-database panel-icon\"></i>\n                Query 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                              <kendo-dropdownlist\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                              </kendo-dropdownlist>\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          </kendo-expansionpanel>\n        }\n\n        <!-- Details Panel -->\n        <kendo-expansionpanel\n          [(expanded)]=\"detailsPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template kendoExpansionPanelTitleDirective>\n            <span class=\"panel-title\">\n              <i class=\"fa-solid fa-info-circle panel-icon\"></i>\n              Query Details\n            </span>\n          </ng-template>\n\n          <div class=\"panel-body\">\n            <div class=\"details-grid\">\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                  <kendo-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></kendo-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        </kendo-expansionpanel>\n\n        <!-- Permissions Panel -->\n        @if (record.IsSaved) {\n          <kendo-expansionpanel\n            [(expanded)]=\"permissionsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-shield-alt panel-icon\"></i>\n                Query 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          </kendo-expansionpanel>\n        }\n      </div>\n    </form>\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</div>\n", styles: [".k-pane {\n  background-color: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\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: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\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: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\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   Header Section \u2014 matches Query Browser gradient\n   ======================================== */\n\n.query-header {\n    flex-shrink: 0;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\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: #fff;\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: 13px;\n    min-width: 60px;\n}\n\n.meta-value {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: 14px;\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: 14px;\n    color: #fff;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill i {\n    font-size: 12px;\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: 13px;\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: #fff8e1;\n    border-left: 4px solid #f59e0b;\n    font-size: 13px;\n    color: #5d4037;\n    flex-shrink: 0;\n}\n\n.status-warning-banner i {\n    font-size: 16px;\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: #f5f5f5;\n}\n\n/* ========================================\n   Expansion Panel Overrides \u2014 Modern Style\n   ======================================== */\n\n.query-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .query-content kendo-expansionpanel {\n    border: none !important;\n    border-radius: 8px !important;\n    margin-bottom: 12px !important;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: 8px !important;\n    color: #333 !important;\n    font-weight: 600 !important;\n    font-size: 14px !important;\n    transition: background 0.15s ease !important;\n}\n\n::ng-deep .query-content .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n::ng-deep .query-content kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #5c6bc0 !important;\n    color: white !important;\n    border-radius: 8px 8px 0 0 !important;\n}\n\n::ng-deep .query-content .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 8px 8px !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: 14px;\n    opacity: 0.7;\n}\n\n.sql-icon {\n    color: #5c6bc0;\n}\n\n::ng-deep kendo-expansionpanel[aria-expanded=\"true\"] .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: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.panel-badge.defined {\n    background: #28a745;\n    color: white;\n}\n\n.panel-badge.count {\n    background: #5c6bc0;\n    color: white;\n}\n\n::ng-deep kendo-expansionpanel[aria-expanded=\"true\"] .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n::ng-deep kendo-expansionpanel[aria-expanded=\"true\"] .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: 12px;\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 #e0e0e0;\n    border-radius: 4px;\n    margin: 16px;\n}\n\n/* Filters Help */\n.filters-help {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title {\n    margin: 0 0 12px 0;\n    color: #333;\n    font-weight: 600;\n    font-size: 14px;\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: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\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: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-name {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: #5c6bc0;\n    margin-bottom: 4px;\n}\n\n.filter-description {\n    font-size: 12px;\n    color: #555;\n    margin-bottom: 6px;\n}\n\n.filter-syntax {\n    font-family: 'Courier New', monospace;\n    font-size: 11px;\n    background: #f5f5f5;\n    padding: 6px;\n    border-radius: 4px;\n    margin-bottom: 4px;\n}\n\n.filter-notes {\n    font-size: 11px;\n    color: #888;\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: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card:hover {\n    border-color: #5c6bc0;\n    box-shadow: 0 2px 8px rgba(92, 107, 192, 0.12);\n}\n\n.item-card.required {\n    border-left: 3px solid #f59e0b;\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: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon {\n    font-size: 14px;\n}\n\n.item-name-icon.param-icon {\n    color: #5c6bc0;\n}\n\n.item-name-icon.field-icon {\n    color: #5c6bc0;\n}\n\n.item-name-icon.entity-icon {\n    color: #28a745;\n}\n\n.item-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge {\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n}\n\n.item-badge.required {\n    background: #f59e0b;\n}\n\n.item-badge.type {\n    background: #e8eaf6;\n    color: #3949ab;\n}\n\n.item-badge.sequence {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.item-card-body {\n    color: #666;\n    font-size: 13px;\n}\n\n.item-description {\n    margin-bottom: 8px;\n}\n\n.item-meta {\n    display: flex;\n    gap: 16px;\n    font-size: 12px;\n}\n\n.meta-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code {\n    background: #f5f5f5;\n    padding: 1px 4px;\n    border-radius: 3px;\n    font-size: 11px;\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: 4px;\n    cursor: pointer;\n    color: #888;\n    transition: all 0.15s ease;\n}\n\n.item-action-btn:hover {\n    background: #f0f0f0;\n    color: #5c6bc0;\n}\n\n.item-action-btn.delete:hover {\n    background: #fff5f5;\n    color: #dc3545;\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: 12px;\n    font-weight: 600;\n    color: #888;\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: 14px;\n    color: #333;\n}\n\n.detail-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 13px;\n}\n\n.detail-tag.positive {\n    color: #28a745;\n}\n\n.detail-tag.neutral {\n    color: #888;\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: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon {\n    font-size: 1.3em;\n    color: #5c6bc0;\n}\n\n.permission-info {\n    flex: 1;\n}\n\n.permission-role {\n    font-weight: 600;\n    color: #333;\n    font-size: 14px;\n}\n\n.permission-type {\n    font-size: 12px;\n    color: #888;\n}\n\n.permission-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: #5c6bc0;\n    color: white;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 12px;\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: #888;\n}\n\n.empty-state-icon {\n    font-size: 40px;\n    margin-bottom: 14px;\n    opacity: 0.25;\n    color: #333;\n}\n\n.empty-state-title {\n    font-size: 15px;\n    font-weight: 600;\n    margin-bottom: 6px;\n    color: #555;\n}\n\n.empty-state-text {\n    font-size: 13px;\n    margin-bottom: 16px;\n    color: #888;\n}\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: #5c6bc0;\n    color: white;\n    border: none;\n    padding: 8px 16px;\n    border-radius: 6px;\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: 13px;\n}\n\n.add-item-btn:hover {\n    background: #3949ab;\n    box-shadow: 0 2px 6px rgba(92, 107, 192, 0.3);\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"] }]
     }], null, { sqlEditor: [{
             type: ViewChild,
             args: ['sqlEditor']