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

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

@@ -14,6 +14,8 @@ import { Subject } from 'rxjs';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { languages } from '@codemirror/language-data';
 import { MJConfirmService } from '@memberjunction/ng-ui-components';
+import { JoinHeroSummary, CountLabel } from '../../shared/phone-hero';
+import { PhoneSectionsState } from '../../shared/phone-sections-state';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-ui-components";
@@ -25,7 +27,7 @@ const _c0 = ["codeEditor"];
 const _c1 = ["templateEditor"];
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 38);
+    i0.ɵɵelementStart(0, "input", 44);
     i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_0_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,14 +35,14 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_9_Template(rf
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
-    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵtext(2, " Active ");
     i0.ɵɵelementEnd();
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 40);
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵtext(2, " Inactive ");
     i0.ɵɵelementEnd();
 } }
@@ -48,7 +50,7 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Template(r
     i0.ɵɵelementStart(0, "h4");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_2_Template, 3, 0, "span", 39)(3, MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_3_Template, 3, 0, "span", 40);
+    i0.ɵɵconditionalCreate(2, MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_2_Template, 3, 0, "span", 45)(3, MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Conditional_3_Template, 3, 0, "span", 46);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -58,17 +60,17 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_10_Template(r
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11)(1, "div")(2, "label", 43);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div")(2, "label", 49);
     i0.ɵɵtext(3, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "mj-combobox", 44);
+    i0.ɵɵelementStart(4, "mj-combobox", 50);
     i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_0_Conditional_11_Template_mj_combobox_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.CategoryID, $event) || (ctx_r1.record.CategoryID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ValueChange", function MJTemplateFormComponentExtended_Conditional_0_Conditional_11_Template_mj_combobox_ValueChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCategoryChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div")(6, "label", 43);
+    i0.ɵɵelementStart(5, "div")(6, "label", 49);
     i0.ɵɵtext(7, "Active");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mj-switch", 45);
+    i0.ɵɵelementStart(8, "mj-switch", 51);
     i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_0_Conditional_11_Template_mj_switch_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.IsActive, $event) || (ctx_r1.record.IsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -81,7 +83,7 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_11_Template(r
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 46);
+    i0.ɵɵelementStart(0, "textarea", 52);
     i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_Conditional_0_Conditional_12_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Description, $event) || (ctx_r1.record.Description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -100,7 +102,7 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_13_Template(r
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵelementStart(2, "span", 17);
     i0.ɵɵtext(3, "Category:");
     i0.ɵɵelementEnd();
@@ -114,14 +116,29 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_15_Template(r
 } }
 function MJTemplateFormComponentExtended_Conditional_0_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵelementStart(0, "button", 54);
     i0.ɵɵlistener("click", function MJTemplateFormComponentExtended_Conditional_0_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.runTemplate()); });
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } }
-function MJTemplateFormComponentExtended_Conditional_0_ng_template_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵlistener("click", function MJTemplateFormComponentExtended_Conditional_0_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleHeroDetails()); });
+    i0.ɵɵelementStart(1, "span", 57);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 58);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("aria-expanded", ctx_r1.HeroDetailsOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.HeroSummary);
+} }
+function MJTemplateFormComponentExtended_Conditional_0_ng_template_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -129,34 +146,34 @@ function MJTemplateFormComponentExtended_Conditional_0_ng_template_26_Conditiona
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.templateContents.length);
 } }
-function MJTemplateFormComponentExtended_Conditional_0_ng_template_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 51);
+function MJTemplateFormComponentExtended_Conditional_0_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵtext(2, " Template Editor ");
-    i0.ɵɵconditionalCreate(3, MJTemplateFormComponentExtended_Conditional_0_ng_template_26_Conditional_3_Template, 2, 1, "span", 52);
+    i0.ɵɵconditionalCreate(3, MJTemplateFormComponentExtended_Conditional_0_ng_template_28_Conditional_3_Template, 2, 1, "span", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.templateContents.length > 0 ? 3 : -1);
 } }
