@memberjunction/ng-core-entity-forms 2.72.0 → 2.74.0

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

@@ -0,0 +1,1563 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ViewChild } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseFormComponent } from '@memberjunction/ng-base-forms';
+import { QueryFormComponent } from '../../generated/Entities/Query/query.form.component';
+import { Metadata, RunView, RUN_QUERY_SQL_FILTERS } from '@memberjunction/core';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dropdowns";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@memberjunction/ng-user-view-grid";
+import * as i8 from "@memberjunction/ng-form-toolbar";
+import * as i9 from "@memberjunction/ng-code-editor";
+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 QueryFormExtendedComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textbox", 40);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Name);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h4", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled Query");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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.ɵɵ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);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 43);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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.ɵɵ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 QueryFormExtendedComponent_Conditional_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.getCategoryPath() || "Uncategorized");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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.ɵɵ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 QueryFormExtendedComponent_Conditional_1_Conditional_23_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 49);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_23_i_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_23_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 51);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵtemplate(1, QueryFormExtendedComponent_Conditional_1_Conditional_23_i_1_Template, 1, 0, "i", 46)(2, QueryFormExtendedComponent_Conditional_1_Conditional_23_i_2_Template, 1, 0, "i", 47)(3, QueryFormExtendedComponent_Conditional_1_Conditional_23_i_3_Template, 1, 0, "i", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background", ctx_r2.getStatusBadgeColor());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.record.Status === "Approved");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.record.Status === "Pending");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.record.Status === "Rejected");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status || "Unknown", " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textarea", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Description);
+    i0.ɵɵproperty("rows", 2);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.record.Description);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, QueryFormExtendedComponent_Conditional_1_Conditional_24_Conditional_1_Template, 1, 2, "kendo-textarea", 52)(2, QueryFormExtendedComponent_Conditional_1_Conditional_24_Conditional_2_Template, 2, 1, "p", 53);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 1 : 2);
+} }
+function QueryFormExtendedComponent_Conditional_1_ng_template_27_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵtext(2, " Defined ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_ng_template_27_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 55)(1, "span", 56);
+    i0.ɵɵelement(2, "i", 57);
+    i0.ɵɵtext(3, " SQL ");
+    i0.ɵɵtemplate(4, QueryFormExtendedComponent_Conditional_1_ng_template_27_Conditional_4_Template, 3, 0, "span", 58);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 59);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 60);
+    i0.ɵɵelementStart(7, "span", 61);
+    i0.ɵɵtext(8, "Filters Help");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(9, "i", 62);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.record.SQL ? 4 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngClass", ctx_r2.showFiltersHelp ? "fa-chevron-up" : "fa-chevron-down");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_31_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", filter_r9.notes, " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_31_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 69);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 70);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, QueryFormExtendedComponent_Conditional_1_Conditional_31_For_6_Conditional_7_Template, 2, 1, "div", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r9 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", filter_r9.name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", filter_r9.description, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", filter_r9.exampleSyntax, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(filter_r9.notes ? 7 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "h6", 64);
+    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵtext(3, " Available SQL Filters for Parameterized Queries ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 66);
+    i0.ɵɵrepeaterCreate(5, QueryFormExtendedComponent_Conditional_1_Conditional_31_For_6_Template, 8, 4, "div", 67, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(ctx_r2.sqlFilters);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryParameters.length, " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵtext(2, " Query Parameters ");
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_32_ng_template_1_Conditional_3_Template, 2, 1, "span", 75);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.queryParameters.length > 0 ? 3 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵelementStart(2, "span", 77);
+    i0.ɵɵtext(3, "Loading parameters...");
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(2, " Add First Parameter ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 80);
+    i0.ɵɵelementStart(2, "div", 81);
+    i0.ɵɵtext(3, "No Parameters Defined");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 82);
+    i0.ɵɵtext(5, " Add parameters to make your query dynamic and reusable. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 83);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 86)(1, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(3, " Add Parameter ");
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 93);
+    i0.ɵɵtext(1, "Required");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const param_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(param_r14.Description);
+} }
+function QueryFormExtendedComponent_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.ɵɵtext(2, "Default:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "code", 98);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const param_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", param_r14.DefaultValue, " ");
+} }
+function QueryFormExtendedComponent_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", 99);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 100);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 101);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 102);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 103);
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 89)(2, "div", 90);
+    i0.ɵɵelement(3, "i", 91);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 92);
+    i0.ɵɵtemplate(6, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 2, 0, "span", 93);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 94);
+    i0.ɵɵtemplate(8, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "div", 95);
+    i0.ɵɵelementStart(9, "div", 96)(10, "div")(11, "strong");
+    i0.ɵɵtext(12, "Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(14, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_14_Template, 5, 1, "div");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(15, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 5, 0, "div", 97);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const param_r14 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("required", param_r14.IsRequired);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", param_r14.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(param_r14.IsRequired ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(param_r14.Description ? 8 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", param_r14.Type || "Text", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(param_r14.DefaultValue ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 15 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 86);
+    i0.ɵɵelementStart(1, "div", 79);
+    i0.ɵɵrepeaterCreate(2, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_For_3_Template, 16, 8, "div", 87, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.queryParameters);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_0_Template, 7, 1, "div", 78)(1, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Conditional_1_Template, 4, 1, "div", 79);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r2.queryParameters.length === 0 ? 0 : 1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_Conditional_1_Conditional_32_ng_template_1_Template, 4, 1, "ng-template", 24);
+    i0.ɵɵelementStart(2, "div", 72);
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_3_Template, 4, 0, "div", 73)(4, QueryFormExtendedComponent_Conditional_1_Conditional_32_Conditional_4_Template, 2, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.parametersPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.isLoadingParameters ? 3 : 4);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryFields.length, " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 105);
+    i0.ɵɵtext(2, " Query Fields ");
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_33_ng_template_1_Conditional_3_Template, 2, 1, "span", 75);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.queryFields.length > 0 ? 3 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104);
+    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(2, " Add First Field ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 107);
+    i0.ɵɵelementStart(2, "h5", 108);
+    i0.ɵɵtext(3, "No Fields Defined");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 109);
+    i0.ɵɵtext(5, " Define output fields for your query results. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 83);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 86)(1, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(3, " Add Field ");
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 113);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r19 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("#", field_r19.Sequence, "");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 114);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r19 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r19.Description);
+} }
+function QueryFormExtendedComponent_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", 118)(1, "button", 119);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 103);
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110)(1, "div", 89)(2, "div", 90);
+    i0.ɵɵelement(3, "i", 111);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 92)(6, "span", 112);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_8_Template, 2, 1, "span", 113);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 94);
+    i0.ɵɵtemplate(10, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_10_Template, 2, 1, "div", 114);
+    i0.ɵɵelementStart(11, "div", 115)(12, "span", 116);
+    i0.ɵɵelement(13, "i", 117);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(15, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Conditional_15_Template, 3, 0, "div", 118);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r19 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", field_r19.Name, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r19.SQLBaseType);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r19.Sequence ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(field_r19.Description ? 10 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", field_r19.SQLFullType || field_r19.SQLBaseType, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 15 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 86);
+    i0.ɵɵelementStart(1, "div", 79);
+    i0.ɵɵrepeaterCreate(2, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_For_3_Template, 16, 6, "div", 110, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.queryFields);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_0_Template, 7, 1, "div", 78)(1, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Conditional_1_Template, 4, 1, "div", 79);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r2.queryFields.length === 0 ? 0 : 1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_Conditional_1_Conditional_33_ng_template_1_Template, 4, 1, "ng-template", 24);
+    i0.ɵɵelementStart(2, "div", 72);
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_3_Template, 2, 0, "div", 104)(4, QueryFormExtendedComponent_Conditional_1_Conditional_33_Conditional_4_Template, 2, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.fieldsPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.isLoadingFields ? 3 : 4);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.queryEntities.length, " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 120);
+    i0.ɵɵtext(2, " Query Entities ");
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_34_ng_template_1_Conditional_3_Template, 2, 1, "span", 75);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.queryEntities.length > 0 ? 3 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104);
+    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(2, " Add First Entity ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 121);
+    i0.ɵɵelementStart(2, "h5", 108);
+    i0.ɵɵtext(3, "No Entities Tracked");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 109);
+    i0.ɵɵtext(5, " Track which entities this query uses for documentation. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Conditional_6_Template, 3, 0, "button", 83);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 86)(1, "button", 84);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 85);
+    i0.ɵɵtext(3, " Add Entity ");
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_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", 123)(1, "kendo-dropdownlist", 124);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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) {
+    const entity_r25 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", entity_r25.EntityID);
+    i0.ɵɵproperty("name", "entity_" + entity_r25.ID)("data", ctx_r2.getEntityOptions())("valuePrimitive", true);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94)(1, "div", 115)(2, "span", 116);
+    i0.ɵɵelement(3, "i", 125);
+    i0.ɵɵtext(4, " Data Source ");
+    i0.ɵɵelementEnd()()();
+} }
+function QueryFormExtendedComponent_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", 118)(1, "button", 126);
+    i0.ɵɵlistener("click", function QueryFormExtendedComponent_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", 103);
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110)(1, "div", 89)(2, "div", 90);
+    i0.ɵɵelement(3, "i", 122);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_5_Template, 2, 4, "div", 123);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_6_Template, 5, 0, "div", 94)(7, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Conditional_7_Template, 3, 0, "div", 118);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const entity_r25 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", entity_r25.Entity || "Select Entity...", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.EditMode && entity_r25.Entity ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 7 : -1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Conditional_0_Template, 4, 0, "div", 86);
+    i0.ɵɵelementStart(1, "div", 79);
+    i0.ɵɵrepeaterCreate(2, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_For_3_Template, 8, 4, "div", 110, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.queryEntities);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_0_Template, 7, 1, "div", 78)(1, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Conditional_1_Template, 4, 1, "div", 79);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r2.queryEntities.length === 0 ? 0 : 1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_Conditional_1_Conditional_34_ng_template_1_Template, 4, 1, "ng-template", 24);
+    i0.ɵɵelementStart(2, "div", 72);
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_3_Template, 2, 0, "div", 104)(4, QueryFormExtendedComponent_Conditional_1_Conditional_34_Conditional_4_Template, 2, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.entitiesPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.isLoadingEntities ? 3 : 4);
+} }
+function QueryFormExtendedComponent_Conditional_1_ng_template_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 127);
+    i0.ɵɵtext(2, " Query Details ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-switch", 128);
+    i0.ɵɵtwoWayListener("ngModelChange", function QueryFormExtendedComponent_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) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.UsesTemplate);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_44_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 129);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵtext(2, " Uses Templates");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_44_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 77);
+    i0.ɵɵelement(1, "i", 130);
+    i0.ɵɵtext(2, " No Templates");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵtemplate(1, QueryFormExtendedComponent_Conditional_1_Conditional_44_Conditional_1_Template, 3, 0, "span", 129)(2, QueryFormExtendedComponent_Conditional_1_Conditional_44_Conditional_2_Template, 3, 0, "span", 77);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.UsesTemplate ? 1 : 2);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "label", 32);
+    i0.ɵɵelement(2, "i", 131);
+    i0.ɵɵtext(3, " Quality Rank ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 35);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", ctx_r2.record.QualityRank, "/10");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelement(1, "i", 132);
+    i0.ɵɵtext(2, " Query Permissions ");
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104);
+    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementEnd();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 133);
+    i0.ɵɵelementStart(2, "h5", 108);
+    i0.ɵɵtext(3, "No Permissions Set");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 134);
+    i0.ɵɵtext(5, " This query uses default permissions. ");
+    i0.ɵɵelementEnd()();
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-user-view-grid", 135);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("Query Permissions", "QueryID"))("NewRecordValues", ctx_r2.NewRecordValues("Query Permissions"))("AllowLoad", true)("EditMode", ctx_r2.GridEditMode());
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 137)(1, "div", 9);
+    i0.ɵɵelement(2, "i", 138);
+    i0.ɵɵelementStart(3, "div", 139)(4, "div", 140);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 141);
+    i0.ɵɵtext(7, " Role Permission ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 142)(9, "span", 143);
+    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, " ");
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 136);
+    i0.ɵɵrepeaterCreate(1, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_For_2_Template, 12, 1, "div", 137, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.queryPermissions);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_0_Template, 1, 4, "mj-user-view-grid", 135)(1, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_1_Conditional_1_Template, 3, 0, "div", 136);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 0 : 1);
+} }
+function QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Conditional_0_Template, 6, 0, "div", 78)(1, QueryFormExtendedComponent_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 QueryFormExtendedComponent_Conditional_1_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_Conditional_1_Conditional_58_ng_template_1_Template, 3, 0, "ng-template", 24);
+    i0.ɵɵelementStart(2, "div", 72);
+    i0.ɵɵtemplate(3, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_3_Template, 2, 0, "div", 104)(4, QueryFormExtendedComponent_Conditional_1_Conditional_58_Conditional_4_Template, 2, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.permissionsPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.isLoadingPermissions ? 3 : 4);
+} }
+function QueryFormExtendedComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    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.ɵɵtemplate(9, QueryFormExtendedComponent_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 11)(10, QueryFormExtendedComponent_Conditional_1_Conditional_10_Template, 2, 1, "h4", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 13);
+    i0.ɵɵtemplate(12, QueryFormExtendedComponent_Conditional_1_Conditional_12_Template, 3, 3, "button", 14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 15)(14, "div", 9)(15, "label", 16);
+    i0.ɵɵtext(16, "Category:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, QueryFormExtendedComponent_Conditional_1_Conditional_17_Template, 1, 3, "kendo-dropdownlist", 17)(18, QueryFormExtendedComponent_Conditional_1_Conditional_18_Template, 2, 1, "span", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 9)(20, "label", 19);
+    i0.ɵɵtext(21, "Status:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(22, QueryFormExtendedComponent_Conditional_1_Conditional_22_Template, 1, 3, "kendo-dropdownlist", 20)(23, QueryFormExtendedComponent_Conditional_1_Conditional_23_Template, 5, 6, "span", 21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(24, QueryFormExtendedComponent_Conditional_1_Conditional_24_Template, 3, 1, "div");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 22)(26, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_Conditional_1_ng_template_27_Template, 10, 2, "ng-template", 24);
+    i0.ɵɵelementStart(28, "div", 25)(29, "mj-code-editor", 26, 1);
+    i0.ɵɵlistener("change", function QueryFormExtendedComponent_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.ɵɵtemplate(31, QueryFormExtendedComponent_Conditional_1_Conditional_31_Template, 7, 0, "div", 27);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(32, QueryFormExtendedComponent_Conditional_1_Conditional_32_Template, 5, 2, "kendo-expansionpanel", 28)(33, QueryFormExtendedComponent_Conditional_1_Conditional_33_Template, 5, 2, "kendo-expansionpanel", 28)(34, QueryFormExtendedComponent_Conditional_1_Conditional_34_Template, 5, 2, "kendo-expansionpanel", 28);
+    i0.ɵɵelementStart(35, "kendo-expansionpanel", 23);
+    i0.ɵɵtwoWayListener("expandedChange", function QueryFormExtendedComponent_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, QueryFormExtendedComponent_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.ɵɵtext(42, " Template Usage ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(43, QueryFormExtendedComponent_Conditional_1_Conditional_43_Template, 1, 1, "kendo-switch", 34)(44, QueryFormExtendedComponent_Conditional_1_Conditional_44_Template, 3, 1, "div", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "div", 31)(46, "label", 32);
+    i0.ɵɵelement(47, "i", 36);
+    i0.ɵɵtext(48, " Created ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(49, "div", 35);
+    i0.ɵɵtext(50);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(51, "div", 31)(52, "label", 32);
+    i0.ɵɵelement(53, "i", 37);
+    i0.ɵɵtext(54, " Last Updated ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(55, "div", 35);
+    i0.ɵɵtext(56);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(57, QueryFormExtendedComponent_Conditional_1_Conditional_57_Template, 6, 1, "div", 31);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(58, QueryFormExtendedComponent_Conditional_1_Conditional_58_Template, 5, 2, "kendo-expansionpanel", 28);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(59, "mj-query-run-dialog", 38);
+    i0.ɵɵtwoWayListener("isVisibleChange", function QueryFormExtendedComponent_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 QueryFormExtendedComponent_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.ɵɵtwoWayListener("isVisibleChange", function QueryFormExtendedComponent_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 QueryFormExtendedComponent_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();
+} if (rf & 2) {
+    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(3);
+    i0.ɵɵconditional(ctx_r2.record.ID ? 12 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 17 : 18);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 22 : 23);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EditMode || ctx_r2.record.Description ? 24 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.sqlPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("language", "sql");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.showFiltersHelp ? 31 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 32 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 33 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 34 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("expanded", ctx_r2.detailsPanelExpanded);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 43 : 44);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r2.formatDate(ctx_r2.record.__mj_CreatedAt));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.formatDate(ctx_r2.record.__mj_UpdatedAt));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.QualityRank != null ? 57 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 58 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("query", ctx_r2.record)("parameters", ctx_r2.queryParameters);
+    i0.ɵɵtwoWayProperty("isVisible", ctx_r2.showRunDialog);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("isVisible", ctx_r2.showCategoryDialog);
+} }
+let QueryFormExtendedComponent = class QueryFormExtendedComponent extends QueryFormComponent {
+    constructor() {
+        super(...arguments);
+        this.queryParameters = [];
+        this.queryFields = [];
+        this.queryEntities = [];
+        this.queryPermissions = [];
+        this.isLoadingParameters = false;
+        this.isLoadingFields = false;
+        this.isLoadingEntities = false;
+        this.isLoadingPermissions = false;
+        this.hasUnsavedChanges = false;
+        this.showFiltersHelp = false;
+        this.showRunDialog = false;
+        this.showCategoryDialog = false;
+        // Expansion panel states
+        this.sqlPanelExpanded = true;
+        this.parametersPanelExpanded = false;
+        this.fieldsPanelExpanded = false;
+        this.entitiesPanelExpanded = false;
+        this.detailsPanelExpanded = false;
+        this.permissionsPanelExpanded = false;
+        // Category data
+        this.categoryOptions = [
+            { text: 'Select Category...', value: '' }
+        ];
+        this.categories = [];
+        this.categoryTreeData = [];
+        this.isCategoriesLoaded = false;
+        // Status options
+        this.statusOptions = [
+            { text: 'Pending', value: 'Pending' },
+            { text: 'Approved', value: 'Approved' },
+            { text: 'Rejected', value: 'Rejected' },
+            { text: 'Expired', value: 'Expired' }
+        ];
+        this.sqlEditor = null;
+        // SQL Filters for help display
+        this.sqlFilters = RUN_QUERY_SQL_FILTERS;
+        this.destroy$ = new Subject();
+        this.isUpdatingEditorValue = false;
+    }
+    async ngOnInit() {
+        await super.ngOnInit();
+        // Load categories first to ensure they're available for the dropdown
+        await this.loadCategories();
+        // Then load other data in parallel
+        await Promise.all([
+            this.loadQueryParameters(),
+            this.loadQueryFields(),
+            this.loadQueryEntities(),
+            this.loadQueryPermissions()
+        ]);
+        // Ensure form is properly initialized after all data is loaded
+        this.cdr.detectChanges();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.sqlEditor?.setEditable(this.EditMode);
+        // Set initial SQL value in the editor
+        this.updateEditorValue();
+        // Ensure all form controls are properly initialized with data
+        setTimeout(() => {
+            // Force Angular to update all bindings
+            this.cdr.detectChanges();
+            // If in edit mode, trigger another update to ensure Kendo components are initialized
+            if (this.EditMode) {
+                setTimeout(() => {
+                    this.cdr.detectChanges();
+                }, 50);
+            }
+        }, 100);
+    }
+    EndEditMode() {
+        super.EndEditMode();
+        this.sqlEditor?.setEditable(false);
+    }
+    StartEditMode() {
+        super.StartEditMode();
+        this.sqlEditor?.setEditable(true);
+        // Force change detection after a brief delay to ensure form controls are initialized
+        setTimeout(() => {
+            this.cdr.detectChanges();
+        }, 50);
+    }
+    CancelEdit() {
+        super.CancelEdit();
+        this.updateEditorValue(); // Reset editor value to record SQL
+        this.sqlEditor?.setEditable(false);
+        this.updateUnsavedChangesFlag(); // Reset unsaved changes flag
+    }
+    updateEditorValue() {
+        if (!this.sqlEditor || this.isUpdatingEditorValue) {
+            return;
+        }
+        // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            if (!this.sqlEditor) {
+                return;
+            }
+            this.isUpdatingEditorValue = true;
+            const sqlValue = this.record?.SQL || '';
+            // Use the setValue method from mj-code-editor component
+            this.sqlEditor.setValue(sqlValue);
+            this.isUpdatingEditorValue = false;
+        }, 0);
+    }
+    isFormReadOnly() {
+        return !this.EditMode;
+    }
+    async loadQueryParameters() {
+        if (this.record && this.record.ID) {
+            this.isLoadingParameters = true;
+            try {
+                const rv = new RunView();
+                const results = await rv.RunView({
+                    EntityName: 'MJ: Query Parameters',
+                    ExtraFilter: `QueryID='${this.record.ID}'`,
+                    OrderBy: 'Name ASC',
+                    ResultType: 'entity_object'
+                });
+                if (results.Success) {
+                    this.queryParameters = results.Results || [];
+                }
+            }
+            catch (error) {
+                console.error('Error loading query parameters:', error);
+            }
+            finally {
+                this.isLoadingParameters = false;
+            }
+        }
+    }
+    async loadQueryFields() {
+        if (this.record && this.record.ID) {
+            this.isLoadingFields = true;
+            try {
+                const rv = new RunView();
+                const results = await rv.RunView({
+                    EntityName: 'Query Fields',
+                    ExtraFilter: `QueryID='${this.record.ID}'`,
+                    OrderBy: 'Sequence ASC, Name ASC',
+                    ResultType: 'entity_object'
+                });
+                if (results.Success) {
+                    this.queryFields = results.Results || [];
+                }
+            }
+            catch (error) {
+                console.error('Error loading query fields:', error);
+            }
+            finally {
+                this.isLoadingFields = false;
+            }
+        }
+    }
+    async loadQueryEntities() {
+        if (this.record && this.record.ID) {
+            this.isLoadingEntities = true;
+            try {
+                const rv = new RunView();
+                const results = await rv.RunView({
+                    EntityName: 'Query Entities',
+                    ExtraFilter: `QueryID='${this.record.ID}'`,
+                    OrderBy: 'Entity ASC',
+                    ResultType: 'entity_object'
+                });
+                if (results.Success) {
+                    this.queryEntities = results.Results || [];
+                    console.log('Loaded query entities:', this.queryEntities);
+                }
+            }
+            catch (error) {
+                console.error('Error loading query entities:', error);
+            }
+            finally {
+                this.isLoadingEntities = false;
+            }
+        }
+    }
+    async loadQueryPermissions() {
+        if (this.record && this.record.ID) {
+            this.isLoadingPermissions = true;
+            try {
+                const rv = new RunView();
+                const results = await rv.RunView({
+                    EntityName: 'Query Permissions',
+                    ExtraFilter: `QueryID='${this.record.ID}'`,
+                    OrderBy: 'Type ASC',
+                    ResultType: 'entity_object'
+                });
+                if (results.Success) {
+                    this.queryPermissions = results.Results || [];
+                }
+            }
+            catch (error) {
+                console.error('Error loading query permissions:', error);
+            }
+            finally {
+                this.isLoadingPermissions = false;
+            }
+        }
+    }
+    async loadCategories() {
+        try {
+            const rv = new RunView();
+            const results = await rv.RunView({
+                EntityName: 'Query Categories',
+                OrderBy: 'Name',
+                ResultType: 'entity_object'
+            });
+            if (results.Success && results.Results) {
+                this.categories = results.Results;
+                // Build flat options for legacy compatibility
+                this.categoryOptions = [
+                    { text: 'Select Category...', value: '' },
+                    ...this.categories.map(cat => ({
+                        text: cat.Name,
+                        value: cat.ID
+                    }))
+                ];
+                // Build tree data after options are set
+                this.categoryTreeData = this.buildCategoryTree(this.categories);
+                // Trigger change detection to update the view
+                this.cdr.detectChanges();
+            }
+        }
+        catch (error) {
+            console.error('Error loading categories:', error);
+            this.categoryOptions = [{ text: 'Select Category...', value: '' }];
+            this.categoryTreeData = [];
+        }
+    }
+    buildCategoryTree(categories) {
+        const categoryMap = new Map();
+        const rootCategories = [];
+        // Create nodes for all categories
+        categories.forEach(cat => {
+            categoryMap.set(cat.ID, {
+                id: cat.ID,
+                name: cat.Name,
+                items: []
+            });
+        });
+        // Build the tree structure
+        categories.forEach(cat => {
+            const node = categoryMap.get(cat.ID);
+            if (cat.ParentID && categoryMap.has(cat.ParentID)) {
+                const parent = categoryMap.get(cat.ParentID);
+                if (!parent.items)
+                    parent.items = [];
+                parent.items.push(node);
+            }
+            else {
+                rootCategories.push(node);
+            }
+        });
+        // Sort children alphabetically
+        const sortNodes = (nodes) => {
+            nodes.sort((a, b) => a.name.localeCompare(b.name));
+            nodes.forEach(node => {
+                if (node.items && node.items.length > 0) {
+                    sortNodes(node.items);
+                }
+            });
+        };
+        sortNodes(rootCategories);
+        return rootCategories;
+    }
+    getCategoryPath() {
+        if (!this.record.CategoryID)
+            return '';
+        const findPath = (categoryId) => {
+            const category = this.categories.find(c => c.ID === categoryId);
+            if (!category)
+                return [];
+            if (category.ParentID) {
+                return [...findPath(category.ParentID), category.Name];
+            }
+            return [category.Name];
+        };
+        return findPath(this.record.CategoryID).join(' / ');
+    }
+    async onCategoryChange(value) {
+        // If it's a new category (string but not in existing options)
+        if (value && !this.categoryOptions.find(opt => opt.value === value)) {
+            // Check for duplicate category names (case-insensitive, trimmed)
+            if (this.isDuplicateCategory(value)) {
+                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === value.trim().toLowerCase());
+                if (existingCategory) {
+                    // Use the existing category instead
+                    this.record.CategoryID = existingCategory.value;
+                    MJNotificationService.Instance.CreateSimpleNotification(`Category "${existingCategory.text}" already exists. Using existing category.`, 'warning', 3000);
+                }
+                return;
+            }
+            try {
+                // Create new category with trimmed name
+                const md = new Metadata();
+                const newCategory = await md.GetEntityObject('Query Categories');
+                newCategory.Name = value.trim();
+                const saved = await newCategory.Save();
+                if (saved) {
+                    // Add to options and set the ID
+                    this.categoryOptions.push({
+                        text: newCategory.Name,
+                        value: newCategory.ID
+                    });
+                    this.record.CategoryID = newCategory.ID;
+                    MJNotificationService.Instance.CreateSimpleNotification(`New category "${newCategory.Name}" created successfully.`, 'success', 3000);
+                }
+                else {
+                    MJNotificationService.Instance.CreateSimpleNotification(`Failed to create new category. ${newCategory.LatestResult?.Message || ''}`, 'error', 3000);
+                }
+            }
+            catch (error) {
+                console.error('Error creating new category:', error);
+                MJNotificationService.Instance.CreateSimpleNotification('Error creating new category. Please try again.', 'error', 3000);
+            }
+        }
+    }
+    isDuplicateCategory(categoryName) {
+        const normalizedName = categoryName?.trim().toLowerCase();
+        return this.categoryOptions.some(option => option.text && option.text.trim().toLowerCase() === normalizedName);
+    }
+    /**
+     * Updates the hasUnsavedChanges flag based on entity dirty states
+     */
+    updateUnsavedChangesFlag() {
+        this.hasUnsavedChanges = this.queryParameters.some(param => param.Dirty) ||
+            this.record?.Dirty || false;
+    }
+    toggleFiltersHelp() {
+        this.showFiltersHelp = !this.showFiltersHelp;
+    }
+    /**
+     * Run the query with parameter dialog
+     */
+    async runQuery() {
+        if (!this.record?.IsSaved) {
+            MJNotificationService.Instance.CreateSimpleNotification('Please save the query before running it.', 'warning', 3000);
+            return;
+        }
+        // Save any unsaved changes first
+        if (this.hasUnsavedChanges) {
+            const saveResult = await this.SaveRecord(false); // Don't exit edit mode
+            if (!saveResult) {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to save query changes.', 'error', 3000);
+                return;
+            }
+        }
+        // Reload parameters in case they were updated
+        await this.loadQueryParameters();
+        // Show the run dialog
+        this.showRunDialog = true;
+    }
+    /**
+     * Handle run dialog close
+     */
+    onRunDialogClose() {
+        this.showRunDialog = false;
+    }
+    /**
+     * Add a new parameter
+     */
+    async addParameter() {
+        try {
+            const md = new Metadata();
+            const newParam = await md.GetEntityObject('MJ: Query Parameters');
+            newParam.QueryID = this.record.ID;
+            newParam.Name = `param${this.queryParameters.length + 1}`;
+            newParam.Type = 'string';
+            newParam.IsRequired = false;
+            const saved = await newParam.Save();
+            if (saved) {
+                this.queryParameters.push(newParam);
+                this.updateUnsavedChangesFlag();
+                MJNotificationService.Instance.CreateSimpleNotification('Parameter added successfully', 'success', 3000);
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to add parameter', 'error', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error adding parameter:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error adding parameter', 'error', 3000);
+        }
+    }
+    /**
+     * Edit a parameter
+     */
+    async editParameter(param) {
+        // TODO: Show parameter edit dialog
+        console.log('Edit parameter:', param);
+    }
+    /**
+     * Delete a parameter
+     */
+    async deleteParameter(param) {
+        if (!confirm(`Are you sure you want to delete parameter "${param.Name}"?`)) {
+            return;
+        }
+        try {
+            const deleted = await param.Delete();
+            if (deleted) {
+                const index = this.queryParameters.indexOf(param);
+                if (index > -1) {
+                    this.queryParameters.splice(index, 1);
+                }
+                MJNotificationService.Instance.CreateSimpleNotification('Parameter deleted successfully', 'success', 3000);
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to delete parameter', 'error', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting parameter:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error deleting parameter', 'error', 3000);
+        }
+    }
+    /**
+     * Handle category creation from dialog
+     */
+    async onCategoryCreated(newCategory) {
+        // Reload categories to include the new one
+        await this.loadCategories();
+        // Set the new category as selected
+        this.record.CategoryID = newCategory.ID;
+        // Trigger change detection
+        this.cdr.detectChanges();
+    }
+    /**
+     * Format date for display
+     */
+    formatDate(date) {
+        if (!date)
+            return '-';
+        const d = typeof date === 'string' ? new Date(date) : date;
+        return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+    }
+    async SaveRecord(StopEditModeAfterSave = true) {
+        // Handle category creation before saving query
+        if (this.record.CategoryID && !this.categoryOptions.find(opt => opt.value === this.record.CategoryID)) {
+            if (this.isDuplicateCategory(this.record.CategoryID)) {
+                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === this.record.CategoryID?.trim().toLowerCase());
+                if (existingCategory) {
+                    this.record.CategoryID = existingCategory.value;
+                    MJNotificationService.Instance.CreateSimpleNotification(`Category "${existingCategory.text}" already exists. Using existing category.`, 'warning', 3000);
+                }
+            }
+            else {
+                try {
+                    const md = new Metadata();
+                    const newCategory = await md.GetEntityObject('Query Categories');
+                    newCategory.Name = this.record.CategoryID.trim();
+                    const saved = await newCategory.Save();
+                    if (saved) {
+                        this.categoryOptions.push({
+                            text: newCategory.Name,
+                            value: newCategory.ID
+                        });
+                        this.record.CategoryID = newCategory.ID;
+                    }
+                    else {
+                        console.error('Failed to create new category');
+                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to create new category. ${newCategory.LatestResult?.Message || ''}`, 'error');
+                        return false;
+                    }
+                }
+                catch (error) {
+                    console.error('Error creating new category during save:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error creating new category during save. Please try again.', 'error');
+                    return false;
+                }
+            }
+        }
+        // Save any unsaved query entities first
+        if (this.EditMode) {
+            for (const entity of this.queryEntities) {
+                if (!entity.IsSaved && entity.EntityID) {
+                    try {
+                        await entity.Save();
+                    }
+                    catch (error) {
+                        console.error('Error saving query entity:', error);
+                    }
+                }
+            }
+        }
+        // Call the parent save method
+        const result = await super.SaveRecord(StopEditModeAfterSave);
+        if (result) {
+            this.updateUnsavedChangesFlag();
+            // Reload related data after successful save as server-side processes may have updated them
+            if (this.record && this.record.ID) {
+                await Promise.all([
+                    this.loadQueryParameters(),
+                    this.loadQueryFields(),
+                    this.loadQueryEntities()
+                ]);
+            }
+        }
+        return result;
+    }
+    getStatusBadgeColor() {
+        switch (this.record?.Status) {
+            case 'Approved':
+                return '#28a745';
+            case 'Pending':
+                return '#ffc107';
+            case 'Rejected':
+                return '#dc3545';
+            default:
+                return '#6c757d';
+        }
+    }
+    /**
+     * Handle SQL value changes from the code editor
+     */
+    onSQLChange(value) {
+        if (this.isUpdatingEditorValue || !this.record) {
+            return;
+        }
+        // Update the record SQL value
+        this.record.SQL = value;
+        this.updateUnsavedChangesFlag();
+    }
+    /**
+     * Add a new field
+     */
+    async addField() {
+        try {
+            const md = new Metadata();
+            const newField = await md.GetEntityObject('Query Fields');
+            newField.QueryID = this.record.ID;
+            newField.Name = `field${this.queryFields.length + 1}`;
+            newField.Description = '';
+            newField.Sequence = (this.queryFields.length + 1) * 10;
+            newField.SQLBaseType = 'nvarchar';
+            newField.SQLFullType = 'nvarchar(255)';
+            const saved = await newField.Save();
+            if (saved) {
+                this.queryFields.push(newField);
+                this.queryFields.sort((a, b) => (a.Sequence || 0) - (b.Sequence || 0));
+                this.updateUnsavedChangesFlag();
+                MJNotificationService.Instance.CreateSimpleNotification('Field added successfully', 'success', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error adding field:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to add field', 'error', 3000);
+        }
+    }
+    /**
+     * Delete a field
+     */
+    async deleteField(field) {
+        if (!confirm(`Are you sure you want to delete field "${field.Name}"?`)) {
+            return;
+        }
+        try {
+            const deleted = await field.Delete();
+            if (deleted) {
+                this.queryFields = this.queryFields.filter(f => f.ID !== field.ID);
+                this.updateUnsavedChangesFlag();
+                MJNotificationService.Instance.CreateSimpleNotification('Field deleted successfully', 'success', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting field:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to delete field', 'error', 3000);
+        }
+    }
+    /**
+     * Add a new entity
+     */
+    async addEntity() {
+        try {
+            const md = new Metadata();
+            const newEntity = await md.GetEntityObject('Query Entities');
+            newEntity.QueryID = this.record.ID;
+            // Add to the list immediately for UI responsiveness
+            this.queryEntities.push(newEntity);
+            this.updateUnsavedChangesFlag();
+        }
+        catch (error) {
+            console.error('Error adding entity:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to add entity', 'error', 3000);
+        }
+    }
+    /**
+     * Delete an entity
+     */
+    async deleteEntity(entity) {
+        if (!confirm(`Are you sure you want to delete entity "${entity.Entity}"?`)) {
+            return;
+        }
+        try {
+            const deleted = await entity.Delete();
+            if (deleted) {
+                this.queryEntities = this.queryEntities.filter(e => e.ID !== entity.ID);
+                this.updateUnsavedChangesFlag();
+                MJNotificationService.Instance.CreateSimpleNotification('Entity deleted successfully', 'success', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting entity:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to delete entity', 'error', 3000);
+        }
+    }
+    /**
+     * Get entity options for dropdown
+     */
+    getEntityOptions() {
+        return Metadata.Provider.Entities.map(e => ({
+            text: e.Name,
+            id: e.ID
+        })).sort((a, b) => a.text.localeCompare(b.text));
+    }
+    /**
+     * Get the grid edit mode based on component edit mode
+     */
+    GridEditMode() {
+        return this.EditMode ? "Queue" : "None";
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵQueryFormExtendedComponent_BaseFactory; return function QueryFormExtendedComponent_Factory(t) { return (ɵQueryFormExtendedComponent_BaseFactory || (ɵQueryFormExtendedComponent_BaseFactory = i0.ɵɵgetInheritedFactory(QueryFormExtendedComponent)))(t || QueryFormExtendedComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryFormExtendedComponent, selectors: [["mj-query-form"]], viewQuery: function QueryFormExtendedComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sqlEditor = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [1, "record-form-container"], [1, "record-form"], [3, "form"], [1, "query-header", 2, "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, "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"], ["class", "fa-solid fa-check-circle", 4, "ngIf"], ["class", "fa-solid fa-clock", 4, "ngIf"], ["class", "fa-solid fa-times-circle", 4, "ngIf"], [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, "parameters-grid"], [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, "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", "EditMode"], [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 QueryFormExtendedComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵtemplate(1, QueryFormExtendedComponent_Conditional_1_Template, 61, 22);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.record ? 1 : -1);
+        } }, dependencies: [i1.NgClass, i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextAreaComponent, i4.TextBoxComponent, i4.SwitchComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.UserViewGridComponent, i8.FormToolbarComponent, i9.CodeEditorComponent, 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: 10px;\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}", ".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}"] }); }
+};
+QueryFormExtendedComponent = __decorate([
+    RegisterClass(BaseFormComponent, 'Queries')
+], QueryFormExtendedComponent);
+export { QueryFormExtendedComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryFormExtendedComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-query-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\">\n            <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n            <!-- Header Section -->\n            <div class=\"query-header\" style=\"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                                    <i class=\"fa-solid fa-check-circle\" *ngIf=\"record.Status === 'Approved'\"></i>\n                                    <i class=\"fa-solid fa-clock\" *ngIf=\"record.Status === 'Pending'\"></i>\n                                    <i class=\"fa-solid fa-times-circle\" *ngIf=\"record.Status === 'Rejected'\"></i>\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=\"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-user-view-grid \n                                            [Params]=\"BuildRelationshipViewParamsByEntityName('Query Permissions','QueryID')\"  \n                                            [NewRecordValues]=\"NewRecordValues('Query Permissions')\"\n                                            [AllowLoad]=\"true\"  \n                                            [EditMode]=\"GridEditMode()\">\n                                        </mj-user-view-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: 10px;\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", ".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}"] }]
+    }], null, { sqlEditor: [{
+            type: ViewChild,
+            args: ['sqlEditor']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryFormExtendedComponent, { className: "QueryFormExtendedComponent", filePath: "src/lib/custom/Queries/query-form.component.ts", lineNumber: 24 }); })();
+export function LoadQueryFormExtendedComponent() {
+    // prevents tree shaking
+}
+//# sourceMappingURL=query-form.component.js.map