@memberjunction/ng-core-entity-forms 6.2.0-edge.0 → 6.2.0-edge.2

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

@@ -1191,34 +1191,34 @@ function MJQueryFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf &
 let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJQueryFormComponent {
     constructor() {
         super(...arguments);
-        this.queryParameters = [];
-        this.queryFields = [];
-        this.queryEntities = [];
-        this.queryPermissions = [];
-        this.isLoadingParameters = false;
-        this.isLoadingFields = false;
-        this.isLoadingEntities = false;
-        this.isLoadingPermissions = false;
-        this.hasUnsavedChanges = false;
-        this.showFiltersHelp = false;
-        this.showRunDialog = false;
-        this.categoryPathDisplay = '';
+        this.QueryParameters = [];
+        this.QueryFields = [];
+        this.QueryEntities = [];
+        this.QueryPermissions = [];
+        this.IsLoadingParameters = false;
+        this.IsLoadingFields = false;
+        this.IsLoadingEntities = false;
+        this.IsLoadingPermissions = false;
+        this.HasUnsavedChanges = false;
+        this.ShowFiltersHelp = false;
+        this.ShowRunDialog = false;
+        this.CategoryPathDisplay = '';
         this.IsSaving = false;
         // Expansion panel states
-        this.sqlPanelExpanded = true;
-        this.parametersPanelExpanded = false;
-        this.fieldsPanelExpanded = false;
-        this.entitiesPanelExpanded = false;
-        this.technicalDescriptionPanelExpanded = false;
-        this.detailsPanelExpanded = false;
-        this.permissionsPanelExpanded = false;
-        this.dependentsPanelExpanded = false;
+        this.SqlPanelExpanded = true;
+        this.ParametersPanelExpanded = false;
+        this.FieldsPanelExpanded = false;
+        this.EntitiesPanelExpanded = false;
+        this.TechnicalDescriptionPanelExpanded = false;
+        this.DetailsPanelExpanded = false;
+        this.PermissionsPanelExpanded = false;
+        this.DependentsPanelExpanded = false;
         // Category data
-        this.categoryOptions = [
+        this.CategoryOptions = [
             { text: 'Select Category...', value: '' }
         ];
-        this.categories = [];
-        this.categoryTreeData = [];
+        this.Categories = [];
+        this.CategoryTreeData = [];
         /** Tree dropdown config for Query Categories */
         this.CategoryBranchConfig = {
             EntityName: 'MJ: Query Categories',
@@ -1230,7 +1230,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             OrderBy: 'Name ASC'
         };
         // Status options — matches MJQueryEntity.Status type from database CHECK constraint
-        this.statusOptions = [
+        this.StatusOptions = [
             { text: 'Pending', value: 'Pending' },
             { text: 'Approved', value: 'Approved' },
             { text: 'Rejected', value: 'Rejected' },
@@ -1240,9 +1240,9 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         // group, keeps all left-side action buttons (delete/favorite/history/list)
         // since they're now wired through `<mj-record-form-container>`.
         this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
-        this.sqlEditor = null;
+        this.SqlEditor = null;
         // SQL Filters for help display
-        this.sqlFilters = RUN_QUERY_SQL_FILTERS;
+        this.SqlFilters = RUN_QUERY_SQL_FILTERS;
         this.navigationService = inject(NavigationService);
         this.formPresenter = inject(MJFormPresenterService);
         this.confirmService = inject(MJConfirmService);
@@ -1250,6 +1250,190 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         this.isUpdatingEditorValue = false;
         this.isInitialLoad = true;
     }
+    /** @deprecated Use {@link QueryParameters}. */
+    get queryParameters() {
+        return this.QueryParameters;
+    }
+    /** @deprecated Use {@link QueryParameters}. */
+    set queryParameters(value) {
+        this.QueryParameters = value;
+    }
+    /** @deprecated Use {@link QueryFields}. */
+    get queryFields() {
+        return this.QueryFields;
+    }
+    /** @deprecated Use {@link QueryFields}. */
+    set queryFields(value) {
+        this.QueryFields = value;
+    }
+    /** @deprecated Use {@link QueryEntities}. */
+    get queryEntities() {
+        return this.QueryEntities;
+    }
+    /** @deprecated Use {@link QueryEntities}. */
+    set queryEntities(value) {
+        this.QueryEntities = value;
+    }
+    /** @deprecated Use {@link QueryPermissions}. */
+    get queryPermissions() {
+        return this.QueryPermissions;
+    }
+    /** @deprecated Use {@link QueryPermissions}. */
+    set queryPermissions(value) {
+        this.QueryPermissions = value;
+    }
+    /** @deprecated Use {@link IsLoadingParameters}. */
+    get isLoadingParameters() {
+        return this.IsLoadingParameters;
+    }
+    /** @deprecated Use {@link IsLoadingParameters}. */
+    set isLoadingParameters(value) {
+        this.IsLoadingParameters = value;
+    }
+    /** @deprecated Use {@link IsLoadingFields}. */
+    get isLoadingFields() {
+        return this.IsLoadingFields;
+    }
+    /** @deprecated Use {@link IsLoadingFields}. */
+    set isLoadingFields(value) {
+        this.IsLoadingFields = value;
+    }
+    /** @deprecated Use {@link IsLoadingEntities}. */
+    get isLoadingEntities() {
+        return this.IsLoadingEntities;
+    }
+    /** @deprecated Use {@link IsLoadingEntities}. */
+    set isLoadingEntities(value) {
+        this.IsLoadingEntities = value;
+    }
+    /** @deprecated Use {@link IsLoadingPermissions}. */
+    get isLoadingPermissions() {
+        return this.IsLoadingPermissions;
+    }
+    /** @deprecated Use {@link IsLoadingPermissions}. */
+    set isLoadingPermissions(value) {
+        this.IsLoadingPermissions = value;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    get hasUnsavedChanges() {
+        return this.HasUnsavedChanges;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    set hasUnsavedChanges(value) {
+        this.HasUnsavedChanges = value;
+    }
+    /** @deprecated Use {@link ShowFiltersHelp}. */
+    get showFiltersHelp() {
+        return this.ShowFiltersHelp;
+    }
+    /** @deprecated Use {@link ShowFiltersHelp}. */
+    set showFiltersHelp(value) {
+        this.ShowFiltersHelp = value;
+    }
+    /** @deprecated Use {@link ShowRunDialog}. */
+    get showRunDialog() {
+        return this.ShowRunDialog;
+    }
+    /** @deprecated Use {@link ShowRunDialog}. */
+    set showRunDialog(value) {
+        this.ShowRunDialog = value;
+    }
+    /** @deprecated Use {@link CategoryPathDisplay}. */
+    get categoryPathDisplay() {
+        return this.CategoryPathDisplay;
+    }
+    /** @deprecated Use {@link CategoryPathDisplay}. */
+    set categoryPathDisplay(value) {
+        this.CategoryPathDisplay = value;
+    }
+    /** @deprecated Use {@link SqlPanelExpanded}. */
+    get sqlPanelExpanded() {
+        return this.SqlPanelExpanded;
+    }
+    /** @deprecated Use {@link SqlPanelExpanded}. */
+    set sqlPanelExpanded(value) {
+        this.SqlPanelExpanded = value;
+    }
+    /** @deprecated Use {@link ParametersPanelExpanded}. */
+    get parametersPanelExpanded() {
+        return this.ParametersPanelExpanded;
+    }
+    /** @deprecated Use {@link ParametersPanelExpanded}. */
+    set parametersPanelExpanded(value) {
+        this.ParametersPanelExpanded = value;
+    }
+    /** @deprecated Use {@link FieldsPanelExpanded}. */
+    get fieldsPanelExpanded() {
+        return this.FieldsPanelExpanded;
+    }
+    /** @deprecated Use {@link FieldsPanelExpanded}. */
+    set fieldsPanelExpanded(value) {
+        this.FieldsPanelExpanded = value;
+    }
+    /** @deprecated Use {@link EntitiesPanelExpanded}. */
+    get entitiesPanelExpanded() {
+        return this.EntitiesPanelExpanded;
+    }
+    /** @deprecated Use {@link EntitiesPanelExpanded}. */
+    set entitiesPanelExpanded(value) {
+        this.EntitiesPanelExpanded = value;
+    }
+    /** @deprecated Use {@link TechnicalDescriptionPanelExpanded}. */
+    get technicalDescriptionPanelExpanded() {
+        return this.TechnicalDescriptionPanelExpanded;
+    }
+    /** @deprecated Use {@link TechnicalDescriptionPanelExpanded}. */
+    set technicalDescriptionPanelExpanded(value) {
+        this.TechnicalDescriptionPanelExpanded = value;
+    }
+    /** @deprecated Use {@link DetailsPanelExpanded}. */
+    get detailsPanelExpanded() {
+        return this.DetailsPanelExpanded;
+    }
+    /** @deprecated Use {@link DetailsPanelExpanded}. */
+    set detailsPanelExpanded(value) {
+        this.DetailsPanelExpanded = value;
+    }
+    /** @deprecated Use {@link PermissionsPanelExpanded}. */
+    get permissionsPanelExpanded() {
+        return this.PermissionsPanelExpanded;
+    }
+    /** @deprecated Use {@link PermissionsPanelExpanded}. */
+    set permissionsPanelExpanded(value) {
+        this.PermissionsPanelExpanded = value;
+    }
+    /** @deprecated Use {@link DependentsPanelExpanded}. */
+    get dependentsPanelExpanded() {
+        return this.DependentsPanelExpanded;
+    }
+    /** @deprecated Use {@link DependentsPanelExpanded}. */
+    set dependentsPanelExpanded(value) {
+        this.DependentsPanelExpanded = value;
+    }
+    /** @deprecated Use {@link CategoryOptions}. */
+    get categoryOptions() {
+        return this.CategoryOptions;
+    }
+    /** @deprecated Use {@link CategoryOptions}. */
+    set categoryOptions(value) {
+        this.CategoryOptions = value;
+    }
+    /** @deprecated Use {@link Categories}. */
+    get categories() {
+        return this.Categories;
+    }
+    /** @deprecated Use {@link Categories}. */
+    set categories(value) {
+        this.Categories = value;
+    }
+    /** @deprecated Use {@link CategoryTreeData}. */
+    get categoryTreeData() {
+        return this.CategoryTreeData;
+    }
+    /** @deprecated Use {@link CategoryTreeData}. */
+    set categoryTreeData(value) {
+        this.CategoryTreeData = value;
+    }
     /** CategoryID as CompositeKey for tree dropdown binding */
     get CategoryIDAsKey() {
         return this.record?.CategoryID ? CompositeKey.FromID(this.record.CategoryID) : null; // first-pk-ok: FK target — Query CategoryID references the single-column ID key of Query Categories
@@ -1266,8 +1450,32 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         }
         this.updateCategoryPathDisplay();
     }
+    /** @deprecated Use {@link StatusOptions}. */
+    get statusOptions() {
+        return this.StatusOptions;
+    }
+    /** @deprecated Use {@link StatusOptions}. */
+    set statusOptions(value) {
+        this.StatusOptions = value;
+    }
     /** Custom-layout Query form looks best full-width on first open. */
     getDefaultFormWidthMode() { return 'full-width'; }
+    /** @deprecated Use {@link SqlEditor}. */
+    get sqlEditor() {
+        return this.SqlEditor;
+    }
+    /** @deprecated Use {@link SqlEditor}. */
+    set sqlEditor(value) {
+        this.SqlEditor = value;
+    }
+    /** @deprecated Use {@link SqlFilters}. */
+    get sqlFilters() {
+        return this.SqlFilters;
+    }
+    /** @deprecated Use {@link SqlFilters}. */
+    set sqlFilters(value) {
+        this.SqlFilters = value;
+    }
     /**
      * Gets queries that depend on (reference) this query via composition.
      */
@@ -1280,11 +1488,11 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         // We do one unified detectChanges after everything completes.
         this.isInitialLoad = true;
         // Load all data synchronously from QueryEngine cache
-        this.loadCategories();
-        this.loadQueryParameters();
-        this.loadQueryFields();
-        this.loadQueryEntities();
-        this.loadQueryPermissions();
+        this.LoadCategories();
+        this.LoadQueryParameters();
+        this.LoadQueryFields();
+        this.LoadQueryEntities();
+        this.LoadQueryPermissions();
         this.isInitialLoad = false;
         this.cdr.detectChanges();
     }
@@ -1294,17 +1502,17 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.sqlEditor?.setEditable(this.EditMode);
+        this.SqlEditor?.setEditable(this.EditMode);
         // Set initial SQL value in the editor
         this.updateEditorValue();
     }
     EndEditMode() {
         super.EndEditMode();
-        this.sqlEditor?.setEditable(false);
+        this.SqlEditor?.setEditable(false);
     }
     StartEditMode() {
         super.StartEditMode();
-        this.sqlEditor?.setEditable(true);
+        this.SqlEditor?.setEditable(true);
         // Force change detection after a brief delay to ensure form controls are initialized
         setTimeout(() => {
             this.cdr.detectChanges();
@@ -1313,74 +1521,98 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     CancelEdit() {
         super.CancelEdit();
         this.updateEditorValue(); // Reset editor value to record SQL
-        this.sqlEditor?.setEditable(false);
+        this.SqlEditor?.setEditable(false);
         this.updateUnsavedChangesFlag(); // Reset unsaved changes flag
     }
     updateEditorValue() {
-        if (!this.sqlEditor || this.isUpdatingEditorValue) {
+        if (!this.SqlEditor || this.isUpdatingEditorValue) {
             return;
         }
         // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
         setTimeout(() => {
-            if (!this.sqlEditor) {
+            if (!this.SqlEditor) {
                 return;
             }
             this.isUpdatingEditorValue = true;
             const sqlValue = this.record?.SQL || '';
             // Use the setValue method from mj-code-editor component
-            this.sqlEditor.setValue(sqlValue);
+            this.SqlEditor.setValue(sqlValue);
             this.isUpdatingEditorValue = false;
         }, 0);
     }
-    isFormReadOnly() {
+    IsFormReadOnly() {
         return !this.EditMode;
     }
-    loadQueryParameters() {
+    /** @deprecated Use {@link IsFormReadOnly}. */
+    isFormReadOnly() {
+        return this.IsFormReadOnly();
+    }
+    LoadQueryParameters() {
         if (this.record && this.record.ID) {
-            this.queryParameters = this.record.QueryParameters;
+            this.QueryParameters = this.record.QueryParameters;
             if (!this.isInitialLoad)
                 this.cdr.detectChanges();
         }
     }
-    loadQueryFields() {
+    /** @deprecated Use {@link LoadQueryParameters}. */
+    loadQueryParameters() {
+        return this.LoadQueryParameters();
+    }
+    LoadQueryFields() {
         if (this.record && this.record.ID) {
-            this.queryFields = this.record.QueryFields;
+            this.QueryFields = this.record.QueryFields;
             if (!this.isInitialLoad)
                 this.cdr.detectChanges();
         }
     }
-    loadQueryEntities() {
+    /** @deprecated Use {@link LoadQueryFields}. */
+    loadQueryFields() {
+        return this.LoadQueryFields();
+    }
+    LoadQueryEntities() {
         if (this.record && this.record.ID) {
-            this.queryEntities = this.record.QueryEntities;
+            this.QueryEntities = this.record.QueryEntities;
             if (!this.isInitialLoad)
                 this.cdr.detectChanges();
         }
     }
-    loadQueryPermissions() {
+    /** @deprecated Use {@link LoadQueryEntities}. */
+    loadQueryEntities() {
+        return this.LoadQueryEntities();
+    }
+    LoadQueryPermissions() {
         if (this.record && this.record.ID) {
-            this.queryPermissions = this.record.QueryPermissions;
+            this.QueryPermissions = this.record.QueryPermissions;
             if (!this.isInitialLoad)
                 this.cdr.detectChanges();
         }
     }
-    loadCategories() {
-        this.categories = QueryEngine.Instance.Categories;
+    /** @deprecated Use {@link LoadQueryPermissions}. */
+    loadQueryPermissions() {
+        return this.LoadQueryPermissions();
+    }
+    LoadCategories() {
+        this.Categories = QueryEngine.Instance.Categories;
         // Build flat options for legacy compatibility
-        this.categoryOptions = [
+        this.CategoryOptions = [
             { text: 'Select Category...', value: '' },
-            ...this.categories.map(cat => ({
+            ...this.Categories.map(cat => ({
                 text: cat.Name,
                 value: cat.ID
             }))
         ];
         // Build tree data after options are set
-        this.categoryTreeData = this.buildCategoryTree(this.categories);
+        this.CategoryTreeData = this.buildCategoryTree(this.Categories);
         // Update cached category path display
         this.updateCategoryPathDisplay();
         // Trigger change detection to update the view (skip during init)
         if (!this.isInitialLoad)
             this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link LoadCategories}. */
+    loadCategories() {
+        return this.LoadCategories();
+    }
     buildCategoryTree(categories) {
         const categoryMap = new Map();
         const rootCategories = [];
@@ -1417,11 +1649,11 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         sortNodes(rootCategories);
         return rootCategories;
     }
-    getCategoryPath() {
+    GetCategoryPath() {
         if (!this.record?.CategoryID)
             return '';
         const findPath = (categoryId) => {
-            const category = this.categories.find(c => UUIDsEqual(c.ID, categoryId));
+            const category = this.Categories.find(c => UUIDsEqual(c.ID, categoryId));
             if (!category)
                 return [];
             if (category.ParentID) {
@@ -1431,15 +1663,19 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         };
         return findPath(this.record.CategoryID).join(' / ');
     }
+    /** @deprecated Use {@link GetCategoryPath}. */
+    getCategoryPath() {
+        return this.GetCategoryPath();
+    }
     updateCategoryPathDisplay() {
-        this.categoryPathDisplay = this.getCategoryPath();
+        this.CategoryPathDisplay = this.GetCategoryPath();
     }
-    async onCategoryChange(value) {
+    async OnCategoryChange(value) {
         // If it's a new category (string but not in existing options)
-        if (value && !this.categoryOptions.find(opt => opt.value === value)) {
+        if (value && !this.CategoryOptions.find(opt => opt.value === value)) {
             // Check for duplicate category names (case-insensitive, trimmed)
             if (this.isDuplicateCategory(value)) {
-                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === value.trim().toLowerCase());
+                const existingCategory = this.CategoryOptions.find(option => option.text && option.text.trim().toLowerCase() === value.trim().toLowerCase());
                 if (existingCategory) {
                     // Use the existing category instead
                     this.record.CategoryID = existingCategory.value;
@@ -1455,7 +1691,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
                 const saved = await newCategory.Save();
                 if (saved) {
                     // Add to options and set the ID
-                    this.categoryOptions.push({
+                    this.CategoryOptions.push({
                         text: newCategory.Name,
                         value: newCategory.ID
                     });
@@ -1472,30 +1708,38 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             }
         }
     }
+    /** @deprecated Use {@link OnCategoryChange}. */
+    async onCategoryChange(value) {
+        return this.OnCategoryChange(value);
+    }
     isDuplicateCategory(categoryName) {
         const normalizedName = categoryName?.trim().toLowerCase();
-        return this.categoryOptions.some(option => option.text && option.text.trim().toLowerCase() === normalizedName);
+        return this.CategoryOptions.some(option => option.text && option.text.trim().toLowerCase() === normalizedName);
     }
     /**
      * Updates the hasUnsavedChanges flag based on entity dirty states
      */
     updateUnsavedChangesFlag() {
-        this.hasUnsavedChanges = this.queryParameters.some(param => param.Dirty) ||
+        this.HasUnsavedChanges = this.QueryParameters.some(param => param.Dirty) ||
             this.record?.Dirty || false;
     }
+    ToggleFiltersHelp() {
+        this.ShowFiltersHelp = !this.ShowFiltersHelp;
+    }
+    /** @deprecated Use {@link ToggleFiltersHelp}. */
     toggleFiltersHelp() {
-        this.showFiltersHelp = !this.showFiltersHelp;
+        return this.ToggleFiltersHelp();
     }
     /**
      * Run the query with parameter dialog
      */
-    async runQuery() {
+    async RunQuery() {
         if (!this.record?.IsSaved) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the query before running it.', 'warning', 3000);
             return;
         }
         // Save any unsaved changes first
-        if (this.hasUnsavedChanges) {
+        if (this.HasUnsavedChanges) {
             const saveResult = await this.SaveRecord(false); // Don't exit edit mode
             if (!saveResult) {
                 MJNotificationService.Instance.CreateSimpleNotification('Failed to save query changes.', 'error', 3000);
@@ -1507,31 +1751,39 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             console.warn(`Executing query '${this.record.Name}' with status '${this.record.Status}'. Query has not been approved.`);
         }
         // Reload parameters in case they were updated
-        this.loadQueryParameters();
+        this.LoadQueryParameters();
         // Show the run dialog — set before detectChanges to avoid NG0100
-        this.showRunDialog = true;
+        this.ShowRunDialog = true;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link RunQuery}. */
+    async runQuery() {
+        return this.RunQuery();
+    }
     /**
      * Handle run dialog close
      */
+    OnRunDialogClose() {
+        this.ShowRunDialog = false;
+    }
+    /** @deprecated Use {@link OnRunDialogClose}. */
     onRunDialogClose() {
-        this.showRunDialog = false;
+        return this.OnRunDialogClose();
     }
     /**
      * Add a new parameter
      */
-    async addParameter() {
+    async AddParameter() {
         try {
             const md = this.ProviderToUse;
             const newParam = await md.GetEntityObject('MJ: Query Parameters');
             newParam.QueryID = this.record.ID;
-            newParam.Name = `param${this.queryParameters.length + 1}`;
+            newParam.Name = `param${this.QueryParameters.length + 1}`;
             newParam.Type = 'string';
             newParam.IsRequired = false;
             const saved = await newParam.Save();
             if (saved) {
-                this.queryParameters.push(newParam);
+                this.QueryParameters.push(newParam);
                 this.updateUnsavedChangesFlag();
                 MJNotificationService.Instance.CreateSimpleNotification('Parameter added successfully', 'success', 3000);
             }
@@ -1544,17 +1796,25 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Error adding parameter', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link AddParameter}. */
+    async addParameter() {
+        return this.AddParameter();
+    }
     /**
      * Edit a parameter
      */
-    async editParameter(param) {
+    async EditParameter(param) {
         // TODO: Show parameter edit dialog
         console.log('Edit parameter:', param);
     }
+    /** @deprecated Use {@link EditParameter}. */
+    async editParameter(param) {
+        return this.EditParameter(param);
+    }
     /**
      * Delete a parameter
      */
-    async deleteParameter(param) {
+    async DeleteParameter(param) {
         if (!(await this.confirmService.ConfirmDelete({ title: 'Delete Parameter', message: `Delete parameter "${param.Name}"?` }))) {
             return;
         }
@@ -1586,10 +1846,14 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Error deleting parameter', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link DeleteParameter}. */
+    async deleteParameter(param) {
+        return this.DeleteParameter(param);
+    }
     removeParameterFromList(param) {
-        const index = this.queryParameters.indexOf(param);
+        const index = this.QueryParameters.indexOf(param);
         if (index > -1) {
-            this.queryParameters.splice(index, 1);
+            this.QueryParameters.splice(index, 1);
         }
         this.cdr.detectChanges();
     }
@@ -1598,7 +1862,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
      * MJFormPresenterService. A new record opens in edit mode automatically.
      * On save, refresh the category tree and select the new category.
      */
-    async createCategory() {
+    async CreateCategory() {
         const ref = this.formPresenter.Open({
             EntityName: 'MJ: Query Categories',
             Presentation: 'slide-in',
@@ -1609,15 +1873,19 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         });
         const saved = await ref.AfterSaved();
         if (saved) {
-            this.onCategoryCreated(saved);
+            this.OnCategoryCreated(saved);
         }
     }
+    /** @deprecated Use {@link CreateCategory}. */
+    async createCategory() {
+        return this.CreateCategory();
+    }
     /**
      * Edit the currently-selected category in a slide-in via the generic
      * MJFormPresenterService. `StartInEditMode` opens the existing record
      * editable. On save, refresh the category tree.
      */
-    async editSelectedCategory() {
+    async EditSelectedCategory() {
         if (!this.record.CategoryID)
             return;
         const ref = this.formPresenter.Open({
@@ -1631,18 +1899,26 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         });
         const saved = await ref.AfterSaved();
         if (saved) {
-            this.loadCategories();
+            this.LoadCategories();
             this.cdr.detectChanges();
         }
     }
-    onCategoryCreated(newCategory) {
+    /** @deprecated Use {@link EditSelectedCategory}. */
+    async editSelectedCategory() {
+        return this.EditSelectedCategory();
+    }
+    OnCategoryCreated(newCategory) {
         // Reload categories to include the new one
-        this.loadCategories();
+        this.LoadCategories();
         // Set the new category as selected
         this.record.CategoryID = newCategory.ID;
         // Trigger change detection
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnCategoryCreated}. */
+    onCategoryCreated(newCategory) {
+        return this.OnCategoryCreated(newCategory);
+    }
     /**
      * Format date for display
      */
@@ -1666,9 +1942,9 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
     }
     async internalSaveRecord(StopEditModeAfterSave) {
         // Handle category creation before saving query
-        if (this.record.CategoryID && !this.categoryOptions.find(opt => opt.value === this.record.CategoryID)) {
+        if (this.record.CategoryID && !this.CategoryOptions.find(opt => opt.value === this.record.CategoryID)) {
             if (this.isDuplicateCategory(this.record.CategoryID)) {
-                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === this.record.CategoryID?.trim().toLowerCase());
+                const existingCategory = this.CategoryOptions.find(option => option.text && option.text.trim().toLowerCase() === this.record.CategoryID?.trim().toLowerCase());
                 if (existingCategory) {
                     this.record.CategoryID = existingCategory.value;
                     MJNotificationService.Instance.CreateSimpleNotification(`Category "${existingCategory.text}" already exists. Using existing category.`, 'warning', 3000);
@@ -1681,7 +1957,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
                     newCategory.Name = this.record.CategoryID.trim();
                     const saved = await newCategory.Save();
                     if (saved) {
-                        this.categoryOptions.push({
+                        this.CategoryOptions.push({
                             text: newCategory.Name,
                             value: newCategory.ID
                         });
@@ -1702,7 +1978,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         }
         // Save any unsaved query entities first
         if (this.EditMode) {
-            for (const entity of this.queryEntities) {
+            for (const entity of this.QueryEntities) {
                 if (!entity.IsSaved && entity.EntityID) {
                     try {
                         await entity.Save();
@@ -1719,16 +1995,16 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             this.updateUnsavedChangesFlag();
             // Reload related data after successful save as server-side processes may have updated them
             if (this.record && this.record.ID) {
-                this.loadQueryParameters();
-                this.loadQueryFields();
-                this.loadQueryEntities();
+                this.LoadQueryParameters();
+                this.LoadQueryFields();
+                this.LoadQueryEntities();
                 this.updateCategoryPathDisplay();
                 this.cdr.detectChanges();
             }
         }
         return result;
     }
-    getStatusBadgeColor() {
+    GetStatusBadgeColor() {
         switch (this.record?.Status) {
             case 'Approved': return '#28a745';
             case 'Pending': return '#f59e0b';
@@ -1737,7 +2013,11 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             default: return '#6c757d';
         }
     }
-    getStatusBannerIcon() {
+    /** @deprecated Use {@link GetStatusBadgeColor}. */
+    getStatusBadgeColor() {
+        return this.GetStatusBadgeColor();
+    }
+    GetStatusBannerIcon() {
         switch (this.record?.Status) {
             case 'Pending': return 'fa-clock';
             case 'Rejected': return 'fa-times-circle';
@@ -1745,7 +2025,11 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             default: return 'fa-info-circle';
         }
     }
-    getStatusBannerMessage() {
+    /** @deprecated Use {@link GetStatusBannerIcon}. */
+    getStatusBannerIcon() {
+        return this.GetStatusBannerIcon();
+    }
+    GetStatusBannerMessage() {
         switch (this.record?.Status) {
             case 'Pending': return 'It can be executed for testing but has not yet been approved.';
             case 'Rejected': return 'It was rejected and may need revision before approval.';
@@ -1753,10 +2037,14 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             default: return '';
         }
     }
+    /** @deprecated Use {@link GetStatusBannerMessage}. */
+    getStatusBannerMessage() {
+        return this.GetStatusBannerMessage();
+    }
     /**
      * Handle composition token click — navigate to the referenced query
      */
-    onCompositionTokenClick(event) {
+    OnCompositionTokenClick(event) {
         const allQueries = QueryEngine.Instance.Queries;
         const segments = event.FullPath.split('/').map(s => s.trim()).filter(s => s.length > 0);
         if (segments.length === 0)
@@ -1783,16 +2071,24 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification(`Referenced query "${event.FullPath}" not found.`, 'warning', 3000);
         }
     }
+    /** @deprecated Use {@link OnCompositionTokenClick}. */
+    onCompositionTokenClick(event) {
+        return this.OnCompositionTokenClick(event);
+    }
     /**
      * Navigate to a dependent query's record
      */
-    onDependentQueryClick(dep) {
+    OnDependentQueryClick(dep) {
         this.navigationService.OpenEntityRecord('MJ: Queries', CompositeKey.FromID(dep.QueryID));
     }
+    /** @deprecated Use {@link OnDependentQueryClick}. */
+    onDependentQueryClick(dep) {
+        return this.OnDependentQueryClick(dep);
+    }
     /**
      * Handle SQL value changes from the code editor
      */
-    onSQLChange(value) {
+    OnSQLChange(value) {
         if (this.isUpdatingEditorValue || !this.record) {
             return;
         }
@@ -1800,23 +2096,27 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
         this.record.SQL = value;
         this.updateUnsavedChangesFlag();
     }
+    /** @deprecated Use {@link OnSQLChange}. */
+    onSQLChange(value) {
+        return this.OnSQLChange(value);
+    }
     /**
      * Add a new field
      */
-    async addField() {
+    async AddField() {
         try {
             const md = this.ProviderToUse;
             const newField = await md.GetEntityObject('MJ: Query Fields');
             newField.QueryID = this.record.ID;
-            newField.Name = `field${this.queryFields.length + 1}`;
+            newField.Name = `field${this.QueryFields.length + 1}`;
             newField.Description = '';
-            newField.Sequence = (this.queryFields.length + 1) * 10;
+            newField.Sequence = (this.QueryFields.length + 1) * 10;
             newField.SQLBaseType = 'nvarchar';
             newField.SQLFullType = 'nvarchar(255)';
             const saved = await newField.Save();
             if (saved) {
-                this.queryFields.push(newField);
-                this.queryFields.sort((a, b) => (a.Sequence || 0) - (b.Sequence || 0));
+                this.QueryFields.push(newField);
+                this.QueryFields.sort((a, b) => (a.Sequence || 0) - (b.Sequence || 0));
                 this.updateUnsavedChangesFlag();
                 MJNotificationService.Instance.CreateSimpleNotification('Field added successfully', 'success', 3000);
             }
@@ -1826,10 +2126,14 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Failed to add field', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link AddField}. */
+    async addField() {
+        return this.AddField();
+    }
     /**
      * Delete a field
      */
-    async deleteField(field) {
+    async DeleteField(field) {
         if (!(await this.confirmService.ConfirmDelete({ title: 'Delete Field', message: `Delete field "${field.Name}"?` }))) {
             return;
         }
@@ -1838,13 +2142,13 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             const freshField = await md.GetEntityObject('MJ: Query Fields');
             const loaded = await freshField.Load(field.ID);
             if (!loaded) {
-                this.queryFields = this.queryFields.filter(f => !UUIDsEqual(f.ID, field.ID));
+                this.QueryFields = this.QueryFields.filter(f => !UUIDsEqual(f.ID, field.ID));
                 this.cdr.detectChanges();
                 return;
             }
             const deleted = await freshField.Delete();
             if (deleted) {
-                this.queryFields = this.queryFields.filter(f => !UUIDsEqual(f.ID, field.ID));
+                this.QueryFields = this.QueryFields.filter(f => !UUIDsEqual(f.ID, field.ID));
                 this.updateUnsavedChangesFlag();
                 MJNotificationService.Instance.CreateSimpleNotification('Field deleted successfully', 'success', 3000);
             }
@@ -1859,16 +2163,20 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Failed to delete field', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link DeleteField}. */
+    async deleteField(field) {
+        return this.DeleteField(field);
+    }
     /**
      * Add a new entity
      */
-    async addEntity() {
+    async AddEntity() {
         try {
             const md = this.ProviderToUse;
             const newEntity = await md.GetEntityObject('MJ: Query Entities');
             newEntity.QueryID = this.record.ID;
             // Add to the list immediately for UI responsiveness
-            this.queryEntities.push(newEntity);
+            this.QueryEntities.push(newEntity);
             this.updateUnsavedChangesFlag();
         }
         catch (error) {
@@ -1876,10 +2184,14 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Failed to add entity', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link AddEntity}. */
+    async addEntity() {
+        return this.AddEntity();
+    }
     /**
      * Delete an entity
      */
-    async deleteEntity(entity) {
+    async DeleteEntity(entity) {
         if (!(await this.confirmService.ConfirmDelete({ title: 'Delete Entity', message: `Delete entity "${entity.Entity}"?` }))) {
             return;
         }
@@ -1888,13 +2200,13 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             const freshEntity = await md.GetEntityObject('MJ: Query Entities');
             const loaded = await freshEntity.Load(entity.ID);
             if (!loaded) {
-                this.queryEntities = this.queryEntities.filter(e => !UUIDsEqual(e.ID, entity.ID));
+                this.QueryEntities = this.QueryEntities.filter(e => !UUIDsEqual(e.ID, entity.ID));
                 this.cdr.detectChanges();
                 return;
             }
             const deleted = await freshEntity.Delete();
             if (deleted) {
-                this.queryEntities = this.queryEntities.filter(e => !UUIDsEqual(e.ID, entity.ID));
+                this.QueryEntities = this.QueryEntities.filter(e => !UUIDsEqual(e.ID, entity.ID));
                 this.updateUnsavedChangesFlag();
                 MJNotificationService.Instance.CreateSimpleNotification('Entity deleted successfully', 'success', 3000);
             }
@@ -1909,15 +2221,23 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             MJNotificationService.Instance.CreateSimpleNotification('Failed to delete entity', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link DeleteEntity}. */
+    async deleteEntity(entity) {
+        return this.DeleteEntity(entity);
+    }
     /**
      * Get entity options for dropdown
      */
-    getEntityOptions() {
+    GetEntityOptions() {
         return this.ProviderToUse.Entities.map(e => ({
             text: e.Name,
             id: e.ID
         })).sort((a, b) => a.text.localeCompare(b.text));
     }
+    /** @deprecated Use {@link GetEntityOptions}. */
+    getEntityOptions() {
+        return this.GetEntityOptions();
+    }
     /**
      * Get the grid edit mode based on component edit mode
      */
@@ -1929,7 +2249,7 @@ let MJQueryFormComponentExtended = class MJQueryFormComponentExtended extends MJ
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sqlEditor = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.SqlEditor = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], ["sqlEditor", ""], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "IsSaving", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "saving-overlay"], [1, "query-header"], [1, "query-header-content"], [1, "query-header-top"], [1, "query-name-section"], [1, "fa-solid", "fa-database", "query-title-icon"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModel"], [1, "query-name-display"], [1, "query-header-actions"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", 3, "disabled"], [1, "query-meta-row"], [1, "query-meta-item"], [1, "meta-label"], [1, "meta-dropdown-row"], [1, "meta-value"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModel", "Data", "ValuePrimitive"], [1, "status-pill", 3, "background"], [1, "query-description-row"], ["Variant", "warning"], [1, "query-content"], [1, "query-panel", 3, "ExpandedChange", "Expanded"], ["mjAccordionTitle", ""], [1, "sql-panel-toolbar", 2, "display", "flex", "justify-content", "flex-end", "padding", "4px 0 8px"], ["type", "button", "mjButton", "", "variant", "flat", "title", "Show/hide SQL filters help", 1, "filters-help-btn", 3, "click"], [1, "fa-solid", "fa-question-circle"], [1, "fa-solid", 3, "ngClass"], [1, "sql-panel-content"], [1, "sql-editor", 3, "change", "CompositionTokenClick", "language"], [1, "filters-help"], [1, "query-panel", 3, "Expanded"], [1, "panel-body"], [1, "details-grid"], [1, "detail-item"], [1, "detail-label"], [1, "fa-solid", "fa-puzzle-piece"], [1, "detail-value"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-clipboard-list"], [1, "fa-solid", "fa-file-code"], ["name", "usesTemplate", 3, "ngModel"], [1, "fa-solid", "fa-calendar-plus"], [1, "fa-solid", "fa-calendar-check"], [3, "isVisibleChange", "onClose", "query", "parameters", "isVisible"], [1, "fa-solid", "fa-spinner", "fa-spin", "saving-spinner"], ["name", "queryName", "placeholder", "Enter query name...", 1, "mj-input", "query-name-input", 3, "ngModelChange", "ngModel"], ["mjButton", "", "variant", "primary", "title", "Run Query", 1, "run-query-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "meta-dropdown", 3, "ValueChange", "BranchConfig", "Value", "SelectableTypes", "SelectionMode", "Placeholder", "EnableSearch", "Clearable"], ["mjButton", "", "variant", "icon", "title", "New category", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "icon", "title", "Edit category"], ["mjButton", "", "variant", "icon", "title", "Edit category", 3, "click"], [1, "fa-solid", "fa-pen"], ["name", "status", "TextField", "text", "ValueField", "value", 1, "meta-dropdown", "status-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], [1, "status-pill"], [1, "fa-solid"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModel"], [1, "query-description-text"], ["name", "description", "rows", "2", "placeholder", "Enter query description...", 1, "mj-input", "query-description-input", 3, "ngModelChange", "ngModel"], [1, "panel-title-row"], [1, "panel-title"], [1, "fa-solid", "fa-code", "panel-icon", "sql-icon"], [1, "panel-badge", "defined"], [1, "filters-help-title"], [1, "fa-solid", "fa-filter"], [1, "filters-grid"], [1, "filter-card"], [1, "filter-name"], [1, "filter-description"], [1, "filter-syntax"], [1, "filter-notes"], [1, "technical-description-view"], [1, "fa-solid", "fa-book", "panel-icon"], ["name", "technicalDescription", "rows", "8", "placeholder", "Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.", 1, "mj-input", "technical-description-textarea", 3, "ngModelChange", "ngModel"], [1, "technical-description-preview"], [1, "preview-label"], [1, "fa-solid", "fa-eye"], [3, "data", "enableMermaid", "enableHighlight", "enableCollapsibleHeadings", "enableSmartypants"], [1, "panel-loading"], [1, "fa-solid", "fa-sliders", "panel-icon"], [1, "panel-badge", "count"], ["text", "Loading parameters..."], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Add parameters to make your query dynamic and reusable.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-sliders", "Title", "No Parameters Defined", "Message", "Add parameters to make your query dynamic and reusable.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "panel-toolbar"], [1, "card-grid"], [1, "item-card", 3, "required"], ["type", "button", 1, "add-item-btn", 3, "click"], [1, "item-card", 3, "click"], [1, "item-card-header"], [1, "item-name"], [1, "fa-solid", "fa-at", "item-name-icon", "param-icon"], [1, "item-badges"], [1, "item-badge", "required"], [1, "item-card-body"], [1, "item-description"], [1, "item-meta"], [1, "meta-tag"], [1, "item-actions"], [1, "meta-code"], [1, "item-actions", 3, "click"], ["type", "button", "title", "Edit parameter", 1, "item-action-btn", 3, "click"], ["type", "button", "title", "Delete parameter", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-table", "panel-icon"], ["text", "Loading fields..."], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Define output fields for your query results.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-table", "Title", "No Fields Defined", "Message", "Define output fields for your query results.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "item-card"], [1, "fa-solid", "fa-columns", "item-name-icon", "field-icon"], [1, "item-badge", "type"], [1, "item-badge", "sequence"], [1, "fa-solid", "fa-code"], [1, "item-card-actions"], ["type", "button", "title", "Delete field", 1, "item-action-btn", "delete", 3, "click"], [1, "dependents-description"], [1, "item-card", "dependent-card"], [1, "fa-solid", "fa-arrow-left", "panel-icon", "dependents-icon"], [1, "item-card", "dependent-card", 3, "click"], [1, "fa-solid", "fa-arrow-left", "item-name-icon", "dependent-query-icon"], [1, "item-card-footer"], [1, "open-link"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-database", "panel-icon"], ["text", "Loading entities..."], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "ActionText"], ["Icon", "fa-solid fa-database", "Title", "No Entities Tracked", "Message", "Track which entities this query uses for documentation.", "ActionIcon", "fa-solid fa-plus", 3, "Action", "ActionText"], [1, "fa-solid", "fa-table", "item-name-icon", "entity-icon"], [1, "entity-dropdown-wrapper"], ["TextField", "text", "ValueField", "id", "Placeholder", "Select entity...", 1, "entity-dropdown", 3, "ngModelChange", "ngModel", "name", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-database"], ["type", "button", "title", "Delete entity", 1, "item-action-btn", "delete", 3, "click"], [1, "fa-solid", "fa-info-circle", "panel-icon"], ["name", "reusable", 3, "ngModelChange", "ngModel"], [1, "detail-hint"], [1, "detail-tag", "positive"], [1, "detail-tag", "neutral"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], ["name", "cacheEnabled", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-clock"], ["type", "number", "name", "cacheTTLMinutes", "min", "1", "placeholder", "Default", 1, "mj-input", "detail-input-narrow", 3, "ngModelChange", "ngModel"], ["name", "auditQueryRuns", 3, "ngModelChange", "ngModel"], ["name", "usesTemplate", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-shield-alt", "panel-icon"], ["text", "Loading permissions..."], ["Icon", "fa-solid fa-shield-halved", "Title", "No Permissions Set", "Message", "This query uses default permissions."], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "permissions-list"], [1, "permission-card"], [1, "fa-solid", "fa-users", "permission-icon"], [1, "permission-info"], [1, "permission-role"], [1, "permission-type"], [1, "permission-badge"]], template: function MJQueryFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MJQueryFormComponentExtended_Conditional_0_Template, 88, 38);
         } if (rf & 2) {
@@ -1943,7 +2263,7 @@ export { MJQueryFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJQueryFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-query-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"ToolbarConfig\"\n    [IsSaving]=\"IsSaving\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n      <!-- Saving Overlay -->\n      @if (IsSaving) {\n        <div class=\"saving-overlay\">\n          <i class=\"fa-solid fa-spinner fa-spin saving-spinner\"></i>\n          <span>Saving...</span>\n        </div>\n      }\n\n      <!-- Header Section -->\n      <div class=\"query-header\" [class.content-saving]=\"IsSaving\">\n        <div class=\"query-header-content\">\n          <!-- Top Row: Name and Run Button -->\n          <div class=\"query-header-top\">\n            <!-- Left: Query Name -->\n            <div class=\"query-name-section\">\n              <i class=\"fa-solid fa-database query-title-icon\"></i>\n              @if (EditMode) {\n                <input class=\"mj-input query-name-input\"\n                  [(ngModel)]=\"record.Name\"\n                  name=\"queryName\"\n                  placeholder=\"Enter query name...\" />\n              } @else {\n                <h4 class=\"query-name-display\">{{ record.Name || 'Untitled Query' }}</h4>\n              }\n            </div>\n\n            <!-- Right: Action Buttons -->\n            <div class=\"query-header-actions\">\n              @if (record.ID) {\n                <button mjButton\n                  variant=\"primary\"\n                  [disabled]=\"EditMode || !record.SQL || record.SQL.trim().length === 0\"\n                  (click)=\"runQuery()\"\n                  title=\"Run Query\"\n                  class=\"run-query-btn\">\n                  <i class=\"fa-solid fa-play\"></i> Run\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Second Row: Category and Status -->\n          <div class=\"query-meta-row\">\n            <!-- Category -->\n            <div class=\"query-meta-item\">\n              <label class=\"meta-label\">Category</label>\n              @if (EditMode) {\n                <div class=\"meta-dropdown-row\">\n                  <mj-tree-dropdown\n                    [BranchConfig]=\"CategoryBranchConfig\"\n                    [Value]=\"CategoryIDAsKey\"\n                    [SelectableTypes]=\"'branch'\"\n                    [SelectionMode]=\"'single'\"\n                    [Placeholder]=\"'Select category...'\"\n                    [EnableSearch]=\"true\"\n                    [Clearable]=\"true\"\n                    (ValueChange)=\"OnCategoryTreeChange($event)\"\n                    class=\"meta-dropdown\">\n                  </mj-tree-dropdown>\n                  <button mjButton variant=\"icon\" title=\"New category\" (click)=\"createCategory()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                  </button>\n                  @if (record.CategoryID) {\n                    <button mjButton variant=\"icon\" title=\"Edit category\" (click)=\"editSelectedCategory()\">\n                      <i class=\"fa-solid fa-pen\"></i>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <span class=\"meta-value\">{{ categoryPathDisplay || 'Uncategorized' }}</span>\n              }\n            </div>\n\n            <!-- Status -->\n            <div class=\"query-meta-item\">\n              <label class=\"meta-label\">Status</label>\n              @if (EditMode) {\n                <mj-dropdown\n                  [(ngModel)]=\"record.Status\"\n                  name=\"status\"\n                  [Data]=\"statusOptions\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  class=\"meta-dropdown status-dropdown\">\n                </mj-dropdown>\n              } @else {\n                <span class=\"status-pill\"\n                  [style.background]=\"getStatusBadgeColor()\">\n                  <i class=\"fa-solid\" [class]=\"getStatusBannerIcon()\"></i>\n                  {{ record.Status || 'Unknown' }}\n                </span>\n              }\n            </div>\n          </div>\n\n          <!-- Third Row: Description -->\n          @if (EditMode || record.Description) {\n            <div class=\"query-description-row\">\n              @if (EditMode) {\n                <textarea class=\"mj-input query-description-input\"\n                  [(ngModel)]=\"record.Description\"\n                  name=\"description\"\n                  rows=\"2\"\n                  placeholder=\"Enter query description...\">\n                </textarea>\n              } @else {\n                <p class=\"query-description-text\">{{ record.Description }}</p>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Status Warning Banner for Non-Approved Queries -->\n      @if (record.Status && record.Status !== 'Approved' && !EditMode) {\n        <mj-alert Variant=\"warning\">\n          <span>\n            This query has status <strong>{{ record.Status }}</strong>. {{ getStatusBannerMessage() }}\n          </span>\n        </mj-alert>\n      }\n\n      <!-- Main Content Area with Expansion Panels -->\n      <div class=\"query-content\" [class.content-saving]=\"IsSaving\">\n\n        <!-- SQL Query Panel -->\n        <mj-accordion-panel\n          [(Expanded)]=\"sqlPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title-row\">\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-code panel-icon sql-icon\"></i>\n                SQL\n                @if (record.SQL) {\n                  <span class=\"panel-badge defined\">&mdash; Defined</span>\n                }\n              </span>\n            </span>\n          </ng-template>\n\n          <div class=\"sql-panel-toolbar\" style=\"display: flex; justify-content: flex-end; padding: 4px 0 8px;\">\n            <button type=\"button\"\n              mjButton\n              variant=\"flat\"\n              (click)=\"toggleFiltersHelp()\"\n              title=\"Show/hide SQL filters help\"\n              class=\"filters-help-btn\">\n              <i class=\"fa-solid fa-question-circle\"></i>\n              <span>Filters Help</span>\n              <i class=\"fa-solid\" [ngClass]=\"showFiltersHelp ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            </button>\n          </div>\n\n          <div class=\"sql-panel-content\">\n            <!-- Code Editor -->\n            <mj-code-editor #sqlEditor\n              (change)=\"onSQLChange($event)\"\n              (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n              [language]=\"'sql'\"\n              class=\"sql-editor\">\n            </mj-code-editor>\n\n            <!-- SQL Filters Help (Below Editor) -->\n            @if (showFiltersHelp) {\n              <div class=\"filters-help\">\n                <h6 class=\"filters-help-title\">\n                  <i class=\"fa-solid fa-filter\"></i> Available SQL Filters for Parameterized Queries\n                </h6>\n                <div class=\"filters-grid\">\n                  @for (filter of sqlFilters; track filter.name) {\n                    <div class=\"filter-card\">\n                      <div class=\"filter-name\">{{ filter.name }}</div>\n                      <div class=\"filter-description\">{{ filter.description }}</div>\n                      <div class=\"filter-syntax\">{{ filter.exampleSyntax }}</div>\n                      @if (filter.notes) {\n                        <div class=\"filter-notes\">{{ filter.notes }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Technical Description Panel -->\n        @if (record.TechnicalDescription || EditMode) {\n          <mj-accordion-panel\n            [(Expanded)]=\"technicalDescriptionPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-book panel-icon\"></i>\n                Technical Description\n                @if (record.TechnicalDescription) {\n                  <span class=\"panel-badge defined\">&mdash; Documented</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (EditMode) {\n                <textarea class=\"mj-input technical-description-textarea\"\n                  [(ngModel)]=\"record.TechnicalDescription\"\n                  name=\"technicalDescription\"\n                  rows=\"8\"\n                  placeholder=\"Technical documentation of the query logic, performance considerations, and parameter usage. Supports markdown and mermaid diagrams.\">\n                </textarea>\n                @if (record.TechnicalDescription) {\n                  <div class=\"technical-description-preview\">\n                    <div class=\"preview-label\">\n                      <i class=\"fa-solid fa-eye\"></i> Preview\n                    </div>\n                    <mj-markdown\n                      [data]=\"record.TechnicalDescription || ''\"\n                      [enableMermaid]=\"true\"\n                      [enableHighlight]=\"true\"\n                      [enableCollapsibleHeadings]=\"false\"\n                      [enableSmartypants]=\"true\">\n                    </mj-markdown>\n                  </div>\n                }\n              } @else {\n                <div class=\"technical-description-view\">\n                  <mj-markdown\n                    [data]=\"record.TechnicalDescription || ''\"\n                    [enableMermaid]=\"true\"\n                    [enableHighlight]=\"true\"\n                    [enableCollapsibleHeadings]=\"false\"\n                    [enableSmartypants]=\"true\">\n                  </mj-markdown>\n                </div>\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Parameters Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel\n            [(Expanded)]=\"parametersPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-sliders panel-icon\"></i>\n                Parameters\n                @if (queryParameters.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryParameters.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingParameters) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading parameters...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryParameters.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-sliders\"\n                    Title=\"No Parameters Defined\"\n                    Message=\"Add parameters to make your query dynamic and reusable.\"\n                    [ActionText]=\"EditMode ? 'Add First Parameter' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addParameter()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addParameter()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                      </button>\n                    </div>\n                  }\n                  <div class=\"card-grid\">\n                    @for (param of queryParameters; track param.ID || $index) {\n                      <div class=\"item-card\" [class.required]=\"param.IsRequired\" (click)=\"editParameter(param)\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-at item-name-icon param-icon\"></i>\n                            {{ param.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            @if (param.IsRequired) {\n                              <span class=\"item-badge required\">Required</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (param.Description) {\n                            <div class=\"item-description\">{{ param.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <strong>Type:</strong> {{ param.Type || 'Text' }}\n                            </span>\n                            @if (param.DefaultValue) {\n                              <span class=\"meta-tag\">\n                                <strong>Default:</strong>\n                                <code class=\"meta-code\">{{ param.DefaultValue }}</code>\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-actions\" (click)=\"$event.stopPropagation()\">\n                            <button type=\"button\" class=\"item-action-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                              <i class=\"fa-solid fa-pen\"></i>\n                            </button>\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\n                              <i class=\"fa-solid fa-trash\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Fields Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel\n            [(Expanded)]=\"fieldsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-table panel-icon\"></i>\n                Fields\n                @if (queryFields.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryFields.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingFields) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading fields...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryFields.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-table\"\n                    Title=\"No Fields Defined\"\n                    Message=\"Define output fields for your query results.\"\n                    [ActionText]=\"EditMode ? 'Add First Field' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addField()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addField()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Field\n                      </button>\n                    </div>\n                  }\n                  <div class=\"card-grid\">\n                    @for (field of queryFields; track field.ID) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-columns item-name-icon field-icon\"></i>\n                            {{ field.Name }}\n                          </div>\n                          <div class=\"item-badges\">\n                            <span class=\"item-badge type\">{{ field.SQLBaseType }}</span>\n                            @if (field.Sequence) {\n                              <span class=\"item-badge sequence\">#{{ field.Sequence }}</span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"item-card-body\">\n                          @if (field.Description) {\n                            <div class=\"item-description\">{{ field.Description }}</div>\n                          }\n                          <div class=\"item-meta\">\n                            <span class=\"meta-tag\">\n                              <i class=\"fa-solid fa-code\"></i> {{ field.SQLFullType || field.SQLBaseType }}\n                            </span>\n                          </div>\n                        </div>\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteField(field)\" title=\"Delete field\">\n                              <i class=\"fa-solid fa-trash\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Dependent Queries Panel -->\n        @if (record.IsSaved && DependentQueries.length > 0) {\n          <mj-accordion-panel\n            [(Expanded)]=\"dependentsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-arrow-left panel-icon dependents-icon\"></i>\n                Dependent Queries\n                <span class=\"panel-badge count\">{{ DependentQueries.length }}</span>\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              <div class=\"dependents-description\">\n                These queries reference this query via <code>{{\"{{query:\\\"...\\\"}}\"}} </code> composition syntax.\n              </div>\n              <div class=\"card-grid\">\n                @for (dep of DependentQueries; track dep.ID) {\n                  <div class=\"item-card dependent-card\" (click)=\"onDependentQueryClick(dep)\">\n                    <div class=\"item-card-header\">\n                      <div class=\"item-name\">\n                        <i class=\"fa-solid fa-arrow-left item-name-icon dependent-query-icon\"></i>\n                        {{ dep.Query }}\n                      </div>\n                    </div>\n                    <div class=\"item-card-body\">\n                      @if (dep.ReferencePath) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <i class=\"fa-solid fa-link\"></i> {{ dep.ReferencePath }}\n                          </span>\n                        </div>\n                      }\n                      @if (dep.Alias) {\n                        <div class=\"item-meta\">\n                          <span class=\"meta-tag\">\n                            <strong>Alias:</strong> <code class=\"meta-code\">{{ dep.Alias }}</code>\n                          </span>\n                        </div>\n                      }\n                    </div>\n                    <div class=\"item-card-footer\">\n                      <span class=\"open-link\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n                      </span>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Query Entities Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel\n            [(Expanded)]=\"entitiesPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-database panel-icon\"></i>\n                Entities\n                @if (queryEntities.length > 0) {\n                  <span class=\"panel-badge count\">{{ queryEntities.length }}</span>\n                }\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingEntities) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading entities...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryEntities.length === 0) {\n                  <mj-empty-state Icon=\"fa-solid fa-database\"\n                    Title=\"No Entities Tracked\"\n                    Message=\"Track which entities this query uses for documentation.\"\n                    [ActionText]=\"EditMode ? 'Add First Entity' : ''\"\n                    ActionIcon=\"fa-solid fa-plus\"\n                    (Action)=\"addEntity()\" />\n                } @else {\n                  @if (EditMode) {\n                    <div class=\"panel-toolbar\">\n                      <button type=\"button\" class=\"add-item-btn\" (click)=\"addEntity()\">\n                        <i class=\"fa-solid fa-plus\"></i> Add Entity\n                      </button>\n                    </div>\n                  }\n                  <div class=\"card-grid\">\n                    @for (entity of queryEntities; track entity.ID) {\n                      <div class=\"item-card\">\n                        <div class=\"item-card-header\">\n                          <div class=\"item-name\">\n                            <i class=\"fa-solid fa-table item-name-icon entity-icon\"></i>\n                            {{ entity.Entity || 'Select Entity...' }}\n                          </div>\n                          @if (EditMode) {\n                            <div class=\"entity-dropdown-wrapper\">\n                              <mj-dropdown\n                                [(ngModel)]=\"entity.EntityID\"\n                                [name]=\"'entity_' + entity.ID\"\n                                [Data]=\"getEntityOptions()\"\n                                TextField=\"text\"\n                                ValueField=\"id\"\n                                [ValuePrimitive]=\"true\"\n                                Placeholder=\"Select entity...\"\n                                class=\"entity-dropdown\">\n                              </mj-dropdown>\n                            </div>\n                          }\n                        </div>\n                        @if (!EditMode && entity.Entity) {\n                          <div class=\"item-card-body\">\n                            <div class=\"item-meta\">\n                              <span class=\"meta-tag\">\n                                <i class=\"fa-solid fa-database\"></i> Data Source\n                              </span>\n                            </div>\n                          </div>\n                        }\n                        @if (EditMode) {\n                          <div class=\"item-card-actions\">\n                            <button type=\"button\" class=\"item-action-btn delete\" (click)=\"deleteEntity(entity)\" title=\"Delete entity\">\n                              <i class=\"fa-solid fa-trash\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n        <!-- Details Panel -->\n        <mj-accordion-panel\n          [(Expanded)]=\"detailsPanelExpanded\"\n          class=\"query-panel\">\n          <ng-template mjAccordionTitle>\n            <span class=\"panel-title\">\n              <i class=\"fa-solid fa-info-circle panel-icon\"></i>\n              Details\n            </span>\n          </ng-template>\n\n          <div class=\"panel-body\">\n            <div class=\"details-grid\">\n              <!-- Reusable -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-puzzle-piece\"></i> Reusable\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.Reusable\" name=\"reusable\"></mj-switch>\n                  <div class=\"detail-hint\">Allow other queries to reference this query using composition syntax</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.Reusable) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Reusable</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Not Reusable</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache Enabled -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-bolt\"></i> Cache Enabled\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.CacheEnabled\" name=\"cacheEnabled\"></mj-switch>\n                  <div class=\"detail-hint\">Cache query results in memory to reduce database load on repeated runs</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.CacheEnabled) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Caching On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Caching Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Cache TTL -->\n              @if (record.CacheEnabled) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-clock\"></i> Cache TTL (Minutes)\n                  </label>\n                  @if (EditMode) {\n                    <input class=\"mj-input detail-input-narrow\"\n                      type=\"number\"\n                      [(ngModel)]=\"record.CacheTTLMinutes\"\n                      name=\"cacheTTLMinutes\"\n                      min=\"1\"\n                      placeholder=\"Default\" />\n                    <div class=\"detail-hint\">How long cached results remain valid. Leave blank for default TTL.</div>\n                  } @else {\n                    <div class=\"detail-value\">{{ record.CacheTTLMinutes != null ? record.CacheTTLMinutes + ' min' : 'Default' }}</div>\n                  }\n                </div>\n              }\n\n              <!-- Audit Query Runs -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-clipboard-list\"></i> Audit Runs\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.AuditQueryRuns\" name=\"auditQueryRuns\"></mj-switch>\n                  <div class=\"detail-hint\">Log all executions of this query to the Audit Log for tracking and compliance</div>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.AuditQueryRuns) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Auditing On</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> Auditing Off</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Uses Template -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-file-code\"></i> Template Usage\n                </label>\n                @if (EditMode) {\n                  <mj-switch [(ngModel)]=\"record.UsesTemplate\" name=\"usesTemplate\"></mj-switch>\n                } @else {\n                  <div class=\"detail-value\">\n                    @if (record.UsesTemplate) {\n                      <span class=\"detail-tag positive\"><i class=\"fa-solid fa-check\"></i> Uses Templates</span>\n                    } @else {\n                      <span class=\"detail-tag neutral\"><i class=\"fa-solid fa-times\"></i> No Templates</span>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- Created Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-plus\"></i> Created\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_CreatedAt) }}</div>\n              </div>\n\n              <!-- Updated Date -->\n              <div class=\"detail-item\">\n                <label class=\"detail-label\">\n                  <i class=\"fa-solid fa-calendar-check\"></i> Last Updated\n                </label>\n                <div class=\"detail-value\">{{ formatDate(record.__mj_UpdatedAt) }}</div>\n              </div>\n\n              <!-- Quality Rank -->\n              @if (record.QualityRank != null) {\n                <div class=\"detail-item\">\n                  <label class=\"detail-label\">\n                    <i class=\"fa-solid fa-star\"></i> Quality Rank\n                  </label>\n                  <div class=\"detail-value\">{{ record.QualityRank }}/10</div>\n                </div>\n              }\n            </div>\n          </div>\n        </mj-accordion-panel>\n\n        <!-- Permissions Panel -->\n        @if (record.IsSaved) {\n          <mj-accordion-panel\n            [(Expanded)]=\"permissionsPanelExpanded\"\n            class=\"query-panel\">\n            <ng-template mjAccordionTitle>\n              <span class=\"panel-title\">\n                <i class=\"fa-solid fa-shield-alt panel-icon\"></i>\n                Permissions\n              </span>\n            </ng-template>\n\n            <div class=\"panel-body\">\n              @if (isLoadingPermissions) {\n                <div class=\"panel-loading\">\n                  <mj-loading text=\"Loading permissions...\"></mj-loading>\n                </div>\n              } @else {\n                @if (queryPermissions.length === 0 && !EditMode) {\n                  <mj-empty-state Icon=\"fa-solid fa-shield-halved\"\n                    Title=\"No Permissions Set\"\n                    Message=\"This query uses default permissions.\" />\n                } @else {\n                  @if (EditMode) {\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Query Permissions','QueryID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: Query Permissions')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  } @else {\n                    <div class=\"permissions-list\">\n                      @for (permission of queryPermissions; track permission.ID) {\n                        <div class=\"permission-card\">\n                          <i class=\"fa-solid fa-users permission-icon\"></i>\n                          <div class=\"permission-info\">\n                            <div class=\"permission-role\">{{ permission.Role }}</div>\n                            <div class=\"permission-type\">Role Permission</div>\n                          </div>\n                          <span class=\"permission-badge\">\n                            <i class=\"fa-solid fa-play\"></i> Can Execute\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  }\n                }\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n\n      </div>\n    </form>\n</mj-record-form-container>\n\n<!-- Query Run Dialog -->\n<mj-query-run-dialog\n  [query]=\"record\"\n  [parameters]=\"queryParameters\"\n  [(isVisible)]=\"showRunDialog\"\n  (onClose)=\"onRunDialogClose()\">\n</mj-query-run-dialog>\n}\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n/* ========================================\n   Saving Overlay\n   ======================================== */\n\n.saving-overlay {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.saving-spinner {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.content-saving {\n    pointer-events: none;\n    opacity: 0.6;\n}\n\n/* ========================================\n   Header Section \u2014 matches Query Browser gradient\n   ======================================== */\n\n.query-header {\n    flex-shrink: 0;\n    background: var(--mj-brand-primary);\n    border-bottom: none;\n    padding: 0;\n}\n\n.query-header-content {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 20px;\n}\n\n.query-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.query-name-section {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.query-title-icon {\n    color: rgba(255, 255, 255, 0.85);\n    font-size: 1.3em;\n    flex-shrink: 0;\n}\n\n.query-name-input {\n    font-size: 1.2em;\n    font-weight: 600;\n    min-width: 300px;\n    flex: 1;\n}\n\n.query-name-display {\n    margin: 0;\n    color: var(--mj-text-inverse, white);\n    font-weight: 600;\n    font-size: 1.2em;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.query-header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.run-query-btn {\n    white-space: nowrap;\n}\n\n/* Meta row (category + status) */\n.query-meta-row {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.query-meta-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.meta-label {\n    font-weight: 500;\n    color: rgba(255, 255, 255, 0.75);\n    font-size: var(--mj-text-sm);\n    min-width: 60px;\n}\n\n.meta-value {\n    color: rgba(255, 255, 255, 0.95);\n    font-size: var(--mj-text-sm);\n}\n\n.meta-dropdown {\n    min-width: 200px;\n}\n\n.status-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: var(--mj-radius-xl);\n    color: var(--mj-text-inverse, white);\n    font-size: var(--mj-text-sm);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-pill i {\n    font-size: var(--mj-text-xs);\n}\n\n/* Description row */\n.query-description-row {\n    margin-top: 2px;\n}\n\n.query-description-input {\n    width: 100%;\n}\n\n.query-description-text {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.8);\n    font-size: var(--mj-text-sm);\n    line-height: 1.4;\n}\n\n/* ========================================\n   Status Warning Banner\n   ======================================== */\n\n\n/* ========================================\n   Main Content Area\n   ======================================== */\n\n.query-content {\n    flex: 1;\n    min-height: 0;\n    padding: 16px;\n    overflow-y: auto;\n    background: var(--mj-bg-surface-card);\n}\n\n/* ========================================\n   Accordion Panel Overrides \u2014 Modern Style\n   ======================================== */\n\n.query-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .query-content mj-accordion-panel .mj-accordion-panel {\n    border: none !important;\n    border-radius: var(--mj-radius-md) !important;\n    margin-bottom: 12px !important;\n    box-shadow: var(--mj-shadow-sm) !important;\n    background: var(--mj-bg-surface) !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .query-content .mj-accordion-header {\n    background: var(--mj-bg-surface) !important;\n    border: none !important;\n    padding: 14px 18px !important;\n    border-radius: var(--mj-radius-md) !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: var(--mj-text-sm) !important;\n    transition: background 0.15s ease !important;\n}\n\n::ng-deep .query-content .mj-accordion-header:hover {\n    background: var(--mj-bg-surface-card) !important;\n}\n\n::ng-deep .query-content .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary) !important;\n    color: white !important;\n    border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0 !important;\n}\n\n::ng-deep .query-content .mj-accordion-body {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface) !important;\n    border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md) !important;\n}\n\n/* ========================================\n   Panel Title & Badges\n   ======================================== */\n\n.panel-title-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-icon {\n    opacity: 0.7;\n}\n\n.sql-icon {\n    color: var(--mj-brand-primary);\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-icon {\n    color: rgba(255, 255, 255, 0.85) !important;\n    opacity: 1;\n}\n\n.panel-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n}\n\n.panel-badge.defined {\n    background: var(--mj-status-success);\n    color: white;\n}\n\n.panel-badge.count {\n    background: var(--mj-brand-primary);\n    color: white;\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.count {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n::ng-deep .mj-accordion-panel--expanded .panel-badge.defined {\n    background: rgba(255, 255, 255, 0.25) !important;\n}\n\n.filters-help-btn {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-right: 8px;\n    font-size: var(--mj-text-xs);\n}\n\n/* ========================================\n   Panel Body & Loading\n   ======================================== */\n\n.panel-body {\n    padding: 16px 0;\n}\n\n.panel-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.panel-toolbar {\n    display: flex;\n    justify-content: flex-end;\n    padding: 0 20px 12px;\n}\n\n/* ========================================\n   SQL Panel\n   ======================================== */\n\n.sql-panel-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.sql-editor {\n    flex: 1;\n    height: 400px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm);\n    margin: 16px;\n}\n\n/* Filters Help */\n.filters-help {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 16px;\n    margin: 0 16px 16px;\n}\n\n.filters-help-title {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n}\n\n.filters-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 10px;\n}\n\n.filter-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 12px;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.filter-card:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.filter-name {\n    font-family: 'Courier New', monospace;\n    font-weight: bold;\n    color: var(--mj-brand-primary);\n    margin-bottom: 4px;\n}\n\n.filter-description {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.filter-syntax {\n    font-family: 'Courier New', monospace;\n    font-size: var(--mj-text-xs);\n    background: var(--mj-bg-surface-card);\n    padding: 6px;\n    border-radius: var(--mj-radius-sm);\n    margin-bottom: 4px;\n}\n\n.filter-notes {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n/* ========================================\n   Card Grid (Parameters, Fields, Entities)\n   ======================================== */\n\n.card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n    gap: 12px;\n    padding: 0 20px 20px;\n}\n\n.item-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px;\n    transition: all 0.15s ease;\n    cursor: pointer;\n    position: relative;\n}\n\n.item-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.item-card.required {\n    border-left: 3px solid var(--mj-status-warning);\n}\n\n.item-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 10px;\n}\n\n.item-name {\n    font-weight: 600;\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.item-name-icon {\n    font-size: var(--mj-text-sm);\n}\n\n.item-name-icon.param-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.field-icon {\n    color: var(--mj-brand-primary);\n}\n\n.item-name-icon.entity-icon {\n    color: var(--mj-status-success);\n}\n\n.item-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.item-badge {\n    padding: 2px 8px;\n    border-radius: var(--mj-radius-lg);\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: white;\n}\n\n.item-badge.required {\n    background: var(--mj-status-warning);\n}\n\n.item-badge.type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.item-badge.sequence {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: color-mix(in srgb, var(--mj-brand-primary) 80%, purple);\n}\n\n.item-card-body {\n    color: var(--mj-text-secondary);\n    font-size: var(--mj-text-sm);\n}\n\n.item-description {\n    margin-bottom: 8px;\n}\n\n.item-meta {\n    display: flex;\n    gap: 16px;\n    font-size: var(--mj-text-xs);\n}\n\n.meta-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.meta-code {\n    background: var(--mj-bg-surface-card);\n    padding: 1px 4px;\n    border-radius: var(--mj-radius-sm);\n    font-size: var(--mj-text-xs);\n}\n\n/* Card actions (edit/delete) */\n.item-actions {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.item-card:hover .item-actions {\n    opacity: 1;\n}\n\n.item-card-actions {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 8px;\n}\n\n.item-action-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    border-radius: var(--mj-radius-sm);\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n}\n\n.item-action-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n.item-action-btn.delete:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Entity dropdown in card */\n.entity-dropdown-wrapper {\n    flex: 1;\n    margin-left: 12px;\n}\n\n.entity-dropdown {\n    width: 100%;\n}\n\n/* ========================================\n   Details Grid\n   ======================================== */\n\n.details-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 16px;\n    padding: 16px 20px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.detail-label {\n    font-size: var(--mj-text-xs);\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.detail-value {\n    font-size: var(--mj-text-sm);\n    color: var(--mj-text-primary);\n}\n\n.detail-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: var(--mj-text-sm);\n}\n\n.detail-tag.positive {\n    color: var(--mj-status-success);\n}\n\n.detail-tag.neutral {\n    color: var(--mj-text-disabled);\n}\n\n.detail-hint {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.detail-input-narrow {\n    max-width: 120px;\n    padding: 4px 8px;\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Permissions\n   ======================================== */\n\n.permissions-list {\n    padding: 0 20px;\n}\n\n.permission-card {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md);\n    padding: 14px 16px;\n    margin-bottom: 8px;\n}\n\n.permission-icon {\n    font-size: 1.3em;\n    color: var(--mj-brand-primary);\n}\n\n.permission-info {\n    flex: 1;\n}\n\n.permission-role {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: var(--mj-text-sm);\n}\n\n.permission-type {\n    font-size: var(--mj-text-xs);\n    color: var(--mj-text-disabled);\n}\n\n.permission-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: var(--mj-brand-primary);\n    color: white;\n    padding: 4px 10px;\n    border-radius: var(--mj-radius-md);\n    font-size: var(--mj-text-xs);\n    font-weight: 500;\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n/* ========================================\n   Buttons\n   ======================================== */\n\n.add-item-btn {\n    background: var(--mj-brand-primary);\n    color: white;\n    border: none;\n    padding: 8px 16px;\n    border-radius: var(--mj-radius-md);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 500;\n    font-size: var(--mj-text-sm);\n}\n\n.add-item-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* ========================================\n   Badge (reused across components)\n   ======================================== */\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* ========================================\n   Technical Description Panel\n   ======================================== */\n\n.technical-description-textarea {\n    width: 100%;\n    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n    font-size: 13px;\n}\n\n.technical-description-preview {\n    margin-top: 16px;\n    border-top: 1px solid var(--mj-border-default);\n    padding-top: 12px;\n}\n\n.preview-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.technical-description-view {\n    max-height: 500px;\n    overflow-y: auto;\n    padding: 12px 16px;\n}\n\n/* Dependent Queries */\n.dependents-icon {\n    color: var(--mj-status-warning);\n}\n\n.dependents-description {\n    padding: 0 20px 12px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n}\n\n.dependents-description code {\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 5px;\n    border-radius: 3px;\n    font-size: 12px;\n}\n\n.dependent-card {\n    cursor: pointer;\n    border-left: 3px solid var(--mj-status-warning) !important;\n}\n\n.dependent-card:hover {\n    border-left-color: var(--mj-status-warning-text) !important;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface)) !important;\n}\n\n.dependent-query-icon {\n    color: var(--mj-status-warning) !important;\n}\n\n.item-card-footer {\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n    margin-top: 8px;\n}\n\n.open-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.dependent-card:hover .open-link {\n    color: var(--mj-brand-primary-hover);\n}\n\n/* Category selector row: tree-dropdown + create/edit icon buttons */\n.meta-dropdown-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.meta-dropdown-row .meta-dropdown {\n  flex: 1;\n  min-width: 0;\n}\n"] }]
-    }], null, { sqlEditor: [{
+    }], null, { SqlEditor: [{
             type: ViewChild,
             args: ['sqlEditor']
         }] }); })();