@memberjunction/ng-artifacts 5.1.0 → 5.2.0

package/dist/lib/components/plugins/save-query-dialog.component.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { CompositeKey } from '@memberjunction/core';
+import { TreeBranchConfig, TreeNode } from '@memberjunction/ng-trees';
+import { TreeDropdownComponent } from '@memberjunction/ng-trees';
+import * as i0 from "@angular/core";
+/**
+ * Result emitted when a query is successfully saved
+ */
+export interface SaveQueryResult {
+    queryId: string;
+    queryName: string;
+}
+/**
+ * Slide-in panel for saving an ad-hoc SQL query as a reusable MJ Query record.
+ * Pre-populates name from the artifact title and provides a tree dropdown
+ * for selecting a query category, with inline category creation.
+ *
+ * Follows the CreateAgentSlideInComponent pattern for slide-in UX.
+ */
+export declare class SaveQueryPanelComponent {
+    private cdr;
+    QueryName: string;
+    QueryDescription: string;
+    SQL: string;
+    Saved: EventEmitter<SaveQueryResult>;
+    Cancelled: EventEmitter<void>;
+    categoryTree: TreeDropdownComponent;
+    Name: string;
+    Description: string;
+    IsSaving: boolean;
+    ErrorMessage: string;
+    IsVisible: boolean;
+    private selectedCategoryId;
+    SelectedCategoryKey: CompositeKey | null;
+    IsCreatingCategory: boolean;
+    IsCreatingCategorySaving: boolean;
+    NewCategoryName: string;
+    CreateCategoryError: string;
+    private newCategoryParentId;
+    /** Tree config for query category hierarchy */
+    CategoryBranchConfig: TreeBranchConfig;
+    constructor(cdr: ChangeDetectorRef);
+    get CanSave(): boolean;
+    ngOnInit(): void;
+    OnEscapeKey(): void;
+    OnCategoryChanged(selection: TreeNode | TreeNode[] | null): void;
+    StartCreateCategory(): void;
+    CancelCreateCategory(): void;
+    OnNewCategoryParentChanged(selection: TreeNode | TreeNode[] | null): void;
+    CreateCategory(): Promise<void>;
+    OnSave(): Promise<void>;
+    OnCancel(): void;
+    private getEntityErrorMessage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SaveQueryPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SaveQueryPanelComponent, "mj-save-query-panel", never, { "QueryName": { "alias": "QueryName"; "required": false; }; "QueryDescription": { "alias": "QueryDescription"; "required": false; }; "SQL": { "alias": "SQL"; "required": false; }; }, { "Saved": "Saved"; "Cancelled": "Cancelled"; }, never, never, false, never>;
+}
+//# sourceMappingURL=save-query-dialog.component.d.ts.map

package/dist/lib/components/plugins/save-query-dialog.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-query-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/save-query-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAsC,iBAAiB,EAAgB,MAAM,eAAe,CAAC;AAC5I,OAAO,EAAY,YAAY,EAA4B,MAAM,sBAAsB,CAAC;AAGxF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;;AAEjE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,qBAwca,uBAAuB;IAsCtB,OAAO,CAAC,GAAG;IArCd,SAAS,SAAM;IACf,gBAAgB,SAAM;IACtB,GAAG,SAAM;IAER,KAAK,gCAAuC;IAC5C,SAAS,qBAA4B;IAEpB,YAAY,EAAG,qBAAqB,CAAC;IAGzD,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,QAAQ,UAAS;IACjB,YAAY,SAAM;IAClB,SAAS,UAAS;IAGzB,OAAO,CAAC,kBAAkB,CAAuB;IAC1C,mBAAmB,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGhD,kBAAkB,UAAS;IAC3B,wBAAwB,UAAS;IACjC,eAAe,SAAM;IACrB,mBAAmB,SAAM;IAChC,OAAO,CAAC,mBAAmB,CAAuB;IAElD,+CAA+C;IACxC,oBAAoB,EAAE,gBAAgB,CAO3C;gBAEkB,GAAG,EAAE,iBAAiB;IAE1C,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,QAAQ,IAAI,IAAI;IAaT,WAAW,IAAI,IAAI;IAYnB,iBAAiB,CAAC,SAAS,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI;IAchE,mBAAmB,IAAI,IAAI;IAQ3B,oBAAoB,IAAI,IAAI;IAQ5B,0BAA0B,CAAC,SAAS,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI;IAUnE,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IA0D/B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAoD7B,QAAQ,IAAI,IAAI;IAWvB,OAAO,CAAC,qBAAqB;yCAtOlB,uBAAuB;2CAAvB,uBAAuB;CA6OnC"}

package/dist/lib/components/plugins/save-query-dialog.component.js

