@memberjunction/ng-core-entity-forms 3.3.0 → 4.0.0

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

@@ -7,49 +7,48 @@ import { Subject } from 'rxjs';
 import { DEFAULT_SYSTEM_PLACEHOLDERS, SYSTEM_PLACEHOLDER_CATEGORIES } from '@memberjunction/ai-core-plus';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-notifications";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-dropdowns";
-import * as i6 from "@memberjunction/ng-code-editor";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "@memberjunction/ng-code-editor";
 const _c0 = ["codeEditor"];
 const _forTrack0 = ($index, $item) => $item.ID || $index;
 const _forTrack1 = ($index, $item) => $item.category.name;
 const _forTrack2 = ($index, $item) => $item.name;
-function TemplateEditorComponent_div_0_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " \u2022 ");
     i0.ɵɵelementStart(1, "span", 14);
     i0.ɵɵtext(2, "Inactive");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_1_For_3_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ɵ$index_10_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.deleteTemplateContent(ɵ$index_10_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ɵ$index_9_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.deleteTemplateContent(ɵ$index_9_r2); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_1_For_3_Template_div_click_0_listener() { const ɵ$index_10_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectTemplateContent(ɵ$index_10_r2, false)); });
-    i0.ɵɵelementStart(1, "div", 11)(2, "div", 12);
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template_div_click_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectTemplateContent(ɵ$index_9_r2, false)); });
+    i0.ɵɵelementStart(1, "div", 10)(2, "div", 11);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 13);
+    i0.ɵɵelementStart(4, "div", 12);
     i0.ɵɵtext(5);
-    i0.ɵɵtemplate(6, TemplateEditorComponent_div_0_Conditional_1_For_3_Conditional_6_Template, 3, 0, "span", 14);
+    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template, 3, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, TemplateEditorComponent_div_0_Conditional_1_For_3_Conditional_7_Template, 2, 0, "button", 15);
+    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template, 2, 0, "button", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const content_r5 = ctx.$implicit;
-    const ɵ$index_10_r2 = ctx.$index;
+    const ɵ$index_9_r2 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("border-color", ctx_r2.selectedContentIndex === ɵ$index_10_r2 && !ctx_r2.isAddingNewContent ? "#007bff" : "#ccc")("background", ctx_r2.selectedContentIndex === ɵ$index_10_r2 && !ctx_r2.isAddingNewContent ? "#e3f2fd" : "#fff");
-    i0.ɵɵclassProp("active", ctx_r2.selectedContentIndex === ɵ$index_10_r2 && !ctx_r2.isAddingNewContent);
+    i0.ɵɵstyleProp("border-color", ctx_r2.selectedContentIndex === ɵ$index_9_r2 && !ctx_r2.isAddingNewContent ? "#007bff" : "#ccc")("background", ctx_r2.selectedContentIndex === ɵ$index_9_r2 && !ctx_r2.isAddingNewContent ? "#e3f2fd" : "#fff");
+    i0.ɵɵclassProp("active", ctx_r2.selectedContentIndex === ɵ$index_9_r2 && !ctx_r2.isAddingNewContent);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", content_r5.Type || "Version " + (ɵ$index_10_r2 + 1), " ");
+    i0.ɵɵtextInterpolate1(" ", content_r5.Type || "Version " + (ɵ$index_9_r2 + 1), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" P:", content_r5.Priority, " ");
     i0.ɵɵadvance();
@@ -57,26 +56,27 @@ function TemplateEditorComponent_div_0_Conditional_1_For_3_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.templateContents.length > 1 && ctx_r2.config.allowEdit ? 7 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "i", 18);
-    i0.ɵɵelementStart(2, "span", 19);
+function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(2, "span", 18);
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
-function TemplateEditorComponent_div_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_1_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
-    i0.ɵɵelement(1, "i", 21);
-    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "span", 21);
     i0.ɵɵtext(3, "New");
     i0.ɵɵelementEnd()();
 } }
-function TemplateEditorComponent_div_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 6);
-    i0.ɵɵrepeaterCreate(2, TemplateEditorComponent_div_0_Conditional_1_For_3_Template, 8, 10, "div", 7, _forTrack0);
-    i0.ɵɵtemplate(4, TemplateEditorComponent_div_0_Conditional_1_Conditional_4_Template, 4, 0, "div", 8)(5, TemplateEditorComponent_div_0_Conditional_1_Conditional_5_Template, 4, 0, "div", 9);
+function TemplateEditorComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5);
+    i0.ɵɵrepeaterCreate(2, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template, 8, 10, "div", 6, _forTrack0);
+    i0.ɵɵconditionalCreate(4, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template, 4, 0, "div", 7);
+    i0.ɵɵconditionalCreate(5, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template, 4, 0, "div", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -87,19 +87,19 @@ function TemplateEditorComponent_div_0_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.config.allowEdit && !ctx_r2.isAddingNewContent ? 5 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 46);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_div_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.TypeID, $event) || (ctx_r2.currentTemplateContent.TypeID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function TemplateEditorComponent_div_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_valueChange_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContentTypeChange()); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 45);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.TypeID, $event) || (ctx_r2.currentTemplateContent.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_valueChange_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContentTypeChange()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.TypeID);
     i0.ɵɵproperty("data", ctx_r2.getContentTypeOptionsForContent())("valuePrimitive", true);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -107,18 +107,18 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_8_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-numerictextbox", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_div_0_Conditional_2_Conditional_13_Template_kendo_numerictextbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.Priority, $event) || (ctx_r2.currentTemplateContent.Priority = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template_kendo_numerictextbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.Priority, $event) || (ctx_r2.currentTemplateContent.Priority = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.Priority);
     i0.ɵɵproperty("min", 1)("step", 1)("format", "n0");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -126,12 +126,12 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_14_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.currentTemplateContent.Priority || "-", " ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "input", 48);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_div_0_Conditional_2_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.IsActive, $event) || (ctx_r2.currentTemplateContent.IsActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 34)(1, "input", 47);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.IsActive, $event) || (ctx_r2.currentTemplateContent.IsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 49);
