npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.21.0 → 5.23.0 - Mend

@memberjunction/ng-core-entity-forms 5.21.0 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

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

@@ -15,18 +15,16 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { languages } from '@codemirror/language-data';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-layout";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-dropdowns";
-import * as i5 from "@memberjunction/ng-base-forms";
-import * as i6 from "./template-param-dialog.component";
-import * as i7 from "./template-params-grid.component";
-import * as i8 from "../../shared/components/template-editor.component";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-base-forms";
+import * as i4 from "./template-param-dialog.component";
+import * as i5 from "./template-params-grid.component";
+import * as i6 from "../../shared/components/template-editor.component";
 const _c0 = ["codeEditor"];
 function MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 38);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "input", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -61,28 +59,28 @@ function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template(r
     i0.ɵɵelementStart(0, "div", 11)(1, "div")(2, "label", 43);
     i0.ɵɵtext(3, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-combobox", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_kendo_combobox_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_kendo_combobox_valueChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCategoryChange($event)); });
+    i0.ɵɵelementStart(4, "mj-combobox", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_mj_combobox_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ValueChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_mj_combobox_ValueChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCategoryChange($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div")(6, "label", 43);
     i0.ɵɵtext(7, "Active");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "kendo-switch", 45);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_kendo_switch_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.IsActive, $event) || (ctx_r2.record.IsActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "mj-switch", 45);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template_mj_switch_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.IsActive, $event) || (ctx_r2.record.IsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.CategoryID);
-    i0.ɵɵproperty("data", ctx_r2.categoryOptions)("valuePrimitive", true)("allowCustom", true);
+    i0.ɵɵproperty("Data", ctx_r2.categoryOptions)("ValuePrimitive", true)("AllowCustom", true);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.IsActive);
 } }
 function MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textarea", 46);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "textarea", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -127,7 +125,7 @@ function MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Conditiona
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.templateContents.length, " ");
+    i0.ɵɵtextInterpolate(ctx_r2.templateContents.length);
 } }
 function MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 50);
@@ -153,14 +151,14 @@ function MJTemplateFormComponentExtended_Conditional_1_Conditional_44_ng_templat
     i0.ɵɵelementEnd();
 } }
 function MJTemplateFormComponentExtended_Conditional_1_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
     i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_44_ng_template_1_Template, 3, 0, "ng-template", 23);
     i0.ɵɵelementStart(2, "div", 54);
     i0.ɵɵelement(3, "mj-template-params-grid", 55);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵproperty("Expanded", false);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("template", ctx_r2.record)("editMode", ctx_r2.EditMode);
 } }
@@ -171,14 +169,14 @@ function MJTemplateFormComponentExtended_Conditional_1_Conditional_45_ng_templat
     i0.ɵɵelementEnd();
 } }
 function MJTemplateFormComponentExtended_Conditional_1_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
     i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_45_ng_template_1_Template, 3, 0, "ng-template", 23);
     i0.ɵɵelementStart(2, "div", 54);
     i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵproperty("Expanded", false);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("MJ: AI Prompts", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("MJ: AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
 } }
@@ -189,14 +187,14 @@ function MJTemplateFormComponentExtended_Conditional_1_Conditional_46_ng_templat
     i0.ɵɵelementEnd();
 } }
 function MJTemplateFormComponentExtended_Conditional_1_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
     i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_46_ng_template_1_Template, 3, 0, "ng-template", 23);
     i0.ɵɵelementStart(2, "div", 54);
     i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵproperty("Expanded", false);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("MJ: Entity Documents", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("MJ: Entity Documents"))("AllowLoad", true)("ShowToolbar", false);
 } }
