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

package/dist/lib/custom/Templates/templates-form.component.js

@@ -295,28 +295,28 @@ function MJTemplateFormComponentExtended_Conditional_0_Template(rf, ctx) { if (r
 let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended extends MJTemplateFormComponent {
     constructor() {
         super(...arguments);
-        this.toolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
-        this.templateContents = [];
-        this.selectedContentIndex = 0;
-        this.isAddingNewContent = false;
-        this.newTemplateContent = null;
-        this.hasUnsavedChanges = false;
-        this.templateInfoExpanded = true;
-        this.templateContentsExpanded = true;
-        this.categoryOptions = [
+        this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
+        this.TemplateContents = [];
+        this.SelectedContentIndex = 0;
+        this.IsAddingNewContent = false;
+        this.NewTemplateContent = null;
+        this.HasUnsavedChanges = false;
+        this.TemplateInfoExpanded = true;
+        this.TemplateContentsExpanded = true;
+        this.CategoryOptions = [
             { text: 'Select Category...', value: '' },
             // TODO: Load from database
         ];
-        this.contentTypeOptions = [];
-        this.supportedLanguages = languages;
-        this.codeEditor = null;
+        this.ContentTypeOptions = [];
+        this.SupportedLanguages = languages;
+        this.CodeEditor = null;
         this.isUpdatingEditorValue = false;
-        this.isRunningTemplate = false;
-        this.templateTestResult = null;
-        this.templateTestError = null;
-        this.showParamDialog = false;
+        this.IsRunningTemplate = false;
+        this.TemplateTestResult = null;
+        this.TemplateTestError = null;
+        this.ShowParamDialog = false;
         // Template editor configuration for shared component
-        this.templateEditorConfig = {
+        this.TemplateEditorConfig = {
             allowEdit: true,
             showRunButton: true,
             compactMode: false
@@ -325,13 +325,145 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         this.activeTimeouts = [];
         this.confirmService = inject(MJConfirmService);
     }
+    /** @deprecated Use {@link ToolbarConfig}. */
+    get toolbarConfig() {
+        return this.ToolbarConfig;
+    }
     /** Custom-layout Template form looks best full-width on first open. */
     getDefaultFormWidthMode() { return 'full-width'; }
+    /** @deprecated Use {@link TemplateContents}. */
+    get templateContents() {
+        return this.TemplateContents;
+    }
+    /** @deprecated Use {@link TemplateContents}. */
+    set templateContents(value) {
+        this.TemplateContents = value;
+    }
+    /** @deprecated Use {@link SelectedContentIndex}. */
+    get selectedContentIndex() {
+        return this.SelectedContentIndex;
+    }
+    /** @deprecated Use {@link SelectedContentIndex}. */
+    set selectedContentIndex(value) {
+        this.SelectedContentIndex = value;
+    }
+    /** @deprecated Use {@link IsAddingNewContent}. */
+    get isAddingNewContent() {
+        return this.IsAddingNewContent;
+    }
+    /** @deprecated Use {@link IsAddingNewContent}. */
+    set isAddingNewContent(value) {
+        this.IsAddingNewContent = value;
+    }
+    /** @deprecated Use {@link NewTemplateContent}. */
+    get newTemplateContent() {
+        return this.NewTemplateContent;
+    }
+    /** @deprecated Use {@link NewTemplateContent}. */
+    set newTemplateContent(value) {
+        this.NewTemplateContent = value;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    get hasUnsavedChanges() {
+        return this.HasUnsavedChanges;
+    }
+    /** @deprecated Use {@link HasUnsavedChanges}. */
+    set hasUnsavedChanges(value) {
+        this.HasUnsavedChanges = value;
+    }
+    /** @deprecated Use {@link TemplateInfoExpanded}. */
+    get templateInfoExpanded() {
+        return this.TemplateInfoExpanded;
+    }
+    /** @deprecated Use {@link TemplateInfoExpanded}. */
+    set templateInfoExpanded(value) {
+        this.TemplateInfoExpanded = value;
+    }
+    /** @deprecated Use {@link TemplateContentsExpanded}. */
+    get templateContentsExpanded() {
+        return this.TemplateContentsExpanded;
+    }
+    /** @deprecated Use {@link TemplateContentsExpanded}. */
+    set templateContentsExpanded(value) {
+        this.TemplateContentsExpanded = value;
+    }
+    /** @deprecated Use {@link CategoryOptions}. */
+    get categoryOptions() {
+        return this.CategoryOptions;
+    }
+    /** @deprecated Use {@link CategoryOptions}. */
+    set categoryOptions(value) {
+        this.CategoryOptions = value;
+    }
+    /** @deprecated Use {@link ContentTypeOptions}. */
+    get contentTypeOptions() {
+        return this.ContentTypeOptions;
+    }
+    /** @deprecated Use {@link ContentTypeOptions}. */
+    set contentTypeOptions(value) {
+        this.ContentTypeOptions = value;
+    }
+    /** @deprecated Use {@link SupportedLanguages}. */
+    get supportedLanguages() {
+        return this.SupportedLanguages;
+    }
+    /** @deprecated Use {@link SupportedLanguages}. */
+    set supportedLanguages(value) {
+        this.SupportedLanguages = value;
+    }
+    /** @deprecated Use {@link CodeEditor}. */
+    get codeEditor() {
+        return this.CodeEditor;
+    }
+    /** @deprecated Use {@link CodeEditor}. */
+    set codeEditor(value) {
+        this.CodeEditor = value;
+    }
+    /** @deprecated Use {@link IsRunningTemplate}. */
+    get isRunningTemplate() {
+        return this.IsRunningTemplate;
+    }
+    /** @deprecated Use {@link IsRunningTemplate}. */
+    set isRunningTemplate(value) {
+        this.IsRunningTemplate = value;
+    }
+    /** @deprecated Use {@link TemplateTestResult}. */
+    get templateTestResult() {
+        return this.TemplateTestResult;
+    }
+    /** @deprecated Use {@link TemplateTestResult}. */
+    set templateTestResult(value) {
+        this.TemplateTestResult = value;
+    }
+    /** @deprecated Use {@link TemplateTestError}. */
+    get templateTestError() {
+        return this.TemplateTestError;
+    }
+    /** @deprecated Use {@link TemplateTestError}. */
+    set templateTestError(value) {
+        this.TemplateTestError = value;
+    }
+    /** @deprecated Use {@link ShowParamDialog}. */
+    get showParamDialog() {
+        return this.ShowParamDialog;
+    }
+    /** @deprecated Use {@link ShowParamDialog}. */
+    set showParamDialog(value) {
+        this.ShowParamDialog = value;
+    }
+    /** @deprecated Use {@link TemplateEditorConfig}. */
+    get templateEditorConfig() {
+        return this.TemplateEditorConfig;
+    }
+    /** @deprecated Use {@link TemplateEditorConfig}. */
+    set templateEditorConfig(value) {
+        this.TemplateEditorConfig = value;
+    }
     async ngOnInit() {
         await super.ngOnInit();
-        await this.loadTemplateContents();
-        await this.loadCategories();
-        this.loadContentTypes();
+        await this.LoadTemplateContents();
+        await this.LoadCategories();
+        this.LoadContentTypes();
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -344,7 +476,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         // Initial sync when view is ready
         this.syncEditorValue();
     }
-    async loadTemplateContents() {
+    async LoadTemplateContents() {
         if (this.record && this.record.ID) {
             try {
                 const rv = RunView.FromMetadataProvider(this.ProviderToUse);
@@ -354,14 +486,14 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                     OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
                     ResultType: 'entity_object'
                 });
-                this.templateContents = results.Results;
+                this.TemplateContents = results.Results;
                 // If we have contents but no selection, select the first one
-                if (this.templateContents.length > 0 && this.selectedContentIndex === 0) {
-                    this.selectedContentIndex = 0;
+                if (this.TemplateContents.length > 0 && this.SelectedContentIndex === 0) {
+                    this.SelectedContentIndex = 0;
                 }
                 // If no template contents exist, create a default one for single-content optimization
-                if (this.templateContents.length === 0) {
-                    await this.createDefaultTemplateContent();
+                if (this.TemplateContents.length === 0) {
+                    await this.CreateDefaultTemplateContent();
                 }
                 // Entity change tracking is handled automatically by BaseEntity
                 // Sync editor value after loading content
@@ -372,25 +504,33 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             }
         }
     }
-    async createDefaultTemplateContent() {
+    /** @deprecated Use {@link LoadTemplateContents}. */
+    async loadTemplateContents() {
+        return this.LoadTemplateContents();
+    }
+    async CreateDefaultTemplateContent() {
         const md = this.ProviderToUse;
         const defaultContent = await md.GetEntityObject('MJ: Template Contents');
         defaultContent.TemplateID = this.record.ID;
         defaultContent.Priority = 1;
         defaultContent.IsActive = true;
         // Set default to first real content type (skip "Select Type..." if it exists)
-        const validContentTypes = this.contentTypeOptions.filter(option => option.value !== '');
+        const validContentTypes = this.ContentTypeOptions.filter(option => option.value !== '');
         if (validContentTypes.length > 0) {
             defaultContent.TypeID = validContentTypes[0].value;
         }
-        this.templateContents = [defaultContent];
-        this.selectedContentIndex = 0;
+        this.TemplateContents = [defaultContent];
+        this.SelectedContentIndex = 0;
         // Sync editor value after creating default content
         this.syncEditorValue();
     }
-    async selectTemplateContent(index, confirmSwitch = true) {
+    /** @deprecated Use {@link CreateDefaultTemplateContent}. */
+    async createDefaultTemplateContent() {
+        return this.CreateDefaultTemplateContent();
+    }
+    async SelectTemplateContent(index, confirmSwitch = true) {
         // If we're adding new content and user clicks on existing content, ask for confirmation
-        if (this.isAddingNewContent && confirmSwitch) {
+        if (this.IsAddingNewContent && confirmSwitch) {
             if (!(await this.confirmService.Confirm({
                 title: 'Discard changes?',
                 message: 'Switch content version and lose your unsaved changes?',
@@ -399,21 +539,25 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                 return;
             }
         }
-        if (index >= 0 && index < this.templateContents.length) {
-            this.selectedContentIndex = index;
-            this.isAddingNewContent = false;
+        if (index >= 0 && index < this.TemplateContents.length) {
+            this.SelectedContentIndex = index;
+            this.IsAddingNewContent = false;
             // Don't clear newTemplateContent to preserve the work in progress
             // Sync editor value when switching content
             this.syncEditorValue();
         }
     }
-    async loadCategories() {
+    /** @deprecated Use {@link SelectTemplateContent}. */
+    async selectTemplateContent(index, confirmSwitch = true) {
+        return this.SelectTemplateContent(index, confirmSwitch);
+    }
+    async LoadCategories() {
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const results = await rv.RunView({
                 EntityName: 'MJ: Template Categories'
             });
-            this.categoryOptions = [
+            this.CategoryOptions = [
                 { text: 'Select Category...', value: '' },
                 ...results.Results.map((cat) => ({
                     text: cat.Name,
@@ -423,14 +567,18 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         }
         catch (error) {
             console.error('Error loading categories:', error);
-            this.categoryOptions = [{ text: 'Select Category...', value: '' }];
+            this.CategoryOptions = [{ text: 'Select Category...', value: '' }];
         }
     }
-    loadContentTypes() {
+    /** @deprecated Use {@link LoadCategories}. */
+    async loadCategories() {
+        return this.LoadCategories();
+    }
+    LoadContentTypes() {
         try {
             // Get content types from TemplateEngine cache
             const contentTypes = TemplateEngineBase.Instance.TemplateContentTypes;
-            this.contentTypeOptions = [
+            this.ContentTypeOptions = [
                 { text: 'Select Type...', value: '' },
                 ...contentTypes.map(ct => ({
                     text: ct.Name,
@@ -441,7 +589,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         catch (error) {
             console.error('Error loading content types:', error);
             // Fallback to basic types
-            this.contentTypeOptions = [
+            this.ContentTypeOptions = [
                 { text: 'Select Type...', value: '' },
                 { text: 'HTML', value: 'HTML' },
                 { text: 'Plain Text', value: 'Text' },
@@ -449,12 +597,16 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             ];
         }
     }
-    async onCategoryChange(value) {
+    /** @deprecated Use {@link LoadContentTypes}. */
+    loadContentTypes() {
+        return this.LoadContentTypes();
+    }
+    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;
@@ -471,7 +623,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                 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
                     });
@@ -488,44 +640,56 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             }
         }
     }
-    async addNewTemplateContent() {
+    /** @deprecated Use {@link OnCategoryChange}. */
+    async onCategoryChange(value) {
+        return this.OnCategoryChange(value);
+    }
+    async AddNewTemplateContent() {
         const md = this.ProviderToUse;
-        this.newTemplateContent = await md.GetEntityObject('MJ: Template Contents');
-        this.newTemplateContent.TemplateID = this.record.ID;
-        this.newTemplateContent.Priority = this.templateContents.length + 1;
-        this.newTemplateContent.IsActive = true;
+        this.NewTemplateContent = await md.GetEntityObject('MJ: Template Contents');
+        this.NewTemplateContent.TemplateID = this.record.ID;
+        this.NewTemplateContent.Priority = this.TemplateContents.length + 1;
+        this.NewTemplateContent.IsActive = true;
         // Set default to first real content type (skip "Select Type..." if it exists)
-        const validContentTypes = this.contentTypeOptions.filter(option => option.value !== '');
+        const validContentTypes = this.ContentTypeOptions.filter(option => option.value !== '');
         if (validContentTypes.length > 0) {
-            this.newTemplateContent.TypeID = validContentTypes[0].value;
+            this.NewTemplateContent.TypeID = validContentTypes[0].value;
         }
-        this.newTemplateContent.TemplateText = '';
+        this.NewTemplateContent.TemplateText = '';
         // Add immediately to the array
-        this.templateContents.push(this.newTemplateContent);
-        this.selectedContentIndex = this.templateContents.length - 1;
-        this.isAddingNewContent = true;
+        this.TemplateContents.push(this.NewTemplateContent);
+        this.SelectedContentIndex = this.TemplateContents.length - 1;
+        this.IsAddingNewContent = true;
         // Sync editor value when adding new content
         this.syncEditorValue();
     }
+    /** @deprecated Use {@link AddNewTemplateContent}. */
+    async addNewTemplateContent() {
+        return this.AddNewTemplateContent();
+    }
+    CancelNewTemplateContent() {
+        this.IsAddingNewContent = false;
+        this.NewTemplateContent = null;
+    }
+    /** @deprecated Use {@link CancelNewTemplateContent}. */
     cancelNewTemplateContent() {
-        this.isAddingNewContent = false;
-        this.newTemplateContent = null;
+        return this.CancelNewTemplateContent();
     }
-    async deleteTemplateContent(index) {
-        if (index >= 0 && index < this.templateContents.length) {
-            const contentToDelete = this.templateContents[index];
+    async DeleteTemplateContent(index) {
+        if (index >= 0 && index < this.TemplateContents.length) {
+            const contentToDelete = this.TemplateContents[index];
             if (contentToDelete.ID) {
                 try {
                     const result = await contentToDelete.Delete();
                     if (result) {
-                        this.templateContents.splice(index, 1);
+                        this.TemplateContents.splice(index, 1);
                         // Adjust selected index if necessary
-                        if (this.selectedContentIndex >= this.templateContents.length) {
-                            this.selectedContentIndex = Math.max(0, this.templateContents.length - 1);
+                        if (this.SelectedContentIndex >= this.TemplateContents.length) {
+                            this.SelectedContentIndex = Math.max(0, this.TemplateContents.length - 1);
                         }
                         // If no contents remain, create a default one
-                        if (this.templateContents.length === 0) {
-                            await this.createDefaultTemplateContent();
+                        if (this.TemplateContents.length === 0) {
+                            await this.CreateDefaultTemplateContent();
                         }
                     }
                     else {
@@ -539,14 +703,14 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             }
             else {
                 // Not saved yet, just remove from array
-                this.templateContents.splice(index, 1);
-                if (this.selectedContentIndex >= this.templateContents.length) {
-                    this.selectedContentIndex = Math.max(0, this.templateContents.length - 1);
+                this.TemplateContents.splice(index, 1);
+                if (this.SelectedContentIndex >= this.TemplateContents.length) {
+                    this.SelectedContentIndex = Math.max(0, this.TemplateContents.length - 1);
                 }
                 // Reset adding new content state if we're deleting the new content
-                if (this.isAddingNewContent && index === this.templateContents.length) {
-                    this.isAddingNewContent = false;
-                    this.newTemplateContent = null;
+                if (this.IsAddingNewContent && index === this.TemplateContents.length) {
+                    this.IsAddingNewContent = false;
+                    this.NewTemplateContent = null;
                 }
             }
         }
@@ -554,43 +718,67 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             console.error('Invalid index for deletion:', index);
         }
     }
-    get currentTemplateContent() {
-        if (this.isAddingNewContent) {
-            return this.newTemplateContent;
+    /** @deprecated Use {@link DeleteTemplateContent}. */
+    async deleteTemplateContent(index) {
+        return this.DeleteTemplateContent(index);
+    }
+    get CurrentTemplateContent() {
+        if (this.IsAddingNewContent) {
+            return this.NewTemplateContent;
         }
-        return this.templateContents[this.selectedContentIndex] || null;
+        return this.TemplateContents[this.SelectedContentIndex] || null;
+    }
+    /** @deprecated Use {@link CurrentTemplateContent}. */
+    get currentTemplateContent() {
+        return this.CurrentTemplateContent;
     }
+    get HasMultipleContents() {
+        return this.TemplateContents.length > 1 || this.IsAddingNewContent;
+    }
+    /** @deprecated Use {@link HasMultipleContents}. */
     get hasMultipleContents() {
-        return this.templateContents.length > 1 || this.isAddingNewContent;
+        return this.HasMultipleContents;
     }
-    onContentTypeChange() {
+    OnContentTypeChange() {
         // Content type changes just modify the current content, no new record creation
         this.updateUnsavedChangesFlag();
     }
-    onContentChange() {
+    /** @deprecated Use {@link OnContentTypeChange}. */
+    onContentTypeChange() {
+        return this.OnContentTypeChange();
+    }
+    OnContentChange() {
         this.updateUnsavedChangesFlag();
     }
+    /** @deprecated Use {@link OnContentChange}. */
+    onContentChange() {
+        return this.OnContentChange();
+    }
     /**
      * Updates the hasUnsavedChanges flag based on entity dirty states
      */
     updateUnsavedChangesFlag() {
-        this.hasUnsavedChanges = this.templateContents.some(content => content.Dirty) ||
-            this.isAddingNewContent ||
+        this.HasUnsavedChanges = this.TemplateContents.some(content => content.Dirty) ||
+            this.IsAddingNewContent ||
             this.record?.Dirty || false;
     }
-    onTemplateTextChange(event) {
+    OnTemplateTextChange(event) {
         if (this.isUpdatingEditorValue) {
             // Ignore change events when we're programmatically updating the editor
             return;
         }
-        if (this.currentTemplateContent) {
+        if (this.CurrentTemplateContent) {
             // Extract value from event - might be event.target.value or just event depending on component
             const value = typeof event === 'string' ? event : (event.target?.value || event);
-            this.currentTemplateContent.TemplateText = value;
+            this.CurrentTemplateContent.TemplateText = value;
             // hasUnsavedChanges is automatically handled by entity's IsDirty flag
             this.updateUnsavedChangesFlag();
         }
     }
+    /** @deprecated Use {@link OnTemplateTextChange}. */
+    onTemplateTextChange(event) {
+        return this.OnTemplateTextChange(event);
+    }
     /**
      * Helper method to track setTimeout calls for cleanup
      */
@@ -614,21 +802,21 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         Promise.resolve().then(() => {
             // Then tracked setTimeout for the next macrotask to ensure DOM is updated
             this.setTrackedTimeout(() => {
-                if (!this.codeEditor) {
+                if (!this.CodeEditor) {
                     return;
                 }
                 this.isUpdatingEditorValue = true;
-                const newValue = this.currentTemplateContent?.TemplateText || '';
+                const newValue = this.CurrentTemplateContent?.TemplateText || '';
                 // Use the setValue method from mj-code-editor component
-                this.codeEditor.setValue(newValue);
+                this.CodeEditor.setValue(newValue);
                 this.isUpdatingEditorValue = false;
             }, 0);
         });
     }
-    async saveTemplateContents() {
+    async SaveTemplateContents() {
         try {
             // Save all template contents that have changes
-            for (const content of this.templateContents) {
+            for (const content of this.TemplateContents) {
                 content.TemplateID = this.record.ID; // Ensure FK is set
                 if (content.Dirty || !content.ID) {
                     const contentResult = await content.Save();
@@ -638,8 +826,8 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                     }
                 }
             }
-            this.isAddingNewContent = false;
-            this.newTemplateContent = null;
+            this.IsAddingNewContent = false;
+            this.NewTemplateContent = null;
             this.updateUnsavedChangesFlag(); // Update based on current entity states
             return true;
         }
@@ -648,12 +836,16 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             return false;
         }
     }
+    /** @deprecated Use {@link SaveTemplateContents}. */
+    async saveTemplateContents() {
+        return this.SaveTemplateContents();
+    }
     async SaveRecord(StopEditModeAfterSave = true) {
         // Check if we need to create a new category first
-        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)) {
             // Check for duplicate category names (case-insensitive, trimmed)
             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) {
                     // Use the existing category instead
                     this.record.CategoryID = existingCategory.value;
@@ -670,7 +862,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                     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
                         });
@@ -698,21 +890,25 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         const templateSaved = await super.SaveRecord(StopEditModeAfterSave);
         if (templateSaved) {
             // Then save all template contents
-            return await this.saveTemplateContents();
+            return await this.SaveTemplateContents();
         }
         return false;
     }
-    getContentTypeDisplayText(typeId) {
+    GetContentTypeDisplayText(typeId) {
         if (!typeId)
             return '-';
-        const option = this.contentTypeOptions.find(opt => opt.value === typeId);
+        const option = this.ContentTypeOptions.find(opt => opt.value === typeId);
         return option ? option.text : typeId;
     }
-    getEditorLanguage() {
-        if (!this.currentTemplateContent?.TypeID) {
+    /** @deprecated Use {@link GetContentTypeDisplayText}. */
+    getContentTypeDisplayText(typeId) {
+        return this.GetContentTypeDisplayText(typeId);
+    }
+    GetEditorLanguage() {
+        if (!this.CurrentTemplateContent?.TypeID) {
             return 'jinja2'; // default to jinja2 for template syntax (compatible with Nunjucks)
         }
-        const contentType = this.currentTemplateContent.TypeID.toLowerCase();
+        const contentType = this.CurrentTemplateContent.TypeID.toLowerCase();
         // Map content types to CodeMirror language modes
         switch (contentType) {
             case 'html':
@@ -737,20 +933,24 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
                 return 'jinja2'; // Default to jinja2 since templates often contain template syntax
         }
     }
+    /** @deprecated Use {@link GetEditorLanguage}. */
+    getEditorLanguage() {
+        return this.GetEditorLanguage();
+    }
     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);
     }
     /**
      * Test run the current template using the parameter dialog
      */
-    async runTemplate() {
-        if (!this.record?.IsSaved || !this.currentTemplateContent) {
+    async RunTemplate() {
+        if (!this.record?.IsSaved || !this.CurrentTemplateContent) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the template before running it.', 'warning');
             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 template changes.', 'error');
@@ -758,37 +958,57 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             }
         }
         // Show the parameter dialog
-        this.showParamDialog = true;
+        this.ShowParamDialog = true;
+    }
+    /** @deprecated Use {@link RunTemplate}. */
+    async runTemplate() {
+        return this.RunTemplate();
     }
     /**
      * Handle parameter dialog close
      */
+    OnParamDialogClose() {
+        this.ShowParamDialog = false;
+    }
+    /** @deprecated Use {@link OnParamDialogClose}. */
     onParamDialogClose() {
-        this.showParamDialog = false;
+        return this.OnParamDialogClose();
     }
-    getContentTypeOptionsForContent() {
+    GetContentTypeOptionsForContent() {
         // Always exclude "Select Type..." option for all content
-        return this.contentTypeOptions.filter(option => option.value !== '');
+        return this.ContentTypeOptions.filter(option => option.value !== '');
+    }
+    /** @deprecated Use {@link GetContentTypeOptionsForContent}. */
+    getContentTypeOptionsForContent() {
+        return this.GetContentTypeOptionsForContent();
     }
     /**
      * Handles template content changes from the shared editor
      */
-    onSharedTemplateContentChange(content) {
-        this.templateContents = content;
+    OnSharedTemplateContentChange(content) {
+        this.TemplateContents = content;
         this.updateUnsavedChangesFlag();
     }
+    /** @deprecated Use {@link OnSharedTemplateContentChange}. */
+    onSharedTemplateContentChange(content) {
+        return this.OnSharedTemplateContentChange(content);
+    }
     /**
      * Handles template run requests from the shared editor
      */
+    OnSharedTemplateRun(template) {
+        this.RunTemplate();
+    }
+    /** @deprecated Use {@link OnSharedTemplateRun}. */
     onSharedTemplateRun(template) {
-        this.runTemplate();
+        return this.OnSharedTemplateRun(template);
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJTemplateFormComponentExtended_BaseFactory; return function MJTemplateFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJTemplateFormComponentExtended_BaseFactory || (ɵMJTemplateFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJTemplateFormComponentExtended)))(__ngFactoryType__ || MJTemplateFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTemplateFormComponentExtended, selectors: [["mj-templates-form"]], viewQuery: function MJTemplateFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CodeEditor = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header-area"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-file-code", "template-icon"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap", "align-items", "center"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [1, "description-text"], [2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-file-lines", "meta-icon"], [1, "meta-label"], [1, "meta-value"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["title", "Run Template", 1, "run-template-btn"], [1, "configuration-sections"], [2, "margin-bottom", "12px", 3, "Expanded"], ["mjAccordionTitle", ""], [2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], [2, "padding", "16px"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [1, "active-badge"], [1, "inactive-badge"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "field-label"], ["name", "categoryId", "TextField", "text", "ValueField", "value", "Placeholder", "Select or enter new category...", 2, "width", "250px", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive", "AllowCustom"], ["name", "isActive", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", "meta-icon"], ["title", "Run Template", 1, "run-template-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MJTemplateFormComponentExtended_Conditional_0_Template, 48, 46);
         } if (rf & 2) {
@@ -802,7 +1022,7 @@ export { MJTemplateFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTemplateFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-templates-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\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        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-header-area\">\n                <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n\n                    <!-- Left: Template Info -->\n                    <div style=\"flex: 1; min-width: 0;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                            <i class=\"fa-solid fa-file-code template-icon\"></i>\n                            @if (EditMode) {\n                                <input type=\"text\" class=\"mj-input\"\n                                       [(ngModel)]=\"record.Name\"\n                                       name=\"templateName\"\n                                       placeholder=\"Enter template name...\"\n                                       style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\" />\n                            } @else {\n                                <h4>{{ record.Name || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span class=\"active-badge\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"inactive-badge\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            }\n                        </div>\n\n                        <!-- Category and Active toggle when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;\">\n                                <div>\n                                    <label class=\"field-label\">Category</label>\n                                    <mj-combobox [(ngModel)]=\"record.CategoryID\"\n                                                   name=\"categoryId\"\n                                                   [Data]=\"categoryOptions\"\n                                                   TextField=\"text\"\n                                                   ValueField=\"value\"\n                                                   [ValuePrimitive]=\"true\"\n                                                   [AllowCustom]=\"true\"\n                                                   (ValueChange)=\"onCategoryChange($any($event))\"\n                                                   Placeholder=\"Select or enter new category...\"\n                                                   style=\"width: 250px;\">\n                                    </mj-combobox>\n                                </div>\n                                <div>\n                                    <label class=\"field-label\">Active</label>\n                                    <mj-switch [(ngModel)]=\"record.IsActive\" name=\"isActive\"></mj-switch>\n                                </div>\n                            </div>\n                        }\n\n                        @if (EditMode) {\n                            <textarea class=\"mj-textarea\"\n                                      [(ngModel)]=\"record.Description\"\n                                      name=\"description\"\n                                      [rows]=\"2\"\n                                      placeholder=\"Enter template description...\"\n                                      style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\"></textarea>\n                        } @else if (record.Description) {\n                            <p class=\"description-text\">{{ record.Description }}</p>\n                        }\n\n                        <!-- Quick Info Row -->\n                        <div style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                            @if (record.Category) {\n                                <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-folder meta-icon\"></i>\n                                    <span class=\"meta-label\">Category:</span>\n                                    <span class=\"meta-value\">{{ record.Category }}</span>\n                                </div>\n                            }\n\n                            <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                <i class=\"fa-solid fa-file-lines meta-icon\"></i>\n                                <span class=\"meta-label\">Contents:</span>\n                                <span class=\"meta-value\">{{ templateContents.length }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Right: Action Buttons -->\n                    <div style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        @if (record.IsSaved) {\n                            <button class=\"run-template-btn\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Configuration Sections with Expansion Panels -->\n            <div class=\"configuration-sections\">\n\n                <!-- Template Editor Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"true\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Template Editor\n                            @if (templateContents.length > 0) {\n                                <span class=\"count-badge\">{{ templateContents.length }}</span>\n                            }\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            [template]=\"record\"\n                            [config]=\"templateEditorConfig\"\n                            (contentChange)=\"onSharedTemplateContentChange($event)\"\n                            (runTemplate)=\"onSharedTemplateRun($event)\"\n                            style=\"height: 100%; display: block;\">\n                        </mj-template-editor>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Details Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"false\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-cogs\"></i>\n                            Details\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 16px;\">\n                        <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                            <!-- Left Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserPrompt\"\n                                    Type=\"textarea\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserID\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\"\n                                    LinkType=\"Record\"\n                                    LinkComponentType=\"Search\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"ActiveAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"DisabledAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Right Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"IsActive\"\n                                    Type=\"checkbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_CreatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_UpdatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"Category\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"User\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Template Parameters Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                                Parameters\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-template-params-grid\n                                [template]=\"record\"\n                                [editMode]=\"EditMode\">\n                            </mj-template-params-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- AI Prompts Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-robot\"></i>\n                                AI Prompts\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Entity Documents Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-file-text\"></i>\n                                Entity Documents\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: Entity Documents')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n            </div>\n        </div>\n        </form>\n</mj-record-form-container>\n\n<!-- Template Parameter Dialog -->\n<mj-template-param-dialog\n    [template]=\"record\"\n    [(isVisible)]=\"showParamDialog\"\n    (onClose)=\"onParamDialogClose()\">\n</mj-template-param-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.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\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.template-header {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n/* Header section */\n.template-header-area {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area .template-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area h4 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area .active-badge {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .inactive-badge {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area .description-text {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area .meta-icon {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-label {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-value {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n/* Run template button */\n.run-template-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Configuration sections */\n.configuration-sections {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n/* Expansion panel titles */\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title i {\n    color: var(--mj-text-muted);\n}\n\n.panel-title .count-badge {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Accordion Panel Styling */\n::ng-deep .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n::ng-deep .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n::ng-deep .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n/* Smooth transitions */\n.template-header,\n.badge {\n    transition: all 0.2s ease;\n}\n"] }]
-    }], null, { codeEditor: [{
+    }], null, { CodeEditor: [{
             type: ViewChild,
             args: ['codeEditor']
         }] }); })();