@memberjunction/ng-dashboards 5.23.0 → 5.25.0

package/dist/MCP/mcp-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-resource.component.d.ts","sourceRoot":"","sources":["../../src/MCP/mcp-resource.component.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;;AAG7D;;;;;GAKG;AACH,qBAca,oBAAqB,SAAQ,qBAAsB,YAAW,MAAM;IAE7E,QAAQ,IAAI,IAAI;IAMV,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAZtD,oBAAoB;2CAApB,oBAAoB;CAehC"}
+{"version":3,"file":"mcp-resource.component.d.ts","sourceRoot":"","sources":["../../src/MCP/mcp-resource.component.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;;AAG7D;;;;;GAKG;AACH,qBAca,oBAAqB,SAAQ,qBAAsB,YAAW,MAAM;IAE7E,QAAQ,IAAI,IAAI;IAOV,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAbtD,oBAAoB;2CAApB,oBAAoB;CAgBhC"}

package/dist/MCP/mcp-resource.component.js

@@ -25,6 +25,7 @@ import * as i1 from "./mcp-dashboard.component";
  */
 let MCPResourceComponent = class MCPResourceComponent extends BaseResourceComponent {
     ngOnInit() {
+        super.ngOnInit();
         // Signal that the resource has finished loading
         // This is required for the shell's loading screen to dismiss
         this.NotifyLoadComplete();

package/dist/MCP/mcp-resource.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-resource.component.js","sourceRoot":"","sources":["../../src/MCP/mcp-resource.component.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;AAEvD;;;;;GAKG;AAeI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,qBAAqB;IAE3D,QAAQ;QACJ,gDAAgD;QAChD,6DAA6D;QAC7D,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAED,KAAK,CAAC,sBAAsB,CAAC,IAAkB;QAC3C,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,KAAK,CAAC,oBAAoB,CAAC,IAAkB;QACzC,OAAO,8BAA8B,CAAC;IAC1C,CAAC;6PAdQ,oBAAoB,yBAApB,oBAAoB;6DAApB,oBAAoB;YATzB,mCAAqC;;;AAShC,oBAAoB;IAdhC,aAAa,CAAC,qBAAqB,EAAE,aAAa,CAAC;GAcvC,oBAAoB,CAehC;;iFAfY,oBAAoB;cAbhC,SAAS;6BACI,KAAK,YACL,iBAAiB,YACjB;;KAET;;kFAQQ,oBAAoB","sourcesContent":["/**\n * @fileoverview MCP Resource Component\n *\n * Resource wrapper for the MCP Dashboard that allows it to be used\n * as a nav item in applications (like the AI Application).\n *\n * @module MCP Resource\n */\n\nimport { Component, OnInit } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { ResourceData } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\n\n/**\n * MCP Resource Component\n *\n * Wrapper that hosts the MCP Dashboard for use in application nav items.\n * Registered as 'MCPResource' for use with ResourceType: \"Custom\" nav items.\n */\n@RegisterClass(BaseResourceComponent, 'MCPResource')\n@Component({\n  standalone: false,\n    selector: 'mj-mcp-resource',\n    template: `\n        <mj-mcp-dashboard></mj-mcp-dashboard>\n    `,\n    styles: [`\n        :host {\n            display: block;\n            height: 100%;\n        }\n    `]\n})\nexport class MCPResourceComponent extends BaseResourceComponent implements OnInit {\n\n    ngOnInit(): void {\n        // Signal that the resource has finished loading\n        // This is required for the shell's loading screen to dismiss\n        this.NotifyLoadComplete();\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'MCP';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-plug-circle-bolt';\n    }\n}\n"]}
+{"version":3,"file":"mcp-resource.component.js","sourceRoot":"","sources":["../../src/MCP/mcp-resource.component.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;AAEvD;;;;;GAKG;AAeI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,qBAAqB;IAE3D,QAAQ;QACJ,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,gDAAgD;QAChD,6DAA6D;QAC7D,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAED,KAAK,CAAC,sBAAsB,CAAC,IAAkB;QAC3C,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,KAAK,CAAC,oBAAoB,CAAC,IAAkB;QACzC,OAAO,8BAA8B,CAAC;IAC1C,CAAC;6PAfQ,oBAAoB,yBAApB,oBAAoB;6DAApB,oBAAoB;YATzB,mCAAqC;;;AAShC,oBAAoB;IAdhC,aAAa,CAAC,qBAAqB,EAAE,aAAa,CAAC;GAcvC,oBAAoB,CAgBhC;;iFAhBY,oBAAoB;cAbhC,SAAS;6BACI,KAAK,YACL,iBAAiB,YACjB;;KAET;;kFAQQ,oBAAoB","sourcesContent":["/**\n * @fileoverview MCP Resource Component\n *\n * Resource wrapper for the MCP Dashboard that allows it to be used\n * as a nav item in applications (like the AI Application).\n *\n * @module MCP Resource\n */\n\nimport { Component, OnInit } from '@angular/core';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { ResourceData } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\n\n/**\n * MCP Resource Component\n *\n * Wrapper that hosts the MCP Dashboard for use in application nav items.\n * Registered as 'MCPResource' for use with ResourceType: \"Custom\" nav items.\n */\n@RegisterClass(BaseResourceComponent, 'MCPResource')\n@Component({\n  standalone: false,\n    selector: 'mj-mcp-resource',\n    template: `\n        <mj-mcp-dashboard></mj-mcp-dashboard>\n    `,\n    styles: [`\n        :host {\n            display: block;\n            height: 100%;\n        }\n    `]\n})\nexport class MCPResourceComponent extends BaseResourceComponent implements OnInit {\n\n    ngOnInit(): void {\n        super.ngOnInit();\n        // Signal that the resource has finished loading\n        // This is required for the shell's loading screen to dismiss\n        this.NotifyLoadComplete();\n    }\n\n    async GetResourceDisplayName(data: ResourceData): Promise<string> {\n        return 'MCP';\n    }\n\n    async GetResourceIconClass(data: ResourceData): Promise<string> {\n        return 'fa-solid fa-plug-circle-bolt';\n    }\n}\n"]}

package/dist/QueryBrowser/query-browser-resource.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit, OnDestroy, ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
-import { Router } from '@angular/router';
-import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
+import { Subject } from 'rxjs';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { QueryInfo, QueryCategoryInfo } from '@memberjunction/core';
 import { ResourceData } from '@memberjunction/core-entities';
 import { QueryEntityLinkClickEvent, QueryRowClickEvent } from '@memberjunction/ng-query-viewer';
@@ -26,8 +26,6 @@ interface CategoryNode {
  */
 export declare class QueryBrowserResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {
     private cdr;
-    private navigationService;
-    private router;
     private elementRef;
     private zone;
     private static readonly SETTINGS_KEY;
@@ -54,10 +52,8 @@ export declare class QueryBrowserResourceComponent extends BaseResourceComponent
     /** Tracks expanded state by category ID — persisted across sessions */
     private expandedState;
     private metadata;
-    private destroy$;
+    protected destroy$: Subject<void>;
     private dataLoaded;
-    private skipUrlUpdate;
-    private lastNavigatedUrl;
     private boundOnResizeMove;
     private boundOnResizeEnd;
     ShowQueryDrawer: boolean;
@@ -75,7 +71,7 @@ export declare class QueryBrowserResourceComponent extends BaseResourceComponent
     /** Ordered status options for the drawer dropdown — all valid Query statuses */
     readonly DrawerStatuses: Array<'Pending' | 'Approved' | 'Rejected' | 'Expired'>;
     private initialDrawerSnapshot;
-    constructor(cdr: ChangeDetectorRef, navigationService: NavigationService, router: Router, elementRef: ElementRef, zone: NgZone);
+    constructor(cdr: ChangeDetectorRef, elementRef: ElementRef, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     GetResourceDisplayName(data: ResourceData): Promise<string>;
@@ -158,24 +154,15 @@ export declare class QueryBrowserResourceComponent extends BaseResourceComponent
     trackByCategory(index: number, node: CategoryNode): string;
     trackByQuery(index: number, query: QueryInfo): string;
     /**
-     * Parse URL query string for query state.
-     * Query params: queryId
+     * Select a query by ID, expanding the tree to show it.
+     * Clears selection if no matching query is found.
      */
-    private parseUrlState;
+    private selectQueryById;
     /**
-     * Update URL query string to reflect current state.
-     * Uses NavigationService for proper URL management that respects app-scoped routes.
+     * React to back/forward navigation or deep-link activation.
+     * Called by the base class when the URL query params change externally.
      */
-    private updateUrl;
-    /**
-     * Handle external navigation (back/forward buttons).
-     * Parses the URL and applies the state without triggering a new navigation.
-     */
-    private onExternalNavigation;
-    /**
-     * Parse URL state from a URL string (used for external navigation).
-     */
-    private parseUrlFromString;
+    protected OnQueryParamsChanged(params: Record<string, string>, source: 'popstate' | 'deeplink'): void;
     /**
      * Expands the category tree to show the given query
      */

package/dist/QueryBrowser/query-browser-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-browser-resource.component.d.ts","sourceRoot":"","sources":["../../src/QueryBrowser/query-browser-resource.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"query-browser-resource.component.d.ts","sourceRoot":"","sources":["../../src/QueryBrowser/query-browser-resource.component.ts"],"names":[],"mappings":"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"}

package/dist/QueryBrowser/query-browser-resource.component.js

@@ -6,21 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var QueryBrowserResourceComponent_1;
 import { Component, ChangeDetectionStrategy, HostListener, ViewChild } from '@angular/core';
-import { NavigationEnd } from '@angular/router';
 import { Subject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { Metadata, QueryCategoryInfo, CompositeKey } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared";
-import * as i2 from "@angular/router";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@memberjunction/ng-code-editor";
-import * as i7 from "@memberjunction/ng-query-viewer";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@memberjunction/ng-query-viewer";
 const _c0 = ["drawerSqlEditor"];
 const _c1 = a0 => ({ node: a0 });
 const _forTrack0 = ($index, $item) => $item.ID;
@@ -506,8 +502,6 @@ function QueryBrowserResourceComponent_Conditional_38_Template(rf, ctx) { if (rf
 let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends BaseResourceComponent {
     static { QueryBrowserResourceComponent_1 = this; }
     cdr;
-    navigationService;
-    router;
     elementRef;
     zone;
     static SETTINGS_KEY = 'QueryBrowser/panelWidth';
@@ -541,8 +535,6 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     metadata = new Metadata();
     destroy$ = new Subject();
     dataLoaded = false;
-    skipUrlUpdate = true; // Skip URL updates during initialization
-    lastNavigatedUrl = ''; // Track URL to avoid reacting to our own navigation
     // Bound event handlers for resize (need references for removeEventListener)
     boundOnResizeMove = this.onResizeMove.bind(this);
     boundOnResizeEnd = this.onResizeEnd.bind(this);
@@ -564,30 +556,21 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     /** Ordered status options for the drawer dropdown — all valid Query statuses */
     DrawerStatuses = ['Pending', 'Approved', 'Rejected', 'Expired'];
     initialDrawerSnapshot = '';
-    constructor(cdr, navigationService, router, elementRef, zone) {
+    constructor(cdr, elementRef, zone) {
         super();
         this.cdr = cdr;
-        this.navigationService = navigationService;
-        this.router = router;
         this.elementRef = elementRef;
         this.zone = zone;
     }
     ngOnInit() {
+        super.ngOnInit();
         this.loadSavedPanelWidth();
         this.loadSavedStatusFilters();
         this.loadSavedExpandedState();
         this.loadData();
-        // Subscribe to router NavigationEnd events for back/forward button support
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
-            .subscribe(event => {
-            const currentUrl = event.urlAfterRedirects || event.url;
-            if (currentUrl !== this.lastNavigatedUrl && this.dataLoaded) {
-                this.onExternalNavigation(currentUrl);
-            }
-        });
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.destroy$.next();
         this.destroy$.complete();
         // Ensure any pending debounced settings are flushed
@@ -618,19 +601,13 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             this.queries = (this.metadata.Queries || []).filter(q => q.UserCanRun(this.metadata.CurrentUser));
             this.applyFilters();
             this.buildCategoryTree();
-            // Mark data as loaded and apply any query params for deep linking
+            // Mark data as loaded
             this.dataLoaded = true;
-            // Parse initial URL state
-            const urlState = this.parseUrlState();
-            if (urlState?.queryId) {
-                const query = this.queries.find(q => UUIDsEqual(q.ID, urlState.queryId));
-                if (query) {
-                    this.selectedQuery = query;
-                    this.expandCategoryForQuery(query);
-                }
+            // Apply initial query params for deep linking
+            const params = this.GetQueryParams();
+            if (params['queryId']) {
+                this.selectQueryById(params['queryId']);
             }
-            // Enable URL updates after initialization
-            this.skipUrlUpdate = false;
         }
         catch (error) {
             console.error('Error loading queries:', error);
@@ -857,7 +834,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             event.stopPropagation();
         }
         this.selectedQuery = query;
-        this.updateUrl();
+        this.UpdateQueryParams({ queryId: query.ID });
         this.NotifyDisplayNameChanged(query.Name || 'Query');
         this.cdr.markForCheck();
     }
@@ -1087,7 +1064,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
                 if (refreshed) {
                     this.selectedQuery = refreshed;
                     this.expandCategoryForQuery(refreshed);
-                    this.updateUrl();
+                    this.UpdateQueryParams({ queryId: refreshed.ID });
                 }
             }
             else {
@@ -1128,6 +1105,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     }
     refresh() {
         this.selectedQuery = null;
+        this.UpdateQueryParams({ queryId: null });
         this.NotifyDisplayNameChanged('Queries');
         this.loadData(true);
     }
@@ -1141,79 +1119,39 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     // Deep Linking
     // ========================================
     /**
-     * Parse URL query string for query state.
-     * Query params: queryId
-     */
-    parseUrlState() {
-        return this.parseUrlFromString(this.router.url);
-    }
-    /**
-     * Update URL query string to reflect current state.
-     * Uses NavigationService for proper URL management that respects app-scoped routes.
+     * Select a query by ID, expanding the tree to show it.
+     * Clears selection if no matching query is found.
      */
-    updateUrl() {
-        if (this.skipUrlUpdate)
-            return;
-        const queryParams = {};
-        // Add query ID if selected, null to remove
-        if (this.selectedQuery?.ID) {
-            queryParams['queryId'] = this.selectedQuery.ID;
+    selectQueryById(queryId) {
+        const query = this.queries.find(q => UUIDsEqual(q.ID, queryId));
+        if (query) {
+            if (!UUIDsEqual(this.selectedQuery?.ID, query.ID)) {
+                this.selectedQuery = query;
+                this.expandCategoryForQuery(query);
+                this.NotifyDisplayNameChanged(query.Name || 'Query');
+            }
         }
         else {
-            queryParams['queryId'] = null;
+            this.selectedQuery = null;
+            this.NotifyDisplayNameChanged('Queries');
         }
-        // Use NavigationService to update query params properly
-        this.navigationService.UpdateActiveTabQueryParams(queryParams);
+        this.cdr.markForCheck();
     }
     /**
-     * Handle external navigation (back/forward buttons).
-     * Parses the URL and applies the state without triggering a new navigation.
+     * React to back/forward navigation or deep-link activation.
+     * Called by the base class when the URL query params change externally.
      */
-    onExternalNavigation(url) {
-        // Check if this URL is for our component (contains our base path)
-        const currentPath = this.router.url.split('?')[0];
-        const newPath = url.split('?')[0];
-        // Only handle if we're still on the same base path (same component instance)
-        if (currentPath !== newPath) {
-            return; // Different route entirely, shell will handle it
-        }
-        // Parse the new URL state
-        const urlState = this.parseUrlFromString(url);
-        // Apply the state without triggering URL updates
-        this.skipUrlUpdate = true;
-        if (urlState?.queryId) {
-            const query = this.queries.find(q => UUIDsEqual(q.ID, urlState.queryId));
-            if (query) {
-                if (!UUIDsEqual(this.selectedQuery?.ID, query.ID)) {
-                    this.selectedQuery = query;
-                    this.expandCategoryForQuery(query);
-                    this.NotifyDisplayNameChanged(query.Name || 'Query');
-                }
-            }
+    OnQueryParamsChanged(params, source) {
+        if (!this.dataLoaded)
+            return;
+        if (params['queryId']) {
+            this.selectQueryById(params['queryId']);
         }
         else {
-            // No queryId means clear selection
             this.selectedQuery = null;
             this.NotifyDisplayNameChanged('Queries');
+            this.cdr.markForCheck();
         }
-        this.skipUrlUpdate = false;
-        // Update the tracked URL
-        this.lastNavigatedUrl = url;
-        this.cdr.markForCheck();
-    }
-    /**
-     * Parse URL state from a URL string (used for external navigation).
-     */
-    parseUrlFromString(url) {
-        const queryIndex = url.indexOf('?');
-        if (queryIndex === -1)
-            return null;
-        const queryString = url.substring(queryIndex + 1);
-        const params = new URLSearchParams(queryString);
-        const queryId = params.get('queryId');
-        if (!queryId)
-            return null;
-        return { queryId };
     }
     /**
      * Expands the category tree to show the given query
@@ -1293,7 +1231,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
     IsQuerySelected(query) {
         return UUIDsEqual(this.selectedQuery?.ID, query.ID);
     }
-    static ɵfac = function QueryBrowserResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || QueryBrowserResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵfac = function QueryBrowserResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || QueryBrowserResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryBrowserResourceComponent, selectors: [["mj-query-browser-resource"]], viewQuery: function QueryBrowserResourceComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
@@ -1384,7 +1322,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
             i0.ɵɵconditional(ctx.ShowQueryDrawer ? 37 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowQueryDrawer ? 38 : -1);
-        } }, dependencies: [i3.NgTemplateOutlet, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i5.LoadingComponent, i6.CodeEditorComponent, i7.QueryViewerComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    \n\n}\n\n\n\n.tree-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n\n.tree-search[_ngcontent-%COMP%] {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    margin-left: 10px;\n    font-size: 14px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    outline: none;\n    padding: 8px 10px;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n\n\n.category-tree[_ngcontent-%COMP%] {\n    padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n\n\n.category-queries[_ngcontent-%COMP%] {\n    margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover   .query-details-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%]   .resize-handle-grip[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n    pointer-events: auto;\n}\n\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 40px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: var(--mj-border-strong);\n    margin-bottom: 20px;\n}\n\n.no-selection-message[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 8px 0;\n}\n\n.no-selection-hint[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n\n@media (max-width: 768px) {\n    .query-browser-container[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .query-tree-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .query-viewer-panel[_ngcontent-%COMP%] {\n        height: 60%;\n    }\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.no-selection-create-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 16px;\n    padding: 8px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.no-selection-create-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n\n\n.query-drawer[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n\n.drawer-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%]   .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%]   .drawer-select[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n\n\n@media (max-width: 600px) {\n    .query-drawer[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgTemplateOutlet, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.CodeEditorComponent, i5.QueryViewerComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    \n\n}\n\n\n\n.tree-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n\n.tree-search[_ngcontent-%COMP%] {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    margin-left: 10px;\n    font-size: 14px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    outline: none;\n    padding: 8px 10px;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n\n\n.category-tree[_ngcontent-%COMP%] {\n    padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n\n\n.category-queries[_ngcontent-%COMP%] {\n    margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover   .query-details-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%]   .resize-handle-grip[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%]   .resize-handle[_ngcontent-%COMP%] {\n    pointer-events: auto;\n}\n\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 40px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: var(--mj-border-strong);\n    margin-bottom: 20px;\n}\n\n.no-selection-message[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 8px 0;\n}\n\n.no-selection-hint[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n\n\n@media (max-width: 768px) {\n    .query-browser-container[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .query-tree-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .query-viewer-panel[_ngcontent-%COMP%] {\n        height: 60%;\n    }\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%]   .icon-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.no-selection-create-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 16px;\n    padding: 8px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.no-selection-create-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n\n\n.query-drawer[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n\n.drawer-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%]   .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%]   .drawer-select[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n\n\n@media (max-width: 600px) {\n    .query-drawer[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
 };
 QueryBrowserResourceComponent = QueryBrowserResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'QueryBrowserResource')
@@ -1393,12 +1331,12 @@ export { QueryBrowserResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryBrowserResourceComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-query-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Query Browser Resource -->\n<div class=\"query-browser-container\" [class.resizing]=\"IsResizing\">\n  <!-- Left Panel: Query Tree -->\n  <div class=\"query-tree-panel\" [style.width.px]=\"PanelWidth\">\n    <!-- Header -->\n    <div class=\"tree-header\">\n      <div class=\"header-title\">\n        <i class=\"fa-solid fa-database\"></i>\n        <span>Queries</span>\n        <span class=\"query-count\">({{ getTotalQueryCount() }})</span>\n      </div>\n      <div class=\"header-actions\">\n        @if (CanCreateQuery) {\n          <button class=\"icon-btn\" (click)=\"OpenCreateDrawer()\" title=\"New Query\">\n            <i class=\"fa-solid fa-plus\"></i>\n          </button>\n        }\n        <button class=\"icon-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n          <i class=\"fa-solid fa-folder\"></i>\n        </button>\n        <button class=\"icon-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Search -->\n    <div class=\"tree-search\">\n      <div class=\"search-input-wrapper\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input type=\"text\"\n          class=\"search-input\"\n          [value]=\"searchText\"\n          placeholder=\"Search queries...\"\n          (input)=\"onSearchChange($any($event.target).value)\">\n        @if (searchText) {\n          <button class=\"clear-btn\" (click)=\"clearSearch()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- Status Filters -->\n    <div class=\"status-filter-bar\">\n      @for (status of AllStatuses; track status) {\n        @if (getStatusCount(status) > 0) {\n          <button class=\"status-filter-chip\"\n            [class.active]=\"StatusFilters[status]\"\n            [style.--chip-color]=\"getStatusColor(status)\"\n            (click)=\"toggleStatusFilter(status)\"\n            [title]=\"(StatusFilters[status] ? 'Hide' : 'Show') + ' ' + status + ' queries'\">\n            <i class=\"fa-solid\" [class]=\"getStatusIcon(status)\"></i>\n            <span>{{ status }}</span>\n            <span class=\"chip-count\">{{ getStatusCount(status) }}</span>\n          </button>\n        }\n      }\n    </div>\n\n    <!-- Tree Content -->\n    <div class=\"tree-content\">\n      <!-- Loading -->\n      @if (isLoading) {\n        <div class=\"loading-state\">\n          <mj-loading text=\"Loading queries...\"></mj-loading>\n        </div>\n      }\n\n      <!-- Empty -->\n      @if (!isLoading && queries.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-database empty-icon\"></i>\n          <p>No queries available</p>\n        </div>\n      }\n\n      <!-- No results -->\n      @if (!isLoading && searchText && filteredQueries.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search empty-icon\"></i>\n          <p>No queries match \"{{ searchText }}\"</p>\n        </div>\n      }\n\n      <!-- Category Tree -->\n      @if (!isLoading && queries.length > 0) {\n        <div class=\"category-tree\">\n          @for (node of categoryTree; track trackByCategory($index, node)) {\n            <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: node }\"></ng-container>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Resize Handle -->\n  <div class=\"resize-handle\"\n    [class.active]=\"IsResizing\"\n    (mousedown)=\"onResizeStart($event)\">\n    <div class=\"resize-handle-grip\"></div>\n  </div>\n\n  <!-- Right Panel: Query Viewer -->\n  <div class=\"query-viewer-panel\">\n    <!-- No query selected -->\n    @if (!selectedQuery) {\n      <div class=\"no-selection\">\n        <i class=\"fa-solid fa-hand-pointer no-selection-icon\"></i>\n        <p class=\"no-selection-message\">Select a query from the list</p>\n        <p class=\"no-selection-hint\">Click on a query to view and run it</p>\n        @if (CanCreateQuery) {\n          <button class=\"no-selection-create-btn\" (click)=\"OpenCreateDrawer()\">\n            <i class=\"fa-solid fa-plus\"></i> New Query\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Query Viewer -->\n    @if (selectedQuery) {\n      <!-- Query Header with Status -->\n      <div class=\"query-viewer-header\">\n        <div class=\"query-viewer-title\">\n          <i class=\"fa-solid fa-file-code\"></i>\n          <span>{{ selectedQuery.Name }}</span>\n        </div>\n        <div class=\"query-viewer-header-actions\">\n          @if (selectedQuery.Status !== 'Approved') {\n            <span class=\"query-viewer-status-pill\"\n              [style.background]=\"getStatusColor(selectedQuery.Status)\">\n              <i class=\"fa-solid\" [class]=\"getStatusIcon(selectedQuery.Status)\"></i>\n              {{ selectedQuery.Status }}\n            </span>\n          } @else {\n            <span class=\"query-viewer-status-pill approved\"\n              [style.background]=\"getStatusColor('Approved')\">\n              <i class=\"fa-solid fa-check-circle\"></i>\n              Approved\n            </span>\n          }\n          @if (CanEditQuery) {\n            <button class=\"icon-btn\" (click)=\"OpenEditDrawer(selectedQuery)\" title=\"Edit Query\">\n              <i class=\"fa-solid fa-pen-to-square\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      <mj-query-viewer\n        [QueryId]=\"selectedQuery.ID\"\n        [AutoRun]=\"true\"\n        [SelectionMode]=\"'multiple'\"\n        (EntityLinkClick)=\"onEntityLinkClick($event)\"\n        (RowDoubleClick)=\"onRowDoubleClick($event)\"\n        (OpenQueryRecord)=\"onOpenQueryRecord($event)\"\n        (CompositionTokenClick)=\"onCompositionTokenClick($event)\">\n      </mj-query-viewer>\n    }\n  </div>\n</div>\n\n<!-- Category Node Template -->\n<ng-template #categoryNode let-node=\"node\">\n  @if (hasVisibleContent(node)) {\n    <div class=\"category-item\"\n      [class.expanded]=\"node.expanded\"\n      [style.padding-left.px]=\"node.level * 16 + 8\">\n      <div class=\"category-header\" (click)=\"toggleExpand(node)\">\n        <i class=\"fa-solid expand-icon\"\n          [class.fa-chevron-down]=\"node.expanded\"\n        [class.fa-chevron-right]=\"!node.expanded\"></i>\n        <i class=\"fa-solid fa-folder category-icon\"\n        [class.fa-folder-open]=\"node.expanded\"></i>\n        <span class=\"category-name\">{{ node.category.Name }}</span>\n        <span class=\"category-count\">({{ getNodeQueryCount(node) }})</span>\n      </div>\n      <!-- Queries in this category -->\n      @if (node.expanded) {\n        <div class=\"category-queries\">\n          @for (query of node.queries; track trackByQuery($index, query)) {\n            <div class=\"query-item\"\n              [class.selected]=\"IsQuerySelected(query)\"\n              [class.hidden]=\"!isQueryVisible(query)\"\n              (click)=\"selectQuery(query, $event)\">\n              <span class=\"status-dot\"\n                [style.background]=\"getStatusColor(query.Status)\"\n                [title]=\"query.Status\"></span>\n              <i class=\"fa-solid fa-file-code query-icon\"></i>\n              <div class=\"query-info\" [title]=\"query.Description || query.Name\">\n                <span class=\"query-name\">{{ query.Name }}</span>\n                @if (query.Description) {\n                  <span class=\"query-description\">{{ query.Description }}</span>\n                }\n              </div>\n              @if (query.UsesTemplate) {\n                <i class=\"fa-solid fa-sliders param-icon\" title=\"Has parameters\"></i>\n              }\n              @if (query.Status !== 'Approved') {\n                <span class=\"query-status-badge\"\n                  [style.background]=\"getStatusColor(query.Status)\"\n                  [title]=\"query.Status\">\n                  {{ query.Status }}\n                </span>\n              }\n              @if (CanEditQuery) {\n                <button class=\"query-details-btn\" (click)=\"OpenEditDrawer(query, $event)\" title=\"Edit query\">\n                  <i class=\"fa-solid fa-pen-to-square\"></i>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- Child categories -->\n      @if (node.expanded) {\n        @for (child of node.children; track trackByCategory($index, child)) {\n          <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: child }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- Query Drawer Backdrop -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer-backdrop\" (click)=\"OnDrawerBackdropClick()\"></div>\n}\n\n<!-- Query Drawer Panel -->\n@if (ShowQueryDrawer) {\n  <div class=\"query-drawer\">\n\n    <!-- Drawer Header -->\n    <div class=\"query-drawer-header\">\n      <div class=\"query-drawer-title\">\n        <i class=\"fa-solid\" [class.fa-plus]=\"DrawerMode === 'create'\" [class.fa-pen-to-square]=\"DrawerMode === 'edit'\"></i>\n        <div>\n          <div class=\"query-drawer-title-main\">{{ DrawerMode === 'create' ? 'New Query' : 'Edit Query' }}</div>\n          @if (DrawerMode === 'edit' && DrawerName) {\n            <div class=\"query-drawer-title-sub\">{{ DrawerName }}</div>\n          }\n        </div>\n      </div>\n      <button class=\"query-drawer-close\" (click)=\"CloseDrawer()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Drawer Body -->\n    <div class=\"query-drawer-body\">\n\n      <!-- Name -->\n      <div class=\"drawer-field\" [class.drawer-field-error]=\"DrawerNameError\">\n        <label class=\"drawer-label\">Name <span class=\"drawer-required\">*</span></label>\n        <input class=\"drawer-input\"\n          type=\"text\"\n          [(ngModel)]=\"DrawerName\"\n          (ngModelChange)=\"DrawerNameError = false\"\n          placeholder=\"Enter query name\"\n          [disabled]=\"IsSavingDrawer\">\n        @if (DrawerNameError) {\n          <span class=\"drawer-field-hint\">Name is required</span>\n        }\n      </div>\n\n      <!-- Category + Status (side by side) -->\n      <div class=\"drawer-row\">\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Category</label>\n          <select class=\"drawer-select\"\n            [(ngModel)]=\"DrawerCategoryID\"\n            [disabled]=\"IsSavingDrawer\">\n            <option value=\"\">(none)</option>\n            @for (cat of categories; track cat.ID) {\n              <option [value]=\"cat.ID\">{{ cat.Name }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"drawer-field drawer-field-flex\">\n          <label class=\"drawer-label\">Status</label>\n          <select class=\"drawer-select\"\n            [(ngModel)]=\"DrawerStatus\"\n            [disabled]=\"IsSavingDrawer\">\n            @for (s of DrawerStatuses; track s) {\n              <option [value]=\"s\">{{ s }}</option>\n            }\n          </select>\n        </div>\n      </div>\n\n      <!-- Description -->\n      <div class=\"drawer-field\">\n        <label class=\"drawer-label\">Description</label>\n        <textarea class=\"drawer-textarea\"\n          rows=\"3\"\n          [(ngModel)]=\"DrawerDescription\"\n          placeholder=\"Optional description\"\n          [disabled]=\"IsSavingDrawer\"></textarea>\n      </div>\n\n      <!-- SQL -->\n      <div class=\"drawer-field drawer-field-sql\">\n        <label class=\"drawer-label\">SQL</label>\n        <mj-code-editor #drawerSqlEditor\n          [language]=\"'sql'\"\n          [indentWithTab]=\"true\"\n          [readonly]=\"IsSavingDrawer\"\n          (change)=\"OnDrawerSQLChange($event)\"\n          class=\"drawer-sql-editor\">\n        </mj-code-editor>\n      </div>\n\n      <!-- Open Full Record link (edit mode only) -->\n      @if (DrawerMode === 'edit' && DrawerQueryId) {\n        <div class=\"drawer-full-record\">\n          <i class=\"fa-solid fa-circle-info\"></i>\n          To manage Parameters, Fields, and Permissions \u2014\n          <button class=\"drawer-link-btn\" (click)=\"OpenFullRecord()\">\n            Open full record <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n          </button>\n        </div>\n      }\n\n    </div>\n\n    <!-- Drawer Footer -->\n    <div class=\"query-drawer-footer\">\n\n      <!-- Error message -->\n      @if (DrawerSaveError) {\n        <div class=\"drawer-error\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DrawerSaveError }}\n        </div>\n      }\n\n      <!-- Action buttons -->\n      <div class=\"drawer-footer-actions\">\n        <button class=\"drawer-btn drawer-btn-primary\"\n          (click)=\"SaveDrawer()\"\n          [disabled]=\"IsSavingDrawer || !DrawerName.trim()\">\n          @if (IsSavingDrawer) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save\n          }\n        </button>\n        <button class=\"drawer-btn drawer-btn-secondary\"\n          (click)=\"CloseDrawer()\"\n          [disabled]=\"IsSavingDrawer\">\n          Cancel\n        </button>\n      </div>\n\n    </div>\n\n  </div>\n}\n", styles: ["/* Query Browser Resource Styles */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n.query-browser-container {\n    display: flex;\n    height: 100%;\n    background: var(--mj-bg-surface-card);\n}\n\n/* Left Panel: Query Tree */\n.query-tree-panel {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    border-right: 1px solid var(--mj-border-default);\n    display: flex;\n    flex-direction: column;\n    /* Width controlled by [style.width.px] binding */\n}\n\n/* Tree Header */\n.tree-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.header-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.header-title i {\n    font-size: 16px;\n}\n\n.query-count {\n    font-weight: 400;\n    opacity: 0.8;\n    font-size: 13px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 4px;\n}\n\n.icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n    color: var(--mj-text-inverse);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.icon-btn:hover {\n    background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n/* Tree Search */\n.tree-search {\n    padding: 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    background: var(--mj-bg-surface);\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper:focus-within {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon {\n    color: var(--mj-text-disabled);\n    margin-left: 10px;\n    font-size: 14px;\n}\n\n.search-input {\n    flex: 1;\n    border: none;\n    outline: none;\n    padding: 8px 10px;\n    font-size: 14px;\n    background: transparent;\n}\n\n.search-input::placeholder {\n    color: var(--mj-text-disabled);\n}\n\n.clear-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    margin-right: 4px;\n    border-radius: 4px;\n}\n\n.clear-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Status Filter Bar */\n.status-filter-bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-disabled);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    line-height: 1.2;\n}\n\n.status-filter-chip:hover {\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active {\n    background: var(--chip-color, var(--mj-text-disabled));\n    border-color: var(--chip-color, var(--mj-text-disabled));\n    color: var(--mj-text-inverse);\n}\n\n.status-filter-chip i {\n    font-size: 10px;\n}\n\n.chip-count {\n    font-weight: 600;\n    font-size: 10px;\n    opacity: 0.85;\n}\n\n/* Status Dot on Query Items */\n.status-dot {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    margin-top: 4px;\n}\n\n/* Status Badge on Non-Approved Queries */\n.query-status-badge {\n    font-size: 9px;\n    color: var(--mj-text-inverse);\n    padding: 1px 6px;\n    border-radius: 8px;\n    flex-shrink: 0;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    margin-top: 2px;\n}\n\n/* Tree Content */\n.tree-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 8px 0;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    font-size: 36px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.empty-state p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n/* Category Tree */\n.category-tree {\n    padding: 0 4px;\n}\n\n.category-item {\n    margin-bottom: 2px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.category-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    width: 12px;\n    text-align: center;\n}\n\n.category-icon {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.category-name {\n    flex: 1;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-size: 13px;\n}\n\n.category-count {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n/* Query Items */\n.category-queries {\n    margin-left: 28px;\n}\n\n.query-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n    margin: 2px 0;\n}\n\n.query-item:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left: 3px solid var(--mj-status-info);\n    margin-left: -3px;\n}\n\n.query-item.hidden {\n    display: none;\n}\n\n.query-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    margin-top: 2px;\n}\n\n.query-info {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.query-name {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-description {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.param-icon {\n    color: var(--mj-status-warning);\n    font-size: 12px;\n    margin-top: 2px;\n}\n\n.query-details-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    opacity: 0;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.query-item:hover .query-details-btn {\n    opacity: 1;\n}\n\n.query-details-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* Resize Handle */\n.resize-handle {\n    flex-shrink: 0;\n    width: 6px;\n    cursor: col-resize;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n    position: relative;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip {\n    width: 2px;\n    height: 32px;\n    border-radius: 1px;\n    background: var(--mj-border-strong);\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle.active .resize-handle-grip {\n    background: var(--mj-brand-primary);\n}\n\n/* Prevent text selection and set cursor during resize */\n.query-browser-container.resizing {\n    cursor: col-resize;\n    user-select: none;\n}\n\n.query-browser-container.resizing * {\n    pointer-events: none;\n}\n\n.query-browser-container.resizing .resize-handle {\n    pointer-events: auto;\n}\n\n/* Right Panel: Query Viewer */\n.query-viewer-panel {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n/* No Selection State */\n.no-selection {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 40px;\n}\n\n.no-selection-icon {\n    font-size: 64px;\n    color: var(--mj-border-strong);\n    margin-bottom: 20px;\n}\n\n.no-selection-message {\n    font-size: 18px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 8px 0;\n}\n\n.no-selection-hint {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n/* Query Viewer Header */\n.query-viewer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.query-viewer-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 0;\n    overflow: hidden;\n}\n\n.query-viewer-title i {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.query-viewer-title span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 14px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    flex-shrink: 0;\n}\n\n.query-viewer-status-pill i {\n    font-size: 12px;\n}\n\n.query-viewer-status-pill.approved {\n    opacity: 0.7;\n}\n\n.query-viewer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n/* Query Viewer fills remaining space */\nmj-query-viewer {\n    flex: 1;\n    min-height: 0;\n}\n\n/* Scrollbar styling */\n.tree-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n    .query-browser-container {\n        flex-direction: column;\n    }\n\n    .query-tree-panel {\n        width: 100% !important;\n        height: 40%;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .query-viewer-panel {\n        height: 60%;\n    }\n}\n\n/* \u2500\u2500\u2500 Right-panel icon button override (white background context) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-viewer-header .icon-btn {\n    background: transparent;\n    color: var(--mj-text-secondary);\n}\n\n.query-viewer-header .icon-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 No-selection create button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.no-selection-create-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 16px;\n    padding: 8px 20px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.no-selection-create-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* \u2500\u2500\u2500 Drawer Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 1100;\n    animation: backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes backdropFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n}\n\n/* \u2500\u2500\u2500 Drawer Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 480px;\n    max-width: 96vw;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n    z-index: 1101;\n    display: flex;\n    flex-direction: column;\n    animation: drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes drawerSlideIn {\n    from { transform: translateX(100%); }\n    to   { transform: translateX(0); }\n}\n\n/* \u2500\u2500\u2500 Drawer Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.query-drawer-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n}\n\n.query-drawer-title > i {\n    font-size: 18px;\n    opacity: 0.9;\n    flex-shrink: 0;\n}\n\n.query-drawer-title-main {\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.2;\n}\n\n.query-drawer-title-sub {\n    font-size: 12px;\n    opacity: 0.75;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 360px;\n    margin-top: 2px;\n}\n\n.query-drawer-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: var(--mj-text-inverse);\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 16px;\n    flex-shrink: 0;\n    transition: background 0.15s ease;\n}\n\n.query-drawer-close:hover {\n    background: rgba(255, 255, 255, 0.28);\n}\n\n/* \u2500\u2500\u2500 Drawer Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.query-drawer-body::-webkit-scrollbar { width: 6px; }\n.query-drawer-body::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Drawer Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.drawer-row {\n    display: flex;\n    gap: 12px;\n}\n\n.drawer-field-flex {\n    flex: 1;\n    min-width: 0;\n}\n\n.drawer-field-sql {\n    flex: 1;\n}\n\n.drawer-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.drawer-required {\n    color: var(--mj-status-error);\n    margin-left: 2px;\n}\n\n.drawer-input,\n.drawer-select,\n.drawer-textarea {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface);\n    box-sizing: border-box;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    outline: none;\n    font-family: inherit;\n}\n\n.drawer-input:focus,\n.drawer-select:focus,\n.drawer-textarea:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input:disabled,\n.drawer-select:disabled,\n.drawer-textarea:disabled {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-disabled);\n    cursor: not-allowed;\n}\n\n.drawer-textarea {\n    resize: vertical;\n    min-height: 70px;\n}\n\n.drawer-sql-editor {\n    display: block;\n    min-height: 220px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.drawer-field-error .drawer-input,\n.drawer-field-error .drawer-select {\n    border-color: var(--mj-status-error);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint {\n    font-size: 12px;\n    color: var(--mj-status-error);\n}\n\n/* \u2500\u2500\u2500 Open Full Record link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-full-record {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-brand-primary-hover);\n    flex-wrap: wrap;\n}\n\n.drawer-full-record > i {\n    flex-shrink: 0;\n    color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn {\n    background: none;\n    border: none;\n    color: var(--mj-brand-primary-hover);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    padding: 0;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.drawer-link-btn:hover {\n    color: var(--mj-brand-primary-active);\n}\n\n/* \u2500\u2500\u2500 Drawer Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-footer {\n    flex-shrink: 0;\n    padding: 16px 20px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.drawer-error {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-status-error-bg);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n/* \u2500\u2500\u2500 Drawer Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 18px;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.drawer-btn:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.drawer-btn-primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n    border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary {\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary:hover:not(:disabled) {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Responsive drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 600px) {\n    .query-drawer {\n        width: 100vw;\n        max-width: 100vw;\n    }\n\n    .drawer-row {\n        flex-direction: column;\n    }\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }, { type: i2.Router }, { type: i0.ElementRef }, { type: i0.NgZone }], { drawerSqlEditor: [{
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { drawerSqlEditor: [{
             type: ViewChild,
             args: ['drawerSqlEditor']
         }], OnEscapeKey: [{
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserResourceComponent, { className: "QueryBrowserResourceComponent", filePath: "src/QueryBrowser/query-browser-resource.component.ts", lineNumber: 42 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryBrowserResourceComponent, { className: "QueryBrowserResourceComponent", filePath: "src/QueryBrowser/query-browser-resource.component.ts", lineNumber: 40 }); })();
 //# sourceMappingURL=query-browser-resource.component.js.map