-function MJTemplateFormComponentExtended_Conditional_0_ng_template_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 53);
+function MJTemplateFormComponentExtended_Conditional_0_ng_template_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 56);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵtext(2, " Parameters ");
     i0.ɵɵelementEnd();
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
-    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_Conditional_45_ng_template_1_Template, 3, 0, "ng-template", 23);
-    i0.ɵɵelementStart(2, "div", 54);
-    i0.ɵɵelement(3, "mj-template-params-grid", 55);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 40);
+    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 63);
+    i0.ɵɵelement(3, "mj-template-params-grid", 64);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -164,17 +181,17 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_45_Template(r
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("template", ctx_r1.record)("editMode", ctx_r1.EditMode);
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_46_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 58);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵtext(2, " AI Prompts ");
     i0.ɵɵelementEnd();
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
-    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_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);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 41);
+    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_Conditional_48_ng_template_1_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 63);
+    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 66);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -182,17 +199,17 @@ function MJTemplateFormComponentExtended_Conditional_0_Conditional_46_Template(r
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Prompts", "TemplateID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
-    i0.ɵɵelement(1, "i", 59);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_49_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵtext(2, " Entity Documents ");
     i0.ɵɵelementEnd();
 } }
-function MJTemplateFormComponentExtended_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 22);
-    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_Conditional_47_ng_template_1_Template, 3, 0, "ng-template", 23);
-    i0.ɵɵelementStart(2, "div", 54);
-    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 57);
+function MJTemplateFormComponentExtended_Conditional_0_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 42);
+    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_0_Conditional_49_ng_template_1_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(2, "div", 63);
+    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 66);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -222,32 +239,38 @@ function MJTemplateFormComponentExtended_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(22, "div", 19);
     i0.ɵɵconditionalCreate(23, MJTemplateFormComponentExtended_Conditional_0_Conditional_23_Template, 3, 0, "button", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(24, MJTemplateFormComponentExtended_Conditional_0_Conditional_24_Template, 4, 2, "button", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 22)(26, "mj-accordion-sections", 23);
+    i0.ɵɵlistener("ActiveKeyChange", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_accordion_sections_ActiveKeyChange_26_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Phone.Pick($event)); });
+    i0.ɵɵelementStart(27, "mj-accordion-panel", 24);
+    i0.ɵɵtemplate(28, MJTemplateFormComponentExtended_Conditional_0_ng_template_28_Template, 4, 1, "ng-template", 25);
+    i0.ɵɵelementStart(29, "div", 26)(30, "mj-template-editor", 27, 1);
+    i0.ɵɵlistener("contentChange", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_editor_contentChange_30_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSharedTemplateContentChange($event)); })("runTemplate", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_editor_runTemplate_30_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSharedTemplateRun($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 21)(25, "mj-accordion-panel", 22);
-    i0.ɵɵtemplate(26, MJTemplateFormComponentExtended_Conditional_0_ng_template_26_Template, 4, 1, "ng-template", 23);
-    i0.ɵɵelementStart(27, "div", 24)(28, "mj-template-editor", 25, 1);
-    i0.ɵɵlistener("contentChange", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_editor_contentChange_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSharedTemplateContentChange($event)); })("runTemplate", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_editor_runTemplate_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSharedTemplateRun($event)); });
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(30, "mj-accordion-panel", 22);
-    i0.ɵɵtemplate(31, MJTemplateFormComponentExtended_Conditional_0_ng_template_31_Template, 3, 0, "ng-template", 23);
-    i0.ɵɵelementStart(32, "div", 26)(33, "div", 27)(34, "div");
-    i0.ɵɵelement(35, "mj-form-field", 28)(36, "mj-form-field", 29)(37, "mj-form-field", 30)(38, "mj-form-field", 31);
+    i0.ɵɵelementStart(32, "mj-accordion-panel", 28);
+    i0.ɵɵtemplate(33, MJTemplateFormComponentExtended_Conditional_0_ng_template_33_Template, 3, 0, "ng-template", 25);
+    i0.ɵɵelementStart(34, "div", 29)(35, "div", 30)(36, "div");
+    i0.ɵɵelement(37, "mj-form-field", 31)(38, "mj-form-field", 32)(39, "mj-form-field", 33)(40, "mj-form-field", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div");
-    i0.ɵɵelement(40, "mj-form-field", 32)(41, "mj-form-field", 33)(42, "mj-form-field", 34)(43, "mj-form-field", 35)(44, "mj-form-field", 36);
+    i0.ɵɵelementStart(41, "div");
+    i0.ɵɵelement(42, "mj-form-field", 35)(43, "mj-form-field", 36)(44, "mj-form-field", 37)(45, "mj-form-field", 38)(46, "mj-form-field", 39);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(45, MJTemplateFormComponentExtended_Conditional_0_Conditional_45_Template, 4, 3, "mj-accordion-panel", 22);
-    i0.ɵɵconditionalCreate(46, MJTemplateFormComponentExtended_Conditional_0_Conditional_46_Template, 4, 5, "mj-accordion-panel", 22);
-    i0.ɵɵconditionalCreate(47, MJTemplateFormComponentExtended_Conditional_0_Conditional_47_Template, 4, 5, "mj-accordion-panel", 22);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(48, "mj-template-param-dialog", 37);
-    i0.ɵɵtwoWayListener("isVisibleChange", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_param_dialog_isVisibleChange_48_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showParamDialog, $event) || (ctx_r1.showParamDialog = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("onClose", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_param_dialog_onClose_48_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onParamDialogClose()); });
+    i0.ɵɵconditionalCreate(47, MJTemplateFormComponentExtended_Conditional_0_Conditional_47_Template, 4, 3, "mj-accordion-panel", 40);
+    i0.ɵɵconditionalCreate(48, MJTemplateFormComponentExtended_Conditional_0_Conditional_48_Template, 4, 5, "mj-accordion-panel", 41);
+    i0.ɵɵconditionalCreate(49, MJTemplateFormComponentExtended_Conditional_0_Conditional_49_Template, 4, 5, "mj-accordion-panel", 42);
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(50, "mj-template-param-dialog", 43);
+    i0.ɵɵtwoWayListener("isVisibleChange", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_param_dialog_isVisibleChange_50_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.showParamDialog, $event) || (ctx_r1.showParamDialog = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("onClose", function MJTemplateFormComponentExtended_Conditional_0_Template_mj_template_param_dialog_onClose_50_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onParamDialogClose()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.record)("FormComponent", ctx_r1)("ToolbarConfig", ctx_r1.toolbarConfig)("WidthMode", "full-width");
-    i0.ɵɵadvance(9);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("hero-view", !ctx_r1.EditMode)("hero-compact", !ctx_r1.EditMode && !ctx_r1.HeroDetailsOpen);
+    i0.ɵɵadvance(5);
     i0.ɵɵconditional(ctx_r1.EditMode ? 9 : 10);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.EditMode ? 11 : -1);
