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

package/dist/lib/shared/components/template-editor.component.js

@@ -1,11 +1,14 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, inject } from '@angular/core';
 import { RunView } from '@memberjunction/core';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { IsDescendantElement } from '@memberjunction/ng-shared-generic';
 import { TemplateEngineBase } from '@memberjunction/templates-base-types';
 import { languages } from '@codemirror/language-data';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { DEFAULT_SYSTEM_PLACEHOLDERS, SYSTEM_PLACEHOLDER_CATEGORIES } from '@memberjunction/ai-core-plus';
-import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { BaseAngularComponent, BaseFormComponentEventCodes, PendingRecordItem } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-notifications";
 import * as i2 from "@memberjunction/ng-ui-components";
@@ -462,62 +465,206 @@ function TemplateEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r2.currentTemplateContent ? 2 : 3);
 } }
 export class TemplateEditorComponent extends BaseAngularComponent {
+    /** @deprecated Use {@link Template}. */
+    set template(value) {
+        this.Template = value;
+    }
+    /** @deprecated Use {@link Template}. */
+    get template() {
+        return this.Template;
+    }
+    /** @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 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 IsRunningTemplate}. */
+    get isRunningTemplate() {
+        return this.IsRunningTemplate;
+    }
+    /** @deprecated Use {@link IsRunningTemplate}. */
+    set isRunningTemplate(value) {
+        this.IsRunningTemplate = value;
+    }
+    /** @deprecated Use {@link ActiveHelpTab}. */
+    get activeHelpTab() {
+        return this.ActiveHelpTab;
+    }
+    /** @deprecated Use {@link ActiveHelpTab}. */
+    set activeHelpTab(value) {
+        this.ActiveHelpTab = value;
+    }
+    /** @deprecated Use {@link ActivePlaceholderCategory}. */
+    get activePlaceholderCategory() {
+        return this.ActivePlaceholderCategory;
+    }
+    /** @deprecated Use {@link ActivePlaceholderCategory}. */
+    set activePlaceholderCategory(value) {
+        this.ActivePlaceholderCategory = value;
+    }
+    /** @deprecated Use {@link PlaceholderCategories}. */
+    get placeholderCategories() {
+        return this.PlaceholderCategories;
+    }
+    /** @deprecated Use {@link PlaceholderCategories}. */
+    set placeholderCategories(value) {
+        this.PlaceholderCategories = value;
+    }
+    /** @deprecated Use {@link CodeEditor}. */
+    get codeEditor() {
+        return this.CodeEditor;
+    }
+    /** @deprecated Use {@link CodeEditor}. */
+    set codeEditor(value) {
+        this.CodeEditor = value;
+    }
     get _metadata() { return this.ProviderToUse; }
     constructor(notificationService, confirmService) {
         super();
         this.notificationService = notificationService;
         this.confirmService = confirmService;
-        this.template = null;
+        this.Template = null;
         this.config = {
             allowEdit: true,
             showRunButton: false,
             compactMode: false
         };
-        this.contentChange = new EventEmitter();
-        this.runTemplate = new EventEmitter();
-        this.templateContents = [];
-        this.selectedContentIndex = 0;
-        this.isAddingNewContent = false;
-        this.newTemplateContent = null;
-        this.hasUnsavedChanges = false;
-        this.contentTypeOptions = [];
-        this.supportedLanguages = languages;
-        this.isRunningTemplate = false;
-        this.activeHelpTab = 'syntax';
-        this.activePlaceholderCategory = '';
+        this.ContentChange = new EventEmitter();
+        /**
+         * @deprecated Use {@link ContentChange}.
+         *
+         * The same emitter under the old binding name, so a template still binding
+         * (contentChange) keeps working. Must stay AFTER ContentChange: class fields
+         * initialise in order, and the other way round this captures undefined.
+         */
+        this.contentChange = this.ContentChange;
+        this.RunTemplate = new EventEmitter();
+        /**
+         * @deprecated Use {@link RunTemplate}.
+         *
+         * The same emitter under the old binding name, so a template still binding
+         * (runTemplate) keeps working. Must stay AFTER RunTemplate: class fields
+         * initialise in order, and the other way round this captures undefined.
+         */
+        this.runTemplate = this.RunTemplate;
+        this.TemplateContents = [];
+        this.SelectedContentIndex = 0;
+        this.IsAddingNewContent = false;
+        this.NewTemplateContent = null;
+        this.HasUnsavedChanges = false;
+        this.ContentTypeOptions = [];
+        this.SupportedLanguages = languages;
+        this.IsRunningTemplate = false;
+        this.ActiveHelpTab = 'syntax';
+        this.ActivePlaceholderCategory = '';
         // System placeholders organized by category
-        this.placeholderCategories = [];
-        this.codeEditor = null;
+        this.PlaceholderCategories = [];
+        this.CodeEditor = null;
         this.isUpdatingEditorValue = false;
         this.destroy$ = new Subject();
         this.activeTimeouts = [];
+        this.elementRef = inject(ElementRef);
     }
     async ngOnInit() {
-        this.loadContentTypes();
+        this.LoadContentTypes();
         this.organizePlaceholdersByCategory();
-        if (this.template) {
-            await this.loadTemplateContents();
+        this.listenForHostFormEvents();
+        if (this.Template) {
+            await this.LoadTemplateContents();
         }
     }
+    /**
+     * A host form that folds this editor's contents into its pending records (see GetPendingChanges)
+     * also reverts them when the user discards the edit: `BaseFormComponent.CancelEdit()` calls
+     * `Revert()` on every pending record and broadcasts REVERT_PENDING_CHANGES. The entities roll back
+     * on their own, but this editor's rows, CodeMirror's text and the dirty flag would not know, so
+     * the screen would keep showing discarded text and the next save would fail on it. Reload from
+     * the saved state when the event comes from a form this editor sits inside.
+     */
+    listenForHostFormEvents() {
+        MJGlobal.Instance.GetEventListener(false).pipe(takeUntil(this.destroy$)).subscribe((e) => {
+            if (e.event !== MJEventType.ComponentEvent || e.eventCode !== BaseFormComponentEventCodes.BASE_CODE) {
+                return;
+            }
+            const formEvent = e.args;
+            if (formEvent.subEventCode !== BaseFormComponentEventCodes.REVERT_PENDING_CHANGES) {
+                return;
+            }
+            if (IsDescendantElement(formEvent.elementRef, this.elementRef)) {
+                void this.RefreshAndDiscardChanges();
+            }
+        });
+    }
     async ngOnChanges(changes) {
         if (changes['template']) {
             // Template input has changed, reload contents
-            if (this.template) {
-                await this.loadTemplateContents();
+            if (this.Template) {
+                await this.LoadTemplateContents();
             }
             else {
                 // Template cleared, reset state
-                this.templateContents = [];
-                this.selectedContentIndex = 0;
-                this.isAddingNewContent = false;
-                this.newTemplateContent = null;
-                this.hasUnsavedChanges = false;
+                this.TemplateContents = [];
+                this.SelectedContentIndex = 0;
+                this.IsAddingNewContent = false;
+                this.NewTemplateContent = null;
+                this.HasUnsavedChanges = false;
             }
         }
     }
     organizePlaceholdersByCategory() {
         // Group placeholders by their category
-        this.placeholderCategories = SYSTEM_PLACEHOLDER_CATEGORIES.map(category => {
+        this.PlaceholderCategories = SYSTEM_PLACEHOLDER_CATEGORIES.map(category => {
             const categoryPlaceholders = DEFAULT_SYSTEM_PLACEHOLDERS.filter(placeholder => placeholder.category === category.name);
             return {
                 category: category,
@@ -528,7 +675,7 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         const categorized = DEFAULT_SYSTEM_PLACEHOLDERS.filter(p => p.category);
         const uncategorized = DEFAULT_SYSTEM_PLACEHOLDERS.filter(p => !p.category);
         if (uncategorized.length > 0) {
-            this.placeholderCategories.push({
+            this.PlaceholderCategories.push({
                 category: {
                     name: 'Other',
                     icon: 'fa-ellipsis-h',
@@ -538,14 +685,14 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             });
         }
         // Set the first category as active
-        if (this.placeholderCategories.length > 0) {
-            this.activePlaceholderCategory = this.placeholderCategories[0].category.name;
+        if (this.PlaceholderCategories.length > 0) {
+            this.ActivePlaceholderCategory = this.PlaceholderCategories[0].category.name;
         }
     }
     /**
      * Copies a placeholder to the clipboard
      */
-    async copyPlaceholder(placeholderName) {
+    async CopyPlaceholder(placeholderName) {
         try {
             await navigator.clipboard.writeText(`{{ ${placeholderName} }}`);
             this.notificationService.CreateSimpleNotification('Placeholder copied to clipboard!', 'success', 2000);
@@ -555,6 +702,10 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             this.notificationService.CreateSimpleNotification('Failed to copy placeholder', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link CopyPlaceholder}. */
+    async copyPlaceholder(placeholderName) {
+        return this.CopyPlaceholder(placeholderName);
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -566,86 +717,102 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         // Initial sync when view is ready
         this.syncEditorValue();
     }
-    async loadTemplateContents() {
-        if (this.template) {
+    async LoadTemplateContents() {
+        if (this.Template) {
             // Reset state first
-            this.templateContents = [];
-            this.selectedContentIndex = 0;
-            this.isAddingNewContent = false;
-            this.newTemplateContent = null;
-            this.hasUnsavedChanges = false;
-            if (this.template.IsSaved && this.template.ID) {
+            this.TemplateContents = [];
+            this.SelectedContentIndex = 0;
+            this.IsAddingNewContent = false;
+            this.NewTemplateContent = null;
+            this.HasUnsavedChanges = false;
+            if (this.Template.IsSaved && this.Template.ID) {
                 // Load existing template contents for saved templates
                 try {
                     const rv = RunView.FromMetadataProvider(this.ProviderToUse);
                     const results = await rv.RunView({
                         EntityName: 'MJ: Template Contents',
-                        ExtraFilter: `TemplateID='${this.template.ID}'`,
+                        ExtraFilter: `TemplateID='${this.Template.ID}'`,
                         OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
                         ResultType: 'entity_object'
                     });
-                    this.templateContents = results.Results;
+                    this.TemplateContents = results.Results;
                 }
                 catch (error) {
                     console.error('Error loading template contents:', error);
                 }
             }
             // If we have contents but no selection, select the first one
-            if (this.templateContents.length > 0) {
-                this.selectedContentIndex = 0;
+            if (this.TemplateContents.length > 0) {
+                this.SelectedContentIndex = 0;
             }
             // If no template contents exist (either new template or saved template with no content), 
             // create a default one for single-content optimization
-            if (this.templateContents.length === 0) {
-                await this.createDefaultTemplateContent();
+            if (this.TemplateContents.length === 0) {
+                await this.CreateDefaultTemplateContent();
             }
             // Sync editor value after loading content
             this.syncEditorValue();
-            this.contentChange.emit(this.templateContents);
+            this.ContentChange.emit(this.TemplateContents);
         }
     }
+    /** @deprecated Use {@link LoadTemplateContents}. */
+    async loadTemplateContents() {
+        return this.LoadTemplateContents();
+    }
     /**
      * Public method to refresh the template editor and discard unsaved changes
      * This should be called when canceling edits to restore the original state
      */
+    async RefreshAndDiscardChanges() {
+        await this.LoadTemplateContents();
+    }
+    /** @deprecated Use {@link RefreshAndDiscardChanges}. */
     async refreshAndDiscardChanges() {
-        await this.loadTemplateContents();
+        return this.RefreshAndDiscardChanges();
     }
-    async createDefaultTemplateContent() {
+    async CreateDefaultTemplateContent() {
         const defaultContent = await this._metadata.GetEntityObject('MJ: Template Contents');
-        defaultContent.TemplateID = this.template.ID;
+        defaultContent.TemplateID = this.Template.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?', detail: 'Your changes to the new content version will be lost.' }))) {
                 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();
         }
     }
-    loadContentTypes() {
+    /** @deprecated Use {@link SelectTemplateContent}. */
+    async selectTemplateContent(index, confirmSwitch = true) {
+        return this.SelectTemplateContent(index, confirmSwitch);
+    }
+    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,
@@ -656,7 +823,7 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         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' },
@@ -664,45 +831,53 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             ];
         }
     }
-    async addNewTemplateContent() {
+    /** @deprecated Use {@link LoadContentTypes}. */
+    loadContentTypes() {
+        return this.LoadContentTypes();
+    }
+    async AddNewTemplateContent() {
         if (!this.config.allowEdit)
             return;
-        this.newTemplateContent = await this._metadata.GetEntityObject('MJ: Template Contents');
-        this.newTemplateContent.TemplateID = this.template.ID;
-        this.newTemplateContent.Priority = this.templateContents.length + 1;
-        this.newTemplateContent.IsActive = true;
+        this.NewTemplateContent = await this._metadata.GetEntityObject('MJ: Template Contents');
+        this.NewTemplateContent.TemplateID = this.Template.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();
     }
-    async deleteTemplateContent(index) {
-        if (!this.config.allowEdit || index < 0 || index >= this.templateContents.length)
+    /** @deprecated Use {@link AddNewTemplateContent}. */
+    async addNewTemplateContent() {
+        return this.AddNewTemplateContent();
+    }
+    async DeleteTemplateContent(index) {
+        if (!this.config.allowEdit || index < 0 || index >= this.TemplateContents.length)
             return;
-        const contentToDelete = this.templateContents[index];
+        const contentToDelete = this.TemplateContents[index];
         // Check if the entity is actually saved, not just if it has an ID
         if (contentToDelete.IsSaved) {
             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();
                     }
-                    this.contentChange.emit(this.templateContents);
+                    this.ContentChange.emit(this.TemplateContents);
                 }
                 else {
                     MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete template content. ${contentToDelete.LatestResult?.Message}`, 'error');
@@ -715,53 +890,77 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         }
         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;
             }
-            this.contentChange.emit(this.templateContents);
+            this.ContentChange.emit(this.TemplateContents);
         }
     }
-    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;
     }
-    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;
             this.updateUnsavedChangesFlag();
         }
     }
+    /** @deprecated Use {@link OnTemplateTextChange}. */
+    onTemplateTextChange(event) {
+        return this.OnTemplateTextChange(event);
+    }
     /**
      * Helper method to track setTimeout calls for cleanup
      */
@@ -785,26 +984,26 @@ export class TemplateEditorComponent extends BaseAngularComponent {
         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() {
         if (!this.config.allowEdit)
             return false;
         try {
             // Ensure FK is set on all contents, then persist the dirty/new ones atomically
-            for (const content of this.templateContents) {
-                content.TemplateID = this.template.ID;
+            for (const content of this.TemplateContents) {
+                content.TemplateID = this.Template.ID;
             }
-            const toSave = this.templateContents.filter(c => c.Dirty || !c.ID);
+            const toSave = this.TemplateContents.filter(c => c.Dirty || !c.ID);
             if (toSave.length > 0) {
                 const tg = await this._metadata.CreateTransactionGroup();
                 for (const content of toSave) {
@@ -817,10 +1016,10 @@ export class TemplateEditorComponent extends BaseAngularComponent {
                     return false;
                 }
             }
-            this.isAddingNewContent = false;
-            this.newTemplateContent = null;
+            this.IsAddingNewContent = false;
+            this.NewTemplateContent = null;
             this.updateUnsavedChangesFlag();
-            this.contentChange.emit(this.templateContents);
+            this.ContentChange.emit(this.TemplateContents);
             return true;
         }
         catch (error) {
@@ -828,17 +1027,62 @@ export class TemplateEditorComponent extends BaseAngularComponent {
             return false;
         }
     }
-    getContentTypeDisplayText(typeId) {
+    /**
+     * The content rows a HOST FORM should persist inside its own save: every content that is new or
+     * dirty, each stamped with the template's ID. Forms that embed this editor (Templates, AI Prompts)
+     * call this from their `PopulatePendingRecords()` override, so the template and its contents
+     * commit in one transaction and a content that fails validation blocks the save visibly instead
+     * of being dropped on the floor. A brand-new content nobody typed into is not a change and is
+     * skipped; a read-only editor contributes nothing.
+     */
+    GetPendingChanges() {
+        if (!this.config.allowEdit || !this.Template) {
+            return [];
+        }
+        const pending = [];
+        for (const content of this.TemplateContents) {
+            // An unsaved entity always reports Dirty; the empty-text guard keeps a default row nobody used out.
+            const untouchedNew = !content.IsSaved && !(content.TemplateText ?? '').trim();
+            if (untouchedNew || !content.Dirty) {
+                continue;
+            }
+            content.TemplateID = this.Template.ID;
+            const item = new PendingRecordItem();
+            item.entityObject = content;
+            item.action = 'save';
+            pending.push(item);
+        }
+        return pending;
+    }
+    /**
+     * The host form has persisted the rows from {@link GetPendingChanges}: clear the local dirty state
+     * and publish the saved set to listeners.
+     */
+    MarkContentsSaved() {
+        this.IsAddingNewContent = false;
+        this.NewTemplateContent = null;
+        this.updateUnsavedChangesFlag();
+        this.ContentChange.emit(this.TemplateContents);
+    }
+    /** @deprecated Use {@link SaveTemplateContents}. */
+    async saveTemplateContents() {
+        return this.SaveTemplateContents();
+    }
+    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':
@@ -863,36 +1107,48 @@ export class TemplateEditorComponent extends BaseAngularComponent {
                 return 'jinja2'; // Default to jinja2 since templates often contain template syntax
         }
     }
+    /** @deprecated Use {@link GetEditorLanguage}. */
+    getEditorLanguage() {
+        return this.GetEditorLanguage();
+    }
     /**
      * Test run the current template using the parameter dialog
      */
-    async onRunTemplate() {
-        if (!this.template?.IsSaved || !this.currentTemplateContent) {
+    async OnRunTemplate() {
+        if (!this.Template?.IsSaved || !this.CurrentTemplateContent) {
             MJNotificationService.Instance.CreateSimpleNotification('Please save the template before running it.', 'warning');
             return;
         }
         // Save any unsaved changes first
-        if (this.hasUnsavedChanges) {
-            const saveResult = await this.saveTemplateContents();
+        if (this.HasUnsavedChanges) {
+            const saveResult = await this.SaveTemplateContents();
             if (!saveResult) {
                 MJNotificationService.Instance.CreateSimpleNotification('Failed to save template changes.', 'error');
                 return;
             }
         }
         // Emit the run template event
-        this.runTemplate.emit(this.template);
+        this.RunTemplate.emit(this.Template);
     }
-    getContentTypeOptionsForContent() {
+    /** @deprecated Use {@link OnRunTemplate}. */
+    async onRunTemplate() {
+        return this.OnRunTemplate();
+    }
+    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();
     }
     static { this.ɵfac = function TemplateEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TemplateEditorComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.MJConfirmService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TemplateEditorComponent, selectors: [["mj-template-editor"]], viewQuery: function TemplateEditorComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
-        } }, inputs: { template: "template", config: "config" }, outputs: { contentChange: "contentChange", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs"], [1, "content-editor-container"], [1, "no-content-state"], [1, "content-tabs"], [1, "content-version-tab", 3, "active"], [1, "content-version-tab", "adding-new"], ["title", "Add new template content", 1, "content-version-tab", "add-new"], [1, "content-version-tab", 3, "click"], [2, "flex", "1"], [1, "tab-label"], [1, "tab-meta"], ["type", "button", "title", "Delete this content version", 1, "delete-btn"], [1, "inactive-label"], ["type", "button", "title", "Delete this content version", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [1, "new-label"], ["title", "Add new template content", 1, "content-version-tab", "add-new", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "content-metadata-bar"], [1, "metadata-grid"], [1, "form-group"], ["for", "contentType", 1, "form-label"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModel", "Data", "ValuePrimitive"], [1, "form-control-plaintext"], ["for", "priority", 1, "form-label"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "Min", "Step", "Format"], [1, "form-label"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check"], [1, "content-text-editor"], [1, "editor-header"], ["for", "templateContent", 1, "editor-label"], [1, "fa-solid", "fa-code"], [1, "content-type-badge"], [1, "editor-actions"], [1, "unsaved-indicator"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "disabled"], [1, "code-editor-wrapper", 3, "change", "readonly", "language", "languages"], [1, "template-help-section"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive"], ["name", "priority", 3, "ngModelChange", "ngModel", "Min", "Step", "Format"], ["type", "checkbox", "id", "isActive", "name", "isActive", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "isActive", 1, "form-check-label"], [1, "badge-success"], [1, "badge-secondary"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs"], ["type", "button", 1, "help-tab", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content"], [1, "syntax-help"], [1, "placeholders-help"], [1, "section-title"], [1, "fa-solid", "fa-lightbulb"], [1, "syntax-grid"], [1, "syntax-item"], [1, "placeholders-description"], [1, "category-tabs"], ["type", "button", 1, "category-tab", 3, "active"], [1, "placeholder-content"], [1, "usage-example"], [1, "usage-example-inner"], [1, "fa-solid", "fa-info-circle"], [1, "usage-example-text"], ["type", "button", 1, "category-tab", 3, "click"], [2, "font-size", "0.9em"], [1, "tab-badge"], [1, "category-header"], [1, "placeholder-grid"], [1, "placeholder-item"], [1, "placeholder-item-inner"], [1, "placeholder-name-row"], [1, "placeholder-code"], ["type", "button", "title", "Copy placeholder to clipboard", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "placeholder-description"], [1, "fa-solid", "fa-file-plus"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CodeEditor = _t.first);
+        } }, inputs: { Template: "Template", template: "template", config: "config" }, outputs: { ContentChange: "ContentChange", contentChange: "contentChange", RunTemplate: "RunTemplate", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs"], [1, "content-editor-container"], [1, "no-content-state"], [1, "content-tabs"], [1, "content-version-tab", 3, "active"], [1, "content-version-tab", "adding-new"], ["title", "Add new template content", 1, "content-version-tab", "add-new"], [1, "content-version-tab", 3, "click"], [2, "flex", "1"], [1, "tab-label"], [1, "tab-meta"], ["type", "button", "title", "Delete this content version", 1, "delete-btn"], [1, "inactive-label"], ["type", "button", "title", "Delete this content version", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [1, "new-label"], ["title", "Add new template content", 1, "content-version-tab", "add-new", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "content-metadata-bar"], [1, "metadata-grid"], [1, "form-group"], ["for", "contentType", 1, "form-label"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModel", "Data", "ValuePrimitive"], [1, "form-control-plaintext"], ["for", "priority", 1, "form-label"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "Min", "Step", "Format"], [1, "form-label"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check"], [1, "content-text-editor"], [1, "editor-header"], ["for", "templateContent", 1, "editor-label"], [1, "fa-solid", "fa-code"], [1, "content-type-badge"], [1, "editor-actions"], [1, "unsaved-indicator"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "disabled"], [1, "code-editor-wrapper", 3, "change", "readonly", "language", "languages"], [1, "template-help-section"], ["name", "contentType", "TextField", "text", "ValueField", "value", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive"], ["name", "priority", 3, "ngModelChange", "ngModel", "Min", "Step", "Format"], ["type", "checkbox", "id", "isActive", "name", "isActive", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "isActive", 1, "form-check-label"], [1, "badge-success"], [1, "badge-secondary"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs"], ["type", "button", 1, "help-tab", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content"], [1, "syntax-help"], [1, "placeholders-help"], [1, "section-title"], [1, "fa-solid", "fa-lightbulb"], [1, "syntax-grid"], [1, "syntax-item"], [1, "placeholders-description"], [1, "category-tabs"], ["type", "button", 1, "category-tab", 3, "active"], [1, "placeholder-content"], [1, "usage-example"], [1, "usage-example-inner"], [1, "fa-solid", "fa-info-circle"], [1, "usage-example-text"], ["type", "button", 1, "category-tab", 3, "click"], [2, "font-size", "0.9em"], [1, "tab-badge"], [1, "category-header"], [1, "placeholder-grid"], [1, "placeholder-item"], [1, "placeholder-item-inner"], [1, "placeholder-name-row"], [1, "placeholder-code"], ["type", "button", "title", "Copy placeholder to clipboard", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "placeholder-description"], [1, "fa-solid", "fa-file-plus"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Template, 4, 2, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.template ? 0 : -1);
@@ -901,17 +1157,23 @@ export class TemplateEditorComponent extends BaseAngularComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateEditorComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-template-editor', template: "@if (template) {\n  <div class=\"template-editor\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Content Versions List/Tabs -->\n    @if (templateContents.length > 0) {\n      <div class=\"content-versions-tabs\">\n        <div class=\"content-tabs\">\n          @for (content of templateContents; track content.ID || $index; let i = $index) {\n            <div class=\"content-version-tab\"\n              [class.active]=\"selectedContentIndex === i && !isAddingNewContent\"\n              (click)=\"selectTemplateContent(i, false)\">\n              <div style=\"flex: 1;\">\n                <div class=\"tab-label\">\n                  {{ content.Type || 'Version ' + (i + 1) }}\n                </div>\n                <div class=\"tab-meta\">\n                  P:{{ content.Priority }}\n                  @if (!content.IsActive) {\n                    \u2022 <span class=\"inactive-label\">Inactive</span>\n                  }\n                </div>\n              </div>\n              @if (templateContents.length > 1 && config.allowEdit) {\n                <button type=\"button\"\n                  (click)=\"deleteTemplateContent(i); $event.stopPropagation()\"\n                  class=\"delete-btn\"\n                  title=\"Delete this content version\">\n                  <i class=\"fa-solid fa-trash fa-xs\"></i>\n                </button>\n              }\n            </div>\n          }\n          @if (isAddingNewContent) {\n            <div class=\"content-version-tab adding-new\">\n              <i class=\"fa-solid fa-plus text-success\"></i>\n              <span class=\"new-label\">New</span>\n            </div>\n          }\n          <!-- Add New Content (Edit Mode Only) -->\n          @if (config.allowEdit && !isAddingNewContent) {\n            <div class=\"content-version-tab add-new\"\n              (click)=\"addNewTemplateContent()\"\n              title=\"Add new template content\">\n              <i class=\"fa-solid fa-plus\"></i>\n              <span>New</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n      <div class=\"content-editor-container\">\n        <!-- Content Metadata Bar -->\n        <div class=\"content-metadata-bar\">\n          <div class=\"metadata-grid\">\n            <div class=\"form-group\">\n              <label for=\"contentType\" class=\"form-label\">\n                <i class=\"fa-solid fa-tag\"></i> Content Type\n              </label>\n              @if (config.allowEdit) {\n                <mj-dropdown [(ngModel)]=\"currentTemplateContent.TypeID\"\n                  name=\"contentType\"\n                  [Data]=\"getContentTypeOptionsForContent()\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  (ValueChange)=\"onContentTypeChange()\">\n                </mj-dropdown>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label for=\"priority\" class=\"form-label\">\n                <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n              </label>\n              @if (config.allowEdit) {\n                <mj-numeric-input [(ngModel)]=\"currentTemplateContent.Priority\"\n                  name=\"priority\"\n                  [Min]=\"1\"\n                  [Step]=\"1\"\n                  [Format]=\"'n0'\">\n                </mj-numeric-input>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ currentTemplateContent.Priority || '-' }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">\n                <i class=\"fa-solid fa-toggle-on\"></i> Status\n              </label>\n              @if (config.allowEdit) {\n                <div class=\"form-check\">\n                  <input type=\"checkbox\"\n                    id=\"isActive\"\n                    class=\"form-check-input\"\n                    [(ngModel)]=\"currentTemplateContent.IsActive\"\n                    name=\"isActive\">\n                  <label class=\"form-check-label\" for=\"isActive\">\n                    Active\n                  </label>\n                </div>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  @if (currentTemplateContent.IsActive) {\n                    <span class=\"badge-success\">\n                      <i class=\"fa-solid fa-check-circle\"></i> Active\n                    </span>\n                  } @else {\n                    <span class=\"badge-secondary\">\n                      <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                    </span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Content Text Editor -->\n        <div class=\"content-text-editor\">\n          <div class=\"editor-header\">\n            <label for=\"templateContent\" class=\"editor-label\">\n              <i class=\"fa-solid fa-code\"></i> Template Content\n              <span class=\"content-type-badge\"\n                [class.new]=\"!currentTemplateContent.ID\"\n                [class.existing]=\"!!currentTemplateContent.ID\">\n                @if (!currentTemplateContent.ID) {\n                  New\n                } @else {\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                }\n              </span>\n            </label>\n            <div class=\"editor-actions\">\n              @if (!isAddingNewContent && hasUnsavedChanges) {\n                <span class=\"unsaved-indicator\">\n                  <i class=\"fa-solid fa-circle\"></i>\n                  Unsaved changes\n                </span>\n              }\n              @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                <button type=\"button\"\n                  class=\"run-btn\"\n                  [disabled]=\"isRunningTemplate\"\n                  (click)=\"onRunTemplate()\"\n                  title=\"Test run this template\">\n                  @if (isRunningTemplate) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    Running...\n                  } @else {\n                    <i class=\"fa-solid fa-play\"></i>\n                    Run\n                  }\n                </button>\n              }\n            </div>\n          </div>\n          <mj-code-editor\n            #codeEditor\n            (change)=\"onTemplateTextChange($event)\"\n            [readonly]=\"!config.allowEdit\"\n            [language]=\"getEditorLanguage()\"\n            [languages]=\"supportedLanguages\"\n            class=\"code-editor-wrapper\">\n          </mj-code-editor>\n          <!-- Template Help Section with Tabs -->\n          @if (!config.compactMode) {\n            <div class=\"template-help-section\">\n              <!-- Tab Navigation -->\n              <div class=\"help-tabs\">\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'syntax'\"\n                  (click)=\"activeHelpTab = 'syntax'\">\n                  <i class=\"fa-solid fa-code\"></i> Template Syntax\n                </button>\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'placeholders'\"\n                  (click)=\"activeHelpTab = 'placeholders'\">\n                  <i class=\"fa-solid fa-at\"></i> System Placeholders\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"help-content\">\n                <!-- Template Syntax Tab -->\n                @if (activeHelpTab === 'syntax') {\n                  <div class=\"syntax-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                    </div>\n                    <div class=\"syntax-grid\">\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Parameters:</strong><br>\n                          <code>{{'{{'}} paramName {{'}}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Template Includes:</strong><br>\n                          <code>{{'{% template \"TemplateName\" %}'}}</code>\n                        </div>\n                      </div>\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Conditionals:</strong><br>\n                          <code>{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Loops:</strong><br>\n                          <code>{{'{% for item in items %}'}} ... {{'{% endfor %}'}}</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- System Placeholders Tab -->\n                @if (activeHelpTab === 'placeholders') {\n                  <div class=\"placeholders-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                    </div>\n                    <p class=\"placeholders-description\">\n                      System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time.\n                    </p>\n                    <!-- Category Sub-tabs -->\n                    <div class=\"category-tabs\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        <button type=\"button\"\n                          class=\"category-tab\"\n                          [class.active]=\"activePlaceholderCategory === categoryGroup.category.name\"\n                          (click)=\"activePlaceholderCategory = categoryGroup.category.name\">\n                          <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                          {{ categoryGroup.category.name }}\n                          <span class=\"tab-badge\">\n                            {{ categoryGroup.placeholders.length }}\n                          </span>\n                        </button>\n                      }\n                    </div>\n                    <!-- Active Category Content -->\n                    <div class=\"placeholder-content\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        @if (activePlaceholderCategory === categoryGroup.category.name) {\n                          <div class=\"category-header\">\n                            <i [class]=\"'fa-solid ' + categoryGroup.category.icon\"\n                              [style.color]=\"categoryGroup.category.color\"></i>\n                            <h5>{{ categoryGroup.category.name }}</h5>\n                          </div>\n                          <div class=\"placeholder-grid\">\n                            @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                              <div class=\"placeholder-item\">\n                                <div class=\"placeholder-item-inner\">\n                                  <div>\n                                    <div class=\"placeholder-name-row\">\n                                      <code class=\"placeholder-code\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                      <button type=\"button\"\n                                        class=\"copy-btn\"\n                                        (click)=\"copyPlaceholder(placeholder.name)\"\n                                        title=\"Copy placeholder to clipboard\">\n                                        <i class=\"fa-solid fa-copy\"></i>\n                                      </button>\n                                    </div>\n                                    @if (placeholder.description) {\n                                      <div class=\"placeholder-description\">{{ placeholder.description }}</div>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                    <!-- Usage Example -->\n                    <div class=\"usage-example\">\n                      <div class=\"usage-example-inner\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <div class=\"usage-example-text\">\n                          <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces.\n                          For example: <code>\"Today is {{'{{'}} _CURRENT_DATE {{'}}'}} and the current user is {{'{{'}} _USER_NAME {{'}}'}}\"</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <!-- No Content State -->\n      <div class=\"no-content-state\">\n        <i class=\"fa-solid fa-file-plus\"></i>\n        <h5>No Template Content</h5>\n        <p>Create your first template content version to get started.</p>\n        @if (config.allowEdit) {\n          <button type=\"button\"\n            (click)=\"addNewTemplateContent()\"\n            class=\"btn btn-primary\">\n            <i class=\"fa-solid fa-plus\"></i> Create First Content Version\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".template-editor {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header h6 {\n    font-size: 0.9em;\n}\n\n.param-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n/* Form control sizing */\n.template-editor .mj-input,\n.template-editor .mj-textarea,\n.template-editor mj-dropdown {\n    width: 100%;\n}\n\n.template-editor [mjButton] {\n    min-width: auto;\n}\n\n/* Content version tabs */\n.content-versions-tabs {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab .tab-label {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab .tab-meta {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab .tab-meta .inactive-label {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab .delete-btn {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab .delete-btn:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n/* New content tab (adding state) */\n.content-version-tab.adding-new {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new .new-label {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Add new content button */\n.content-version-tab.add-new {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new i {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new span {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Content editor container */\n.content-editor-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Content metadata bar */\n.content-metadata-bar {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group {\n    margin: 0;\n}\n\n.form-label {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check {\n    margin-top: 8px;\n}\n\n.form-check-label {\n    font-size: 0.9em;\n}\n\n.badge-success {\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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary {\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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n/* Content text editor area */\n.content-text-editor {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 0.5em;\n}\n\n.run-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Code editor border */\n.code-editor-wrapper {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n/* Help section tabs */\n.template-help-section {\n    margin-top: 16px;\n}\n\n.help-tabs {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n/* Help content area */\n.help-content {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n/* Syntax help */\n.syntax-help {\n    font-size: 0.85em;\n}\n\n.syntax-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item {\n    margin-bottom: 8px;\n}\n\n.syntax-help code {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n/* Placeholders help */\n.placeholders-help {\n    font-size: 0.85em;\n}\n\n.placeholders-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n/* Category tabs */\n.category-tabs {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab .tab-badge {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n/* Placeholder content area */\n.placeholder-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header i {\n    font-size: 1.2em;\n}\n\n.category-header h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid {\n    display: grid;\n    gap: 10px;\n}\n\n/* Placeholder item */\n.placeholder-item {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item:hover .copy-btn {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn i {\n    font-size: 0.85em;\n}\n\n.placeholder-description {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Usage example box */\n.usage-example {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example i {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example code {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n/* No content state */\n.no-content-state {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state h5 {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state p {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}\n"] }]
-    }], () => [{ type: i1.MJNotificationService }, { type: i2.MJConfirmService }], { template: [{
+    }], () => [{ type: i1.MJNotificationService }, { type: i2.MJConfirmService }], { Template: [{
+            type: Input
+        }], template: [{
             type: Input
         }], config: [{
             type: Input
+        }], ContentChange: [{
+            type: Output
         }], contentChange: [{
             type: Output
+        }], RunTemplate: [{
+            type: Output
         }], runTemplate: [{
             type: Output
-        }], codeEditor: [{
+        }], CodeEditor: [{
             type: ViewChild,
             args: ['codeEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateEditorComponent, { className: "TemplateEditorComponent", filePath: "src/lib/shared/components/template-editor.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateEditorComponent, { className: "TemplateEditorComponent", filePath: "src/lib/shared/components/template-editor.component.ts", lineNumber: 29 }); })();
 //# sourceMappingURL=template-editor.component.js.map