@@ -206,10 +204,10 @@ function MJTemplateFormComponentExtended_Conditional_1_Template(rf, ctx) { if (r
     i0.ɵɵelement(2, "mj-form-toolbar", 3);
     i0.ɵɵelementStart(3, "div", 4)(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8);
     i0.ɵɵelement(8, "i", 9);
-    i0.ɵɵconditionalCreate(9, MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 10)(10, MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Template, 4, 2);
+    i0.ɵɵconditionalCreate(9, MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template, 1, 1, "input", 10)(10, MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Template, 4, 2);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(11, MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template, 9, 5, "div", 11);
-    i0.ɵɵconditionalCreate(12, MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template, 1, 2, "kendo-textarea", 12)(13, MJTemplateFormComponentExtended_Conditional_1_Conditional_13_Template, 2, 1, "p", 13);
+    i0.ɵɵconditionalCreate(12, MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template, 1, 2, "textarea", 12)(13, MJTemplateFormComponentExtended_Conditional_1_Conditional_13_Template, 2, 1, "p", 13);
     i0.ɵɵelementStart(14, "div", 14);
     i0.ɵɵconditionalCreate(15, MJTemplateFormComponentExtended_Conditional_1_Conditional_15_Template, 6, 1, "div", 15);
     i0.ɵɵelementStart(16, "div", 15);
@@ -223,12 +221,12 @@ function MJTemplateFormComponentExtended_Conditional_1_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(22, "div", 19);
     i0.ɵɵconditionalCreate(23, MJTemplateFormComponentExtended_Conditional_1_Conditional_23_Template, 3, 0, "button", 20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 21)(25, "kendo-expansionpanel", 22);
+    i0.ɵɵelementStart(24, "div", 21)(25, "mj-accordion-panel", 22);
     i0.ɵɵtemplate(26, MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Template, 4, 1, "ng-template", 23);
     i0.ɵɵelementStart(27, "div", 24)(28, "mj-template-editor", 25);
     i0.ɵɵlistener("contentChange", function MJTemplateFormComponentExtended_Conditional_1_Template_mj_template_editor_contentChange_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateContentChange($event)); })("runTemplate", function MJTemplateFormComponentExtended_Conditional_1_Template_mj_template_editor_runTemplate_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateRun($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(29, "kendo-expansionpanel", 22);
+    i0.ɵɵelementStart(29, "mj-accordion-panel", 22);
     i0.ɵɵtemplate(30, MJTemplateFormComponentExtended_Conditional_1_ng_template_30_Template, 3, 0, "ng-template", 23);
     i0.ɵɵelementStart(31, "div", 26)(32, "div", 27)(33, "div");
     i0.ɵɵelement(34, "mj-form-field", 28)(35, "mj-form-field", 29)(36, "mj-form-field", 30)(37, "mj-form-field", 31);
@@ -236,9 +234,9 @@ function MJTemplateFormComponentExtended_Conditional_1_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(38, "div");
     i0.ɵɵelement(39, "mj-form-field", 32)(40, "mj-form-field", 33)(41, "mj-form-field", 34)(42, "mj-form-field", 35)(43, "mj-form-field", 36);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(44, MJTemplateFormComponentExtended_Conditional_1_Conditional_44_Template, 4, 3, "kendo-expansionpanel", 22);
-    i0.ɵɵconditionalCreate(45, MJTemplateFormComponentExtended_Conditional_1_Conditional_45_Template, 4, 5, "kendo-expansionpanel", 22);
-    i0.ɵɵconditionalCreate(46, MJTemplateFormComponentExtended_Conditional_1_Conditional_46_Template, 4, 5, "kendo-expansionpanel", 22);
+    i0.ɵɵconditionalCreate(44, MJTemplateFormComponentExtended_Conditional_1_Conditional_44_Template, 4, 3, "mj-accordion-panel", 22);
+    i0.ɵɵconditionalCreate(45, MJTemplateFormComponentExtended_Conditional_1_Conditional_45_Template, 4, 5, "mj-accordion-panel", 22);
+    i0.ɵɵconditionalCreate(46, MJTemplateFormComponentExtended_Conditional_1_Conditional_46_Template, 4, 5, "mj-accordion-panel", 22);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(47, "mj-template-param-dialog", 37);
     i0.ɵɵtwoWayListener("isVisibleChange", function MJTemplateFormComponentExtended_Conditional_1_Template_mj_template_param_dialog_isVisibleChange_47_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.showParamDialog, $event) || (ctx_r2.showParamDialog = $event); return i0.ɵɵresetView($event); });
