@memberjunction/ng-explorer-core 2.98.0 → 2.99.0

package/dist/lib/query-browser-component/query-browser.component.js

@@ -5,77 +5,896 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component } from '@angular/core';
-import { ItemType } from '../../generic/Item.types';
 import { BaseNavigationComponent } from '@memberjunction/ng-shared';
-import { BaseBrowserComponent } from '../base-browser-component/base-browser-component';
-import { Metadata } from '@memberjunction/core';
+import { Metadata, RunView } from '@memberjunction/core';
 import { RegisterClass } from '@memberjunction/global';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@memberjunction/ng-shared";
-import * as i3 from "../resource-browser/resource-browser.component";
-let QueryBrowserComponent = class QueryBrowserComponent extends BaseBrowserComponent {
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack1 = ($index, $item) => $item.ID;
+function QueryBrowserComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_29_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearAllFilters()); });
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵtext(2, " Clear Filters ");
+    i0.ɵɵelementEnd();
+} }
+function QueryBrowserComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtext(2, " Loading queries... ");
+    i0.ɵɵelementEnd();
+} }
+function QueryBrowserComponent_Conditional_32_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 35);
+    i0.ɵɵelementStart(1, "span", 31);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_32_For_5_Template_span_click_1_listener() { const pathItem_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToCategory(pathItem_r5.id)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pathItem_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("current", pathItem_r5.id === ctx_r1.currentCategoryId);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", pathItem_r5.name, " ");
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_6_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const category_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(category_r7.QueryCount);
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_6_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_32_Conditional_6_For_6_Template_div_click_0_listener() { const category_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToCategory(category_r7.ID)); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, QueryBrowserComponent_Conditional_32_Conditional_6_For_6_Conditional_4_Template, 2, 1, "span", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const category_r7 = ctx.$implicit;
+    i0.ɵɵproperty("title", category_r7.Description || category_r7.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(category_r7.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(category_r7.QueryCount && category_r7.QueryCount > 0 ? 4 : -1);
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "h4", 36);
+    i0.ɵɵelement(2, "i", 37);
+    i0.ɵɵtext(3, " Categories ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 38);
+    i0.ɵɵrepeaterCreate(5, QueryBrowserComponent_Conditional_32_Conditional_6_For_6_Template, 5, 3, "div", 39, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(ctx_r1.filteredCategories);
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_7_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const query_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(query_r9.Description);
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_7_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_32_Conditional_7_For_8_Template_div_click_0_listener() { const query_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectQuery(query_r9)); });
+    i0.ɵɵelementStart(1, "div", 49);
+    i0.ɵɵelement(2, "i", 50);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 51)(4, "div", 52);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryBrowserComponent_Conditional_32_Conditional_7_For_8_Conditional_6_Template, 2, 1, "div", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 54);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const query_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", (ctx_r1.selectedQuery == null ? null : ctx_r1.selectedQuery.ID) === query_r9.ID);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(query_r9.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(query_r9.Description ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("status-" + (query_r9.Status || "pending").toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", query_r9.Status || "Pending", " ");
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "h4", 36);
+    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵtext(3, " Queries ");
+    i0.ɵɵelementStart(4, "span", 45);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 46);
+    i0.ɵɵrepeaterCreate(7, QueryBrowserComponent_Conditional_32_Conditional_7_For_8_Template, 9, 7, "div", 47, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("(", ctx_r1.filteredQueries.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.filteredQueries);
+} }
+function QueryBrowserComponent_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No categories or queries found");
+    i0.ɵɵelementEnd()();
+} }
+function QueryBrowserComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 30)(2, "span", 31);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_32_Template_span_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateToRoot()); });
+    i0.ɵɵtext(3, " ./ ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, QueryBrowserComponent_Conditional_32_For_5_Template, 3, 3, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, QueryBrowserComponent_Conditional_32_Conditional_6_Template, 7, 0, "div", 32)(7, QueryBrowserComponent_Conditional_32_Conditional_7_Template, 9, 1, "div", 33)(8, QueryBrowserComponent_Conditional_32_Conditional_8_Template, 4, 0, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.currentCategoryPath);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.filteredCategories.length > 0 ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredQueries.length > 0 ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredCategories.length === 0 && ctx_r1.filteredQueries.length === 0 ? 8 : -1);
+} }
+function QueryBrowserComponent_Conditional_33_Conditional_1_For_15_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_33_Conditional_1_For_15_Template_div_click_0_listener() { const query_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectQuery(query_r11)); });
+    i0.ɵɵelementStart(1, "div", 57);
+    i0.ɵɵelement(2, "i", 50);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 58);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 59);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 60)(9, "span", 66);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 61);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 62)(14, "button", 67);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_33_Conditional_1_For_15_Template_button_click_14_listener($event) { const query_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.runQuery(query_r11, $event)); });
+    i0.ɵɵelement(15, "i", 68);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 69);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_33_Conditional_1_For_15_Template_button_click_16_listener($event) { const query_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deleteQuery(query_r11, $event)); });
+    i0.ɵɵelement(17, "i", 70);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const query_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", (ctx_r1.selectedQuery == null ? null : ctx_r1.selectedQuery.ID) === query_r11.ID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", query_r11.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", query_r11.Description || "-", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getCategoryName(query_r11.CategoryID) || "-", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("status-" + (query_r11.Status || "pending").toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", query_r11.Status || "Pending", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(query_r11.__mj_UpdatedAt), " ");
+} }
+function QueryBrowserComponent_Conditional_33_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
+    i0.ɵɵtext(2, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 58);
+    i0.ɵɵtext(4, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 59);
+    i0.ɵɵtext(6, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 60);
+    i0.ɵɵtext(8, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 61);
+    i0.ɵɵtext(10, "Last Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 62);
+    i0.ɵɵtext(12, "Actions");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 63);
+    i0.ɵɵrepeaterCreate(14, QueryBrowserComponent_Conditional_33_Conditional_1_For_15_Template, 18, 9, "div", 64, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(14);
+    i0.ɵɵrepeater(ctx_r1.filteredQueries);
+} }
+function QueryBrowserComponent_Conditional_33_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 71);
+    i0.ɵɵtext(1, "Try adjusting your filters");
+    i0.ɵɵelementEnd();
+} }
+function QueryBrowserComponent_Conditional_33_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 4);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No queries found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, QueryBrowserComponent_Conditional_33_Conditional_2_Conditional_4_Template, 2, 0, "p", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.searchText || ctx_r1.selectedStatus !== "all" ? 4 : -1);
+} }
+function QueryBrowserComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵtemplate(1, QueryBrowserComponent_Conditional_33_Conditional_1_Template, 16, 0)(2, QueryBrowserComponent_Conditional_33_Conditional_2_Template, 5, 1, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredQueries.length > 0 ? 1 : 2);
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const query_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", query_r13.Description, " ");
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const query_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getCategoryName(query_r13.CategoryID), " ");
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Template_div_click_0_listener() { const query_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectQuery(query_r13)); });
+    i0.ɵɵelementStart(1, "div", 75)(2, "div", 76);
+    i0.ɵɵelement(3, "i", 50);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 66);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Conditional_7_Template, 2, 1, "div", 77);
+    i0.ɵɵelementStart(8, "div", 78)(9, "div", 79);
+    i0.ɵɵtext(10, "SQL Preview:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "pre", 80);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 81)(14, "div", 82);
+    i0.ɵɵtemplate(15, QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Conditional_15_Template, 3, 1, "span", 83);
+    i0.ɵɵelementStart(16, "span", 83);
+    i0.ɵɵelement(17, "i", 84);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 85)(20, "button", 67);
+    i0.ɵɵlistener("click", function QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Template_button_click_20_listener($event) { const query_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.runQuery(query_r13, $event)); });
+    i0.ɵɵelement(21, "i", 68);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const query_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", (ctx_r1.selectedQuery == null ? null : ctx_r1.selectedQuery.ID) === query_r13.ID);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", query_r13.Name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("status-" + (query_r13.Status || "pending").toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", query_r13.Status || "Pending", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(query_r13.Description ? 7 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.getQueryPreview(query_r13.SQL));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(query_r13.CategoryID ? 15 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDate(query_r13.__mj_UpdatedAt), " ");
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵrepeaterCreate(1, QueryBrowserComponent_Conditional_34_Conditional_1_For_2_Template, 22, 10, "div", 73, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredQueries);
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 71);
+    i0.ɵɵtext(1, "Try adjusting your filters");
+    i0.ɵɵelementEnd();
+} }
+function QueryBrowserComponent_Conditional_34_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No queries to display");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, QueryBrowserComponent_Conditional_34_Conditional_2_Conditional_4_Template, 2, 0, "p", 71);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.searchText || ctx_r1.selectedStatus !== "all" ? 4 : -1);
+} }
+function QueryBrowserComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtemplate(1, QueryBrowserComponent_Conditional_34_Conditional_1_Template, 3, 0, "div", 72)(2, QueryBrowserComponent_Conditional_34_Conditional_2_Template, 5, 1, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredQueries.length > 0 ? 1 : 2);
+} }
+let QueryBrowserComponent = class QueryBrowserComponent extends BaseNavigationComponent {
     router;
     route;
     sharedService;
-    NewItemOptions = [];
+    // View mode state
+    viewMode = 'list';
+    // Data
+    allQueries = [];
+    allCategories = [];
+    filteredQueries = [];
+    filteredCategories = [];
+    // Selection state
+    selectedQuery = null;
+    currentCategoryId = null;
+    currentCategoryPath = [];
+    // Filter state
+    searchText = '';
+    selectedStatus = 'all';
+    selectedSort = 'updated-desc';
+    activeFilters = [];
+    // Loading state
+    isLoading = false;
+    // Category counts cache
+    categoryCounts = new Map();
+    // Options for dropdowns
+    statusOptions = [
+        { text: 'All Statuses', value: 'all' },
+        { text: 'Pending', value: 'Pending' },
+        { text: 'Approved', value: 'Approved' },
+        { text: 'Rejected', value: 'Rejected' },
+        { text: 'Expired', value: 'Expired' }
+    ];
+    sortOptions = [
+        { text: 'Name (A-Z)', value: 'name-asc' },
+        { text: 'Name (Z-A)', value: 'name-desc' },
+        { text: 'Recently Updated', value: 'updated-desc' },
+        { text: 'Oldest Updated', value: 'updated-asc' },
+        { text: 'Status', value: 'status' }
+    ];
+    // Search debouncing
+    searchSubject = new Subject();
+    destroy$ = new Subject();
     constructor(router, route, sharedService) {
         super();
         this.router = router;
         this.route = route;
         this.sharedService = sharedService;
-        this.pageName = "Queries";
-        this.routeName = "queries";
-        this.routeNameSingular = "query";
-        this.itemEntityName = "Queries";
-        this.categoryEntityName = "Query Categories";
-        const params = this.router.getCurrentNavigation()?.extractedUrl.queryParams;
-        super.InitPathAndQueryData(params, this.route);
     }
     async ngOnInit() {
-        //doing this "manually" rather than calling super.InitForResource 
-        //because BaseBrowserComponent's resource filter includes a filter for UserID
-        //which doesnt exist on queries
-        this.route.paramMap.subscribe(async (params) => {
-            this.selectedFolderID = params.get('folderID');
+        // Set up search debouncing
+        this.searchSubject
+            .pipe(debounceTime(300), takeUntil(this.destroy$))
+            .subscribe(searchText => {
+            this.performSearch(searchText);
+        });
+        // Load initial data
+        await this.loadData();
+        // Check for view mode from route params
+        this.route.queryParams.subscribe(params => {
+            if (params['view'] && ['category', 'list', 'panel'].includes(params['view'])) {
+                this.viewMode = params['view'];
+                // Reapply filters when view mode changes from route
+                this.applyFilters();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async loadData() {
+        this.isLoading = true;
+        try {
             const md = new Metadata();
-            let categoryFilter = this.selectedFolderID ? `CategoryID = '${this.selectedFolderID}'` : `CategoryID IS NULL`;
-            let resourceFilter = `${categoryFilter}`;
-            let resourceCategoryFilter = this.selectedFolderID ? `ParentID = '${this.selectedFolderID}'` : `ParentID IS NULL`;
-            await this.LoadData({
-                sortItemsAfterLoad: true,
-                categoryItemFilter: resourceCategoryFilter,
-                entityItemFilter: resourceFilter,
-                showLoader: true
+            const rv = new RunView();
+            // Load queries and categories in parallel
+            const [queriesResult, categoriesResult] = await Promise.all([
+                rv.RunView({
+                    EntityName: 'Queries',
+                    OrderBy: '__mj_UpdatedAt DESC',
+                    ResultType: 'entity_object'
+                }),
+                rv.RunView({
+                    EntityName: 'Query Categories',
+                    OrderBy: 'Name',
+                    ResultType: 'entity_object'
+                })
+            ]);
+            if (queriesResult.Success) {
+                this.allQueries = queriesResult.Results || [];
+            }
+            if (categoriesResult.Success) {
+                this.allCategories = categoriesResult.Results || [];
+                this.calculateCategoryCounts();
+            }
+            // Apply initial filters
+            this.applyFilters();
+        }
+        catch (error) {
+            console.error('Error loading data:', error);
+            this.sharedService.CreateSimpleNotification('Error loading queries', 'error', 3000);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    calculateCategoryCounts() {
+        // Count queries per category
+        const counts = new Map();
+        for (const query of this.allQueries) {
+            if (query.CategoryID) {
+                const current = counts.get(query.CategoryID) || 0;
+                counts.set(query.CategoryID, current + 1);
+            }
+        }
+        // Count queries recursively for each category (including subcategories)
+        const getRecursiveCount = (categoryId) => {
+            let count = counts.get(categoryId) || 0;
+            // Add counts from all child categories
+            const children = this.allCategories.filter(c => c.ParentID === categoryId);
+            for (const child of children) {
+                count += getRecursiveCount(child.ID);
+            }
+            return count;
+        };
+        // Don't set filteredCategories here - let applyFilters handle it
+        // Just store the counts for later use
+        this.categoryCounts = new Map();
+        for (const cat of this.allCategories) {
+            this.categoryCounts.set(cat.ID, getRecursiveCount(cat.ID));
+        }
+    }
+    setViewMode(mode) {
+        this.viewMode = mode;
+        // Update URL with view mode
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: { view: mode },
+            queryParamsHandling: 'merge'
+        });
+        // Reapply filters to update the view
+        this.applyFilters();
+    }
+    onSearchChange(searchText) {
+        this.searchSubject.next(searchText);
+    }
+    performSearch(searchText) {
+        this.searchText = searchText;
+        this.applyFilters();
+    }
+    // New clean filter/sort handlers
+    getSelectedStatusOption() {
+        return this.statusOptions.find(opt => opt.value === this.selectedStatus) || this.statusOptions[0];
+    }
+    getSelectedSortOption() {
+        return this.sortOptions.find(opt => opt.value === this.selectedSort) || this.sortOptions[2];
+    }
+    handleStatusChange(option) {
+        if (option && option.value !== undefined) {
+            this.selectedStatus = option.value;
+            this.applyFilters();
+        }
+    }
+    handleSortChange(option) {
+        if (option && option.value !== undefined) {
+            this.selectedSort = option.value;
+            this.applySortAndFilter();
+        }
+    }
+    hasActiveFilters() {
+        return this.searchText !== '' || this.selectedStatus !== 'all';
+    }
+    clearAllFilters() {
+        this.searchText = '';
+        this.selectedStatus = 'all';
+        this.applyFilters();
+    }
+    applyFilters() {
+        // Start with all queries
+        let filtered = [...this.allQueries];
+        // Clear active filters tracking
+        this.activeFilters = [];
+        // 1. Apply search filter if present
+        if (this.searchText && this.searchText.trim() !== '') {
+            const searchLower = this.searchText.toLowerCase().trim();
+            filtered = filtered.filter(q => {
+                const nameMatch = q.Name?.toLowerCase().includes(searchLower) || false;
+                const descMatch = q.Description?.toLowerCase().includes(searchLower) || false;
+                const sqlMatch = q.SQL?.toLowerCase().includes(searchLower) || false;
+                return nameMatch || descMatch || sqlMatch;
             });
+            this.activeFilters.push(`Search: ${this.searchText}`);
+        }
+        // 2. Apply status filter if not "all"
+        if (this.selectedStatus && this.selectedStatus !== 'all') {
+            filtered = filtered.filter(q => q.Status === this.selectedStatus);
+            this.activeFilters.push(`Status: ${this.selectedStatus}`);
+        }
+        // 3. Apply category-based filtering in category view mode
+        if (this.viewMode === 'category') {
+            filtered = filtered.filter(q => {
+                if (this.currentCategoryId === null) {
+                    // At root: show only queries without a category
+                    return !q.CategoryID || q.CategoryID === null || q.CategoryID === '';
+                }
+                else {
+                    // Inside a category: show only queries in this specific category
+                    return q.CategoryID === this.currentCategoryId;
+                }
+            });
+        }
+        // Set the filtered queries
+        this.filteredQueries = filtered;
+        // Update categories for category view
+        this.updateFilteredCategories();
+        // Apply sorting to the filtered results
+        this.applySort();
+    }
+    updateFilteredCategories() {
+        // Filter categories based on current parent
+        let filtered = this.allCategories.filter(cat => {
+            if (this.currentCategoryId === null) {
+                // At root: show categories with no parent
+                return !cat.ParentID;
+            }
+            else {
+                // In a category: show child categories
+                return cat.ParentID === this.currentCategoryId;
+            }
+        });
+        // Apply search to categories if in category mode
+        if (this.searchText && this.viewMode === 'category') {
+            const search = this.searchText.toLowerCase();
+            filtered = filtered.filter(cat => cat.Name?.toLowerCase().includes(search) ||
+                cat.Description?.toLowerCase().includes(search));
+        }
+        // Convert to CategoryWithCount and use cached counts
+        this.filteredCategories = filtered.map(cat => {
+            const count = this.categoryCounts.get(cat.ID) || 0;
+            return {
+                ...cat.GetAll(), // Use GetAll() to get plain object with all properties
+                QueryCount: count
+            };
+        });
+    }
+    applySort() {
+        // Create a copy to avoid mutation issues
+        const queries = [...this.filteredQueries];
+        switch (this.selectedSort) {
+            case 'name-asc':
+                queries.sort((a, b) => {
+                    const nameA = a.Name || '';
+                    const nameB = b.Name || '';
+                    return nameA.localeCompare(nameB);
+                });
+                break;
+            case 'name-desc':
+                queries.sort((a, b) => {
+                    const nameA = a.Name || '';
+                    const nameB = b.Name || '';
+                    return nameB.localeCompare(nameA);
+                });
+                break;
+            case 'updated-desc':
+                queries.sort((a, b) => {
+                    const dateA = a.__mj_UpdatedAt ? new Date(a.__mj_UpdatedAt).getTime() : 0;
+                    const dateB = b.__mj_UpdatedAt ? new Date(b.__mj_UpdatedAt).getTime() : 0;
+                    return dateB - dateA;
+                });
+                break;
+            case 'updated-asc':
+                queries.sort((a, b) => {
+                    const dateA = a.__mj_UpdatedAt ? new Date(a.__mj_UpdatedAt).getTime() : 0;
+                    const dateB = b.__mj_UpdatedAt ? new Date(b.__mj_UpdatedAt).getTime() : 0;
+                    return dateA - dateB;
+                });
+                break;
+            case 'status':
+                queries.sort((a, b) => {
+                    const statusA = a.Status || 'Pending';
+                    const statusB = b.Status || 'Pending';
+                    return statusA.localeCompare(statusB);
+                });
+                break;
+            default:
+                // Default to recent updates
+                queries.sort((a, b) => {
+                    const dateA = a.__mj_UpdatedAt ? new Date(a.__mj_UpdatedAt).getTime() : 0;
+                    const dateB = b.__mj_UpdatedAt ? new Date(b.__mj_UpdatedAt).getTime() : 0;
+                    return dateB - dateA;
+                });
+                break;
+        }
+        // Assign the sorted array
+        this.filteredQueries = queries;
+    }
+    // Helper to apply both sort and filter
+    applySortAndFilter() {
+        this.applyFilters(); // This calls applySort internally
+    }
+    navigateToRoot() {
+        this.currentCategoryId = null;
+        this.currentCategoryPath = [];
+        this.applyFilters();
+    }
+    navigateToCategory(categoryId) {
+        if (categoryId === null) {
+            this.navigateToRoot();
+            return;
+        }
+        this.currentCategoryId = categoryId;
+        this.buildBreadcrumb(categoryId);
+        this.applyFilters();
+    }
+    buildBreadcrumb(categoryId) {
+        const path = [];
+        let currentId = categoryId;
+        while (currentId) {
+            const category = this.allCategories.find(c => c.ID === currentId);
+            if (category) {
+                path.unshift({
+                    id: category.ID,
+                    name: category.Name
+                });
+                currentId = category.ParentID;
+            }
+            else {
+                break;
+            }
+        }
+        this.currentCategoryPath = path;
+    }
+    selectQuery(query) {
+        // Strip quotes from ID if present
+        let queryId = query.ID;
+        if (queryId && typeof queryId === 'string') {
+            queryId = queryId.replace(/^['"]|['"]$/g, '');
+        }
+        // Navigate to the entity form using the resource/record pattern
+        // Format: /resource/record/ID|{queryId}?Entity=Queries
+        const routeSegment = `ID|${queryId}`;
+        this.router.navigate(['resource', 'record', routeSegment], {
+            queryParams: {
+                Entity: 'Queries',
+                viewMode: this.viewMode // Preserve the current view mode
+            }
+        });
+    }
+    async runQuery(query, event) {
+        event.stopPropagation();
+        let queryId = query.ID;
+        if (queryId && typeof queryId === 'string') {
+            queryId = queryId.replace(/^['\"]|['\"]$/g, '');
+        }
+        // Navigate to the query form with run=true parameter
+        // This will trigger the run dialog in the query form component
+        const routeSegment = `ID|${queryId}`;
+        this.router.navigate(['resource', 'record', routeSegment], {
+            queryParams: {
+                Entity: 'Queries',
+                run: 'true' // This will trigger the run dialog to open
+            }
         });
     }
-    //this could exist in the BaseBrowserComponent class, but 
-    //the class would need a reference or dependency on the router
-    //which i dont think is needed
-    itemClick(item) {
-        let dataID = "";
-        if (item.Type === ItemType.Resource) {
-            let query = item.Data;
-            dataID = query.FirstPrimaryKey.Value;
+    async deleteQuery(query, event) {
+        event.stopPropagation();
+        if (!confirm(`Are you sure you want to delete "${query.Name}"?`)) {
+            return;
+        }
+        try {
+            let result = false;
+            // First try to delete directly if the query has a Delete method
+            if (query && typeof query.Delete === 'function') {
+                result = await query.Delete();
+            }
+            else {
+                // If not, load the entity properly and then delete
+                const md = new Metadata();
+                const queryEntity = await md.GetEntityObject('Queries');
+                // Load the existing record
+                const loaded = await queryEntity.Load(query.ID);
+                if (!loaded) {
+                    this.sharedService.CreateSimpleNotification('Query not found', 'error', 3000);
+                    return;
+                }
+                // Now delete the loaded entity
+                result = await queryEntity.Delete();
+            }
+            if (result) {
+                this.sharedService.CreateSimpleNotification('Query deleted successfully', 'success', 3000);
+                await this.loadData();
+            }
+            else {
+                // Check if there's a specific error message
+                const errorMsg = query.LatestResult?.Message || 'Failed to delete query';
+                this.sharedService.CreateSimpleNotification(errorMsg, 'error', 5000);
+                console.error('Delete failed:', query.LatestResult);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting query:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Error deleting query';
+            this.sharedService.CreateSimpleNotification(errorMessage, 'error', 5000);
         }
-        super.Navigate(item, this.router, dataID);
     }
-    onBeforeUpdateItemEvent(event) {
-        event.Cancel = true;
-        let item = event.Item;
-        let query = item.Data;
-        this.router.navigate(['resource', this.routeNameSingular, query.ID], { queryParams: { edit: true } });
+    async createNewQuery() {
+        // Navigate to the query form with an empty primary key for new record
+        // Using empty string as the third parameter to match MJ's convention
+        const queryParams = {
+            Entity: 'Queries'
+        };
+        // Include category context if we're in category view
+        // This can be used to pre-populate the CategoryID field
+        if (this.viewMode === 'category' && this.currentCategoryId) {
+            // Pass initial field values in query params
+            queryParams.NewRecordValues = `CategoryID|${this.currentCategoryId}`;
+        }
+        // Navigate with empty string as third param for new record
+        this.router.navigate(['resource', 'record', ''], // Empty string indicates new record
+        { queryParams });
+    }
+    getCategoryName(categoryId) {
+        if (!categoryId)
+            return '';
+        const category = this.allCategories.find(c => c.ID === categoryId);
+        return category?.Name || '';
+    }
+    formatDate(date) {
+        if (!date)
+            return '-';
+        const d = typeof date === 'string' ? new Date(date) : date;
+        if (isNaN(d.getTime()))
+            return '-';
+        // Format as MM/DD/YYYY HH:MM
+        return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    getQueryPreview(sql) {
+        if (!sql)
+            return 'No SQL query defined';
+        // Get first 3 lines or 150 characters, whichever is shorter
+        const lines = sql.split('\n').slice(0, 3);
+        let preview = lines.join('\n');
+        if (preview.length > 150) {
+            preview = preview.substring(0, 150) + '...';
+        }
+        else if (sql.length > preview.length) {
+            preview += '\n...';
+        }
+        return preview;
     }
     static ɵfac = function QueryBrowserComponent_Factory(t) { return new (t || QueryBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryBrowserComponent, selectors: [["mj-query-browser"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 5, consts: [["resourceBrowserQueries", ""], ["ResourceTypeName", "Queries", "Title", "Queries", "DisplayMode", "Tile", 3, "ResourceSelected", "EditItemEvent", "EnableCategories", "EnableItemEdit", "EnableItemDelete", "CurrentCategoryID", "NewItemOptions"]], template: function QueryBrowserComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "mj-resource-browser", 1, 0);
-            i0.ɵɵlistener("ResourceSelected", function QueryBrowserComponent_Template_mj_resource_browser_ResourceSelected_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.itemClick($event)); })("EditItemEvent", function QueryBrowserComponent_Template_mj_resource_browser_EditItemEvent_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBeforeUpdateItemEvent($event)); });
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryBrowserComponent, selectors: [["mj-query-browser"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 35, vars: 22, consts: [[1, "query-browser-container"], [1, "query-browser-header"], [1, "header-left"], [1, "page-title"], [1, "fa-solid", "fa-database"], [1, "header-right"], [1, "search-container"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search queries...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "view-mode-toggles"], ["title", "Category View", 1, "view-mode-btn", 3, "click"], [1, "fa-solid", "fa-folder-tree"], ["title", "List View", 1, "view-mode-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Panel View", 1, "view-mode-btn", 3, "click"], [1, "fa-solid", "fa-grip"], [1, "btn", "btn-primary", "create-query-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "filter-bar"], [1, "filter-group"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "clear-filters-btn"], [1, "loading-container"], [1, "query-browser-content"], [1, "category-view"], [1, "list-view"], [1, "panel-view"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "breadcrumb"], [1, "breadcrumb-item", 3, "click"], [1, "category-folders"], [1, "category-queries"], [1, "empty-state"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "section-title"], [1, "fa-solid", "fa-folder"], [1, "folder-grid"], [1, "folder-item", 3, "title"], [1, "folder-item", 3, "click", "title"], [1, "fa-solid", "fa-folder", "folder-icon"], [1, "folder-name"], [1, "item-count"], [1, "fa-solid", "fa-file-code"], [1, "count"], [1, "query-list"], [1, "query-list-item", 3, "selected"], [1, "query-list-item", 3, "click"], [1, "query-icon"], [1, "fa-solid", "fa-code"], [1, "query-info"], [1, "query-name"], [1, "query-description"], [1, "query-status"], [1, "fa-solid", "fa-folder-open"], [1, "list-header"], [1, "col-name"], [1, "col-description"], [1, "col-category"], [1, "col-status"], [1, "col-updated"], [1, "col-actions"], [1, "list-body"], [1, "list-row", 3, "selected"], [1, "list-row", 3, "click"], [1, "status-badge"], ["title", "Run", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-play"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "empty-hint"], [1, "panel-grid"], [1, "query-panel", 3, "selected"], [1, "query-panel", 3, "click"], [1, "panel-header"], [1, "panel-title"], [1, "panel-description"], [1, "panel-sql-preview"], [1, "sql-label"], [1, "sql-code"], [1, "panel-footer"], [1, "panel-meta"], [1, "meta-item"], [1, "fa-solid", "fa-clock"], [1, "panel-actions"]], template: function QueryBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵtext(5, " Queries ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 5)(7, "div", 6);
+            i0.ɵɵelement(8, "i", 7);
+            i0.ɵɵelementStart(9, "input", 8);
+            i0.ɵɵtwoWayListener("ngModelChange", function QueryBrowserComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.searchText, $event) || (ctx.searchText = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function QueryBrowserComponent_Template_input_ngModelChange_9_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 9)(11, "button", 10);
+            i0.ɵɵlistener("click", function QueryBrowserComponent_Template_button_click_11_listener() { return ctx.setViewMode("category"); });
+            i0.ɵɵelement(12, "i", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "button", 12);
+            i0.ɵɵlistener("click", function QueryBrowserComponent_Template_button_click_13_listener() { return ctx.setViewMode("list"); });
+            i0.ɵɵelement(14, "i", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "button", 14);
+            i0.ɵɵlistener("click", function QueryBrowserComponent_Template_button_click_15_listener() { return ctx.setViewMode("panel"); });
+            i0.ɵɵelement(16, "i", 15);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(17, "button", 16);
+            i0.ɵɵlistener("click", function QueryBrowserComponent_Template_button_click_17_listener() { return ctx.createNewQuery(); });
+            i0.ɵɵelement(18, "i", 17);
+            i0.ɵɵtext(19, " New Query ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 18)(21, "div", 19)(22, "label");
+            i0.ɵɵtext(23, "Status:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "kendo-dropdownlist", 20);
+            i0.ɵɵlistener("valueChange", function QueryBrowserComponent_Template_kendo_dropdownlist_valueChange_24_listener($event) { return ctx.handleStatusChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(25, "div", 19)(26, "label");
+            i0.ɵɵtext(27, "Sort by:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "kendo-dropdownlist", 20);
+            i0.ɵɵlistener("valueChange", function QueryBrowserComponent_Template_kendo_dropdownlist_valueChange_28_listener($event) { return ctx.handleSortChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(29, QueryBrowserComponent_Conditional_29_Template, 3, 0, "button", 21);
             i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(30, QueryBrowserComponent_Conditional_30_Template, 3, 0, "div", 22);
+            i0.ɵɵelementStart(31, "div", 23);
+            i0.ɵɵtemplate(32, QueryBrowserComponent_Conditional_32_Template, 9, 3, "div", 24)(33, QueryBrowserComponent_Conditional_33_Template, 3, 1, "div", 25)(34, QueryBrowserComponent_Conditional_34_Template, 3, 1, "div", 26);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("EnableCategories", false)("EnableItemEdit", false)("EnableItemDelete", false)("CurrentCategoryID", ctx.selectedFolderID)("NewItemOptions", ctx.NewItemOptions);
-        } }, dependencies: [i3.ResourceBrowserComponent], styles: [".k-card-body[_ngcontent-%COMP%] {\n    height: 80px;\n  }"] });
+            i0.ɵɵadvance(9);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.searchText);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "category");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "list");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "panel");
+            i0.ɵɵadvance(9);
+            i0.ɵɵstyleProp("width", 150, "px");
+            i0.ɵɵproperty("data", ctx.statusOptions)("value", ctx.getSelectedStatusOption());
+            i0.ɵɵadvance(4);
+            i0.ɵɵstyleProp("width", 200, "px");
+            i0.ɵɵproperty("data", ctx.sortOptions)("value", ctx.getSelectedSortOption());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasActiveFilters() ? 29 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 30 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("loading", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.viewMode === "category" && !ctx.isLoading ? 32 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.viewMode === "list" && !ctx.isLoading ? 33 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.viewMode === "panel" && !ctx.isLoading ? 34 : -1);
+        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.DropDownListComponent], styles: ["\n\n.query-browser-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f5f5;\n}\n\n\n\n.query-browser-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.page-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.page-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #4a90e2;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 300px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.5rem 1rem 0.5rem 2.5rem;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  transition: border-color 0.2s;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4a90e2;\n  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 0.875rem;\n}\n\n\n\n.view-mode-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f8f8f8;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-mode-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem 1rem;\n  background: transparent;\n  border: none;\n  color: #666;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: all 0.2s;\n  border-right: 1px solid #ddd;\n}\n\n.view-mode-btn[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.view-mode-btn[_ngcontent-%COMP%]:hover {\n  background: #e8e8e8;\n  color: #333;\n}\n\n.view-mode-btn.active[_ngcontent-%COMP%] {\n  background: #4a90e2;\n  color: white;\n}\n\n\n\n.create-query-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem 1rem;\n  background: #4a90e2;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: background 0.2s;\n}\n\n.create-query-btn[_ngcontent-%COMP%]:hover {\n  background: #357abd;\n}\n\n\n\n.filter-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #666;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  padding: 0.375rem 0.75rem;\n  background: #f44336;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: background 0.2s;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%]:hover {\n  background: #d32f2f;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 3rem;\n  color: #666;\n  font-size: 1rem;\n}\n\n.loading-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  color: #4a90e2;\n}\n\n\n\n.query-browser-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 1.5rem;\n  transition: opacity 0.2s;\n}\n\n.query-browser-content.loading[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n\n\n.category-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem;\n  background: white;\n  border-radius: 4px;\n  font-size: 0.875rem;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  color: #4a90e2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: color 0.2s;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n  color: #357abd;\n  text-decoration: underline;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: #666;\n  cursor: default;\n  text-decoration: none;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  color: #999;\n  font-size: 0.75rem;\n}\n\n\n\n.category-folders[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.section-title[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  font-weight: normal;\n  color: #666;\n  font-size: 0.875rem;\n}\n\n.folder-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 1rem;\n}\n\n.folder-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1.5rem 1rem;\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  position: relative;\n}\n\n.folder-item[_ngcontent-%COMP%]:hover {\n  background: #e8f4fd;\n  border-color: #4a90e2;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.folder-icon[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  color: #ffa726;\n  margin-bottom: 0.5rem;\n}\n\n.folder-name[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #333;\n  text-align: center;\n  word-break: break-word;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  background: #4a90e2;\n  color: white;\n  font-size: 0.75rem;\n  padding: 0.125rem 0.375rem;\n  border-radius: 12px;\n  min-width: 20px;\n  text-align: center;\n}\n\n\n\n.category-queries[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.query-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.query-list-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.query-list-item[_ngcontent-%COMP%]:hover {\n  background: #e8f4fd;\n  border-color: #4a90e2;\n}\n\n.query-list-item.selected[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n  border-color: #2196f3;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: white;\n  border-radius: 4px;\n  margin-right: 1rem;\n  color: #4a90e2;\n  font-size: 1.25rem;\n}\n\n.query-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.query-name[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 500;\n  color: #333;\n  margin-bottom: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.query-description[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: #666;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.query-status[_ngcontent-%COMP%] {\n  padding: 0.25rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n\n\n.list-view[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 2fr 2fr 1.5fr 1fr 1.5fr 120px;\n  padding: 1rem 1.5rem;\n  background: #f8f8f8;\n  border-bottom: 2px solid #e0e0e0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #666;\n}\n\n.list-body[_ngcontent-%COMP%] {\n  max-height: calc(100vh - 300px);\n  overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 2fr 2fr 1.5fr 1fr 1.5fr 120px;\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: background 0.2s;\n  align-items: center;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n  background: #f8f8f8;\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n}\n\n.col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.col-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #4a90e2;\n  font-size: 1rem;\n}\n\n.col-description[_ngcontent-%COMP%], \n.col-category[_ngcontent-%COMP%] {\n  color: #666;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.col-updated[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 0.8125rem;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #f8f8f8;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  color: #666;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: #4a90e2;\n  border-color: #4a90e2;\n  color: white;\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n  background: #f44336;\n  border-color: #f44336;\n}\n\n\n\n.panel-view[_ngcontent-%COMP%] {\n  background: transparent;\n}\n\n.panel-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n}\n\n.query-panel[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.query-panel[_ngcontent-%COMP%]:hover {\n  border-color: #4a90e2;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.query-panel.selected[_ngcontent-%COMP%] {\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex: 1;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #4a90e2;\n}\n\n.panel-description[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: #666;\n  line-height: 1.4;\n}\n\n.panel-sql-preview[_ngcontent-%COMP%] {\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 0.75rem;\n}\n\n.sql-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #666;\n  margin-bottom: 0.5rem;\n  text-transform: uppercase;\n}\n\n.sql-code[_ngcontent-%COMP%] {\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 0.8125rem;\n  color: #333;\n  background: white;\n  padding: 0.5rem;\n  border-radius: 2px;\n  margin: 0;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 1rem;\n  border-top: 1px solid #e0e0e0;\n}\n\n.panel-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.8125rem;\n  color: #666;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: #999;\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 0.25rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%], \n.query-status.status-pending[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n  border: 1px solid #ffc107;\n}\n\n.status-badge.status-approved[_ngcontent-%COMP%], \n.query-status.status-approved[_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n  border: 1px solid #28a745;\n}\n\n.status-badge.status-rejected[_ngcontent-%COMP%], \n.query-status.status-rejected[_ngcontent-%COMP%] {\n  background: #f8d7da;\n  color: #721c24;\n  border: 1px solid #dc3545;\n}\n\n.status-badge.status-expired[_ngcontent-%COMP%], \n.query-status.status-expired[_ngcontent-%COMP%] {\n  background: #e0e0e0;\n  color: #666;\n  border: 1px solid #999;\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: 4rem 2rem;\n  color: #999;\n  background: white;\n  border-radius: 8px;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 4rem;\n  margin-bottom: 1rem;\n  color: #ddd;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0.5rem 0;\n  font-size: 1.125rem;\n  color: #666;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: #999;\n}\n\n\n\n@media (max-width: 1200px) {\n  .panel-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  }\n  \n  .list-header[_ngcontent-%COMP%], \n   .list-row[_ngcontent-%COMP%] {\n    grid-template-columns: 2fr 1.5fr 1fr 1fr 120px;\n  }\n  \n  .col-description[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .query-browser-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n  }\n  \n  .header-right[_ngcontent-%COMP%] {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n  \n  .search-container[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n  \n  .filter-bar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  \n  .filter-group[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  \n  .panel-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .folder-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n  }\n  \n  .list-header[_ngcontent-%COMP%], \n   .list-row[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n  \n  .list-header[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%]:not(.col-name), \n   .list-row[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%]:not(.col-name) {\n    display: none;\n  }\n}\n\n\n\n.query-browser-content[_ngcontent-%COMP%]::-webkit-scrollbar, \n.list-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.query-browser-content[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.list-body[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.query-browser-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.list-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 4px;\n}\n\n.query-browser-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.list-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n\n\n.k-card-body[_ngcontent-%COMP%] {\n  height: 80px;\n}"] });
 };
 QueryBrowserComponent = __decorate([
     RegisterClass(BaseNavigationComponent, 'Queries')
@@ -83,7 +902,7 @@ QueryBrowserComponent = __decorate([
 export { QueryBrowserComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'mj-query-browser', template: "<mj-resource-browser\n    #resourceBrowserQueries\n    ResourceTypeName=\"Queries\"\n    [EnableCategories]=\"false\"\n    [EnableItemEdit]=\"false\"\n    [EnableItemDelete]=\"false\"\n    [CurrentCategoryID]=\"selectedFolderID\"\n    Title=\"Queries\"\n    DisplayMode=\"Tile\"\n    [NewItemOptions]=\"NewItemOptions\"\n    (ResourceSelected)=\"itemClick($event)\"\n    (EditItemEvent)=\"onBeforeUpdateItemEvent($event)\"\n/>\n<!--\n<app-generic-browser-list \ntitle=\"Queries\" \nitemType=\"query\"\niconName=\"data\" \n[items]=\"items\"\naddText=\"Create New Query\"\nItemEntityName=\"Queries\"\nCategoryEntityName=\"Query Categories\"\n(itemClickEvent)=\"itemClick($event)\"\n(AfterAddFolderEvent)=\"onEvent($event)\"\n(AfterAddItemEvent)=\"onEvent($event)\"\n(AfterDeleteItemEvent)=\"onEvent($event)\"\n(AfterDeleteFolderEvent)=\"onEvent($event)\"\n[selectedFolderID]=\"selectedFolderID\"\n[showLoader]=\"showLoader\"\n[disableEditButton]=\"true\"\n(viewModeChangeEvent)=\"onViewModeChange($event)\"\n(BeforeUpdateItemEvent)=\"onBeforeUpdateItemEvent($event)\"\n/>\n-->", styles: [".k-card-body {\n    height: 80px;\n  }"] }]
+        args: [{ selector: 'mj-query-browser', template: "<div class=\"query-browser-container\">\n  <!-- Header with Title and View Mode Toggles -->\n  <div class=\"query-browser-header\">\n    <div class=\"header-left\">\n      <h2 class=\"page-title\">\n        <i class=\"fa-solid fa-database\"></i>\n        Queries\n      </h2>\n    </div>\n    \n    <div class=\"header-right\">\n      <!-- Search Bar -->\n      <div class=\"search-container\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"search-input\" \n          placeholder=\"Search queries...\" \n          [(ngModel)]=\"searchText\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n      </div>\n\n      <!-- View Mode Toggles -->\n      <div class=\"view-mode-toggles\">\n        <button \n          class=\"view-mode-btn\"\n          [class.active]=\"viewMode === 'category'\"\n          (click)=\"setViewMode('category')\"\n          title=\"Category View\"\n        >\n          <i class=\"fa-solid fa-folder-tree\"></i>\n        </button>\n        <button \n          class=\"view-mode-btn\"\n          [class.active]=\"viewMode === 'list'\"\n          (click)=\"setViewMode('list')\"\n          title=\"List View\"\n        >\n          <i class=\"fa-solid fa-list\"></i>\n        </button>\n        <button \n          class=\"view-mode-btn\"\n          [class.active]=\"viewMode === 'panel'\"\n          (click)=\"setViewMode('panel')\"\n          title=\"Panel View\"\n        >\n          <i class=\"fa-solid fa-grip\"></i>\n        </button>\n      </div>\n\n      <!-- Create New Query Button -->\n      <button class=\"btn btn-primary create-query-btn\" (click)=\"createNewQuery()\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Query\n      </button>\n    </div>\n  </div>\n\n  <!-- Filter Bar -->\n  <div class=\"filter-bar\">\n    <div class=\"filter-group\">\n      <label>Status:</label>\n      <kendo-dropdownlist\n        [data]=\"statusOptions\"\n        [value]=\"getSelectedStatusOption()\"\n        textField=\"text\"\n        valueField=\"value\"\n        (valueChange)=\"handleStatusChange($event)\"\n        [style.width.px]=\"150\"\n      >\n      </kendo-dropdownlist>\n    </div>\n\n    <div class=\"filter-group\">\n      <label>Sort by:</label>\n      <kendo-dropdownlist\n        [data]=\"sortOptions\"\n        [value]=\"getSelectedSortOption()\"\n        textField=\"text\"\n        valueField=\"value\"\n        (valueChange)=\"handleSortChange($event)\"\n        [style.width.px]=\"200\"\n      >\n      </kendo-dropdownlist>\n    </div>\n\n    @if (hasActiveFilters()) {\n      <button class=\"clear-filters-btn\" (click)=\"clearAllFilters()\">\n        <i class=\"fa-solid fa-times\"></i>\n        Clear Filters\n      </button>\n    }\n  </div>\n\n  <!-- Loading Indicator -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      Loading queries...\n    </div>\n  }\n\n  <!-- Content Area -->\n  <div class=\"query-browser-content\" [class.loading]=\"isLoading\">\n    <!-- Category Path Mode -->\n    @if (viewMode === 'category' && !isLoading) {\n      <div class=\"category-view\">\n        <!-- Breadcrumb -->\n        <div class=\"breadcrumb\">\n          <span class=\"breadcrumb-item\" (click)=\"navigateToRoot()\">\n            ./\n          </span>\n          @for (pathItem of currentCategoryPath; track pathItem.id) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n            <span \n              class=\"breadcrumb-item\" \n              [class.current]=\"pathItem.id === currentCategoryId\"\n              (click)=\"navigateToCategory(pathItem.id)\"\n            >\n              {{ pathItem.name }}\n            </span>\n          }\n        </div>\n\n        <!-- Categories (Folders) -->\n        @if (filteredCategories.length > 0) {\n          <div class=\"category-folders\">\n            <h4 class=\"section-title\">\n              <i class=\"fa-solid fa-folder\"></i>\n              Categories\n            </h4>\n            <div class=\"folder-grid\">\n              @for (category of filteredCategories; track category.ID) {\n                <div \n                  class=\"folder-item\"\n                  (click)=\"navigateToCategory(category.ID)\"\n                  [title]=\"category.Description || category.Name\"\n                >\n                  <i class=\"fa-solid fa-folder folder-icon\"></i>\n                  <span class=\"folder-name\">{{ category.Name }}</span>\n                  @if (category.QueryCount && category.QueryCount > 0) {\n                    <span class=\"item-count\">{{ category.QueryCount }}</span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Queries in Current Category -->\n        @if (filteredQueries.length > 0) {\n          <div class=\"category-queries\">\n            <h4 class=\"section-title\">\n              <i class=\"fa-solid fa-file-code\"></i>\n              Queries\n              <span class=\"count\">({{ filteredQueries.length }})</span>\n            </h4>\n            <div class=\"query-list\">\n              @for (query of filteredQueries; track query.ID) {\n                <div \n                  class=\"query-list-item\"\n                  (click)=\"selectQuery(query)\"\n                  [class.selected]=\"selectedQuery?.ID === query.ID\"\n                >\n                  <div class=\"query-icon\">\n                    <i class=\"fa-solid fa-code\"></i>\n                  </div>\n                  <div class=\"query-info\">\n                    <div class=\"query-name\">{{ query.Name }}</div>\n                    @if (query.Description) {\n                      <div class=\"query-description\">{{ query.Description }}</div>\n                    }\n                  </div>\n                  <div class=\"query-status\" [class]=\"'status-' + (query.Status || 'pending').toLowerCase()\">\n                    {{ query.Status || 'Pending' }}\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        @if (filteredCategories.length === 0 && filteredQueries.length === 0) {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-folder-open\"></i>\n            <p>No categories or queries found</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- List Mode -->\n    @if (viewMode === 'list' && !isLoading) {\n      <div class=\"list-view\">\n        @if (filteredQueries.length > 0) {\n          <div class=\"list-header\">\n            <div class=\"col-name\">Name</div>\n            <div class=\"col-description\">Description</div>\n            <div class=\"col-category\">Category</div>\n            <div class=\"col-status\">Status</div>\n            <div class=\"col-updated\">Last Updated</div>\n            <div class=\"col-actions\">Actions</div>\n          </div>\n          <div class=\"list-body\">\n            @for (query of filteredQueries; track query.ID) {\n              <div \n                class=\"list-row\"\n                (click)=\"selectQuery(query)\"\n                [class.selected]=\"selectedQuery?.ID === query.ID\"\n              >\n                <div class=\"col-name\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  {{ query.Name }}\n                </div>\n                <div class=\"col-description\">\n                  {{ query.Description || '-' }}\n                </div>\n                <div class=\"col-category\">\n                  {{ getCategoryName(query.CategoryID) || '-' }}\n                </div>\n                <div class=\"col-status\">\n                  <span class=\"status-badge\" [class]=\"'status-' + (query.Status || 'pending').toLowerCase()\">\n                    {{ query.Status || 'Pending' }}\n                  </span>\n                </div>\n                <div class=\"col-updated\">\n                  {{ formatDate(query.__mj_UpdatedAt) }}\n                </div>\n                <div class=\"col-actions\">\n                  <button \n                    class=\"action-btn\"\n                    (click)=\"runQuery(query, $event)\"\n                    title=\"Run\"\n                  >\n                    <i class=\"fa-solid fa-play\"></i>\n                  </button>\n                  <button \n                    class=\"action-btn danger\"\n                    (click)=\"deleteQuery(query, $event)\"\n                    title=\"Delete\"\n                  >\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-database\"></i>\n            <p>No queries found</p>\n            @if (searchText || selectedStatus !== 'all') {\n              <p class=\"empty-hint\">Try adjusting your filters</p>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Panel Mode -->\n    @if (viewMode === 'panel' && !isLoading) {\n      <div class=\"panel-view\">\n        @if (filteredQueries.length > 0) {\n          <div class=\"panel-grid\">\n            @for (query of filteredQueries; track query.ID) {\n              <div \n                class=\"query-panel\"\n                (click)=\"selectQuery(query)\"\n                [class.selected]=\"selectedQuery?.ID === query.ID\"\n              >\n                <div class=\"panel-header\">\n                  <div class=\"panel-title\">\n                    <i class=\"fa-solid fa-code\"></i>\n                    {{ query.Name }}\n                  </div>\n                  <span class=\"status-badge\" [class]=\"'status-' + (query.Status || 'pending').toLowerCase()\">\n                    {{ query.Status || 'Pending' }}\n                  </span>\n                </div>\n                \n                @if (query.Description) {\n                  <div class=\"panel-description\">\n                    {{ query.Description }}\n                  </div>\n                }\n                \n                <div class=\"panel-sql-preview\">\n                  <div class=\"sql-label\">SQL Preview:</div>\n                  <pre class=\"sql-code\">{{ getQueryPreview(query.SQL) }}</pre>\n                </div>\n                \n                <div class=\"panel-footer\">\n                  <div class=\"panel-meta\">\n                    @if (query.CategoryID) {\n                      <span class=\"meta-item\">\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{ getCategoryName(query.CategoryID) }}\n                      </span>\n                    }\n                    <span class=\"meta-item\">\n                      <i class=\"fa-solid fa-clock\"></i>\n                      {{ formatDate(query.__mj_UpdatedAt) }}\n                    </span>\n                  </div>\n                  <div class=\"panel-actions\">\n                    <button \n                      class=\"action-btn\"\n                      (click)=\"runQuery(query, $event)\"\n                      title=\"Run\"\n                    >\n                      <i class=\"fa-solid fa-play\"></i>\n                    </button>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-grip\"></i>\n            <p>No queries to display</p>\n            @if (searchText || selectedStatus !== 'all') {\n              <p class=\"empty-hint\">Try adjusting your filters</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>", styles: ["/* Container Styles */\n.query-browser-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f5f5f5;\n}\n\n/* Header Styles */\n.query-browser-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n}\n\n.page-title {\n  margin: 0;\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.page-title i {\n  color: #4a90e2;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n/* Search Bar */\n.search-container {\n  position: relative;\n  width: 300px;\n}\n\n.search-input {\n  width: 100%;\n  padding: 0.5rem 1rem 0.5rem 2.5rem;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  transition: border-color 0.2s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: #4a90e2;\n  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);\n}\n\n.search-icon {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 0.875rem;\n}\n\n/* View Mode Toggles */\n.view-mode-toggles {\n  display: flex;\n  background: #f8f8f8;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.view-mode-btn {\n  padding: 0.5rem 1rem;\n  background: transparent;\n  border: none;\n  color: #666;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: all 0.2s;\n  border-right: 1px solid #ddd;\n}\n\n.view-mode-btn:last-child {\n  border-right: none;\n}\n\n.view-mode-btn:hover {\n  background: #e8e8e8;\n  color: #333;\n}\n\n.view-mode-btn.active {\n  background: #4a90e2;\n  color: white;\n}\n\n/* Create Button */\n.create-query-btn {\n  padding: 0.5rem 1rem;\n  background: #4a90e2;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: background 0.2s;\n}\n\n.create-query-btn:hover {\n  background: #357abd;\n}\n\n/* Filter Bar */\n.filter-bar {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem 1.5rem;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.filter-group {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.filter-group label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #666;\n}\n\n.clear-filters-btn {\n  margin-left: auto;\n  padding: 0.375rem 0.75rem;\n  background: #f44336;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: background 0.2s;\n}\n\n.clear-filters-btn:hover {\n  background: #d32f2f;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 3rem;\n  color: #666;\n  font-size: 1rem;\n}\n\n.loading-container i {\n  font-size: 1.25rem;\n  color: #4a90e2;\n}\n\n/* Content Area */\n.query-browser-content {\n  flex: 1;\n  overflow: auto;\n  padding: 1.5rem;\n  transition: opacity 0.2s;\n}\n\n.query-browser-content.loading {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Category View Styles */\n.category-view {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem;\n  background: white;\n  border-radius: 4px;\n  font-size: 0.875rem;\n}\n\n.breadcrumb-item {\n  color: #4a90e2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: color 0.2s;\n}\n\n.breadcrumb-item:hover {\n  color: #357abd;\n  text-decoration: underline;\n}\n\n.breadcrumb-item.current {\n  color: #666;\n  cursor: default;\n  text-decoration: none;\n}\n\n.breadcrumb-separator {\n  color: #999;\n  font-size: 0.75rem;\n}\n\n/* Category Folders */\n.category-folders {\n  background: white;\n  border-radius: 8px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.section-title {\n  margin: 0 0 1rem 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.section-title .count {\n  font-weight: normal;\n  color: #666;\n  font-size: 0.875rem;\n}\n\n.folder-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  gap: 1rem;\n}\n\n.folder-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1.5rem 1rem;\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  position: relative;\n}\n\n.folder-item:hover {\n  background: #e8f4fd;\n  border-color: #4a90e2;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.folder-icon {\n  font-size: 2.5rem;\n  color: #ffa726;\n  margin-bottom: 0.5rem;\n}\n\n.folder-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #333;\n  text-align: center;\n  word-break: break-word;\n}\n\n.item-count {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  background: #4a90e2;\n  color: white;\n  font-size: 0.75rem;\n  padding: 0.125rem 0.375rem;\n  border-radius: 12px;\n  min-width: 20px;\n  text-align: center;\n}\n\n/* Category Queries */\n.category-queries {\n  background: white;\n  border-radius: 8px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.query-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.query-list-item {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.query-list-item:hover {\n  background: #e8f4fd;\n  border-color: #4a90e2;\n}\n\n.query-list-item.selected {\n  background: #e3f2fd;\n  border-color: #2196f3;\n}\n\n.query-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: white;\n  border-radius: 4px;\n  margin-right: 1rem;\n  color: #4a90e2;\n  font-size: 1.25rem;\n}\n\n.query-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.query-name {\n  font-size: 1rem;\n  font-weight: 500;\n  color: #333;\n  margin-bottom: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.query-description {\n  font-size: 0.875rem;\n  color: #666;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.query-status {\n  padding: 0.25rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n/* List View Styles */\n.list-view {\n  background: white;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.list-header {\n  display: grid;\n  grid-template-columns: 2fr 2fr 1.5fr 1fr 1.5fr 120px;\n  padding: 1rem 1.5rem;\n  background: #f8f8f8;\n  border-bottom: 2px solid #e0e0e0;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #666;\n}\n\n.list-body {\n  max-height: calc(100vh - 300px);\n  overflow-y: auto;\n}\n\n.list-row {\n  display: grid;\n  grid-template-columns: 2fr 2fr 1.5fr 1fr 1.5fr 120px;\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: background 0.2s;\n  align-items: center;\n}\n\n.list-row:hover {\n  background: #f8f8f8;\n}\n\n.list-row.selected {\n  background: #e3f2fd;\n}\n\n.col-name {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 500;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.col-name i {\n  color: #4a90e2;\n  font-size: 1rem;\n}\n\n.col-description,\n.col-category {\n  color: #666;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.col-updated {\n  color: #666;\n  font-size: 0.8125rem;\n}\n\n.col-actions {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #f8f8f8;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  color: #666;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.action-btn:hover {\n  background: #4a90e2;\n  border-color: #4a90e2;\n  color: white;\n}\n\n.action-btn.danger:hover {\n  background: #f44336;\n  border-color: #f44336;\n}\n\n/* Panel View Styles */\n.panel-view {\n  background: transparent;\n}\n\n.panel-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n}\n\n.query-panel {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.query-panel:hover {\n  border-color: #4a90e2;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.query-panel.selected {\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.panel-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex: 1;\n}\n\n.panel-title i {\n  color: #4a90e2;\n}\n\n.panel-description {\n  font-size: 0.875rem;\n  color: #666;\n  line-height: 1.4;\n}\n\n.panel-sql-preview {\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  padding: 0.75rem;\n}\n\n.sql-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #666;\n  margin-bottom: 0.5rem;\n  text-transform: uppercase;\n}\n\n.sql-code {\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 0.8125rem;\n  color: #333;\n  background: white;\n  padding: 0.5rem;\n  border-radius: 2px;\n  margin: 0;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.panel-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 1rem;\n  border-top: 1px solid #e0e0e0;\n}\n\n.panel-meta {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.8125rem;\n  color: #666;\n}\n\n.meta-item {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n.meta-item i {\n  font-size: 0.875rem;\n  color: #999;\n}\n\n.panel-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n/* Status Badge Styles */\n.status-badge {\n  padding: 0.25rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-badge.status-pending,\n.query-status.status-pending {\n  background: #fff3cd;\n  color: #856404;\n  border: 1px solid #ffc107;\n}\n\n.status-badge.status-approved,\n.query-status.status-approved {\n  background: #d4edda;\n  color: #155724;\n  border: 1px solid #28a745;\n}\n\n.status-badge.status-rejected,\n.query-status.status-rejected {\n  background: #f8d7da;\n  color: #721c24;\n  border: 1px solid #dc3545;\n}\n\n.status-badge.status-expired,\n.query-status.status-expired {\n  background: #e0e0e0;\n  color: #666;\n  border: 1px solid #999;\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: 4rem 2rem;\n  color: #999;\n  background: white;\n  border-radius: 8px;\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 4rem;\n  margin-bottom: 1rem;\n  color: #ddd;\n}\n\n.empty-state p {\n  margin: 0.5rem 0;\n  font-size: 1.125rem;\n  color: #666;\n}\n\n.empty-hint {\n  font-size: 0.875rem;\n  color: #999;\n}\n\n/* Responsive Design */\n@media (max-width: 1200px) {\n  .panel-grid {\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  }\n  \n  .list-header,\n  .list-row {\n    grid-template-columns: 2fr 1.5fr 1fr 1fr 120px;\n  }\n  \n  .col-description {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .query-browser-header {\n    flex-direction: column;\n    gap: 1rem;\n    padding: 1rem;\n  }\n  \n  .header-right {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n  \n  .search-container {\n    width: 100%;\n  }\n  \n  .filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  \n  .filter-group {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  \n  .panel-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .folder-grid {\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n  }\n  \n  .list-header,\n  .list-row {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n  \n  .list-header > *:not(.col-name),\n  .list-row > *:not(.col-name) {\n    display: none;\n  }\n}\n\n/* Scrollbar Styles */\n.query-browser-content::-webkit-scrollbar,\n.list-body::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.query-browser-content::-webkit-scrollbar-track,\n.list-body::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.query-browser-content::-webkit-scrollbar-thumb,\n.list-body::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 4px;\n}\n\n.query-browser-content::-webkit-scrollbar-thumb:hover,\n.list-body::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n/* Legacy k-card style - keep for backward compatibility */\n.k-card-body {\n  height: 80px;\n}"] }]
     }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserComponent, { className: "QueryBrowserComponent", filePath: "src/lib/query-browser-component/query-browser.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserComponent, { className: "QueryBrowserComponent", filePath: "src/lib/query-browser-component/query-browser.component.ts", lineNumber: 28 }); })();
 //# sourceMappingURL=query-browser.component.js.map