+    i0.ɵɵelementStart(2, "label", 48);
     i0.ɵɵtext(3, " Active ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -139,55 +139,55 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_19_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.IsActive);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 52);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 49);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Active ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
-    i0.ɵɵelement(1, "i", 53);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵtext(2, " Inactive ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵtemplate(1, TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Conditional_1_Template, 3, 0, "span", 50)(2, TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Conditional_2_Template, 3, 0, "span", 51);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template, 3, 0, "span", 49)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template, 3, 0, "span", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.currentTemplateContent.IsActive ? 1 : 2);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " New ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 42);
-    i0.ɵɵelement(1, "i", 54);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2, " Unsaved changes ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 56);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 55);
     i0.ɵɵtext(1, " Running... ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 56);
     i0.ɵɵtext(1, " Run ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRunTemplate()); });
-    i0.ɵɵtemplate(1, TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Conditional_1_Template, 2, 0)(2, TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Conditional_2_Template, 2, 0);
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRunTemplate()); });
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template, 2, 0)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -195,56 +195,56 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isRunningTemplate ? 1 : 2);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 64);
-    i0.ɵɵelement(2, "i", 65);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61)(1, "div", 63);
+    i0.ɵɵelement(2, "i", 64);
     i0.ɵɵtext(3, " Template Syntax Quick Reference ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 66)(5, "div")(6, "div", 67)(7, "strong");
+    i0.ɵɵelementStart(4, "div", 65)(5, "div")(6, "div", 66)(7, "strong");
     i0.ɵɵtext(8, "Parameters:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(9, "br");
-    i0.ɵɵelementStart(10, "code", 68);
+    i0.ɵɵelementStart(10, "code", 67);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "div")(13, "strong");
     i0.ɵɵtext(14, "Template Includes:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(15, "br");
-    i0.ɵɵelementStart(16, "code", 68);
+    i0.ɵɵelementStart(16, "code", 67);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div")(19, "div", 67)(20, "strong");
+    i0.ɵɵelementStart(18, "div")(19, "div", 66)(20, "strong");
     i0.ɵɵtext(21, "Conditionals:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(22, "br");
-    i0.ɵɵelementStart(23, "code", 68);
+    i0.ɵɵelementStart(23, "code", 67);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(25, "div")(26, "strong");
     i0.ɵɵtext(27, "Loops:");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(28, "br");
-    i0.ɵɵelementStart(29, "code", 68);
+    i0.ɵɵelementStart(29, "code", 67);
     i0.ɵɵtext(30);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     i0.ɵɵadvance(11);
-    i0.ɵɵtextInterpolate2("", "{{", " paramName ", "}}", "");
+    i0.ɵɵtextInterpolate2("", "{{", " paramName ", "}}");
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate("{% template \"TemplateName\" %}");
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate2("", "{% if condition %}", " ... ", "{% endif %}", "");
+    i0.ɵɵtextInterpolate2("", "{% if condition %}", " ... ", "{% endif %}");
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate2("", "{% for item in items %}", " ... ", "{% endfor %}", "");
+    i0.ɵɵtextInterpolate2("", "{% for item in items %}", " ... ", "{% endfor %}");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template_button_click_0_listener() { const categoryGroup_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.activePlaceholderCategory = categoryGroup_r14.category.name); });
-    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template_button_click_0_listener() { const categoryGroup_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.activePlaceholderCategory = categoryGroup_r14.category.name); });
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "span", 80);
+    i0.ɵɵelementStart(3, "span", 79);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -259,8 +259,8 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", categoryGroup_r14.placeholders.length, " ");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -268,32 +268,32 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(placeholder_r16.description);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 85)(1, "div", 74)(2, "div")(3, "div", 86)(4, "code", 87);
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 73)(2, "div")(3, "div", 85)(4, "code", 86);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 88);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template_button_click_6_listener() { const placeholder_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r2.copyPlaceholder(placeholder_r16.name)); });
-    i0.ɵɵelement(7, "i", 89);
+    i0.ɵɵelementStart(6, "button", 87);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template_button_click_6_listener() { const placeholder_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r2.copyPlaceholder(placeholder_r16.name)); });
+    i0.ɵɵelement(7, "i", 88);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template, 2, 1, "div", 90);
+    i0.ɵɵconditionalCreate(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template, 2, 1, "div", 89);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const placeholder_r16 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate3("", "{{", " ", placeholder_r16.name, " ", "}}", "");
+    i0.ɵɵtextInterpolate3("", "{{", " ", placeholder_r16.name, " ", "}}");
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(placeholder_r16.description ? 8 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵelement(1, "i", 82);
-    i0.ɵɵelementStart(2, "h5", 83);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80);
+    i0.ɵɵelement(1, "i", 81);
+    i0.ɵɵelementStart(2, "h5", 82);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 84);
-    i0.ɵɵrepeaterCreate(5, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template, 9, 4, "div", 85, _forTrack2);
+    i0.ɵɵelementStart(4, "div", 83);
+    i0.ɵɵrepeaterCreate(5, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template, 9, 4, "div", 84, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const categoryGroup_r17 = i0.ɵɵnextContext().$implicit;
@@ -305,34 +305,34 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(categoryGroup_r17.placeholders);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template, 7, 5);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template, 7, 5);
 } if (rf & 2) {
     const categoryGroup_r17 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵconditional(ctx_r2.activePlaceholderCategory === categoryGroup_r17.category.name ? 0 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64);
-    i0.ɵɵelement(2, "i", 60);
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
+    i0.ɵɵelement(2, "i", 59);
     i0.ɵɵtext(3, " System Placeholders Reference ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 69);
+    i0.ɵɵelementStart(4, "p", 68);
     i0.ɵɵtext(5, " 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. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 70);
-    i0.ɵɵrepeaterCreate(7, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template, 5, 12, "button", 71, _forTrack1);
+    i0.ɵɵelementStart(6, "div", 69);
+    i0.ɵɵrepeaterCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template, 5, 12, "button", 70, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 72);
-    i0.ɵɵrepeaterCreate(10, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template, 1, 1, null, null, _forTrack1);
+    i0.ɵɵelementStart(9, "div", 71);
+    i0.ɵɵrepeaterCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template, 1, 1, null, null, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 73)(13, "div", 74);
-    i0.ɵɵelement(14, "i", 75);
-    i0.ɵɵelementStart(15, "div", 76)(16, "strong");
+    i0.ɵɵelementStart(12, "div", 72)(13, "div", 73);
+    i0.ɵɵelement(14, "i", 74);
+    i0.ɵɵelementStart(15, "div", 75)(16, "strong");
     i0.ɵɵtext(17, "Usage Example:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18, " To use a system placeholder in your template, simply include it in double curly braces. For example: ");
-    i0.ɵɵelementStart(19, "code", 77);
+    i0.ɵɵelementStart(19, "code", 76);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -344,20 +344,21 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_
     i0.ɵɵadvance(10);
     i0.ɵɵtextInterpolate4("\"Today is ", "{{", " _CURRENT_DATE ", "}}", " and the current user is ", "{{", " _USER_NAME ", "}}", "\"");
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "div", 58)(2, "button", 59);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "syntax"); });
-    i0.ɵɵelement(3, "i", 39);
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 57)(2, "button", 58);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "syntax"); });
+    i0.ɵɵelement(3, "i", 38);
     i0.ɵɵtext(4, " Template Syntax ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 59);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "placeholders"); });
-    i0.ɵɵelement(6, "i", 60);
+    i0.ɵɵelementStart(5, "button", 58);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "placeholders"); });
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵtext(7, " System Placeholders ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 61);
-    i0.ɵɵtemplate(9, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_9_Template, 31, 7, "div", 62)(10, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Conditional_10_Template, 21, 4, "div", 63);
+    i0.ɵɵelementStart(8, "div", 60);
+    i0.ɵɵconditionalCreate(9, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template, 31, 7, "div", 61);
+    i0.ɵɵconditionalCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template, 21, 4, "div", 62);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -372,39 +373,40 @@ function TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.activeHelpTab === "placeholders" ? 10 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 23)(2, "div", 24)(3, "div", 25)(4, "label", 26);
-    i0.ɵɵelement(5, "i", 27);
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 22)(2, "div", 23)(3, "div", 24)(4, "label", 25);
+    i0.ɵɵelement(5, "i", 26);
     i0.ɵɵtext(6, " Content Type ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, TemplateEditorComponent_div_0_Conditional_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 28)(8, TemplateEditorComponent_div_0_Conditional_2_Conditional_8_Template, 2, 1, "div", 29);
+    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 27)(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template, 2, 1, "div", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 25)(10, "label", 30);
-    i0.ɵɵelement(11, "i", 31);
+    i0.ɵɵelementStart(9, "div", 24)(10, "label", 29);
+    i0.ɵɵelement(11, "i", 30);
     i0.ɵɵtext(12, " Priority ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(13, TemplateEditorComponent_div_0_Conditional_2_Conditional_13_Template, 1, 4, "kendo-numerictextbox", 32)(14, TemplateEditorComponent_div_0_Conditional_2_Conditional_14_Template, 2, 1, "div", 29);
+    i0.ɵɵconditionalCreate(13, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template, 1, 4, "kendo-numerictextbox", 31)(14, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template, 2, 1, "div", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 25)(16, "label", 33);
-    i0.ɵɵelement(17, "i", 34);
+    i0.ɵɵelementStart(15, "div", 24)(16, "label", 32);
+    i0.ɵɵelement(17, "i", 33);
     i0.ɵɵtext(18, " Status ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(19, TemplateEditorComponent_div_0_Conditional_2_Conditional_19_Template, 4, 1, "div", 35)(20, TemplateEditorComponent_div_0_Conditional_2_Conditional_20_Template, 3, 1, "div", 29);
+    i0.ɵɵconditionalCreate(19, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template, 4, 1, "div", 34)(20, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template, 3, 1, "div", 28);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 36)(22, "div", 37)(23, "label", 38);
-    i0.ɵɵelement(24, "i", 39);
+    i0.ɵɵelementStart(21, "div", 35)(22, "div", 36)(23, "label", 37);
+    i0.ɵɵelement(24, "i", 38);
     i0.ɵɵtext(25, " Template Content ");
-    i0.ɵɵelementStart(26, "span", 40);
-    i0.ɵɵtemplate(27, TemplateEditorComponent_div_0_Conditional_2_Conditional_27_Template, 1, 0)(28, TemplateEditorComponent_div_0_Conditional_2_Conditional_28_Template, 1, 1);
+    i0.ɵɵelementStart(26, "span", 39);
+    i0.ɵɵconditionalCreate(27, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template, 1, 0)(28, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 41);
-    i0.ɵɵtemplate(30, TemplateEditorComponent_div_0_Conditional_2_Conditional_30_Template, 3, 0, "span", 42)(31, TemplateEditorComponent_div_0_Conditional_2_Conditional_31_Template, 3, 2, "button", 43);
+    i0.ɵɵelementStart(29, "div", 40);
+    i0.ɵɵconditionalCreate(30, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template, 3, 0, "span", 41);
+    i0.ɵɵconditionalCreate(31, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template, 3, 2, "button", 42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "mj-code-editor", 44, 0);
-    i0.ɵɵlistener("change", function TemplateEditorComponent_div_0_Conditional_2_Template_mj_code_editor_change_32_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTemplateTextChange($event)); });
+    i0.ɵɵelementStart(32, "mj-code-editor", 43, 0);
+    i0.ɵɵlistener("change", function TemplateEditorComponent_Conditional_0_Conditional_2_Template_mj_code_editor_change_32_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTemplateTextChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(34, TemplateEditorComponent_div_0_Conditional_2_Conditional_34_Template, 11, 14, "div", 45);
+    i0.ɵɵconditionalCreate(34, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template, 11, 14, "div", 44);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -427,33 +429,34 @@ function TemplateEditorComponent_div_0_Conditional_2_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(!ctx_r2.config.compactMode ? 34 : -1);
 } }