@@ -0,0 +1,561 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ChangeDetectionStrategy, HostListener } from '@angular/core';
+import { Metadata, CompositeKey, KeyValuePair } from '@memberjunction/core';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-trees";
+const _c0 = ["categoryTree"];
+function SaveQueryPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function SaveQueryPanelComponent_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StartCreateCategory()); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵtext(2, " New ");
+    i0.ɵɵelementEnd();
+} }
+function SaveQueryPanelComponent_Conditional_23_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+} }
+function SaveQueryPanelComponent_Conditional_23_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
+} }
+function SaveQueryPanelComponent_Conditional_23_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.CreateCategoryError);
+} }
+function SaveQueryPanelComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 25);
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "New Category");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 27)(6, "input", 28);
+    i0.ɵɵtwoWayListener("ngModelChange", function SaveQueryPanelComponent_Conditional_23_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.NewCategoryName, $event) || (ctx_r2.NewCategoryName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function SaveQueryPanelComponent_Conditional_23_Template_input_keydown_enter_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CreateCategory()); })("keydown.escape", function SaveQueryPanelComponent_Conditional_23_Template_input_keydown_escape_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CancelCreateCategory()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 29)(8, "label", 30);
+    i0.ɵɵtext(9, "Parent (optional)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "mj-tree-dropdown", 31);
+    i0.ɵɵlistener("SelectionChange", function SaveQueryPanelComponent_Conditional_23_Template_mj_tree_dropdown_SelectionChange_10_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnNewCategoryParentChanged($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 32)(12, "button", 33);
+    i0.ɵɵlistener("click", function SaveQueryPanelComponent_Conditional_23_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CreateCategory()); });
+    i0.ɵɵconditionalCreate(13, SaveQueryPanelComponent_Conditional_23_Conditional_13_Template, 1, 0, "i", 34)(14, SaveQueryPanelComponent_Conditional_23_Conditional_14_Template, 1, 0, "i", 35);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 36);
+    i0.ɵɵlistener("click", function SaveQueryPanelComponent_Conditional_23_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CancelCreateCategory()); });
+    i0.ɵɵtext(17, " Cancel ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(18, SaveQueryPanelComponent_Conditional_23_Conditional_18_Template, 2, 1, "div", 37);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.NewCategoryName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("BranchConfig", ctx_r2.CategoryBranchConfig)("SelectionMode", "single")("SelectableTypes", "branch")("Placeholder", "None (top level)");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.NewCategoryName.trim() || ctx_r2.IsCreatingCategorySaving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsCreatingCategorySaving ? 13 : 14);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.IsCreatingCategorySaving ? "Creating..." : "Create", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.IsCreatingCategorySaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.CreateCategoryError ? 18 : -1);
+} }
+function SaveQueryPanelComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.ErrorMessage, " ");
+} }
+function SaveQueryPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+    i0.ɵɵtext(1, " Saving... ");
+} }
+function SaveQueryPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
+    i0.ɵɵtext(1, " Save Query ");
+} }
+/**
+ * Slide-in panel for saving an ad-hoc SQL query as a reusable MJ Query record.
+ * Pre-populates name from the artifact title and provides a tree dropdown
+ * for selecting a query category, with inline category creation.
+ *
+ * Follows the CreateAgentSlideInComponent pattern for slide-in UX.
+ */
+export class SaveQueryPanelComponent {
+    cdr;
+    QueryName = '';
+    QueryDescription = '';
+    SQL = '';
+    Saved = new EventEmitter();
+    Cancelled = new EventEmitter();
+    categoryTree;
+    // Form state
+    Name = '';
+    Description = '';
+    IsSaving = false;
+    ErrorMessage = '';
+    IsVisible = false;
+    // Category selection
+    selectedCategoryId = null;
+    SelectedCategoryKey = null;
+    // Inline category creation
+    IsCreatingCategory = false;
+    IsCreatingCategorySaving = false;
+    NewCategoryName = '';
+    CreateCategoryError = '';
+    newCategoryParentId = null;
+    /** Tree config for query category hierarchy */
+    CategoryBranchConfig = {
+        EntityName: 'MJ: Query Categories',
+        DisplayField: 'Name',
+        IDField: 'ID',
+        ParentIDField: 'ParentID',
+        DefaultIcon: 'fa-solid fa-folder',
+        OrderBy: 'Name ASC'
+    };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    get CanSave() {
+        return !!this.Name?.trim();
+    }
+    ngOnInit() {
+        // Sync input values
+        this.Name = this.QueryName;
+        this.Description = this.QueryDescription;
+        // Trigger slide-in on next microtask (ensures DOM is ready)
+        Promise.resolve().then(() => {
+            this.IsVisible = true;
+            this.cdr.markForCheck();
+        });
+    }
+    OnEscapeKey() {
+        if (this.IsCreatingCategory) {
+            this.CancelCreateCategory();
+        }
+        else if (!this.IsSaving) {
+            this.OnCancel();
+        }
+    }
+    // =========================================================================
+    // Category Selection
+    // =========================================================================
+    OnCategoryChanged(selection) {
+        if (!selection) {
+            this.selectedCategoryId = null;
+        }
+        else if (Array.isArray(selection)) {
+            this.selectedCategoryId = selection.length > 0 ? selection[0].ID : null;
+        }
+        else {
+            this.selectedCategoryId = selection.ID;
+        }
+    }
+    // =========================================================================
+    // Inline Category Creation
+    // =========================================================================
+    StartCreateCategory() {
+        this.IsCreatingCategory = true;
+        this.NewCategoryName = '';
+        this.newCategoryParentId = null;
+        this.CreateCategoryError = '';
+        this.cdr.markForCheck();
+    }
+    CancelCreateCategory() {
+        this.IsCreatingCategory = false;
+        this.NewCategoryName = '';
+        this.newCategoryParentId = null;
+        this.CreateCategoryError = '';
+        this.cdr.markForCheck();
+    }
+    OnNewCategoryParentChanged(selection) {
+        if (!selection) {
+            this.newCategoryParentId = null;
+        }
+        else if (Array.isArray(selection)) {
+            this.newCategoryParentId = selection.length > 0 ? selection[0].ID : null;
+        }
+        else {
+            this.newCategoryParentId = selection.ID;
+        }
+    }
+    async CreateCategory() {
+        const name = this.NewCategoryName.trim();
+        if (!name || this.IsCreatingCategorySaving)
+            return;
+        this.IsCreatingCategorySaving = true;
+        this.CreateCategoryError = '';
+        this.cdr.markForCheck();
+        try {
+            const md = new Metadata();
+            const category = await md.GetEntityObject('MJ: Query Categories');
+            category.Name = name;
+            category.UserID = md.CurrentUser.ID;
+            if (this.newCategoryParentId) {
+                category.ParentID = this.newCategoryParentId;
+            }
+            const saved = await category.Save();
+            if (saved) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Category "${name}" created`, 'success', 2500);
+                // Refresh tree to pick up the new category
+                await this.categoryTree.Refresh();
+                // Auto-select the newly created category.
+                // Must use detectChanges() (not markForCheck) to immediately propagate
+                // the new Value input to the tree dropdown, since this panel uses OnPush.
+                const newKey = new CompositeKey([new KeyValuePair('ID', category.ID)]);
+                this.SelectedCategoryKey = newKey;
+                this.selectedCategoryId = category.ID;
+                this.cdr.detectChanges();
+                // Collapse the create form
+                this.IsCreatingCategory = false;
+                this.NewCategoryName = '';
+                this.newCategoryParentId = null;
+            }
+            else {
+                const errorMsg = this.getEntityErrorMessage(category, 'create category');
+                this.CreateCategoryError = errorMsg;
+                MJNotificationService.Instance.CreateSimpleNotification(errorMsg, 'error', 5000);
+                console.error('Failed to create category:', category.LatestResult);
+            }
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : 'Failed to create category';
+            this.CreateCategoryError = errorMsg;
+            MJNotificationService.Instance.CreateSimpleNotification(errorMsg, 'error', 5000);
+            console.error('Error creating category:', error);
+        }
+        finally {
+            this.IsCreatingCategorySaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    // =========================================================================
+    // Save / Cancel
+    // =========================================================================
+    async OnSave() {
+        if (!this.CanSave || this.IsSaving)
+            return;
+        this.IsSaving = true;
+        this.ErrorMessage = '';
+        this.cdr.markForCheck();
+        try {
+            const md = new Metadata();
+            const query = await md.GetEntityObject('MJ: Queries');
+            query.Name = this.Name.trim();
+            query.SQL = this.SQL;
+            query.Status = 'Approved';
+            if (this.Description?.trim()) {
+                query.Description = this.Description.trim();
+            }
+            if (this.selectedCategoryId) {
+                query.CategoryID = this.selectedCategoryId;
+            }
+            const saved = await query.Save();
+            if (saved) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Query "${query.Name}" saved`, 'success', 2500);
+                // Animate out, then emit
+                this.IsVisible = false;
+                this.cdr.markForCheck();
+                setTimeout(() => {
+                    this.Saved.emit({
+                        queryId: query.ID,
+                        queryName: query.Name
+                    });
+                }, 300);
+            }
+            else {
+                const errorMsg = this.getEntityErrorMessage(query, 'save query');
+                this.ErrorMessage = errorMsg;
+                MJNotificationService.Instance.CreateSimpleNotification(errorMsg, 'error', 5000);
+                console.error('Failed to save query:', query.LatestResult);
+            }
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : 'An unexpected error occurred';
+            this.ErrorMessage = errorMsg;
+            MJNotificationService.Instance.CreateSimpleNotification(errorMsg, 'error', 5000);
+            console.error('Error saving query:', error);
+        }
+        finally {
+            this.IsSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    OnCancel() {
+        if (this.IsSaving)
+            return;
+        this.IsVisible = false;
+        this.cdr.markForCheck();
+        setTimeout(() => this.Cancelled.emit(), 300);
+    }
+    // =========================================================================
+    // Helpers
+    // =========================================================================
+    getEntityErrorMessage(entity, operation) {
+        const result = entity.LatestResult;
+        if (result?.Message) {
+            return result.Message;
+        }
+        return `Failed to ${operation}. Please try again.`;
+    }
+    static ɵfac = function SaveQueryPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SaveQueryPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SaveQueryPanelComponent, selectors: [["mj-save-query-panel"]], viewQuery: function SaveQueryPanelComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.categoryTree = _t.first);
+        } }, hostBindings: function SaveQueryPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function SaveQueryPanelComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { QueryName: "QueryName", QueryDescription: "QueryDescription", SQL: "SQL" }, outputs: { Saved: "Saved", Cancelled: "Cancelled" }, standalone: false, decls: 36, vars: 17, consts: [["categoryTree", ""], [1, "sqp-backdrop", 3, "click"], [1, "sqp-panel"], [1, "sqp-header"], [1, "sqp-title-group"], [1, "fa-solid", "fa-save", "sqp-title-icon"], [1, "sqp-title"], [1, "sqp-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sqp-body"], [1, "sqp-field"], [1, "sqp-label"], [1, "sqp-required"], ["type", "text", "placeholder", "Query name", 1, "sqp-input", 3, "ngModelChange", "keydown.enter", "ngModel"], [1, "sqp-label-row"], ["title", "Create new category", 1, "sqp-add-btn"], [3, "SelectionChange", "BranchConfig", "SelectionMode", "SelectableTypes", "Placeholder", "Value"], [1, "sqp-create-category"], ["placeholder", "Optional description", "rows", "3", 1, "sqp-textarea", 3, "ngModelChange", "ngModel"], [1, "sqp-error"], [1, "sqp-footer"], [1, "sqp-btn", "sqp-btn-save", 3, "click", "disabled"], [1, "sqp-btn", "sqp-btn-cancel", 3, "click", "disabled"], ["title", "Create new category", 1, "sqp-add-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "sqp-create-header"], [1, "fa-solid", "fa-folder-plus"], [1, "sqp-create-fields"], ["type", "text", "placeholder", "Category name", 1, "sqp-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel"], [1, "sqp-create-parent"], [1, "sqp-sublabel"], [3, "SelectionChange", "BranchConfig", "SelectionMode", "SelectableTypes", "Placeholder"], [1, "sqp-create-actions"], [1, "sqp-btn", "sqp-btn-create", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check"], [1, "sqp-btn", "sqp-btn-cancel-create", 3, "click", "disabled"], [1, "sqp-inline-error"], [1, "fa-solid", "fa-exclamation-circle"], [1, "fa-solid", "fa-save"]], template: function SaveQueryPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵlistener("click", function SaveQueryPanelComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCancel()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(1, "div", 2)(2, "div", 3)(3, "div", 4);
+            i0.ɵɵelement(4, "i", 5);
+            i0.ɵɵelementStart(5, "h2", 6);
+            i0.ɵɵtext(6, "Save Query");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 7);
+            i0.ɵɵlistener("click", function SaveQueryPanelComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCancel()); });
+            i0.ɵɵelement(8, "i", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 9)(10, "div", 10)(11, "label", 11);
+            i0.ɵɵtext(12, " Name ");
+            i0.ɵɵelementStart(13, "span", 12);
+            i0.ɵɵtext(14, "*");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "input", 13);
+            i0.ɵɵtwoWayListener("ngModelChange", function SaveQueryPanelComponent_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.Name, $event) || (ctx.Name = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("keydown.enter", function SaveQueryPanelComponent_Template_input_keydown_enter_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSave()); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(16, "div", 10)(17, "div", 14)(18, "label", 11);
+            i0.ɵɵtext(19, "Category");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(20, SaveQueryPanelComponent_Conditional_20_Template, 3, 0, "button", 15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "mj-tree-dropdown", 16, 0);
+            i0.ɵɵlistener("SelectionChange", function SaveQueryPanelComponent_Template_mj_tree_dropdown_SelectionChange_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCategoryChanged($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(23, SaveQueryPanelComponent_Conditional_23_Template, 19, 10, "div", 17);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "div", 10)(25, "label", 11);
+            i0.ɵɵtext(26, "Description");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "textarea", 18);
+            i0.ɵɵtwoWayListener("ngModelChange", function SaveQueryPanelComponent_Template_textarea_ngModelChange_27_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.Description, $event) || (ctx.Description = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtext(28, "          ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(29, SaveQueryPanelComponent_Conditional_29_Template, 3, 1, "div", 19);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "div", 20)(31, "button", 21);
+            i0.ɵɵlistener("click", function SaveQueryPanelComponent_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnSave()); });
+            i0.ɵɵconditionalCreate(32, SaveQueryPanelComponent_Conditional_32_Template, 2, 0)(33, SaveQueryPanelComponent_Conditional_33_Template, 2, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "button", 22);
+            i0.ɵɵlistener("click", function SaveQueryPanelComponent_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCancel()); });
+            i0.ɵɵtext(35, " Cancel ");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("sqp-visible", ctx.IsVisible);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("sqp-visible", ctx.IsVisible);
+            i0.ɵɵadvance(14);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Name);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(!ctx.IsCreatingCategory ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("BranchConfig", ctx.CategoryBranchConfig)("SelectionMode", "single")("SelectableTypes", "branch")("Placeholder", "Select a category (optional)")("Value", ctx.SelectedCategoryKey);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsCreatingCategory ? 23 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.Description);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.ErrorMessage ? 29 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.CanSave || ctx.IsSaving);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsSaving ? 32 : 33);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.IsSaving);
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n    .sqp-backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0);\n      z-index: 1000;\n      transition: background 0.3s ease;\n      pointer-events: none;\n    }\n    .sqp-backdrop.sqp-visible[_ngcontent-%COMP%] {\n      background: rgba(0, 0, 0, 0.3);\n      pointer-events: auto;\n    }\n\n    \n\n\n\n    .sqp-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      right: -440px;\n      height: 100vh;\n      width: 440px;\n      background: var(--card-background, #ffffff);\n      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);\n      z-index: 1001;\n      display: flex;\n      flex-direction: column;\n      transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .sqp-panel.sqp-visible[_ngcontent-%COMP%] {\n      right: 0;\n    }\n\n    \n\n    .sqp-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 20px 24px 16px;\n      border-bottom: 1px solid var(--border-color, #e5e7eb);\n      flex-shrink: 0;\n    }\n    .sqp-title-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .sqp-title-icon[_ngcontent-%COMP%] {\n      font-size: 20px;\n      color: #5c6bc0;\n    }\n    .sqp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--text-primary, #1f2937);\n    }\n    .sqp-close-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      background: none;\n      border: none;\n      border-radius: 8px;\n      color: var(--text-secondary, #6b7280);\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n    .sqp-close-btn[_ngcontent-%COMP%]:hover {\n      background: var(--hover-background, #f3f4f6);\n      color: var(--text-primary, #1f2937);\n    }\n\n    \n\n    .sqp-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    \n\n    .sqp-field[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n    }\n    .sqp-label-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 6px;\n    }\n    .sqp-label[_ngcontent-%COMP%] {\n      display: block;\n      margin-bottom: 6px;\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--text-primary, #374151);\n    }\n    .sqp-label-row[_ngcontent-%COMP%]   .sqp-label[_ngcontent-%COMP%] {\n      margin-bottom: 0;\n    }\n    .sqp-sublabel[_ngcontent-%COMP%] {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      font-size: 12px;\n      color: #6b7280;\n    }\n    .sqp-required[_ngcontent-%COMP%] {\n      color: #dc2626;\n    }\n    .sqp-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #d1d5db;\n      border-radius: 6px;\n      font-size: 14px;\n      color: #1f2937;\n      background: #fff;\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      box-sizing: border-box;\n    }\n    .sqp-input[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #5c6bc0;\n      box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.15);\n    }\n    .sqp-input[_ngcontent-%COMP%]::placeholder {\n      color: #9ca3af;\n    }\n    .sqp-textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #d1d5db;\n      border-radius: 6px;\n      font-size: 14px;\n      color: #1f2937;\n      background: #fff;\n      resize: vertical;\n      font-family: inherit;\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      box-sizing: border-box;\n    }\n    .sqp-textarea[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #5c6bc0;\n      box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.15);\n    }\n    .sqp-textarea[_ngcontent-%COMP%]::placeholder {\n      color: #9ca3af;\n    }\n\n    \n\n    .sqp-add-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 3px 10px;\n      background: none;\n      border: 1px solid #d1d5db;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #5c6bc0;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n    .sqp-add-btn[_ngcontent-%COMP%]:hover {\n      background: #eef2ff;\n      border-color: #5c6bc0;\n    }\n\n    \n\n    .sqp-create-category[_ngcontent-%COMP%] {\n      margin-top: 12px;\n      padding: 14px;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n    }\n    .sqp-create-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #475569;\n      margin-bottom: 10px;\n    }\n    .sqp-create-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #5c6bc0;\n    }\n    .sqp-create-fields[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n    .sqp-create-parent[_ngcontent-%COMP%] {\n      margin-top: 2px;\n    }\n    .sqp-create-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      margin-top: 12px;\n    }\n    .sqp-inline-error[_ngcontent-%COMP%] {\n      margin-top: 8px;\n      font-size: 12px;\n      color: #dc2626;\n    }\n\n    \n\n    .sqp-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n    .sqp-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    .sqp-btn-save[_ngcontent-%COMP%] {\n      background: #5c6bc0;\n      color: #fff;\n      padding: 10px 20px;\n      font-size: 14px;\n    }\n    .sqp-btn-save[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #3f51b5;\n    }\n    .sqp-btn-cancel[_ngcontent-%COMP%] {\n      background: none;\n      border: 1px solid #d1d5db;\n      color: #6b7280;\n      padding: 10px 20px;\n      font-size: 14px;\n    }\n    .sqp-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #f3f4f6;\n      color: #374151;\n    }\n    .sqp-btn-create[_ngcontent-%COMP%] {\n      background: #16a34a;\n      color: #fff;\n    }\n    .sqp-btn-create[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #15803d;\n    }\n    .sqp-btn-cancel-create[_ngcontent-%COMP%] {\n      background: none;\n      color: #6b7280;\n    }\n    .sqp-btn-cancel-create[_ngcontent-%COMP%]:hover:not(:disabled) {\n      color: #374151;\n      background: #f1f5f9;\n    }\n\n    \n\n    .sqp-footer[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 10px;\n      padding: 16px 24px;\n      border-top: 1px solid var(--border-color, #e5e7eb);\n      flex-shrink: 0;\n    }\n\n    \n\n    .sqp-error[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: #fef2f2;\n      border: 1px solid #fecaca;\n      border-radius: 6px;\n      color: #dc2626;\n      font-size: 13px;\n    }\n\n    \n\n    @media (max-width: 768px) {\n      .sqp-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        right: -100%;\n      }\n      .sqp-panel.sqp-visible[_ngcontent-%COMP%] {\n        right: 0;\n      }\n      .sqp-header[_ngcontent-%COMP%] {\n        padding: 16px 20px 12px;\n      }\n      .sqp-body[_ngcontent-%COMP%] {\n        padding: 16px;\n      }\n      .sqp-footer[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n      }\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveQueryPanelComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-save-query-panel', template: `
+    <!-- Backdrop -->
+    <div class="sqp-backdrop" [class.sqp-visible]="IsVisible" (click)="OnCancel()"></div>
+
+    <!-- Slide panel -->
+    <div class="sqp-panel" [class.sqp-visible]="IsVisible">
+      <!-- Header -->
+      <div class="sqp-header">
+        <div class="sqp-title-group">
+          <i class="fa-solid fa-save sqp-title-icon"></i>
+          <h2 class="sqp-title">Save Query</h2>
+        </div>
+        <button class="sqp-close-btn" (click)="OnCancel()">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+
+      <!-- Body -->
+      <div class="sqp-body">
+        <!-- Name -->
+        <div class="sqp-field">
+          <label class="sqp-label">
+            Name <span class="sqp-required">*</span>
+          </label>
+          <input
+            type="text"
+            class="sqp-input"
+            [(ngModel)]="Name"
+            placeholder="Query name"
+            (keydown.enter)="OnSave()">
+        </div>
+
+        <!-- Category -->
+        <div class="sqp-field">
+          <div class="sqp-label-row">
+            <label class="sqp-label">Category</label>
+            @if (!IsCreatingCategory) {
+              <button class="sqp-add-btn" (click)="StartCreateCategory()" title="Create new category">
+                <i class="fa-solid fa-plus"></i> New
+              </button>
+            }
+          </div>
+
+          <mj-tree-dropdown
+            #categoryTree
+            [BranchConfig]="CategoryBranchConfig"
+            [SelectionMode]="'single'"
+            [SelectableTypes]="'branch'"
+            [Placeholder]="'Select a category (optional)'"
+            [Value]="SelectedCategoryKey"
+            (SelectionChange)="OnCategoryChanged($event)">
+          </mj-tree-dropdown>
+
+          <!-- Inline create category form -->
+          @if (IsCreatingCategory) {
+            <div class="sqp-create-category">
+              <div class="sqp-create-header">
+                <i class="fa-solid fa-folder-plus"></i>
+                <span>New Category</span>
+              </div>
+              <div class="sqp-create-fields">
+                <input
+                  type="text"
+                  class="sqp-input"
+                  [(ngModel)]="NewCategoryName"
+                  placeholder="Category name"
+                  (keydown.enter)="CreateCategory()"
+                  (keydown.escape)="CancelCreateCategory()">
+                <div class="sqp-create-parent">
+                  <label class="sqp-sublabel">Parent (optional)</label>
+                  <mj-tree-dropdown
+                    [BranchConfig]="CategoryBranchConfig"
+                    [SelectionMode]="'single'"
+                    [SelectableTypes]="'branch'"
+                    [Placeholder]="'None (top level)'"
+                    (SelectionChange)="OnNewCategoryParentChanged($event)">
+                  </mj-tree-dropdown>
+                </div>
+              </div>
+              <div class="sqp-create-actions">
+                <button class="sqp-btn sqp-btn-create"
+                  (click)="CreateCategory()"
+                  [disabled]="!NewCategoryName.trim() || IsCreatingCategorySaving">
+                  @if (IsCreatingCategorySaving) {
+                    <i class="fa-solid fa-spinner fa-spin"></i>
+                  } @else {
+                    <i class="fa-solid fa-check"></i>
+                  }
+                  {{ IsCreatingCategorySaving ? 'Creating...' : 'Create' }}
+                </button>
+                <button class="sqp-btn sqp-btn-cancel-create"
+                  (click)="CancelCreateCategory()"
+                  [disabled]="IsCreatingCategorySaving">
+                  Cancel
+                </button>
+              </div>
+              @if (CreateCategoryError) {
+                <div class="sqp-inline-error">{{ CreateCategoryError }}</div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Description -->
+        <div class="sqp-field">
+          <label class="sqp-label">Description</label>
+          <textarea
+            class="sqp-textarea"
+            [(ngModel)]="Description"
+            placeholder="Optional description"
+            rows="3">
+          </textarea>
+        </div>
+
+        @if (ErrorMessage) {
+          <div class="sqp-error">
+            <i class="fa-solid fa-exclamation-circle"></i>
+            {{ ErrorMessage }}
+          </div>
+        }
+      </div>
+
+      <!-- Footer -->
+      <div class="sqp-footer">
+        <button class="sqp-btn sqp-btn-save"
+          (click)="OnSave()"
+          [disabled]="!CanSave || IsSaving">
+          @if (IsSaving) {
+            <i class="fa-solid fa-spinner fa-spin"></i> Saving...
+          } @else {
+            <i class="fa-solid fa-save"></i> Save Query
+          }
+        </button>
+        <button class="sqp-btn sqp-btn-cancel"
+          (click)="OnCancel()"
+          [disabled]="IsSaving">
+          Cancel
+        </button>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n    /* Backdrop */\n    .sqp-backdrop {\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0);\n      z-index: 1000;\n      transition: background 0.3s ease;\n      pointer-events: none;\n    }\n    .sqp-backdrop.sqp-visible {\n      background: rgba(0, 0, 0, 0.3);\n      pointer-events: auto;\n    }\n\n    /* Panel \u2014 uses right offset instead of transform to avoid creating\n       a new containing block that breaks position:fixed children\n       (e.g., the tree-dropdown popup). */\n    .sqp-panel {\n      position: fixed;\n      top: 0;\n      right: -440px;\n      height: 100vh;\n      width: 440px;\n      background: var(--card-background, #ffffff);\n      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);\n      z-index: 1001;\n      display: flex;\n      flex-direction: column;\n      transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .sqp-panel.sqp-visible {\n      right: 0;\n    }\n\n    /* Header */\n    .sqp-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 20px 24px 16px;\n      border-bottom: 1px solid var(--border-color, #e5e7eb);\n      flex-shrink: 0;\n    }\n    .sqp-title-group {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .sqp-title-icon {\n      font-size: 20px;\n      color: #5c6bc0;\n    }\n    .sqp-title {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--text-primary, #1f2937);\n    }\n    .sqp-close-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      background: none;\n      border: none;\n      border-radius: 8px;\n      color: var(--text-secondary, #6b7280);\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n    .sqp-close-btn:hover {\n      background: var(--hover-background, #f3f4f6);\n      color: var(--text-primary, #1f2937);\n    }\n\n    /* Body */\n    .sqp-body {\n      flex: 1;\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    /* Fields */\n    .sqp-field {\n      margin-bottom: 20px;\n    }\n    .sqp-label-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 6px;\n    }\n    .sqp-label {\n      display: block;\n      margin-bottom: 6px;\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--text-primary, #374151);\n    }\n    .sqp-label-row .sqp-label {\n      margin-bottom: 0;\n    }\n    .sqp-sublabel {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      font-size: 12px;\n      color: #6b7280;\n    }\n    .sqp-required {\n      color: #dc2626;\n    }\n    .sqp-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #d1d5db;\n      border-radius: 6px;\n      font-size: 14px;\n      color: #1f2937;\n      background: #fff;\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      box-sizing: border-box;\n    }\n    .sqp-input:focus {\n      outline: none;\n      border-color: #5c6bc0;\n      box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.15);\n    }\n    .sqp-input::placeholder {\n      color: #9ca3af;\n    }\n    .sqp-textarea {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #d1d5db;\n      border-radius: 6px;\n      font-size: 14px;\n      color: #1f2937;\n      background: #fff;\n      resize: vertical;\n      font-family: inherit;\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      box-sizing: border-box;\n    }\n    .sqp-textarea:focus {\n      outline: none;\n      border-color: #5c6bc0;\n      box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.15);\n    }\n    .sqp-textarea::placeholder {\n      color: #9ca3af;\n    }\n\n    /* Add category button */\n    .sqp-add-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 3px 10px;\n      background: none;\n      border: 1px solid #d1d5db;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #5c6bc0;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n    .sqp-add-btn:hover {\n      background: #eef2ff;\n      border-color: #5c6bc0;\n    }\n\n    /* Inline create category */\n    .sqp-create-category {\n      margin-top: 12px;\n      padding: 14px;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n    }\n    .sqp-create-header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #475569;\n      margin-bottom: 10px;\n    }\n    .sqp-create-header i {\n      color: #5c6bc0;\n    }\n    .sqp-create-fields {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n    .sqp-create-parent {\n      margin-top: 2px;\n    }\n    .sqp-create-actions {\n      display: flex;\n      gap: 8px;\n      margin-top: 12px;\n    }\n    .sqp-inline-error {\n      margin-top: 8px;\n      font-size: 12px;\n      color: #dc2626;\n    }\n\n    /* Buttons */\n    .sqp-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n    .sqp-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    .sqp-btn-save {\n      background: #5c6bc0;\n      color: #fff;\n      padding: 10px 20px;\n      font-size: 14px;\n    }\n    .sqp-btn-save:hover:not(:disabled) {\n      background: #3f51b5;\n    }\n    .sqp-btn-cancel {\n      background: none;\n      border: 1px solid #d1d5db;\n      color: #6b7280;\n      padding: 10px 20px;\n      font-size: 14px;\n    }\n    .sqp-btn-cancel:hover:not(:disabled) {\n      background: #f3f4f6;\n      color: #374151;\n    }\n    .sqp-btn-create {\n      background: #16a34a;\n      color: #fff;\n    }\n    .sqp-btn-create:hover:not(:disabled) {\n      background: #15803d;\n    }\n    .sqp-btn-cancel-create {\n      background: none;\n      color: #6b7280;\n    }\n    .sqp-btn-cancel-create:hover:not(:disabled) {\n      color: #374151;\n      background: #f1f5f9;\n    }\n\n    /* Footer */\n    .sqp-footer {\n      display: flex;\n      gap: 10px;\n      padding: 16px 24px;\n      border-top: 1px solid var(--border-color, #e5e7eb);\n      flex-shrink: 0;\n    }\n\n    /* Error */\n    .sqp-error {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: #fef2f2;\n      border: 1px solid #fecaca;\n      border-radius: 6px;\n      color: #dc2626;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .sqp-panel {\n        width: 100% !important;\n        right: -100%;\n      }\n      .sqp-panel.sqp-visible {\n        right: 0;\n      }\n      .sqp-header {\n        padding: 16px 20px 12px;\n      }\n      .sqp-body {\n        padding: 16px;\n      }\n      .sqp-footer {\n        padding: 12px 16px;\n      }\n    }\n  "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { QueryName: [{
+            type: Input
+        }], QueryDescription: [{
+            type: Input
+        }], SQL: [{
+            type: Input
+        }], Saved: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }], categoryTree: [{
+            type: ViewChild,
+            args: ['categoryTree']
+        }], OnEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveQueryPanelComponent, { className: "SaveQueryPanelComponent", filePath: "src/lib/components/plugins/save-query-dialog.component.ts", lineNumber: 479 }); })();
+//# sourceMappingURL=save-query-dialog.component.js.map