@@ -261,11 +259,11 @@ function MJTemplateFormComponentExtended_Conditional_1_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.record.IsSaved ? 23 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("template", ctx_r2.record)("config", ctx_r2.templateEditorConfig);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵproperty("Expanded", false);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("Record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
@@ -783,14 +781,14 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header-area"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-file-code", "template-icon"], ["name", "templateName", "placeholder", "Enter template name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap", "align-items", "center"], ["name", "description", "placeholder", "Enter template description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [1, "description-text"], [2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-file-lines", "meta-icon"], [1, "meta-label"], [1, "meta-value"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["title", "Run Template", 1, "run-template-btn"], [1, "configuration-sections"], [2, "margin-bottom", "12px", 3, "expanded"], ["kendoExpansionPanelTitleDirective", ""], [2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], [2, "padding", "16px"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["name", "templateName", "placeholder", "Enter template name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [1, "active-badge"], [1, "inactive-badge"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "field-label"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select or enter new category...", 2, "width", "250px", 3, "ngModelChange", "valueChange", "ngModel", "data", "valuePrimitive", "allowCustom"], ["name", "isActive", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", "meta-icon"], ["title", "Run Template", 1, "run-template-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header-area"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-file-code", "template-icon"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap", "align-items", "center"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [1, "description-text"], [2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-file-lines", "meta-icon"], [1, "meta-label"], [1, "meta-value"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["title", "Run Template", 1, "run-template-btn"], [1, "configuration-sections"], [2, "margin-bottom", "12px", 3, "Expanded"], ["mjAccordionTitle", ""], [2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], [2, "padding", "16px"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [1, "active-badge"], [1, "inactive-badge"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "field-label"], ["name", "categoryId", "TextField", "text", "ValueField", "value", "Placeholder", "Select or enter new category...", 2, "width", "250px", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive", "AllowCustom"], ["name", "isActive", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", "meta-icon"], ["title", "Run Template", 1, "run-template-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, MJTemplateFormComponentExtended_Conditional_1_Template, 48, 43);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record ? 1 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.TextBoxComponent, i3.TextAreaComponent, i3.SwitchComponent, i4.ComboBoxComponent, i5.MjFormToolbarComponent, i5.MjFormFieldComponent, i5.ExplorerEntityDataGridComponent, i6.TemplateParamDialogComponent, i7.TemplateParamsGridComponent, i8.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n.template-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n\n\n.template-header-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .template-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .active-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .inactive-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n\n\n.run-template-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.configuration-sections[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.panel-title[_ngcontent-%COMP%]   .count-badge[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .configuration-sections kendo-expansionpanel {\n    border: 1px solid var(--mj-border-default) !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    overflow: hidden !important;\n}\n\n  .configuration-sections .k-expander-header {\n    background: var(--mj-bg-surface-card) !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n  .configuration-sections .k-expander-header:hover {\n    background: var(--mj-bg-surface-sunken) !important;\n}\n\n\n\n  .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-text-inverse) !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n\n\n  .configuration-sections .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n\n\n  .configuration-sections .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJComboboxComponent, i2.MJSwitchComponent, i3.MjFormToolbarComponent, i3.MjFormFieldComponent, i3.ExplorerEntityDataGridComponent, i4.TemplateParamDialogComponent, i5.TemplateParamsGridComponent, i6.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n.template-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n\n\n.template-header-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .template-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .active-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .inactive-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n\n\n.run-template-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.configuration-sections[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.panel-title[_ngcontent-%COMP%]   .count-badge[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n  .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n  .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n  .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n  .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}"] }); }
 };
 MJTemplateFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Templates')