-function TemplateEditorComponent_div_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 95);
-    i0.ɵɵlistener("click", function TemplateEditorComponent_div_0_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
-    i0.ɵɵelement(1, "i", 96);
+    i0.ɵɵelementStart(0, "button", 94);
+    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
+    i0.ɵɵelement(1, "i", 95);
     i0.ɵɵtext(2, " Create First Content Version ");
     i0.ɵɵelementEnd();
 } }
-function TemplateEditorComponent_div_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelement(1, "i", 91);
-    i0.ɵɵelementStart(2, "h5", 92);
+function TemplateEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 90);
+    i0.ɵɵelementStart(2, "h5", 91);
     i0.ɵɵtext(3, "No Template Content");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 93);
+    i0.ɵɵelementStart(4, "p", 92);
     i0.ɵɵtext(5, "Create your first template content version to get started.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, TemplateEditorComponent_div_0_Conditional_3_Conditional_6_Template, 3, 0, "button", 94);
+    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template, 3, 0, "button", 93);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r2.config.allowEdit ? 6 : -1);
 } }
-function TemplateEditorComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, TemplateEditorComponent_div_0_Conditional_1_Template, 6, 2, "div", 3)(2, TemplateEditorComponent_div_0_Conditional_2_Template, 35, 14, "div", 4)(3, TemplateEditorComponent_div_0_Conditional_3_Template, 7, 1, "div", 5);
+function TemplateEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_1_Template, 6, 2, "div", 2);
+    i0.ɵɵconditionalCreate(2, TemplateEditorComponent_Conditional_0_Conditional_2_Template, 35, 14, "div", 3)(3, TemplateEditorComponent_Conditional_0_Conditional_3_Template, 7, 1, "div", 4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -885,15 +888,15 @@ export class TemplateEditorComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
-        } }, inputs: { template: "template", config: "config" }, outputs: { contentChange: "contentChange", runTemplate: "runTemplate" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], ["class", "template-editor", "style", "height: 100%; display: flex; flex-direction: column;", 4, "ngIf"], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs", 2, "margin-bottom", "16px", "border-bottom", "2px solid #e0e0e0", "padding-bottom", "8px"], [1, "content-editor-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "background", "#fff", "border", "1px solid #dee2e6", "border-radius", "8px", "overflow", "hidden"], [1, "no-content-state", 2, "flex", "1", "display", "flex", "flex-direction", "column", "align-items", "center", "justify-content", "center", "background", "#f8f9fa", "border", "2px dashed #dee2e6", "border-radius", "8px", "padding", "40px", "text-align", "center"], [1, "content-tabs", 2, "display", "flex", "gap", "6px", "flex-wrap", "wrap"], [1, "content-version-tab", 2, "padding", "8px 12px", "border", "1px solid #ccc", "border-radius", "6px", "cursor", "pointer", "background", "#fff", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "active", "border-color", "background"], [1, "content-version-tab", "active", 2, "padding", "8px 12px", "border", "1px solid #28a745", "border-radius", "6px", "background", "#d4edda", "display", "flex", "align-items", "center", "gap", "6px"], ["onmouseover", "this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';", "onmouseout", "this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';", "title", "Add new template content", 1, "content-version-tab", "add-new", 2, "padding", "8px 12px", "border", "1px dashed #28a745", "border-radius", "6px", "background", "#f8f9fa", "display", "flex", "align-items", "center", "gap", "6px", "cursor", "pointer", "transition", "all 0.2s"], [1, "content-version-tab", 2, "padding", "8px 12px", "border", "1px solid #ccc", "border-radius", "6px", "cursor", "pointer", "background", "#fff", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "click"], [2, "flex", "1"], [2, "font-weight", "600", "font-size", "0.85em", "color", "#495057"], [2, "font-size", "0.7em", "color", "#6c757d"], [2, "color", "#dc3545"], ["type", "button", "onmouseover", "this.style.backgroundColor='#dc3545'; this.style.color='white';", "onmouseout", "this.style.backgroundColor='transparent'; this.style.color='#dc3545';", "title", "Delete this content version", 1, "btn-sm", "delete-btn", 2, "background", "none", "border", "none", "color", "#dc3545", "padding", "4px", "border-radius", "3px", "transition", "all 0.2s", "cursor", "pointer"], ["type", "button", "onmouseover", "this.style.backgroundColor='#dc3545'; this.style.color='white';", "onmouseout", "this.style.backgroundColor='transparent'; this.style.color='#dc3545';", "title", "Delete this content version", 1, "btn-sm", "delete-btn", 2, "background", "none", "border", "none", "color", "#dc3545", "padding", "4px", "border-radius", "3px", "transition", "all 0.2s", "cursor", "pointer", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [2, "font-weight", "600", "color", "#155724", "font-size", "0.85em"], ["onmouseover", "this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';", "onmouseout", "this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';", "title", "Add new template content", 1, "content-version-tab", "add-new", 2, "padding", "8px 12px", "border", "1px dashed #28a745", "border-radius", "6px", "background", "#f8f9fa", "display", "flex", "align-items", "center", "gap", "6px", "cursor", "pointer", "transition", "all 0.2s", 3, "click"], [1, "fa-solid", "fa-plus", 2, "color", "#28a745", "font-size", "0.75em"], [2, "font-weight", "500", "color", "#28a745", "font-size", "0.85em"], [1, "content-metadata-bar", 2, "background", "#f8f9fa", "border-bottom", "1px solid #dee2e6", "padding", "16px 20px"], [2, "display", "grid", "grid-template-columns", "2fr 1fr 1fr auto", "gap", "20px", "align-items", "end"], [1, "form-group", 2, "margin", "0"], ["for", "contentType", 1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "textField", "text", "valueField", "value", 3, "ngModel", "data", "valuePrimitive"], [1, "form-control-plaintext", 2, "font-size", "0.9em", "padding", "4px 0"], ["for", "priority", 1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "min", "step", "format"], [1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check", 2, "margin-top", "8px"], [1, "content-text-editor", 2, "flex", "1", "padding", "20px", "display", "flex", "flex-direction", "column"], [2, "display", "flex", "justify-content", "space-between", "align-items", "center", "margin-bottom", "12px"], ["for", "templateContent", 1, "form-label", 2, "margin", "0", "font-weight", "600", "display", "flex", "align-items", "center", "gap", "8px"], [1, "fa-solid", "fa-code"], [1, "badge", 2, "padding", "4px 8px", "border-radius", "4px", "font-size", "0.75em"], [2, "display", "flex", "align-items", "center", "gap", "12px"], [1, "unsaved-indicator", 2, "color", "#fd7e14", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "4px"], ["type", "button", "onmouseover", "this.style.background='#138496'", "onmouseout", "this.style.background='#17a2b8'", "title", "Test run this template", 1, "btn", "btn-sm", 2, "background", "#17a2b8", "color", "white", "border", "none", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", 3, "disabled"], [2, "flex", "1", "height", "350px", "border", "1px solid #ced4da", "border-radius", "4px", 3, "change", "readonly", "language", "languages"], [1, "template-help-section", 2, "margin-top", "16px"], ["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", 2, "font-size", "0.9em"], [1, "badge", "badge-success", 2, "background", "#28a745", "color", "white", "padding", "3px 8px", "border-radius", "3px", "font-size", "0.75em"], [1, "badge", "badge-secondary", 2, "background", "#6c757d", "color", "white", "padding", "3px 8px", "border-radius", "3px", "font-size", "0.75em"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle", 2, "font-size", "0.5em"], ["type", "button", "onmouseover", "this.style.background='#138496'", "onmouseout", "this.style.background='#17a2b8'", "title", "Test run this template", 1, "btn", "btn-sm", 2, "background", "#17a2b8", "color", "white", "border", "none", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs", 2, "display", "flex", "border-bottom", "2px solid #dee2e6", "margin-bottom", "0"], ["type", "button", 1, "help-tab", 2, "padding", "8px 16px", "border", "none", "background", "none", "cursor", "pointer", "font-size", "0.9em", "font-weight", "600", "color", "#6c757d", "border-bottom", "3px solid transparent", "transition", "all 0.2s", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content", 2, "padding", "16px", "background", "#f8f9fa", "border", "1px solid #dee2e6", "border-top", "none", "border-radius", "0 0 4px 4px"], [1, "syntax-help", 2, "font-size", "0.85em"], [1, "placeholders-help", 2, "font-size", "0.85em"], [2, "font-weight", "600", "margin-bottom", "12px", "color", "#155724"], [1, "fa-solid", "fa-lightbulb"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "16px"], [2, "margin-bottom", "8px"], [2, "background", "#fff", "padding", "4px 6px", "border-radius", "3px", "display", "inline-block", "margin-top", "4px"], [2, "margin-bottom", "16px", "color", "#495057", "line-height", "1.5"], [1, "category-tabs", 2, "display", "flex", "gap", "8px", "margin-bottom", "16px", "flex-wrap", "wrap"], ["type", "button", 1, "category-tab", 2, "padding", "6px 14px", "border", "1px solid #dee2e6", "background", "white", "border-radius", "20px", "cursor", "pointer", "font-size", "0.85em", "font-weight", "500", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "active", "border-color", "background", "color"], [1, "placeholder-content", 2, "background", "white", "border", "1px solid #dee2e6", "border-radius", "8px", "padding", "16px"], [2, "margin-top", "20px", "padding", "12px", "background", "#e3f2fd", "border-radius", "6px", "border", "1px solid #bbdefb"], [2, "display", "flex", "align-items", "flex-start", "gap", "8px"], [1, "fa-solid", "fa-info-circle", 2, "color", "#1976d2", "margin-top", "2px"], [2, "flex", "1", "font-size", "0.85em", "color", "#1565c0", "line-height", "1.5"], [2, "background", "white", "padding", "2px 4px", "border-radius", "3px"], ["type", "button", 1, "category-tab", 2, "padding", "6px 14px", "border", "1px solid #dee2e6", "background", "white", "border-radius", "20px", "cursor", "pointer", "font-size", "0.85em", "font-weight", "500", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "click"], [2, "font-size", "0.9em"], [1, "badge", 2, "background", "rgba(0,0,0,0.1)", "color", "inherit", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.75em", "margin-left", "4px"], [1, "category-header", 2, "display", "flex", "align-items", "center", "gap", "8px", "margin-bottom", "16px"], [2, "font-size", "1.2em"], [2, "margin", "0", "color", "#343a40", "font-weight", "600"], [2, "display", "grid", "gap", "10px"], ["onmouseover", "this.style.borderColor='#007bff'; this.style.background='#f0f8ff'; this.querySelector('.copy-btn').style.opacity='1';", "onmouseout", "this.style.borderColor='#e9ecef'; this.style.background='#f8f9fa'; this.querySelector('.copy-btn').style.opacity='0';", 1, "placeholder-item", 2, "padding", "12px 16px", "background", "#f8f9fa", "border", "1px solid #e9ecef", "border-radius", "6px", "position", "relative", "transition", "all 0.2s", "max-width", "800px"], [2, "display", "inline-flex", "align-items", "center", "gap", "8px"], [2, "color", "#e83e8c", "font-weight", "600", "font-size", "0.95em"], ["type", "button", "onmouseover", "this.style.background='#e7f3ff';", "onmouseout", "this.style.background='none';", "title", "Copy placeholder to clipboard", 1, "copy-btn", 2, "opacity", "0", "transition", "opacity 0.2s", "background", "none", "border", "none", "padding", "4px 8px", "cursor", "pointer", "color", "#007bff", "border-radius", "4px", "display", "inline-flex", "align-items", "center", 3, "click"], [1, "fa-solid", "fa-copy", 2, "font-size", "0.85em"], [2, "color", "#6c757d", "margin-top", "4px", "line-height", "1.4"], [1, "fa-solid", "fa-file-plus", 2, "font-size", "48px", "margin-bottom", "16px", "color", "#6c757d", "opacity", "0.6"], [2, "color", "#495057", "margin-bottom", "8px"], [2, "color", "#6c757d", "margin-bottom", "20px"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, TemplateEditorComponent_div_0_Template, 4, 2, "div", 1);
+        } }, inputs: { template: "template", config: "config" }, outputs: { contentChange: "contentChange", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs", 2, "margin-bottom", "16px", "border-bottom", "2px solid #e0e0e0", "padding-bottom", "8px"], [1, "content-editor-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "background", "#fff", "border", "1px solid #dee2e6", "border-radius", "8px", "overflow", "hidden"], [1, "no-content-state", 2, "flex", "1", "display", "flex", "flex-direction", "column", "align-items", "center", "justify-content", "center", "background", "#f8f9fa", "border", "2px dashed #dee2e6", "border-radius", "8px", "padding", "40px", "text-align", "center"], [1, "content-tabs", 2, "display", "flex", "gap", "6px", "flex-wrap", "wrap"], [1, "content-version-tab", 2, "padding", "8px 12px", "border", "1px solid #ccc", "border-radius", "6px", "cursor", "pointer", "background", "#fff", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "active", "border-color", "background"], [1, "content-version-tab", "active", 2, "padding", "8px 12px", "border", "1px solid #28a745", "border-radius", "6px", "background", "#d4edda", "display", "flex", "align-items", "center", "gap", "6px"], ["onmouseover", "this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';", "onmouseout", "this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';", "title", "Add new template content", 1, "content-version-tab", "add-new", 2, "padding", "8px 12px", "border", "1px dashed #28a745", "border-radius", "6px", "background", "#f8f9fa", "display", "flex", "align-items", "center", "gap", "6px", "cursor", "pointer", "transition", "all 0.2s"], [1, "content-version-tab", 2, "padding", "8px 12px", "border", "1px solid #ccc", "border-radius", "6px", "cursor", "pointer", "background", "#fff", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "click"], [2, "flex", "1"], [2, "font-weight", "600", "font-size", "0.85em", "color", "#495057"], [2, "font-size", "0.7em", "color", "#6c757d"], ["type", "button", "onmouseover", "this.style.backgroundColor='#dc3545'; this.style.color='white';", "onmouseout", "this.style.backgroundColor='transparent'; this.style.color='#dc3545';", "title", "Delete this content version", 1, "btn-sm", "delete-btn", 2, "background", "none", "border", "none", "color", "#dc3545", "padding", "4px", "border-radius", "3px", "transition", "all 0.2s", "cursor", "pointer"], [2, "color", "#dc3545"], ["type", "button", "onmouseover", "this.style.backgroundColor='#dc3545'; this.style.color='white';", "onmouseout", "this.style.backgroundColor='transparent'; this.style.color='#dc3545';", "title", "Delete this content version", 1, "btn-sm", "delete-btn", 2, "background", "none", "border", "none", "color", "#dc3545", "padding", "4px", "border-radius", "3px", "transition", "all 0.2s", "cursor", "pointer", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [2, "font-weight", "600", "color", "#155724", "font-size", "0.85em"], ["onmouseover", "this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';", "onmouseout", "this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';", "title", "Add new template content", 1, "content-version-tab", "add-new", 2, "padding", "8px 12px", "border", "1px dashed #28a745", "border-radius", "6px", "background", "#f8f9fa", "display", "flex", "align-items", "center", "gap", "6px", "cursor", "pointer", "transition", "all 0.2s", 3, "click"], [1, "fa-solid", "fa-plus", 2, "color", "#28a745", "font-size", "0.75em"], [2, "font-weight", "500", "color", "#28a745", "font-size", "0.85em"], [1, "content-metadata-bar", 2, "background", "#f8f9fa", "border-bottom", "1px solid #dee2e6", "padding", "16px 20px"], [2, "display", "grid", "grid-template-columns", "2fr 1fr 1fr auto", "gap", "20px", "align-items", "end"], [1, "form-group", 2, "margin", "0"], ["for", "contentType", 1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "textField", "text", "valueField", "value", 3, "ngModel", "data", "valuePrimitive"], [1, "form-control-plaintext", 2, "font-size", "0.9em", "padding", "4px 0"], ["for", "priority", 1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "min", "step", "format"], [1, "form-label", 2, "margin-bottom", "4px", "font-size", "0.9em", "font-weight", "600"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check", 2, "margin-top", "8px"], [1, "content-text-editor", 2, "flex", "1", "padding", "20px", "display", "flex", "flex-direction", "column"], [2, "display", "flex", "justify-content", "space-between", "align-items", "center", "margin-bottom", "12px"], ["for", "templateContent", 1, "form-label", 2, "margin", "0", "font-weight", "600", "display", "flex", "align-items", "center", "gap", "8px"], [1, "fa-solid", "fa-code"], [1, "badge", 2, "padding", "4px 8px", "border-radius", "4px", "font-size", "0.75em"], [2, "display", "flex", "align-items", "center", "gap", "12px"], [1, "unsaved-indicator", 2, "color", "#fd7e14", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "4px"], ["type", "button", "onmouseover", "this.style.background='#138496'", "onmouseout", "this.style.background='#17a2b8'", "title", "Test run this template", 1, "btn", "btn-sm", 2, "background", "#17a2b8", "color", "white", "border", "none", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", 3, "disabled"], [2, "flex", "1", "height", "350px", "border", "1px solid #ced4da", "border-radius", "4px", 3, "change", "readonly", "language", "languages"], [1, "template-help-section", 2, "margin-top", "16px"], ["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", 2, "font-size", "0.9em"], [1, "badge", "badge-success", 2, "background", "#28a745", "color", "white", "padding", "3px 8px", "border-radius", "3px", "font-size", "0.75em"], [1, "badge", "badge-secondary", 2, "background", "#6c757d", "color", "white", "padding", "3px 8px", "border-radius", "3px", "font-size", "0.75em"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle", 2, "font-size", "0.5em"], ["type", "button", "onmouseover", "this.style.background='#138496'", "onmouseout", "this.style.background='#17a2b8'", "title", "Test run this template", 1, "btn", "btn-sm", 2, "background", "#17a2b8", "color", "white", "border", "none", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs", 2, "display", "flex", "border-bottom", "2px solid #dee2e6", "margin-bottom", "0"], ["type", "button", 1, "help-tab", 2, "padding", "8px 16px", "border", "none", "background", "none", "cursor", "pointer", "font-size", "0.9em", "font-weight", "600", "color", "#6c757d", "border-bottom", "3px solid transparent", "transition", "all 0.2s", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content", 2, "padding", "16px", "background", "#f8f9fa", "border", "1px solid #dee2e6", "border-top", "none", "border-radius", "0 0 4px 4px"], [1, "syntax-help", 2, "font-size", "0.85em"], [1, "placeholders-help", 2, "font-size", "0.85em"], [2, "font-weight", "600", "margin-bottom", "12px", "color", "#155724"], [1, "fa-solid", "fa-lightbulb"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "16px"], [2, "margin-bottom", "8px"], [2, "background", "#fff", "padding", "4px 6px", "border-radius", "3px", "display", "inline-block", "margin-top", "4px"], [2, "margin-bottom", "16px", "color", "#495057", "line-height", "1.5"], [1, "category-tabs", 2, "display", "flex", "gap", "8px", "margin-bottom", "16px", "flex-wrap", "wrap"], ["type", "button", 1, "category-tab", 2, "padding", "6px 14px", "border", "1px solid #dee2e6", "background", "white", "border-radius", "20px", "cursor", "pointer", "font-size", "0.85em", "font-weight", "500", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "active", "border-color", "background", "color"], [1, "placeholder-content", 2, "background", "white", "border", "1px solid #dee2e6", "border-radius", "8px", "padding", "16px"], [2, "margin-top", "20px", "padding", "12px", "background", "#e3f2fd", "border-radius", "6px", "border", "1px solid #bbdefb"], [2, "display", "flex", "align-items", "flex-start", "gap", "8px"], [1, "fa-solid", "fa-info-circle", 2, "color", "#1976d2", "margin-top", "2px"], [2, "flex", "1", "font-size", "0.85em", "color", "#1565c0", "line-height", "1.5"], [2, "background", "white", "padding", "2px 4px", "border-radius", "3px"], ["type", "button", 1, "category-tab", 2, "padding", "6px 14px", "border", "1px solid #dee2e6", "background", "white", "border-radius", "20px", "cursor", "pointer", "font-size", "0.85em", "font-weight", "500", "display", "flex", "align-items", "center", "gap", "6px", "transition", "all 0.2s", "position", "relative", 3, "click"], [2, "font-size", "0.9em"], [1, "badge", 2, "background", "rgba(0,0,0,0.1)", "color", "inherit", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.75em", "margin-left", "4px"], [1, "category-header", 2, "display", "flex", "align-items", "center", "gap", "8px", "margin-bottom", "16px"], [2, "font-size", "1.2em"], [2, "margin", "0", "color", "#343a40", "font-weight", "600"], [2, "display", "grid", "gap", "10px"], ["onmouseover", "this.style.borderColor='#007bff'; this.style.background='#f0f8ff'; this.querySelector('.copy-btn').style.opacity='1';", "onmouseout", "this.style.borderColor='#e9ecef'; this.style.background='#f8f9fa'; this.querySelector('.copy-btn').style.opacity='0';", 1, "placeholder-item", 2, "padding", "12px 16px", "background", "#f8f9fa", "border", "1px solid #e9ecef", "border-radius", "6px", "position", "relative", "transition", "all 0.2s", "max-width", "800px"], [2, "display", "inline-flex", "align-items", "center", "gap", "8px"], [2, "color", "#e83e8c", "font-weight", "600", "font-size", "0.95em"], ["type", "button", "onmouseover", "this.style.background='#e7f3ff';", "onmouseout", "this.style.background='none';", "title", "Copy placeholder to clipboard", 1, "copy-btn", 2, "opacity", "0", "transition", "opacity 0.2s", "background", "none", "border", "none", "padding", "4px 8px", "cursor", "pointer", "color", "#007bff", "border-radius", "4px", "display", "inline-flex", "align-items", "center", 3, "click"], [1, "fa-solid", "fa-copy", 2, "font-size", "0.85em"], [2, "color", "#6c757d", "margin-top", "4px", "line-height", "1.4"], [1, "fa-solid", "fa-file-plus", 2, "font-size", "48px", "margin-bottom", "16px", "color", "#6c757d", "opacity", "0.6"], [2, "color", "#495057", "margin-bottom", "8px"], [2, "color", "#6c757d", "margin-bottom", "20px"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Template, 4, 2, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.template);
-        } }, dependencies: [i2.NgIf, i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.NumericTextBoxComponent, i5.DropDownListComponent, i6.CodeEditorComponent], styles: [".template-editor[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.param-row[_ngcontent-%COMP%]:hover {\n    background-color: #f8f9fa !important;\n}\n\n.content-item[_ngcontent-%COMP%] {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n\n\n.template-editor[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-textarea[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.template-editor[_ngcontent-%COMP%]   kendo-button[_ngcontent-%COMP%] {\n    min-width: auto;\n}"] }); }
+            i0.ɵɵconditional(ctx.template ? 0 : -1);
+        } }, dependencies: [i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.NumericTextBoxComponent, i4.DropDownListComponent, i5.CodeEditorComponent], styles: [".template-editor[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.param-row[_ngcontent-%COMP%]:hover {\n    background-color: #f8f9fa !important;\n}\n\n.content-item[_ngcontent-%COMP%] {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n\n\n.template-editor[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-textarea[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.template-editor[_ngcontent-%COMP%]   kendo-button[_ngcontent-%COMP%] {\n    min-width: auto;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateEditorComponent, [{
         type: Component,
-        args: [{ selector: 'mj-template-editor', template: "<div class=\"template-editor\" *ngIf=\"template\" style=\"height: 100%; display: flex; flex-direction: column;\">\n\n    <!-- Content Versions List/Tabs -->\n    @if (templateContents.length > 0) {\n        <div class=\"content-versions-tabs\" style=\"margin-bottom: 16px; border-bottom: 2px solid #e0e0e0; padding-bottom: 8px;\">\n            <div class=\"content-tabs\" style=\"display: flex; gap: 6px; flex-wrap: wrap;\">\n                \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                         style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 6px; transition: all 0.2s; position: relative;\"\n                         [style.border-color]=\"selectedContentIndex === i && !isAddingNewContent ? '#007bff' : '#ccc'\"\n                         [style.background]=\"selectedContentIndex === i && !isAddingNewContent ? '#e3f2fd' : '#fff'\">\n                        \n                        <div style=\"flex: 1;\">\n                            <div style=\"font-weight: 600; font-size: 0.85em; color: #495057;\">\n                                {{ content.Type || 'Version ' + (i + 1) }}\n                            </div>\n                            <div style=\"font-size: 0.7em; color: #6c757d;\">\n                                P:{{ content.Priority }}\n                                @if (!content.IsActive) {\n                                    \u2022 <span style=\"color: #dc3545;\">Inactive</span>\n                                }\n                            </div>\n                        </div>\n                        \n                        @if (templateContents.length > 1 && config.allowEdit) {\n                            <button type=\"button\" \n                                    (click)=\"deleteTemplateContent(i); $event.stopPropagation()\"\n                                    class=\"btn-sm delete-btn\"\n                                    style=\"background: none; border: none; color: #dc3545; padding: 4px; border-radius: 3px; transition: all 0.2s; cursor: pointer;\"\n                                    onmouseover=\"this.style.backgroundColor='#dc3545'; this.style.color='white';\"\n                                    onmouseout=\"this.style.backgroundColor='transparent'; this.style.color='#dc3545';\"\n                                    title=\"Delete this content version\">\n                                <i class=\"fa-solid fa-trash fa-xs\"></i>\n                            </button>\n                        }\n                    </div>\n                }\n                \n                @if (isAddingNewContent) {\n                    <div class=\"content-version-tab active\" \n                         style=\"padding: 8px 12px; border: 1px solid #28a745; border-radius: 6px; background: #d4edda; display: flex; align-items: center; gap: 6px;\">\n                        <i class=\"fa-solid fa-plus text-success\"></i>\n                        <span style=\"font-weight: 600; color: #155724; font-size: 0.85em;\">New</span>\n                    </div>\n                }\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                         style=\"padding: 8px 12px; border: 1px dashed #28a745; border-radius: 6px; background: #f8f9fa; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s;\"\n                         onmouseover=\"this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';\"\n                         onmouseout=\"this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';\"\n                         title=\"Add new template content\">\n                        <i class=\"fa-solid fa-plus\" style=\"color: #28a745; font-size: 0.75em;\"></i>\n                        <span style=\"font-weight: 500; color: #28a745; font-size: 0.85em;\">New</span>\n                    </div>\n                }\n            </div>\n        </div>\n    }\n\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n        <div class=\"content-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;\">\n            \n            <!-- Content Metadata Bar -->\n            <div class=\"content-metadata-bar\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 16px 20px;\">\n                <div style=\"display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 20px; align-items: end;\">\n                    \n                    <div class=\"form-group\" style=\"margin: 0;\">\n                        <label for=\"contentType\" class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                            <i class=\"fa-solid fa-tag\"></i> Content Type\n                        </label>\n                        @if (config.allowEdit) {\n                            <kendo-dropdownlist [(ngModel)]=\"currentTemplateContent.TypeID\"\n                                               name=\"contentType\"\n                                               [data]=\"getContentTypeOptionsForContent()\"\n                                               textField=\"text\"\n                                               valueField=\"value\"\n                                               [valuePrimitive]=\"true\"\n                                               (valueChange)=\"onContentTypeChange()\">\n                            </kendo-dropdownlist>\n                        } @else {\n                            <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                                {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                            </div>\n                        }\n                    </div>\n                    \n                    <div class=\"form-group\" style=\"margin: 0;\">\n                        <label for=\"priority\" class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                            <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n                        </label>\n                        @if (config.allowEdit) {\n                            <kendo-numerictextbox [(ngModel)]=\"currentTemplateContent.Priority\"\n                                                 name=\"priority\"\n                                                 [min]=\"1\"\n                                                 [step]=\"1\"\n                                                 [format]=\"'n0'\">\n                            </kendo-numerictextbox>\n                        } @else {\n                            <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                                {{ currentTemplateContent.Priority || '-' }}\n                            </div>\n                        }\n                    </div>\n                    \n                    <div class=\"form-group\" style=\"margin: 0;\">\n                        <label class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                            <i class=\"fa-solid fa-toggle-on\"></i> Status\n                        </label>\n                        @if (config.allowEdit) {\n                            <div class=\"form-check\" style=\"margin-top: 8px;\">\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\" style=\"font-size: 0.9em;\">\n                                    Active\n                                </label>\n                            </div>\n                        } @else {\n                            <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                                @if (currentTemplateContent.IsActive) {\n                                    <span class=\"badge badge-success\" style=\"background: #28a745; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.75em;\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"badge badge-secondary\" style=\"background: #6c757d; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.75em;\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            </div>\n                        }\n                    </div>\n\n                </div>\n            </div>\n            \n            <!-- Content Text Editor -->\n            <div class=\"content-text-editor\" style=\"flex: 1; padding: 20px; display: flex; flex-direction: column;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                    <label for=\"templateContent\" class=\"form-label\" style=\"margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px;\">\n                        <i class=\"fa-solid fa-code\"></i> Template Content\n                        <span class=\"badge\" style=\"padding: 4px 8px; border-radius: 4px; font-size: 0.75em;\"\n                              [style.background]=\"!currentTemplateContent.ID ? '#28a745' : '#6c757d'\"\n                              [style.color]=\"'white'\">\n                            @if (!currentTemplateContent.ID) {\n                                New\n                            } @else {\n                                {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                            }\n                        </span>\n                    </label>\n                    \n                    <div style=\"display: flex; align-items: center; gap: 12px;\">\n                        @if (!isAddingNewContent && hasUnsavedChanges) {\n                            <span class=\"unsaved-indicator\" style=\"color: #fd7e14; font-size: 0.85em; display: flex; align-items: center; gap: 4px;\">\n                                <i class=\"fa-solid fa-circle\" style=\"font-size: 0.5em;\"></i>\n                                Unsaved changes\n                            </span>\n                        }\n                        \n                        @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                            <button type=\"button\" \n                                    class=\"btn btn-sm\"\n                                    [disabled]=\"isRunningTemplate\"\n                                    (click)=\"onRunTemplate()\"\n                                    style=\"background: #17a2b8; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.85em; display: flex; align-items: center; gap: 6px; transition: all 0.2s;\"\n                                    onmouseover=\"this.style.background='#138496'\"\n                                    onmouseout=\"this.style.background='#17a2b8'\"\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                \n                <mj-code-editor \n                    #codeEditor\n                    (change)=\"onTemplateTextChange($event)\"\n                    [readonly]=\"!config.allowEdit\"\n                    [language]=\"getEditorLanguage()\"\n                    [languages]=\"supportedLanguages\"\n                    style=\"flex: 1; height: 350px; border: 1px solid #ced4da; border-radius: 4px;\">\n                </mj-code-editor>\n                \n                <!-- Template Help Section with Tabs -->\n                @if (!config.compactMode) {\n                    <div class=\"template-help-section\" style=\"margin-top: 16px;\">\n                        <!-- Tab Navigation -->\n                        <div class=\"help-tabs\" style=\"display: flex; border-bottom: 2px solid #dee2e6; margin-bottom: 0;\">\n                            <button type=\"button\" \n                                    class=\"help-tab\" \n                                    [class.active]=\"activeHelpTab === 'syntax'\"\n                                    (click)=\"activeHelpTab = 'syntax'\"\n                                    style=\"padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 0.9em; font-weight: 600; color: #6c757d; border-bottom: 3px solid transparent; transition: all 0.2s;\"\n                                    [style.color]=\"activeHelpTab === 'syntax' ? '#28a745' : '#6c757d'\"\n                                    [style.border-bottom-color]=\"activeHelpTab === 'syntax' ? '#28a745' : 'transparent'\">\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                                    style=\"padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 0.9em; font-weight: 600; color: #6c757d; border-bottom: 3px solid transparent; transition: all 0.2s;\"\n                                    [style.color]=\"activeHelpTab === 'placeholders' ? '#28a745' : '#6c757d'\"\n                                    [style.border-bottom-color]=\"activeHelpTab === 'placeholders' ? '#28a745' : 'transparent'\">\n                                <i class=\"fa-solid fa-at\"></i> System Placeholders\n                            </button>\n                        </div>\n                        \n                        <!-- Tab Content -->\n                        <div class=\"help-content\" style=\"padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 4px 4px;\">\n                            <!-- Template Syntax Tab -->\n                            @if (activeHelpTab === 'syntax') {\n                                <div class=\"syntax-help\" style=\"font-size: 0.85em;\">\n                                    <div style=\"font-weight: 600; margin-bottom: 12px; color: #155724;\">\n                                        <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                                    </div>\n                                    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\">\n                                        <div>\n                                            <div style=\"margin-bottom: 8px;\">\n                                                <strong>Parameters:</strong><br>\n                                                <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{{'}} paramName {{'}}'}}</code>\n                                            </div>\n                                            <div>\n                                                <strong>Template Includes:</strong><br>\n                                                <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% template \"TemplateName\" %}'}}</code>\n                                            </div>\n                                        </div>\n                                        <div>\n                                            <div style=\"margin-bottom: 8px;\">\n                                                <strong>Conditionals:</strong><br>\n                                                <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                                            </div>\n                                            <div>\n                                                <strong>Loops:</strong><br>\n                                                <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% for item in items %}'}} ... {{'{% endfor %}'}}</code>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            \n                            <!-- System Placeholders Tab -->\n                            @if (activeHelpTab === 'placeholders') {\n                                <div class=\"placeholders-help\" style=\"font-size: 0.85em;\">\n                                    <div style=\"font-weight: 600; margin-bottom: 12px; color: #155724;\">\n                                        <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                                    </div>\n                                    <p style=\"margin-bottom: 16px; color: #495057; line-height: 1.5;\">\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                                    \n                                    <!-- Category Sub-tabs -->\n                                    <div class=\"category-tabs\" style=\"display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;\">\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                                                    style=\"padding: 6px 14px; border: 1px solid #dee2e6; background: white; border-radius: 20px; cursor: pointer; font-size: 0.85em; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: all 0.2s; position: relative;\"\n                                                    [style.border-color]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color : '#dee2e6'\"\n                                                    [style.background]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color + '10' : 'white'\"\n                                                    [style.color]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color : '#6c757d'\">\n                                                <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                                                {{ categoryGroup.category.name }}\n                                                <span class=\"badge\" \n                                                      style=\"background: rgba(0,0,0,0.1); color: inherit; padding: 2px 6px; border-radius: 10px; font-size: 0.75em; margin-left: 4px;\">\n                                                    {{ categoryGroup.placeholders.length }}\n                                                </span>\n                                            </button>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Active Category Content -->\n                                    <div class=\"placeholder-content\" style=\"background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px;\">\n                                        @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                                            @if (activePlaceholderCategory === categoryGroup.category.name) {\n                                                <div class=\"category-header\" style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 16px;\">\n                                                    <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" \n                                                       [style.color]=\"categoryGroup.category.color\" \n                                                       style=\"font-size: 1.2em;\"></i>\n                                                    <h5 style=\"margin: 0; color: #343a40; font-weight: 600;\">{{ categoryGroup.category.name }}</h5>\n                                                </div>\n                                                \n                                                <div style=\"display: grid; gap: 10px;\">\n                                                    @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                                                        <div class=\"placeholder-item\" \n                                                             style=\"padding: 12px 16px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; position: relative; transition: all 0.2s; max-width: 800px;\"\n                                                             onmouseover=\"this.style.borderColor='#007bff'; this.style.background='#f0f8ff'; this.querySelector('.copy-btn').style.opacity='1';\"\n                                                             onmouseout=\"this.style.borderColor='#e9ecef'; this.style.background='#f8f9fa'; this.querySelector('.copy-btn').style.opacity='0';\">\n                                                            <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                                                                <div>\n                                                                    <div style=\"display: inline-flex; align-items: center; gap: 8px;\">\n                                                                        <code style=\"color: #e83e8c; font-weight: 600; font-size: 0.95em;\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                                                        <button type=\"button\"\n                                                                                class=\"copy-btn\"\n                                                                                (click)=\"copyPlaceholder(placeholder.name)\"\n                                                                                style=\"opacity: 0; transition: opacity 0.2s; background: none; border: none; padding: 4px 8px; cursor: pointer; color: #007bff; border-radius: 4px; display: inline-flex; align-items: center;\"\n                                                                                onmouseover=\"this.style.background='#e7f3ff';\"\n                                                                                onmouseout=\"this.style.background='none';\"\n                                                                                title=\"Copy placeholder to clipboard\">\n                                                                            <i class=\"fa-solid fa-copy\" style=\"font-size: 0.85em;\"></i>\n                                                                        </button>\n                                                                    </div>\n                                                                    @if (placeholder.description) {\n                                                                        <div style=\"color: #6c757d; margin-top: 4px; line-height: 1.4;\">{{ placeholder.description }}</div>\n                                                                    }\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    }\n                                                </div>\n                                            }\n                                        }\n                                    </div>\n                                    \n                                    <!-- Usage Example -->\n                                    <div style=\"margin-top: 20px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n                                        <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                                            <i class=\"fa-solid fa-info-circle\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n                                            <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n                                                <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces. \n                                                For example: <code style=\"background: white; padding: 2px 4px; border-radius: 3px;\">\"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\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 8px; padding: 40px; text-align: center;\">\n            <i class=\"fa-solid fa-file-plus\" style=\"font-size: 48px; margin-bottom: 16px; color: #6c757d; opacity: 0.6;\"></i>\n            <h5 style=\"color: #495057; margin-bottom: 8px;\">No Template Content</h5>\n            <p style=\"color: #6c757d; margin-bottom: 20px;\">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>", 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: #f8f9fa !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 rgba(0,0,0,0.1);\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/* Kendo UI overrides for better integration */\n.template-editor kendo-textbox,\n.template-editor kendo-textarea,\n.template-editor kendo-dropdownlist {\n    width: 100%;\n}\n\n.template-editor kendo-button {\n    min-width: auto;\n}"] }]
+        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\" style=\"margin-bottom: 16px; border-bottom: 2px solid #e0e0e0; padding-bottom: 8px;\">\n        <div class=\"content-tabs\" style=\"display: flex; gap: 6px; flex-wrap: wrap;\">\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              style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 6px; transition: all 0.2s; position: relative;\"\n              [style.border-color]=\"selectedContentIndex === i && !isAddingNewContent ? '#007bff' : '#ccc'\"\n              [style.background]=\"selectedContentIndex === i && !isAddingNewContent ? '#e3f2fd' : '#fff'\">\n              <div style=\"flex: 1;\">\n                <div style=\"font-weight: 600; font-size: 0.85em; color: #495057;\">\n                  {{ content.Type || 'Version ' + (i + 1) }}\n                </div>\n                <div style=\"font-size: 0.7em; color: #6c757d;\">\n                  P:{{ content.Priority }}\n                  @if (!content.IsActive) {\n                    \u2022 <span style=\"color: #dc3545;\">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=\"btn-sm delete-btn\"\n                  style=\"background: none; border: none; color: #dc3545; padding: 4px; border-radius: 3px; transition: all 0.2s; cursor: pointer;\"\n                  onmouseover=\"this.style.backgroundColor='#dc3545'; this.style.color='white';\"\n                  onmouseout=\"this.style.backgroundColor='transparent'; this.style.color='#dc3545';\"\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 active\"\n              style=\"padding: 8px 12px; border: 1px solid #28a745; border-radius: 6px; background: #d4edda; display: flex; align-items: center; gap: 6px;\">\n              <i class=\"fa-solid fa-plus text-success\"></i>\n              <span style=\"font-weight: 600; color: #155724; font-size: 0.85em;\">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              style=\"padding: 8px 12px; border: 1px dashed #28a745; border-radius: 6px; background: #f8f9fa; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s;\"\n              onmouseover=\"this.style.backgroundColor='#e8f5e9'; this.style.borderStyle='solid';\"\n              onmouseout=\"this.style.backgroundColor='#f8f9fa'; this.style.borderStyle='dashed';\"\n              title=\"Add new template content\">\n              <i class=\"fa-solid fa-plus\" style=\"color: #28a745; font-size: 0.75em;\"></i>\n              <span style=\"font-weight: 500; color: #28a745; font-size: 0.85em;\">New</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n      <div class=\"content-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;\">\n        <!-- Content Metadata Bar -->\n        <div class=\"content-metadata-bar\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 16px 20px;\">\n          <div style=\"display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 20px; align-items: end;\">\n            <div class=\"form-group\" style=\"margin: 0;\">\n              <label for=\"contentType\" class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                <i class=\"fa-solid fa-tag\"></i> Content Type\n              </label>\n              @if (config.allowEdit) {\n                <kendo-dropdownlist [(ngModel)]=\"currentTemplateContent.TypeID\"\n                  name=\"contentType\"\n                  [data]=\"getContentTypeOptionsForContent()\"\n                  textField=\"text\"\n                  valueField=\"value\"\n                  [valuePrimitive]=\"true\"\n                  (valueChange)=\"onContentTypeChange()\">\n                </kendo-dropdownlist>\n              } @else {\n                <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\" style=\"margin: 0;\">\n              <label for=\"priority\" class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n              </label>\n              @if (config.allowEdit) {\n                <kendo-numerictextbox [(ngModel)]=\"currentTemplateContent.Priority\"\n                  name=\"priority\"\n                  [min]=\"1\"\n                  [step]=\"1\"\n                  [format]=\"'n0'\">\n                </kendo-numerictextbox>\n              } @else {\n                <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                  {{ currentTemplateContent.Priority || '-' }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\" style=\"margin: 0;\">\n              <label class=\"form-label\" style=\"margin-bottom: 4px; font-size: 0.9em; font-weight: 600;\">\n                <i class=\"fa-solid fa-toggle-on\"></i> Status\n              </label>\n              @if (config.allowEdit) {\n                <div class=\"form-check\" style=\"margin-top: 8px;\">\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\" style=\"font-size: 0.9em;\">\n                    Active\n                  </label>\n                </div>\n              } @else {\n                <div class=\"form-control-plaintext\" style=\"font-size: 0.9em; padding: 4px 0;\">\n                  @if (currentTemplateContent.IsActive) {\n                    <span class=\"badge badge-success\" style=\"background: #28a745; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.75em;\">\n                      <i class=\"fa-solid fa-check-circle\"></i> Active\n                    </span>\n                  } @else {\n                    <span class=\"badge badge-secondary\" style=\"background: #6c757d; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.75em;\">\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\" style=\"flex: 1; padding: 20px; display: flex; flex-direction: column;\">\n          <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n            <label for=\"templateContent\" class=\"form-label\" style=\"margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px;\">\n              <i class=\"fa-solid fa-code\"></i> Template Content\n              <span class=\"badge\" style=\"padding: 4px 8px; border-radius: 4px; font-size: 0.75em;\"\n                [style.background]=\"!currentTemplateContent.ID ? '#28a745' : '#6c757d'\"\n                [style.color]=\"'white'\">\n                @if (!currentTemplateContent.ID) {\n                  New\n                } @else {\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                }\n              </span>\n            </label>\n            <div style=\"display: flex; align-items: center; gap: 12px;\">\n              @if (!isAddingNewContent && hasUnsavedChanges) {\n                <span class=\"unsaved-indicator\" style=\"color: #fd7e14; font-size: 0.85em; display: flex; align-items: center; gap: 4px;\">\n                  <i class=\"fa-solid fa-circle\" style=\"font-size: 0.5em;\"></i>\n                  Unsaved changes\n                </span>\n              }\n              @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                <button type=\"button\"\n                  class=\"btn btn-sm\"\n                  [disabled]=\"isRunningTemplate\"\n                  (click)=\"onRunTemplate()\"\n                  style=\"background: #17a2b8; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.85em; display: flex; align-items: center; gap: 6px; transition: all 0.2s;\"\n                  onmouseover=\"this.style.background='#138496'\"\n                  onmouseout=\"this.style.background='#17a2b8'\"\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            style=\"flex: 1; height: 350px; border: 1px solid #ced4da; border-radius: 4px;\">\n          </mj-code-editor>\n          <!-- Template Help Section with Tabs -->\n          @if (!config.compactMode) {\n            <div class=\"template-help-section\" style=\"margin-top: 16px;\">\n              <!-- Tab Navigation -->\n              <div class=\"help-tabs\" style=\"display: flex; border-bottom: 2px solid #dee2e6; margin-bottom: 0;\">\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'syntax'\"\n                  (click)=\"activeHelpTab = 'syntax'\"\n                  style=\"padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 0.9em; font-weight: 600; color: #6c757d; border-bottom: 3px solid transparent; transition: all 0.2s;\"\n                  [style.color]=\"activeHelpTab === 'syntax' ? '#28a745' : '#6c757d'\"\n                  [style.border-bottom-color]=\"activeHelpTab === 'syntax' ? '#28a745' : 'transparent'\">\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                  style=\"padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 0.9em; font-weight: 600; color: #6c757d; border-bottom: 3px solid transparent; transition: all 0.2s;\"\n                  [style.color]=\"activeHelpTab === 'placeholders' ? '#28a745' : '#6c757d'\"\n                  [style.border-bottom-color]=\"activeHelpTab === 'placeholders' ? '#28a745' : 'transparent'\">\n                  <i class=\"fa-solid fa-at\"></i> System Placeholders\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"help-content\" style=\"padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 4px 4px;\">\n                <!-- Template Syntax Tab -->\n                @if (activeHelpTab === 'syntax') {\n                  <div class=\"syntax-help\" style=\"font-size: 0.85em;\">\n                    <div style=\"font-weight: 600; margin-bottom: 12px; color: #155724;\">\n                      <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                    </div>\n                    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\">\n                      <div>\n                        <div style=\"margin-bottom: 8px;\">\n                          <strong>Parameters:</strong><br>\n                          <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{{'}} paramName {{'}}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Template Includes:</strong><br>\n                          <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% template \"TemplateName\" %}'}}</code>\n                        </div>\n                      </div>\n                      <div>\n                        <div style=\"margin-bottom: 8px;\">\n                          <strong>Conditionals:</strong><br>\n                          <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Loops:</strong><br>\n                          <code style=\"background: #fff; padding: 4px 6px; border-radius: 3px; display: inline-block; margin-top: 4px;\">{{'{% 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\" style=\"font-size: 0.85em;\">\n                    <div style=\"font-weight: 600; margin-bottom: 12px; color: #155724;\">\n                      <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                    </div>\n                    <p style=\"margin-bottom: 16px; color: #495057; line-height: 1.5;\">\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\" style=\"display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;\">\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                          style=\"padding: 6px 14px; border: 1px solid #dee2e6; background: white; border-radius: 20px; cursor: pointer; font-size: 0.85em; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: all 0.2s; position: relative;\"\n                          [style.border-color]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color : '#dee2e6'\"\n                          [style.background]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color + '10' : 'white'\"\n                          [style.color]=\"activePlaceholderCategory === categoryGroup.category.name ? categoryGroup.category.color : '#6c757d'\">\n                          <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                          {{ categoryGroup.category.name }}\n                          <span class=\"badge\"\n                            style=\"background: rgba(0,0,0,0.1); color: inherit; padding: 2px 6px; border-radius: 10px; font-size: 0.75em; margin-left: 4px;\">\n                            {{ categoryGroup.placeholders.length }}\n                          </span>\n                        </button>\n                      }\n                    </div>\n                    <!-- Active Category Content -->\n                    <div class=\"placeholder-content\" style=\"background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px;\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        @if (activePlaceholderCategory === categoryGroup.category.name) {\n                          <div class=\"category-header\" style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 16px;\">\n                            <i [class]=\"'fa-solid ' + categoryGroup.category.icon\"\n                              [style.color]=\"categoryGroup.category.color\"\n                            style=\"font-size: 1.2em;\"></i>\n                            <h5 style=\"margin: 0; color: #343a40; font-weight: 600;\">{{ categoryGroup.category.name }}</h5>\n                          </div>\n                          <div style=\"display: grid; gap: 10px;\">\n                            @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                              <div class=\"placeholder-item\"\n                                style=\"padding: 12px 16px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; position: relative; transition: all 0.2s; max-width: 800px;\"\n                                onmouseover=\"this.style.borderColor='#007bff'; this.style.background='#f0f8ff'; this.querySelector('.copy-btn').style.opacity='1';\"\n                                onmouseout=\"this.style.borderColor='#e9ecef'; this.style.background='#f8f9fa'; this.querySelector('.copy-btn').style.opacity='0';\">\n                                <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                                  <div>\n                                    <div style=\"display: inline-flex; align-items: center; gap: 8px;\">\n                                      <code style=\"color: #e83e8c; font-weight: 600; font-size: 0.95em;\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                      <button type=\"button\"\n                                        class=\"copy-btn\"\n                                        (click)=\"copyPlaceholder(placeholder.name)\"\n                                        style=\"opacity: 0; transition: opacity 0.2s; background: none; border: none; padding: 4px 8px; cursor: pointer; color: #007bff; border-radius: 4px; display: inline-flex; align-items: center;\"\n                                        onmouseover=\"this.style.background='#e7f3ff';\"\n                                        onmouseout=\"this.style.background='none';\"\n                                        title=\"Copy placeholder to clipboard\">\n                                        <i class=\"fa-solid fa-copy\" style=\"font-size: 0.85em;\"></i>\n                                      </button>\n                                    </div>\n                                    @if (placeholder.description) {\n                                      <div style=\"color: #6c757d; margin-top: 4px; line-height: 1.4;\">{{ placeholder.description }}</div>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                    <!-- Usage Example -->\n                    <div style=\"margin-top: 20px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n                      <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                        <i class=\"fa-solid fa-info-circle\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n                        <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n                          <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces.\n                          For example: <code style=\"background: white; padding: 2px 4px; border-radius: 3px;\">\"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\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 8px; padding: 40px; text-align: center;\">\n        <i class=\"fa-solid fa-file-plus\" style=\"font-size: 48px; margin-bottom: 16px; color: #6c757d; opacity: 0.6;\"></i>\n        <h5 style=\"color: #495057; margin-bottom: 8px;\">No Template Content</h5>\n        <p style=\"color: #6c757d; margin-bottom: 20px;\">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}", 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: #f8f9fa !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 rgba(0,0,0,0.1);\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/* Kendo UI overrides for better integration */\n.template-editor kendo-textbox,\n.template-editor kendo-textarea,\n.template-editor kendo-dropdownlist {\n    width: 100%;\n}\n\n.template-editor kendo-button {\n    min-width: auto;\n}"] }]
     }], () => [{ type: i1.MJNotificationService }], { template: [{
             type: Input
         }], config: [{
@@ -906,5 +909,5 @@ export class TemplateEditorComponent {
             type: ViewChild,
             args: ['codeEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateEditorComponent, { className: "TemplateEditorComponent", filePath: "src/lib/shared/components/template-editor.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateEditorComponent, { className: "TemplateEditorComponent", filePath: "src/lib/shared/components/template-editor.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=template-editor.component.js.map