@@ -259,7 +282,11 @@ function MJTemplateFormComponentExtended_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵtextInterpolate(ctx_r1.templateContents.length);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.record.IsSaved ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.EditMode && ctx_r1.HeroSummary ? 24 : -1);
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Enabled", ctx_r1.Phone.IsPhone)("ActiveKey", ctx_r1.Phone.Section);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("template", ctx_r1.record)("config", ctx_r1.templateEditorConfig);
@@ -284,11 +311,11 @@ function MJTemplateFormComponentExtended_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("Record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 45 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 47 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 46 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 48 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 47 : -1);
+    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 49 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("template", ctx_r1.record);
     i0.ɵɵtwoWayProperty("isVisible", ctx_r1.showParamDialog);
@@ -296,6 +323,10 @@ function MJTemplateFormComponentExtended_Conditional_0_Template(rf, ctx) { if (r
 let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended extends MJTemplateFormComponent {
     constructor() {
         super(...arguments);
+        /** Phone width shows the stacked accordions as sections behind one picker (design call 7A). */
+        this.Phone = new PhoneSectionsState(() => this.cdr.markForCheck());
+        /** Phone hero (6A): whether the summary line is expanded to show the rest of the hero. */
+        this.HeroDetailsOpen = false;
         this.ToolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
         /**
          * Read-only mirror of the editor's rows (fed only by {@link OnSharedTemplateContentChange}),
@@ -330,6 +361,18 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
         this.activeTimeouts = [];
         this.confirmService = inject(MJConfirmService);
     }
+    /** Toggles the phone hero between its compact identity row and the full hero. */
+    ToggleHeroDetails() {
+        this.HeroDetailsOpen = !this.HeroDetailsOpen;
+        this.cdr.markForCheck();
+    }
+    /** The phone hero's one-line summary of what the compact hero leaves out. */
+    get HeroSummary() {
+        return JoinHeroSummary([
+            this.record.Category,
+            CountLabel(this.TemplateContents.length, 'content'),
+        ]);
+    }
     /** @deprecated Use {@link ToolbarConfig}. */
     get toolbarConfig() {
         return this.ToolbarConfig;
@@ -481,6 +524,7 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.Phone.Stop();
         this.destroy$.next();
         this.destroy$.complete();
         // Clean up any active timeouts
@@ -997,11 +1041,11 @@ let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended exte
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CodeEditor = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TemplateEditor = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], ["templateEditor", ""], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header-area"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-file-code", "template-icon"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap", "align-items", "center"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [1, "description-text"], [2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-file-lines", "meta-icon"], [1, "meta-label"], [1, "meta-value"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["title", "Run Template", 1, "run-template-btn"], [1, "configuration-sections"], [2, "margin-bottom", "12px", 3, "Expanded"], ["mjAccordionTitle", ""], [2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], [2, "padding", "16px"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["type", "text", "name", "templateName", "placeholder", "Enter template name...", 1, "mj-input", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [1, "active-badge"], [1, "inactive-badge"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "field-label"], ["name", "categoryId", "TextField", "text", "ValueField", "value", "Placeholder", "Select or enter new category...", 2, "width", "250px", 3, "ngModelChange", "ValueChange", "ngModel", "Data", "ValuePrimitive", "AllowCustom"], ["name", "isActive", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 1, "mj-textarea", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", "meta-icon"], ["title", "Run Template", 1, "run-template-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJTemplateFormComponentExtended_Conditional_0_Template, 49, 46);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["form", "ngForm"], ["templateEditor", ""], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header-area", "phone-hero"], [1, "hero-header-row"], [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", "phone-hero-detail"], [1, "phone-hero-detail", 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"], [1, "action-buttons"], ["title", "Run Template", 1, "run-template-btn", "phone-hero-run"], ["type", "button", 1, "phone-hero-summary"], [1, "configuration-sections"], [3, "ActiveKeyChange", "Enabled", "ActiveKey"], ["SectionKey", "editor", "SectionTitle", "Template Editor", "SectionIcon", "fa-solid fa-code", 2, "margin-bottom", "12px", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "phone-flush-x", 2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], ["SectionKey", "details", "SectionTitle", "Details", "SectionIcon", "fa-solid fa-cogs", 2, "margin-bottom", "12px", 3, "Expanded"], [1, "phone-flush-x", 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"], ["SectionKey", "parameters", "SectionTitle", "Parameters", "SectionIcon", "fa-solid fa-sliders", 2, "margin-bottom", "12px", 3, "Expanded"], ["SectionKey", "prompts", "SectionTitle", "AI Prompts", "SectionIcon", "fa-solid fa-robot", 2, "margin-bottom", "12px", 3, "Expanded"], ["SectionKey", "documents", "SectionTitle", "Entity Documents", "SectionIcon", "fa-solid fa-file-text", 2, "margin-bottom", "12px", 3, "Expanded"], [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", "phone-hero-run", 3, "click"], [1, "fa-solid", "fa-play"], ["type", "button", 1, "phone-hero-summary", 3, "click"], [1, "phone-hero-summary-text"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJTemplateFormComponentExtended_Conditional_0_Template, 51, 53);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJComboboxComponent, i2.MJSwitchComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, 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.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.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\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@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.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.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.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\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.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.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.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\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.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.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.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.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.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  .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    outline-color: var(--mj-text-inverse);\n}\n\n  .configuration-sections .mj-accordion-body {\n    padding: 0;\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.MJAccordionSectionsComponent, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJComboboxComponent, i2.MJSwitchComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i3.ExplorerEntityDataGridComponent, i4.TemplateParamDialogComponent, i5.TemplateParamsGridComponent, i6.TemplateEditorComponent], styles: [".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.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.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.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\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@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.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.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.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\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.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.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.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\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.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.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.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.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.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  .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    outline-color: var(--mj-text-inverse);\n}\n\n  .configuration-sections .mj-accordion-body {\n    padding: 0;\n}\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}\n\n\n.hero-header-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: flex-end;\n}\n\n@media (max-width: 768px) {\n    .hero-header-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n        width: 100%;\n        align-items: stretch;\n    }\n\n    .action-buttons[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n        display: flex;\n        gap: 8px;\n    }\n\n    .action-buttons[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n}\n\n\n\n@media (max-width: 768px) {\n    .configuration-sections[_ngcontent-%COMP%] {\n        padding: 12px 0;\n        border-top: 0;\n        background: transparent;\n    }\n\n    .phone-flush-x[_ngcontent-%COMP%] {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n    }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n.phone-hero-summary[_ngcontent-%COMP%], \n.phone-hero-only[_ngcontent-%COMP%] {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero[_ngcontent-%COMP%] {\n        padding: 12px !important;\n    }\n\n    \n    .phone-hero.hero-compact[_ngcontent-%COMP%]   .phone-hero-detail[_ngcontent-%COMP%], \n   .phone-hero.hero-view[_ngcontent-%COMP%]   .phone-hero-hide[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n\n    .phone-hero-only[_ngcontent-%COMP%] {\n        display: inline-flex;\n    }\n\n    \n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-stats[_ngcontent-%COMP%] {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status[_ngcontent-%COMP%] {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    \n    .phone-hero-status[data-status=\"running\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"][_ngcontent-%COMP%] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"][_ngcontent-%COMP%]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"][_ngcontent-%COMP%]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-run[_ngcontent-%COMP%] {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    \n\n    .phone-hero-summary[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text[_ngcontent-%COMP%] {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"][_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transition: none;\n    }\n}"] }); }
 };
 MJTemplateFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Templates')
@@ -1009,7 +1053,7 @@ MJTemplateFormComponentExtended = __decorate([
 export { MJTemplateFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTemplateFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-templates-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-header-area\">\n                <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n\n                    <!-- Left: Template Info -->\n                    <div style=\"flex: 1; min-width: 0;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                            <i class=\"fa-solid fa-file-code template-icon\"></i>\n                            @if (EditMode) {\n                                <input type=\"text\" class=\"mj-input\"\n                                       [(ngModel)]=\"record.Name\"\n                                       name=\"templateName\"\n                                       placeholder=\"Enter template name...\"\n                                       style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\" />\n                            } @else {\n                                <h4>{{ record.Name || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span class=\"active-badge\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"inactive-badge\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            }\n                        </div>\n\n                        <!-- Category and Active toggle when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;\">\n                                <div>\n                                    <label class=\"field-label\">Category</label>\n                                    <mj-combobox [(ngModel)]=\"record.CategoryID\"\n                                                   name=\"categoryId\"\n                                                   [Data]=\"categoryOptions\"\n                                                   TextField=\"text\"\n                                                   ValueField=\"value\"\n                                                   [ValuePrimitive]=\"true\"\n                                                   [AllowCustom]=\"true\"\n                                                   (ValueChange)=\"onCategoryChange($any($event))\"\n                                                   Placeholder=\"Select or enter new category...\"\n                                                   style=\"width: 250px;\">\n                                    </mj-combobox>\n                                </div>\n                                <div>\n                                    <label class=\"field-label\">Active</label>\n                                    <mj-switch [(ngModel)]=\"record.IsActive\" name=\"isActive\"></mj-switch>\n                                </div>\n                            </div>\n                        }\n\n                        @if (EditMode) {\n                            <textarea class=\"mj-textarea\"\n                                      [(ngModel)]=\"record.Description\"\n                                      name=\"description\"\n                                      [rows]=\"2\"\n                                      placeholder=\"Enter template description...\"\n                                      style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\"></textarea>\n                        } @else if (record.Description) {\n                            <p class=\"description-text\">{{ record.Description }}</p>\n                        }\n\n                        <!-- Quick Info Row -->\n                        <div style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                            @if (record.Category) {\n                                <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-folder meta-icon\"></i>\n                                    <span class=\"meta-label\">Category:</span>\n                                    <span class=\"meta-value\">{{ record.Category }}</span>\n                                </div>\n                            }\n\n                            <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                <i class=\"fa-solid fa-file-lines meta-icon\"></i>\n                                <span class=\"meta-label\">Contents:</span>\n                                <span class=\"meta-value\">{{ templateContents.length }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Right: Action Buttons -->\n                    <div style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        @if (record.IsSaved) {\n                            <button class=\"run-template-btn\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Configuration Sections with Expansion Panels -->\n            <div class=\"configuration-sections\">\n\n                <!-- Template Editor Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"true\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Template Editor\n                            @if (templateContents.length > 0) {\n                                <span class=\"count-badge\">{{ templateContents.length }}</span>\n                            }\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            #templateEditor\n                            [template]=\"record\"\n                            [config]=\"templateEditorConfig\"\n                            (contentChange)=\"onSharedTemplateContentChange($event)\"\n                            (runTemplate)=\"onSharedTemplateRun($event)\"\n                            style=\"height: 100%; display: block;\">\n                        </mj-template-editor>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Details Section -->\n                <mj-accordion-panel\n                    [Expanded]=\"false\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template mjAccordionTitle>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-cogs\"></i>\n                            Details\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 16px;\">\n                        <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                            <!-- Left Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserPrompt\"\n                                    Type=\"textarea\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserID\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\"\n                                    LinkType=\"Record\"\n                                    LinkComponentType=\"Search\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"ActiveAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"DisabledAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Right Column -->\n                            <div>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"IsActive\"\n                                    Type=\"checkbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_CreatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_UpdatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"Category\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [Record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"User\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </div>\n                </mj-accordion-panel>\n\n                <!-- Template Parameters Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-sliders\"></i>\n                                Parameters\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-template-params-grid\n                                [template]=\"record\"\n                                [editMode]=\"EditMode\">\n                            </mj-template-params-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- AI Prompts Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-robot\"></i>\n                                AI Prompts\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Entity Documents Section -->\n                @if (record.IsSaved) {\n                    <mj-accordion-panel\n                        [Expanded]=\"false\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template mjAccordionTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-file-text\"></i>\n                                Entity Documents\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: Entity Documents')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </mj-accordion-panel>\n                }\n            </div>\n        </div>\n        </form>\n</mj-record-form-container>\n\n<!-- Template Parameter Dialog -->\n<mj-template-param-dialog\n    [template]=\"record\"\n    [(isVisible)]=\"showParamDialog\"\n    (onClose)=\"onParamDialogClose()\">\n</mj-template-param-dialog>\n}\n", styles: [".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background: var(--mj-bg-surface);\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n.template-header {\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n/* Header section */\n.template-header-area {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area .template-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area h4 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area .active-badge {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .inactive-badge {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area .description-text {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area .meta-icon {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-label {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-value {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n/* Run template button */\n.run-template-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Configuration sections */\n.configuration-sections {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n/* Expansion panel titles */\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title i {\n    color: var(--mj-text-muted);\n}\n\n.panel-title .count-badge {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Accordion Panel Styling */\n::ng-deep .configuration-sections mj-accordion-panel {\n    margin-bottom: 12px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    overflow: hidden;\n    background: var(--mj-bg-surface-card);\n}\n\n::ng-deep .configuration-sections .mj-accordion-header {\n    padding: 16px 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n::ng-deep .configuration-sections .mj-accordion-panel--expanded .mj-accordion-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    outline-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"] }]
+        args: [{ standalone: false, selector: 'mj-templates-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n\n        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-header-area phone-hero\" [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\">\n                <div class=\"hero-header-row\">\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 phone-hero-detail\">{{ record.Description }}</p>\n                        }\n\n                        <!-- Quick Info Row -->\n                        <div class=\"phone-hero-detail\" 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 class=\"action-buttons\">\n                        @if (record.IsSaved) {\n                            <button class=\"run-template-btn phone-hero-run\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n              @if (!EditMode && HeroSummary) {\n                <button type=\"button\" class=\"phone-hero-summary\" [attr.aria-expanded]=\"HeroDetailsOpen\" (click)=\"ToggleHeroDetails()\">\n                  <span class=\"phone-hero-summary-text\">{{ HeroSummary }}</span>\n                  <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n                </button>\n              }\n            </div>\n\n            <!-- Configuration Sections with Expansion Panels -->\n            <div class=\"configuration-sections\">\n                <!-- Phone: one section at a time behind a picker; desktop keeps the accordions -->\n                <mj-accordion-sections [Enabled]=\"Phone.IsPhone\" [ActiveKey]=\"Phone.Section\" (ActiveKeyChange)=\"Phone.Pick($event)\">\n\n                <!-- Template Editor Section -->\n                <mj-accordion-panel SectionKey=\"editor\" SectionTitle=\"Template Editor\" SectionIcon=\"fa-solid fa-code\"\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 class=\"phone-flush-x\" style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            #templateEditor\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 SectionKey=\"details\" SectionTitle=\"Details\" SectionIcon=\"fa-solid fa-cogs\"\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 class=\"phone-flush-x\" 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 SectionKey=\"parameters\" SectionTitle=\"Parameters\" SectionIcon=\"fa-solid fa-sliders\"\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 SectionKey=\"prompts\" SectionTitle=\"AI Prompts\" SectionIcon=\"fa-solid fa-robot\"\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 SectionKey=\"documents\" SectionTitle=\"Entity Documents\" SectionIcon=\"fa-solid fa-file-text\"\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                </mj-accordion-sections>\n            </div>\n        </div>\n        </form>\n</mj-record-form-container>\n\n<!-- Template Parameter Dialog -->\n<mj-template-param-dialog\n    [template]=\"record\"\n    [(isVisible)]=\"showParamDialog\"\n    (onClose)=\"onParamDialogClose()\">\n</mj-template-param-dialog>\n}\n", styles: [".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.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    outline-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\n/* Hero header row: title block left, actions right; on a phone the actions drop under the title. */\n.hero-header-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.action-buttons {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    align-items: flex-end;\n}\n\n@media (max-width: 768px) {\n    .hero-header-row {\n        flex-direction: column;\n    }\n\n    .action-buttons {\n        width: 100%;\n        align-items: stretch;\n    }\n\n    .action-buttons > div {\n        display: flex;\n        gap: 8px;\n    }\n\n    .action-buttons > button {\n        width: 100%;\n    }\n}\n\n/* Phone: sections sit on the page's 12px gutter, so the container and the inline-padded body\n   wrappers drop their side padding (they would indent every section twice). */\n@media (max-width: 768px) {\n    .configuration-sections {\n        padding: 12px 0;\n        border-top: 0;\n        background: transparent;\n    }\n\n    .phone-flush-x {\n        padding-left: 0 !important;\n        padding-right: 0 !important;\n    }\n}\n", "/* ============================================\n   PHONE HERO (design call 6A), shared by the custom forms that own a hero.\n   Under 768px the hero keeps icon, name, status and the primary action. Anything tagged\n   .phone-hero-detail hides while the hero is compact and comes back when the summary line is\n   tapped. Edit mode is untouched: the host only gets .hero-compact / .hero-view in view mode.\n   Host:    .phone-hero [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\"\n   Tags:    .phone-hero-detail  hidden while compact\n            .phone-hero-hide    hidden in view mode (said elsewhere on the phone hero)\n            .phone-hero-only    shown only on phones\n            .phone-hero-top     a title + action row that stacks\n            .phone-hero-actions / .phone-hero-run   the primary action, full width at 44px\n            .phone-hero-stats   a metric row that reflows to a 2-up grid when the hero is expanded\n            .phone-hero-status  a status chip in the identity row (with .phone-hero-only)\n   ============================================ */\n.phone-hero-summary,\n.phone-hero-only {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero {\n        padding: 12px !important;\n    }\n\n    /* !important: several heroes carry inline display/padding styles on these rows */\n    .phone-hero.hero-compact .phone-hero-detail,\n    .phone-hero.hero-view .phone-hero-hide {\n        display: none !important;\n    }\n\n    .phone-hero-only {\n        display: inline-flex;\n    }\n\n    /* Lower specificity than the compact rule above, so a compact hero still hides it */\n    .phone-hero .phone-hero-stats {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    /* data-status comes from RunStatusKind(); the -text / -bg pairs keep contrast in both themes */\n    .phone-hero-status[data-status=\"running\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions {\n        width: 100%;\n    }\n\n    .phone-hero .phone-hero-run {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    /* Inherits the hero's text colour, so it reads on light heroes and on the brand-blue\n       Queries hero alike; a muted token would be grey on blue. */\n    .phone-hero-summary {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary > i {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"] > i {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary > i {\n        transition: none;\n    }\n}\n"] }]
     }], null, { CodeEditor: [{
             type: ViewChild,
             args: ['codeEditor']
@@ -1017,5 +1061,5 @@ export { MJTemplateFormComponentExtended };
             type: ViewChild,
             args: ['templateEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTemplateFormComponentExtended, { className: "MJTemplateFormComponentExtended", filePath: "src/lib/custom/Templates/templates-form.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTemplateFormComponentExtended, { className: "MJTemplateFormComponentExtended", filePath: "src/lib/custom/Templates/templates-form.component.ts", lineNumber: 26 }); })();
 //# sourceMappingURL=templates-form.component.js.map