@@ -798,7 +796,7 @@ MJTemplateFormComponentExtended = __decorate([
 export { MJTemplateFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTemplateFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-templates-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n        <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-header-area\">\n                <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n\n                    <!-- Left: Template Info -->\n                    <div style=\"flex: 1; min-width: 0;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                            <i class=\"fa-solid fa-file-code template-icon\"></i>\n                            @if (EditMode) {\n                                <kendo-textbox [(ngModel)]=\"record.Name\"\n                                              name=\"templateName\"\n                                              placeholder=\"Enter template name...\"\n                                              style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                                </kendo-textbox>\n                            } @else {\n                                <h4>{{ record.Name || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span class=\"active-badge\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"inactive-badge\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            }\n                        </div>\n\n                        <!-- Category and Active toggle when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;\">\n                                <div>\n                                    <label class=\"field-label\">Category</label>\n                                    <kendo-combobox [(ngModel)]=\"record.CategoryID\"\n                                                   name=\"categoryId\"\n                                                   [data]=\"categoryOptions\"\n                                                   textField=\"text\"\n                                                   valueField=\"value\"\n                                                   [valuePrimitive]=\"true\"\n                                                   [allowCustom]=\"true\"\n                                                   (valueChange)=\"onCategoryChange($event)\"\n                                                   placeholder=\"Select or enter new category...\"\n                                                   style=\"width: 250px;\">\n                                    </kendo-combobox>\n                                </div>\n                                <div>\n                                    <label class=\"field-label\">Active</label>\n                                    <kendo-switch [(ngModel)]=\"record.IsActive\" name=\"isActive\"></kendo-switch>\n                                </div>\n                            </div>\n                        }\n\n                        @if (EditMode) {\n                            <kendo-textarea [(ngModel)]=\"record.Description\"\n                                           name=\"description\"\n                                           [rows]=\"2\"\n                                           placeholder=\"Enter template description...\"\n                                           style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n                            </kendo-textarea>\n                        } @else if (record.Description) {\n                            <p class=\"description-text\">{{ record.Description }}</p>\n                        }\n\n                        <!-- Quick Info Row -->\n                        <div style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                            @if (record.Category) {\n                                <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-folder meta-icon\"></i>\n                                    <span class=\"meta-label\">Category:</span>\n                                    <span class=\"meta-value\">{{ record.Category }}</span>\n                                </div>\n                            }\n\n                            <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                <i class=\"fa-solid fa-file-lines meta-icon\"></i>\n                                <span class=\"meta-label\">Contents:</span>\n                                <span class=\"meta-value\">{{ templateContents.length }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Right: Action Buttons -->\n                    <div style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        @if (record.IsSaved) {\n                            <button class=\"run-template-btn\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Configuration Sections with Expansion Panels -->\n            <div class=\"configuration-sections\">\n\n                <!-- Template Editor Section -->\n                <kendo-expansionpanel\n                    [expanded]=\"true\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Template Editor\n                            @if (templateContents.length > 0) {\n                                <span class=\"count-badge\">\n                                    {{ templateContents.length }}\n                                </span>\n                            }\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            [template]=\"record\"\n                            [config]=\"templateEditorConfig\"\n                            (contentChange)=\"onSharedTemplateContentChange($event)\"\n                            (runTemplate)=\"onSharedTemplateRun($event)\"\n                            style=\"height: 100%; display: block;\">\n                        </mj-template-editor>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Details Section -->\n                <kendo-expansionpanel\n                    [expanded]=\"false\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-cogs\"></i>\n                            Details\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 16px;\">\n                        <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                            <!-- Left Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserPrompt\"\n                                    Type=\"textarea\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserID\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\"\n                                    LinkType=\"Record\"\n                                    LinkComponentType=\"Search\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"ActiveAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"DisabledAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Right Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"IsActive\"\n                                    Type=\"checkbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_CreatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_UpdatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"Category\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"User\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Template Parameters Section -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel\n                        [expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                                Parameters\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-template-params-grid\n                                [template]=\"record\"\n                                [editMode]=\"EditMode\">\n                            </mj-template-params-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- AI Prompts Section -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel\n                        [expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-robot\"></i>\n                                AI Prompts\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Entity Documents Section -->\n                @if (record.IsSaved) {\n                    <kendo-expansionpanel\n                        [expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-file-text\"></i>\n                                Entity Documents\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: Entity Documents')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n            </div>\n        </div>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog\n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n.template-header {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n/* Header section */\n.template-header-area {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area .template-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area h4 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area .active-badge {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .inactive-badge {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area .description-text {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area .meta-icon {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-label {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-value {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n/* Run template button */\n.run-template-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Configuration sections */\n.configuration-sections {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n/* Expansion panel titles */\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title i {\n    color: var(--mj-text-muted);\n}\n\n.panel-title .count-badge {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Expansion Panel Styling */\n::ng-deep .configuration-sections kendo-expansionpanel {\n    border: 1px solid var(--mj-border-default) !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .configuration-sections .k-expander-header {\n    background: var(--mj-bg-surface-card) !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: var(--mj-text-primary) !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n::ng-deep .configuration-sections .k-expander-header:hover {\n    background: var(--mj-bg-surface-sunken) !important;\n}\n\n/* Expanded state header */\n::ng-deep .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-text-inverse) !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n/* Content area */\n::ng-deep .configuration-sections .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n/* Icon in header */\n::ng-deep .configuration-sections .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n/* Smooth transitions */\n.template-header,\n.badge {\n    transition: all 0.2s ease;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-templates-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n        <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-header-area\">\n                <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n\n                    <!-- Left: Template Info -->\n                    <div style=\"flex: 1; min-width: 0;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                            <i class=\"fa-solid fa-file-code template-icon\"></i>\n                            @if (EditMode) {\n                                <input type=\"text\" class=\"mj-input\"\n                                       [(ngModel)]=\"record.Name\"\n                                       name=\"templateName\"\n                                       placeholder=\"Enter template name...\"\n                                       style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\" />\n                            } @else {\n                                <h4>{{ record.Name || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span class=\"active-badge\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"inactive-badge\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            }\n                        </div>\n\n                        <!-- Category and Active toggle when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;\">\n                                <div>\n                                    <label class=\"field-label\">Category</label>\n                                    <mj-combobox [(ngModel)]=\"record.CategoryID\"\n                                                   name=\"categoryId\"\n                                                   [Data]=\"categoryOptions\"\n                                                   TextField=\"text\"\n                                                   ValueField=\"value\"\n                                                   [ValuePrimitive]=\"true\"\n                                                   [AllowCustom]=\"true\"\n                                                   (ValueChange)=\"onCategoryChange($any($event))\"\n                                                   Placeholder=\"Select or enter new category...\"\n                                                   style=\"width: 250px;\">\n                                    </mj-combobox>\n                                </div>\n                                <div>\n                                    <label class=\"field-label\">Active</label>\n                                    <mj-switch [(ngModel)]=\"record.IsActive\" name=\"isActive\"></mj-switch>\n                                </div>\n                            </div>\n                        }\n\n                        @if (EditMode) {\n                            <textarea class=\"mj-textarea\"\n                                      [(ngModel)]=\"record.Description\"\n                                      name=\"description\"\n                                      [rows]=\"2\"\n                                      placeholder=\"Enter template description...\"\n                                      style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\"></textarea>\n                        } @else if (record.Description) {\n                            <p class=\"description-text\">{{ record.Description }}</p>\n                        }\n\n                        <!-- Quick Info Row -->\n                        <div style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                            @if (record.Category) {\n                                <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-folder meta-icon\"></i>\n                                    <span class=\"meta-label\">Category:</span>\n                                    <span class=\"meta-value\">{{ record.Category }}</span>\n                                </div>\n                            }\n\n                            <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                <i class=\"fa-solid fa-file-lines meta-icon\"></i>\n                                <span class=\"meta-label\">Contents:</span>\n                                <span class=\"meta-value\">{{ templateContents.length }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Right: Action Buttons -->\n                    <div style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        @if (record.IsSaved) {\n                            <button class=\"run-template-btn\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Configuration Sections with Expansion Panels -->\n            <div class=\"configuration-sections\">\n\n                <!-- Template Editor Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"true\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Template Editor\n                            @if (templateContents.length > 0) {\n                                <span class=\"count-badge\">{{ templateContents.length }}</span>\n                            }\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            [template]=\"record\"\n                            [config]=\"templateEditorConfig\"\n                            (contentChange)=\"onSharedTemplateContentChange($event)\"\n                            (runTemplate)=\"onSharedTemplateRun($event)\"\n                            style=\"height: 100%; display: block;\">\n                        </mj-template-editor>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Details Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"false\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-cogs\"></i>\n                            Details\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 16px;\">\n                        <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                            <!-- Left Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserPrompt\"\n                                    Type=\"textarea\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserID\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\"\n                                    LinkType=\"Record\"\n                                    LinkComponentType=\"Search\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"ActiveAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"DisabledAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Right Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"IsActive\"\n                                    Type=\"checkbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_CreatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_UpdatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"Category\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"User\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Template Parameters Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                                Parameters\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-template-params-grid\n                                [template]=\"record\"\n                                [editMode]=\"EditMode\">\n                            </mj-template-params-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- AI Prompts Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-robot\"></i>\n                                AI Prompts\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Entity Documents Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-file-text\"></i>\n                                Entity Documents\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: Entity Documents')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n            </div>\n        </div>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog\n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n.template-header {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n/* Header section */\n.template-header-area {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area .template-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area h4 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area .active-badge {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .inactive-badge {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area .description-text {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area .meta-icon {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-label {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-value {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n/* Run template button */\n.run-template-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Configuration sections */\n.configuration-sections {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n/* Expansion panel titles */\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title i {\n    color: var(--mj-text-muted);\n}\n\n.panel-title .count-badge {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Accordion Panel Styling */\n::ng-deep .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n::ng-deep .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n::ng-deep .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n/* Smooth transitions */\n.template-header,\n.badge {\n    transition: all 0.2s ease;\n}\n"] }]
     }], null, { codeEditor: [{
             type: ViewChild,
             args: ['codeEditor']